An Introduction to Advanced Front-End Developer Tools
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)
Testing (prereq: JS)
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.
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!