Stay ahead of the tech that matters: Attend in-person QCon London (April 4-6, 2022), or online QCon Plus (May 10-20, 2022). Register Now
Facilitating the spread of knowledge and innovation in professional software development

After shortly introducing design patterns at different levels of abstractions, this article will present a few patterns specifically suited to serverless systems, including the Pipes and Filters pattern and show a POC implementation using AWS EventBridge.
Alex Gallego discusses the lessons learned building a new storage engine from scratch with no virtual memory, no page cache, with purpose-built read-ahead and write-behind strategies.
In the podcast, Meenakshi Kaushik and Neelima Mukiri from the Cisco team speak on responsible AI and machine learning bias and how to address the biases when using ML in our applications.
In this podcast Shane Hastie, Lead Editor for Culture & Methods, spoke to Anand Safi about making the shift from being an individual contributor to an engineering manager
John Egan discusses how companies of any scale can improve their understandability by lowering their barriers to incident reporting and simplifying their processes for documenting postmortems.
Learn from practitioners driving innovation and change in software. Attend in-person on April 4-6, 2022.
Uncover emerging trends and practices from software leaders. Attend online on May 10-20, 2022.
Your monthly guide to all the topics, technologies and techniques that every professional needs to know about. Subscribe for free.
InfoQ Homepage News The Preact Team Releases WMR to Simplify Modern Web App Development
This item in japanese
Feb 03, 2021 2 min read
Bruno Couriol
Jason Miller, creator of @preactjs — a 3KB compatible alternative to React, recently released the first iteration of WMR, which self-describes as a tiny all-in-one development tool for modern web apps. WMR, in a single 2MB file with no dependencies, supports importing npm packages without prior installation, and many of the productivity and production features customary to developers (e.g, hot module reloading, JSX/TSX, CSS modules, TypeScript, and more).
WMR is part of a new breed of tooling that strives to streamline web development by focusing on modern web applications. Miller explained WMR’s positioning in a recent interview with as follows:
[In modern] web apps […] the thing that you have front of mind and the constraints that you have on your mind as you develop are modern browsers, modern UX, modern dependencies, [modern JavaScript]…
[WMR] is weirdly probably closest to WebPack, but that might be sort of an awkward comparison. In terms of existing tools, it’s closest to Vite […], Vue’s new bundler, and Snowpack. And also es-dev-server […]. It exists in that space of like ESM-first bundlers/non-bundlers.
WMR really, really, really tries to remove itself from your field of view as a developer. […] It’s closest to Parcel in that regard. Normally, when you start a project with a bundler, like a WebPack or a Rollup, your first job is configuring the bundler. […] Those are all steps that kind of get in the way of you actually starting a project. […] You know, if you have two hours to prototype something, you really don’t wanna spend the first hour and a half configuring your bundler. I’ve definitely failed hackathons for that very reason.
Coming from the Preact team, WMR unsurprisingly interfaces particularly well with Preact components. WMR however is not tied to Preact and can be used with other front-end frameworks or vanilla JavaScript. WMR can for instance be used in the frame of an Angular application.
WMR’s main features include:
WMR also lets developers import CSS files or use CSS modules. WMR supports TypeScript out of the box. WMR additionally leverages existing Rollup plugins. One developer commented positively on his blog on the reuse of Rollup plugins:
The release of WMR from the Preact team solidified [the novel approach to web dev tooling] and brought new ideas to the table. In particular, their universal plugin format based on Rollup plugins lets them and other devs share the same transform code in dev and build time.
An existing Rollup plugin can for instance be used to minify the HTML output. Other plugins and recipes are being contributed, including how to implement filesystem-based routing, or add a service worker.
WMR supports a wmr.config.js (or wmr.config.mjs) configuration file that allows customizing WMR’s behavior (e.g., setting WMR options, or running Rollup plugins).
Developers can however quickly start with a template application by running npm init wmr your-project-name. The command will create an application shell whose content developers can replace with their application logic.
Project template generator
(Source: WMR GitHub)
WMR is an open source project released under the MIT license. Contributions and feedback are welcome and must follow the project’s guidelines.

Watch the GraphQL conference for developers and leaders, on-demand.
A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

We protect your privacy.
You need to Register an InfoQ account or or login to post comments. But there’s so much more behind being registered.
Get the most out of the InfoQ experience.
Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p
by Javier Paniza,
by Olivier Couriol,
by Javier Paniza,
Your message is awaiting moderation. Thank you for participating in the discussion.
A command line tool is modern? Maybe in the 70s.
by Olivier Couriol,
Your message is awaiting moderation. Thank you for participating in the discussion.
Hi Javier. Thanks for your comment! WMR, like Snowpack, or Vite streamlines the development experience by focusing on the newest set of standards that have been adopted. The use of those standards (ES Modules, HTTP2, etc.) is what defines modern web applications. As Miller suggested, tools like WMR let developers get quickly started and spend most of their time on implementing application logic instead of starting by spending and inordinate amount of time configuring a bundler like Webpack. Such tools are possible because of the optimizations (skipping bundling in development for a faster feedback loop, etc.) that the new standards allow.
The second level of modernity here is related not to standards per se, but common practices that have crystallized over time, like using TypeScript, JSX, CSS modules, etc. WMR and others seek to make it easy (zero-configuration approach) for developers to create applications that leverages those technologies.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

We protect your privacy.
QCon, the international software development conference, is returning (in-person and online) in Spring 2022.
QCon brings together the world’s most innovative senior software engineers across multiple domains to share their real-world implementation of emerging trends and practices.
Find practical inspiration (not product pitches) from software leaders deep in the trenches creating software, scaling architectures and fine-tuning their technical leadership to help you make the right decisions.
Attend in person at QCon London, (April 4-6) or online at QCon Plus (May 10-20). Save your spot now! and all content copyright © 2006-2021 C4Media Inc. hosted at Contegix, the best ISP we’ve ever worked with.
Privacy Notice, Terms And Conditions, Cookie Policy