React without Webpack : faster developer workflow?
Using native modules and http2, modern Javascript can be run in the browser without a build step. Updated with React 16, React-Router 4, Redux, and server side rendering.
TL, DR : code and usage instructions on GitHub here.
The network tab in Chrome will look like the below image:
Thanks to http2 push, we can keep page load time under one second without bundling.
I spent countless hours fiddling with my Webpack configuration. Webpack is an amazing tool that allows so many configuration options. Live-reload, hot-reload, even multithreaded transpiling, everything is possible with the right plugin. But one thing Webpack lacks is simplicity and ease-of-use, which is a natural trade-off of its versatility.
Webpack is such a turn-off for newcomers, that arguably the biggest advance of the last few months in the React ecosystem is the create-react-app project, which does not do away with Webpack, but masks its complexity to beginners with a heavy-coating of magic.
A couple months ago, I started to look into ways to skip the build step when developing front-end JS. The advantages are obvious :
- Less dependencies to manage, much more simple to setup and easier to understand what is going on
- No build to configure
- No need to wait for the build to complete, because there is no build
Earlier, this meant giving up all the nice things that complex build systems like Webpack made possible. Minimal React loads dependencies from CDNs as globals, and avoids JSX. He accepts these limitations to avoid a build step.
Here’s the good news: it is now possible to skip bundling of all your files, at least during development, without compromising too much on developer comfort. Here are the top things I used Webpack for, and the alternative solutions available:
- Transpiling ES6 to ES5. This is not needed in development anymore, since up-to-date browsers support almost all ES6 features.
- Transpiling JSX to JS. For this, I added a custom Babel middleware to the Express server I use in development. I added a very basic cache to only transpile modified files. On its own, this is fast enough that it can be done in real-time.
- Bundling. I use Chrome Dev Channel and activate the Experimental Web Platform flag. This enables ES2015 native modules support, which means bundling isn’t necessary anymore. I also upgraded the development server to http2, to speed up the loading of dozens of small JS files.
- Live-reload. Chokidar watches the “app” folder for changes, then a server-sent event tells the client to refresh the page. It is very basic, but that is the point of this project: keep it simple! Also, we won’t be able to do much better with native modules, because they resolve statically. As far as I can understand, hot-reload is therefore not possible.
- Resolve dependencies and manage them. This was the trickiest part. I was tempted to just expose dependencies as globals, which is the easier way. But after some trial and error, I was able to make a babel-plugin to make import statements compatible with a browser environment. I use npm to manage dependencies, but I added a postinstall hook to automatically convert npm dependencies to ES6 modules, using Rollup. This “build” happens only on installation of new npm modules. Other than that, no build.
The http2 push and caching optimizations make this setup fast enough to run on a distant staging server, with page load time under 500ms! For small projects, this setup can probably be deployed as is on the staging environment. However, it remains to be seen if this will be fast enough when the project grows larger, with hundreds of files to load.
If you found this article helpful, be sure to read The 3 Essential Rules of Really-Reusable JS Components . Whether you use React or Vue, this will help you make the most of any component based framework!
