Yesterday, I had the opportunity to build out the test suite for an open source project called Tributejs. I had to learn about karma, browserify, babel and babelify. It took an entire day to figure out how front end build tooling works. Here are some lessons I learned. You can see my pull request here.
1.) Browsers don’t recognize the `import` or `require` functions.
Browser’s don’t recognize the “require” function in javascript. If you attempt to do this without using build tools, you will see a “ReferenceError: require is not defined” message in the console.
It’s easy to take this for granted since so many projects work right out of the box. For example, if you start an Angular project or bootstrap a react project with “create-react-app”, the test suite and your es6 code just works out of the box. It’s nice that you don’t have to worry about the build tools.
However, when you work on some open source npm projects, not everything is done for you out of the box and it’s good to know about some build tools and what they are used to accomplish.
2.) Browserify was one of the first build tools that allowed you to use “require” in the front end.
“require” is a function in Node.js that allows you to import modules to use in your code. We take for granted how cool it is that we can easily import open source modules in our angular and react projects. This wasn’t always the case. Since browsers don’t recognize “require”, there was no way to import modules until tools like browserify were created.
Browserify does static code analysis on javascript code that imports modules and bundles them together in a new file. This usually will create one big javascript file with all of the dependencies living in that one file.
Today, most new projects will use Webpack for this purpose. You don’t see browserify as much as you did a few years ago, but it’s still being used in many npm projects.
3.) Browsers are always behind the newest javascript.
The most important part of browsers today is their javascript interpreters. Browsers have built in tools that read and execute your javascript. For a relatively long time, javascript developers were limited in the language features they could use based on how long it took browsers to write new code to interpret the newest features of the javascript language as it evolved over time.
When writing front end code, it’s important to think about legacy browsers. Some users don’t often upgrade. This creates a scenario where you have to think about not only testing on different browsers like Firefox, Chrome, and Internet Explorer, but you also have to think about older versions of these browsers.
At the same time, javascript code is advancing at a rapid rate. Five years ago, es6 was still relatively new and browsers needed new software to be able to read the newest syntax. That is why tools like Babel exist.
4.) Babel transpiles newer javascript syntax into older javascript syntax.
Babel allows you to use the latest and greatest javascript syntax while making sure older browsers will understand it. It was originally created because developers wanted to write javascript with es6 syntax while the browsers would take time for their interpreters to catch up. With Babel, people forging the path for the newest versions of javascript are no longer tied down to waiting for the browsers to catch up. This is one of the reasons why the pace of javascript change is so fast today.
5.) Babelify is a transformation that allows browserify to use Babel’s transpilation.
Browserify accepts many different types of “transforms”. You can see a list of them here.
When you are using browserify to import npm modules into your front end project, you will probably also want to include the “babelify” transform if you intend to write your code using es6 syntax.
I hope my lessons will help save you time
In closing, it took an entire Saturday to learn some of these lessons. Hopefully, finding this post will help someone save some time when they have to do something similar in the future.
Contributing to open source is a great way to learn. I wish I got involved in open source sooner and I highly encourage you to find an open source project you use and open a simple PR that updates documentation to get your feet wet.