Advanced Tools
Once you’ve mastered the layer of preprocessors and JavaScript frameworks (see part one for more info), you’ll be ready to take a look at some advanced UI development tools. In fact, you may have encountered any of these, to some degree, as you start working on larger web projects and applications.
Package Managers (prereq: Terminal)
As the number of dependencies in a project increases, it becomes increasingly important for developers to have ways to manage the download, inclusion, and versioning of an ever increasing number of dependencies. Package managers aim to solve this task by automating some or all of the tasks associated with managing the various assets and dependencies that may be included in any project you find yourself working on.
CodeKit is a GUI for searching for project dependencies (like jQuery, or Bootstrap), downloading those to your project folder, and managing the versioning/updates of the dependencies. CodeKit also includes a web server tool that allows you to host your project files locally without having to setup your own local web server, as well as tools to automate compilation of your Sass, CoffeeScript, etc. Neat.
Bower and NPM are command line tools that offer similar functionality. After being installed, you can download any asset from the Bower repository by running the bower install command. It also allows you to specify which versions of assets you’d like to use in your project, and automatically updates them all every time you run bower install. In this way, if one developer on your team makes an update to the version of jQuery you’ve included in your project, then checks that change into your shared repository, all other developers on the team can ensure consistency by simply updating their code base and then running bower install. CodeKit comes with Bower built-in, so you can install Bower packages directly from the CodeKit UI.
NPM (Node Package Manager) is a package manager that’s part of Node.js. Bower is actually a Node package, so after installing NPM, you can install Bower by simply running npm install bower. In addition to Bower, you can use NPM to install a plethora of assets (120,151 at the time of this writing), including tools I’ve already mentioned (Sass, CoffeeScript, Cordova) and have yet to mention (Grunt, Gulp, Browserify).
Bower and NPM may seem similar, but one of the biggest differences is that NPM handles nested dependencies (meaning dependencies can have dependencies), while Bower is a flat dependency tree (meaning that the user must resolve the dependencies; they’re not resolved automatically).
Browser Refreshing (prereq: Terminal)
In the olden days, to develop a website, you’d edit an HTML file, and refresh your browser to see the changes. With HTML, CSS and JS all being compiled in modern apps, it adds another layer. You’d have to save your source file (.sass, or .coffee, for example), compile it to CSS or JS, respectively, and then refresh your browser to see the changes. Browser refreshing tools allow developers to automate the refresh of the browser window when changes are saved to a source file.
Whether you’re using the LiveReload GUI or the command line tool Guard, you’ll need to install the LiveReload Chrome extension. This allows the browser to watch the underlying files for the page you’re viewing, and refreshes the browser window for you (without a noticeable full page refresh). For managing the process of watching source files and compiling them, you have three options: the LiveReload GUI, Guard, or Grunt.
Task Runners (prereq: JS, Terminal)
If you’re familiar with both JavaScript and the command line, having a look at task runners is a good idea. Even if you’re not, Chris Coyier has a great post titled Grunt for People Who Think Things like Grunt are Weird and Hard. Task runners allow web developers to automate an almost infinite number of tasks, like the aforementioned Sass and CoffeeScript compilation, concatenating a number of small JS files into a larger one for production, or compressing image files.
Gulp is the new kid on the block when it comes to task runners, but is very popular, and I’ve seen it used in many projects recently. Neither Grunt nor Gulp have GUIs, so you have to be proficient in JavaScript in order to use them. Their syntax is 100% JavaScript, so a healthy understanding of JS will go a long way here.
Testing (prereq: JS)
With the migration of many development methodologies typically exhibited on the backend into the front-end space in recent years, its no surprise that testing has come along for the ride. Testing in modern web apps has roots in writing tests for desktop applications, where the code would be compiled and packaged for production prior to being available to the public. Writing tests in JavaScript is mainly included in large scale projects, which use one of the JavaScript frameworks mentioned earlier. Generally, an app will have a combination of unit, integration, and e2e (shorthand for end-to-end) tests.
Karma is a unit test runner that will find all the unit tests you’ve written, open a browser, and run the tests in them. Its not partial to the framework the tests are written in; that is, you could write tests in Jasmine, or another testing framework, like Mocha, and Karma will run them. Jasmine is a testing framework, which is the actual syntax you write your tests in. Karma and Jasmine are the preferred method of testing AngularJS apps.
While unit tests are designed to test individual pieces of functionality, e2e tests are designed to test the entirety of your application. It’s truly amazing to watch Protractor fire up Chrome and perform every action you’ve defined in your tests. Protractor is the tool of choice for writing e2e tests for AngularJS.
Front-end Ops (prereq: JS)
Front-end Ops is new subset of front-end development that focus solely on the performance, builds & deployment, and general stability of modern web apps. The term was coined in an article in Smashing Magazine by Alex Sexton. As the front-end has increased in complexity, so too has the need for individuals solely focused on maintaining the health of the front-end.
Two tools used by front-end developers focusing on operations are RequireJS and Browserify. RequireJS is a tool for modularizing your JavaScript and CSS files, and optimizing them for deployment by minifying them, or removing comments, etc. AngularJS has dependency injection built in, so there’s no real requirement for RequireJS, and you can also handle a lot of the optimization with tools like Grunt. Browserify is much newer than RequireJS, and I honestly haven’t spent that much time with it yet, but I expect to start seeing it on a lot more projects.
It should be noted that these tools will eventually be phased out by the inclusion of module definition/injection in native JavaScript as part of the ES6 (ECMAScript 6) spec. They’ll be around for a while, and are currently in heavy use, but its worth keeping this in mind.
Looking Forward
Once you have mastery of many of the tools and technologies mentioned in this post, you’ll be ready for what’s coming down the modern web development pipeline: web components.
Web components are the future of how websites and web apps will be built. Web components allow modules or components to be truly independent, where the HTML, CSS and JS for each component is applied solely for that component, with no risk of conflicting with other components in the same site or app.
Polymer is a Google project that aims to make web components available today, so once you’re comfortable, start experimenting.
Hopefully this post has given you a good idea of the pieces that make up the modern front-end developer’s toolset. It may seem like a lot at first, but having a reference like this is a great place to start. If you get started today, you’ll be amazed at what you can create!
Any questions, thoughts, ideas? Send ’em our way!
Can’t get enough? Well here you go!
- An Introduction to Front-End Developer Tools
- SEO for Single Page Applications
