JSFoo 2020

The Web today is a convoluted mess of Javascript. Long back we had the ability to view the source of JS in our browsers which was simple, concise and clear thus helping in faster development iterations. But today with the advent of rich user interfaces, client side rendering of dynamic content, single-page applications and along with transpiling, bundling and compressing of JS made it difficult to read and comprehend the JS executed within the browser environment. Hence it’s no longer the same code what we write in development and what we see in production. Yes we have source maps, but they come with their own set of issues to address. And what used to be a production-only optimisation, we are forced to use the same tooling and practices in development environment also.

The tide has turned now with ESM (ES Modules or ECMAScript Modules), the native module system supported by all the modern browsers which gives the ability to use modules directly within the browsers using import statements. This also gave a rise to new class of tooling and packaging libraries which encourages web developers to use a common module system supported by both the client (Browser) and the server (Node.js). In this talk we will look at ESM, what problems it solve and what benefits it provide. And it’s time to take back “View Source” !

Outline

Why we need modules in JS?
What are the existing module systems available?
Problems because of the different module systems.
CMD, AMD, UMD,
Complexities presented with the tooling around module support
Like bundlers, packagers, sourcemaps, etc.,
What is ESM?
How ESM solves the challenges and issues within existing tooling.
What additional benefits ESM gives you other than modules:
Tree shaking, Performance, etc.,
How you can make use of ESM today in both the server and the client
How ESM will change the way we develop web applications in the future
Rise of new class tooling with ESM behind the scenes
Snowpack, pika/pkg, HTTP/2, Rollup

Speaker bio

Rajasegar is a front-end developer working at Freshworks. He is passionate about open-source and created a lot of tooling in Javascript like codemods and related libraries for frameworks like Ember. He has recently started contributing to Snowpack a new type of bundler like Webpack but which works with ESM and exploring more about ESM tooling, how it can be made to work with other JS frameworks and more. Since he is always interested in improving the DX(Developer Experience) by tweaking and crafting a lot of build pipeline tooling in his current organisation, this gives him an opportunity to take the build tooling for Front-end to the next level.

Links

• https://jakearchibald.com/2017/es-modules-in-browsers/
• https://v8.dev/features/modules#other-features
• https://www.sitepoint.com/using-es-modules/