The javascript transpile dialectic part 3
Objective
Simple demo code for transpiling to Javascript. Review the setup and configuration for different transpiler engines.
Target Audience
Developers new to modern javascript frameworks and tooling
Source Documents
react
babel
webpack
React Hot Module Replacement
purecss
Result
See the Demo app for react
The demo code has a number of setup options see see top level readme for general instructions.
The transpile operation is driven via webpack and the dev server. The express dev server uses the hot reload middleware for react. The code is
as simple as possible to highlight the relationships in the code. These are the interaction between the webpack configuration syntax, the plugin setup and the dev server.
The webpack stylus css translation on purecss is included to show the parralel css translation alongside the JSX transpilation.
Transpile
npm run start
Test
localhost:3000
Discussion
- Transpile with the dev server in development
- see development webpack config
- see babel plugin config
More Details
Webpack uses Babel to transpile ECMAScript2015 to ES5.
Some features of ECMAScript2015 do not directly map to ES5. {Iterators, Proxies, generator functions } this set is not inclusive see polyfill
Webpack uses middleware
see dev server lines 9 to 15
see dev server hot reload config
- line 1 and 23 HotModuleReplacementPlugin
- line 19
publicPath
Summary
The react setup is a lot of work even with this simple set up. Complex relationships in the code and the configuration files take a while to get used too.
However transpiling with the dev server is a significant accomplishment.
I recall in the early days of the google closure library trying to set up a similar workflow.
Specifically to get the closure compiler transpiling off a url endpoint, so that the code would transpile like this in real time. I was never able to get it to work.
For the three(3) transpiler engines looked at in this series the jsweet transpiler was the least painful experience. React has tremendous potential but once you start configuring the redux store with actions dispatching via reducers the code and setup configurations can be heavy going.
However the development server transpiling in real tile is a significant reward for the work.
If you are a software engineer and you are programming in a range of languages and frameworks on a daily basis then encapsulating the details away with a framework like jsweet is a good option.
Google closure still has the best rich text editor and the closure compiler leads the benchnark metrics and does even better for advanced optimisations.