It is always fascinating to know and learn from a web developer’s journey. 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 once said. 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 that have been downloaded over 12000+ times. There are 18.5 million programmers Bill Gates “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.” several open source libraries , 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 , one of the hottest AdTech software startup in India. His open source contributions have been featured on top online forums such as , , . Michael is also a desirous designer, with a knack for designing pixel-perfect UIs. He built India’s first inter-college social to connect students, faculty, and alumni. He has experience in multiple languages like C, C++, JavaScript, Python, and has the passion for learning more. Arun Michael Dsouza Adpushup JavaScript Daily NodeWeekly ProductHunt network programming With over eight years of expertise in coding, Michael recently gave an outstanding talk on at Let’s go through the highlights of the interview on his recent talk: “ JavaScript modules and module bundling ” JSConf Belgium. What motivated you to speak at JSConf, Belgium? “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!” Michael: A picture with and JSConf, Belgium: Kacper Sokołowski Peter-Paul Koch What was your topic for the session? How did you come up with it? “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 , , 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 deck is available . 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 — and covering some optimisation techniques which makes your code surely production-ready.” Michael: NodeJS ReactJS ‘The Era of Module Bundlers,’ here Webpack How do you think the module systems and tools have evolved in past decades? “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 , , Webpack, etc. it has become quite apparent, why we should be going with them.” Michael: Browserify Rollup How do module bundlers work? “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.” Michael: How does browserify help us to use NPM modules on the browser side? “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. Michael: 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? “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 “ ” 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 , , etc., right out of the box! No need for third-party plugins. Michael: loader Tree Shaking Code Splitting JSConf, Belgium: The talk by Arun Michael Dsouza There are various ways to optimise a bundle in Webpack - You can use the plugin (which comes bundled with Webpack), it’s pretty easy to use. It will minify the output bundle for you. Uglification You can run Webpack in using the -p flag, it will automatically trigger uglification and related optimisations for you. production mode Minifying your CSS is also a good idea, the can be used to do that. CSS-loader 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 on how to get started with it. official webpack documentation 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 or take a look at the itself.” here talk 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 . His recent project, : , 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 and and follow his work on . here 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 Twitter LinkedIn Github You can stay updated with for more such success stories. :) Erica Louise Space
