Lesson Weekend

A paragraph labelled "a Word of Warning" has been added to the end of the text of this lesson.

A paragraph labelled "a Word of Warning" has been added to the end of the text of this lesson.

In the past, we've put all of our JavaScript in a single flat file - a plain text file with nothing fancy done to it. However, when you build complex client-side applications in JavaScript, it quickly becomes unmanageable to write all your code in a single file. A large application might require hundreds or even thousands of files of JavaScript, and it would be unwieldy to have <script> tags for every single JavaScript file. Additionally, each file download consumes extra resources. So, ideally, we want all our JavaScript in one or two files to minimize the number of connections.

On one hand, we may feel that having many small files may better organize our project. Yet, on the other hand, having fewer files will increase browser performance, since there will be less it has to load. Thankfully, there's a happy medium: We may use a large number of files for development, and then combine them into a single file for actual use in the browser.

The Asset Pipeline

In the coming lessons, we'll learn about tools that will allow us to build a powerful asset pipeline. Essentially, an asset pipeline is a manner of preparing development files for the browser. It will optimize and compile our project by completing the following tasks:

  • Taking multiple JavaScript files and concatenating them (copy/paste them together in a single file).

  • Next, we'll add features like checking our code for syntax errors when it concatenates, so that we're less likely to ship bugs.

  • After that, we'll use our pipeline to robustly manage external dependencies like jQuery.

We could write our asset pipeline in any programming language. While our actual user interface must be JavaScript (since that is the only language web browsers understand), as long as our pipeline can work with our JavaScript source files, it doesn't actually matter what language it's written in. However, since our programs will be written in JavaScript, it's easiest if we work with build tools written in JavaScript as well. Thankfully, all of the tools we need have indeed been written in JavaScript.

Runtime Environments

So far, we've only encountered JavaScript in the browser. If we have JavaScript we want to run, we either copy it into the console, or save it in a file and link it in an HTML document with <script> tags.

But there are a couple major limitations of the browser's environment:

  • For one, there's no way to access the filesystem. That's a security feature of web browsers, so that malicious websites can't access users' data. But our asset pipeline needs to access the filesystem to read all of our individual JavaScript files, and to write a single concatenated file.

  • The browser also includes a lot of stuff our asset pipeline doesn't need, such as the DOM. Ideally, we'd have a slightly different JavaScript environment for our asset pipeline than the browser.

Fortunately, there is indeed another JavaScript runtime environment available to us, called Node.js. Node lets us run JavaScript from the command line, gives us filesystem access, and provides many other features we'll find useful for our asset pipeline.

A Word of Warning

As we learn about build tools and the asset pipeline, it may seem like a lot more work setting up our projects than actually building them. We may be tempted to return to the 'old way' of approaching projects with a less complex folder structure and fewer files.

However, this will not help in coming weeks. We would not want to learn about all these new tools and structures when we are already in the midst of a larger project. So, while these new techniques may seem like overkill on these small projects, that is because we're simply taking things one step at a time before we get into larger projects and frameworks like Angular and Ember.

We will continue to use these tools throughout the course, so take your time learning each, and familiarizing yourself with their purpose. Take notes, if necessary!

Terminology


  • Flat file: A plain text file with no styling added.

  • Asset pipeline: A mechanism for efficiently preparing all of your "assets" (HTML, CSS, JS files) for the browser. It takes multiple files and combines them into one file.

  • Runtime environment: A collection of software and hardware resources that enable a program to be executed.

  • Node.js: A runtime environment that allows JavaScript to be run from the command line.

Overview


  • We could write our asset pipeline in any programming language. However, since our programs will be written in JavaScript, it's easiest if we work with build tools written in JavaScript as well.

  • Runtime environments (such as Node.js) allow us to access the filesystem, which the browser does not, and also contains all necessary dependencies and tools our application needs to operate.