It is always fascinating to know and learn from a web developer’s journey. There are 18.5 million programmers in the world among which 11 million are pros, and 7.5 million are hobbyists. If we go on to understand who really is a computer programmer? I would like to highlight what Bill Gates once said. “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.” Programmers are simply problem solvers because they find the easiest way for their hardest problems. Sometimes in the process to control complexities these programmers create one, and sometimes the problems are just solved, and they keep wondering, HOW? These pros as well the hobbyists are much experienced in some way or the other. Here, I would like to share one of my interview with one such passionate programmer who is an author to several open source libraries that have been downloaded over 12000+ times.
Arun Michael Dsouza, a technology enthusiast, wrote his first large-scale ERP application in C++, while he was still in high school, been a front end programmer for five years and is currently working as a full stack developer at Adpushup, one of the hottest AdTech software startup in India. His open source contributions have been featured on top online forums such as JavaScript Daily, NodeWeekly, ProductHunt. Michael is also a desirous designer, with a knack for designing pixel-perfect UIs. He built India’s first inter-college social network to connect students, faculty, and alumni. He has experience in multiple programming languages like C, C++, JavaScript, Python, and has the passion for learning more.
With over eight years of expertise in coding, Michael recently gave an outstanding talk on “JavaScript modules and module bundling” at JSConf Belgium. Let’s go through the highlights of the interview on his recent talk:
What motivated you to speak at JSConf, Belgium?
Michael: “I’ve been a huge JSConf fan, been following them since my early days when I started off with Web Development. I always liked the idea of being able to share your learnings and experience first hand with the community. I got to know that the Belgium edition of JSConf is happening, that too in Brugge (one of my dream cities), so I started preparing a deck for my proposal. I submitted my proposal long before the deadline and waited patiently. After a while, the organizers contacted me and told me that my proposal was selected!”
JSConf, Belgium: A picture with Kacper Sokołowski and Peter-Paul Koch
What was your topic for the session? How did you come up with it?
Michael: “I decided to go with something that is somewhat non-trivial, with the upcoming technology stacks in the front end space. The web has grown a lot in the past decade (with the oncoming of NodeJS, ReactJS, and ES6), the whole idea of developing and delivering JavaScript applications has completely changed. We are now in an era of applications which are extremely demanding, and these types of applications require complex tooling for their development and delivery. So I decided to go with a topic that covers this tooling landscape and the necessary optimisations around it. It was titled ‘The Era of Module Bundlers,’ the deck is available here. In this talk, I have tried to cover various module systems and bundling tools, and how they have evolved, sticking to one of the best bundling tools out there — Webpack and covering some optimisation techniques which makes your code surely production-ready.”
How do you think the module systems and tools have evolved in past decades?
Michael: “Module systems have been around for a long time now, the community has done a brilliant job in developing and releasing them. Before ES6, there was no native module system support in the language, so we had to use these community-driven module systems (like CommonJS, AMD, etc.), and they did a fantastic job of keeping our code base modular. But with module systems becoming more and more familiar on the client side, the tooling around them also developed. From run time processing and script injection we moved to build time processing and optimisation, and that’s where module bundlers come in. There was no concept of asset bundling before, but with the emergence of relevant tools like Browserify, Rollup, Webpack, etc. it has become quite apparent, why we should be going with them.”
How do module bundlers work?
Michael: “A module bundler, in simple words, is a tool that bundles or concatenates all of your modules together. It generates a dependency graph of all of the JavaScript modules, which is an abstract syntax tree. It will then traverse down the dependency graph, looking at each module and that module’s dependencies recursively, and will add them to a single JavaScript bundle that can be served to the client.”
How does browserify help us to use NPM modules on the browser side?
Michael: “Browserify was the very first module bundler that introduced the idea of requiring modules in the “Node way, “ i.e., using the require statement. That meant that we could use any CommonJS module with Browserify. Since CommonJS is the de-facto module system that works with Node JS, we can make use of it and require any CommonJS module with Browserify. Bam! There you go.. NPM modules on the client side.
Just install a module using NPM, require it in your code and bundle it using Browserify.”
What is webpack? How can you optimize a bundle in webpack?
Michael: “Webpack is also a module bundler that offers a whole lot more! It’s worth mentioning that the Webpack team has done a brilliant job with their open source initiatives, making frequent Webpack releases and bug fixes, and maintaining the overall project. Webpack has a different philosophy on how it understands modules. Every input entry acts as a module for Webpack, be it JavaScript, CSS, SASS, CoffeeScript, etc. You just need a proper “loader” to handle the file type, and Webpack will take care of the rest. One of the most prominent features in Webpack is that it comes bundled with optimisation tools, so you get support for things like Tree Shaking, Code Splitting, etc., right out of the box! No need for third-party plugins.
JSConf, Belgium: The talk by Arun Michael Dsouza
There are various ways to optimise a bundle in Webpack -
- You can use the Uglification plugin (which comes bundled with Webpack), it’s pretty easy to use. It will minify the output bundle for you.
- You can run Webpack in production mode using the -p flag, it will automatically trigger uglification and related optimisations for you.
- Minifying your CSS is also a good idea, the CSS-loader can be used to do that.
- Tree shaking your unused exports is a brilliant technique that can be used with ES6. It can drastically reduce your bundle size. You can read more about it here
- You can also make use of Code-Splitting that helps in the lazy loading of modules, also referred to as on-demand module loading. You can check out the official webpack documentation on how to get started with it.
- For more information on how to get started with bundle optimisation using Webpack, feel free to check out the slides I made for the talk here or take a look at the talk itself.”
JSConf, Belgium: Some cool stuff received from the organizers
There is a lot more to learn from his talk with the community. You can view the talk here. His recent project, Woodlot: An all-in-one JSON logging utility that supports Express JS HTTP logging, custom logging, provides multi-format output and an easy to use events API, has turned out to be a great success. It would be more exciting for you to know that for the past three years Michael has also been a significant contributor to various startups/companies to build/scale their client-side applications. You can connect with him on Twitter and LinkedIn and follow his work on Github.
You can stay updated with Erica Louise Space for more such success stories. :)