This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Browserify" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kevin Whinnery: I think we'll start off with the two kind of heroes of our front end toolchain which are Browserify and SAS and they help with a lot of different things that make our front end code much more expressive to write. And also also more performant and feature rich.
[00:00:24] So Browserify and SAS are both preprocessors, Browserify for JavaScript and SAS for CSS. In our application we're actually using Browserify as the primary mechanism by which we transform our JavaScript into actual cross browser JavaScript code that can run again across a variety of browsers. So Browserify provides a few things.
[00:00:52] It actually has a transform which we'll talk about next. That runs it through another tool called Babel which ultimately produces a cross-platform JavaScript code that you can actually serve which we've been doing this entire time with our to do application. SAS is a is a preprocessor for CSS.
[00:01:12] It takes a language that is a superset of CSS features and converts that to plain vanilla CSS. So Browserify I think is maybe one of the key technologies of the entire Node.js ecosystem. It's a critical component of being able to realize this idea of isomorphic JavaScript where you can write code that can run both on the client's and on the server.
[00:01:44] And while as a practical matter you don't really that often share a ton of code between client and server unless it's pure JavaScript. The primary thing that Browserify provides is the ability to write your code the same way. So when you're writing a view.js component you're still dealing with a common js module.
[00:02:08] You're using the same language features that you can use on the server and node. And Browserify makes all of that possible. So there's no context switching where you're going to the front and the back end. If you've worked as I have in languages where JavaScript is purely on the front end and on the back, you're writing Ruby or Java or whatever.
[00:02:27] You know that there's a switch when you go from one language to the other and Browserify makes that switch pretty much seamless. So a it's a a critical tool in my mind for the success of node.js. So Browserify itself provides one primary service for your application which is t o analyze the dependency structure of your code to see which modules are required.
[00:02:56] And then it builds a JavaScript bundle and a sort of integrated require system which will allow that your node.js style common js code to run in the browser. And that's pretty much what Browserify provides but the other thing that it does is it provides an affordance for transformations and plugins.
[00:03:20] And the transformations that you can include along with Browserify do lots of very useful things. In our case we're using a Browserify Transform for Babel so we're able to, during that process of packaging our JavaScript, convert code that is written on the server for an ES2015+ version of JavaScript.
[00:03:45] And we can actually take that code and convert it to regular ES5 code that can run on a variety of browsers. So the Babelify Transform provides that functionality for us. And that's just one of many different transforms that you can use. There are transforms that allow you to require like templates, so if you have Jade templates or a Pug templates I guess, they're calling it these days.
[00:04:17] You can actually require those files and there's a transform, they'll turn it into a JavaScript function that you can require directly in your JavaScript code. So there's a ton of really useful technologies, transforms out there that you can integrate into Browserify. The transforms are typically installed as peer modules of Browserify.
[00:04:43] Browserify itself doesn't ship with any of these transformations. And while you can execute Browserify directly from the from the command line, typically you can execute it with a variety of options. Typically what ends up being expedient is configuring your Browserify transforms and options within the package.json for the project.
[00:05:08] And if you look in the to-do MBC++ repo, you can see the configuration options for Browserify, so in this case we're right now using two transforms. The first is Browserify Shim, sorry for the laser pointer usage for those online, but Browserify Shim will helps you to shim in different modules that may exist as regular JavaScript modules so they can be required in your application.
[00:05:38] So in the configuration down below for Browserify Shim, we have the ability to require jquery in our common js style browser code. But that's essentially going to be a reference to the window scoped dollar sign object to which jquery is assigned when actually running in the browser. In addition to the shim transform we also have the Babelify transform which again is a framework for integrating lots of different features for advanced versions of actual script into your application.
[00:06:12] In our current application we're using the ES 2015 presets which add a lot of language features that don't yet exist in most browsers. But there's other presets that you can use. There's a popular react preset which allows you to convert JSX files with integrated view code into regular JavaScript as a part of this process as well.
[00:06:37] So Browserify, a key tool in our tool chain here.
>> Speaker 2: Where is that configuration file?
>> Kevin Whinnery: That's actually gonna be in package.json, so down near the bottom.