In the early days of web development, a frontend developer only had to be proficient in HTML, CSS, and JavaScript, but the lack of structure gave rise to unmaintainable and untestable spaghetti code which quickly became a debugging nightmare. With the rise of complex, heavy single-page applications, one cannot ignore the need for speed and more structured, modular, extensible and maintainable code; a gap most new frontend tools attempt to fill.

The front-end development ecosystem, however, is plagued with a myriad of tools, libraries, and frameworks that can be overwhelmingly difficult to navigate. How do you decide on what to invest your time to learn or adapt to your current workflow?  First, it is important to understand the broader categories most modern frontend tools fall into and then decide on what to specialize in based on what piques your interest or is applicable for your project.

Editor/IDE (Integrated Development Environment)

Choosing an editor simply comes down to preference and what is most efficient for your application development. A basic editor might have limited features such as syntax highlighting, auto-completion, and multi-view, while a full-featured IDE might include support for version control, debugging, smart code completion, testing, and frameworks. Some other editors such as Sublime Text, provide optional tools and plugins which closely mimic the features of an IDE with the advantage of being lightweight.

JavaScript Frameworks and Libraries

For a complex application, it makes sense to use a JavaScript framework, as this helps structure the application and helps the developer organize their code to improve flexibility and scalability. A framework is based on an MV* pattern and is usually opinionated, requiring things to be done a certain way for consistency. Some commonly used JavaScript frameworks include AngularJS, Backbone, Ember, Aurelia, Meteor and Knockout.

A JavaScript library, on the other hand, is a packaged, pre-written code that is reusable, easily extensible and is usually built to perform some common tasks. A library is not opinionated and is more flexible than a framework. Popular JavaScript libraries include React, jQuery, Node.js, Polymer and D3.js.

Most modern applications rely on a framework only or a framework and library used together. For instance, you could use AngularJS as the framework and use React to create reusable UI components.

JavaScript Preprocessor

A preprocessor takes a source file and converts it into something the browser can understand. A JavaScript preprocessor either compiles from a different language, like CoffeeScript, or transpiles a new language standard, which is not yet widely adopted, down to the current standard.

But why use a preprocessor in the first place?

  • It lets you take advantage of newer ES standards that don’t have full browser support yet. Babel and Typescript are commonly used to compiles ES2015 (formerly ES6) into ES5 which is understood by all browsers.
  • It provides optional static typing, classes, and interfaces (using Typescript). Static typing helps spot common errors as the code is being typed.
  • It improves code readability (CoffeeScript)

CSS Preprocessor

Like its JavaScript counterpart, a CSS preprocessor adds functionalities such as variables, nesting, functions, mixins and more, and compiles into CSS files the browser can understand. This helps to modularize CSS files and to reuse, manipulate and extend CSS properties while keeping code repetition to a minimum.

The three most commonly used are SASS, LESS, and Stylus, with SASS being the most popular.

Build Tools

These usually consist of automated task runners and module bundlers/loaders. JavaScript task runners automate repetitive tasks such as minification, compilation, unit testing, and linting. This is usually done in the background once the scripts have been configured and allow for greater efficiency by allowing you to focus on the code, rather than on the build pipeline. Module bundlers, or loaders, convert modules into code that the browser can understand, as well as recompile code when a change is made.

Commonly used task runners include Grunt, Gulp, Broccoli, and npm scripts while module loaders include SystemJS, Browserify, Webpack, and RequireJS. SystemJS is increasingly rising in popularity since it is a universal module loader which supports the common JavaScript module formats: AMD, CommonJS, and ES2015 modules.
Testing Frameworks

Automated tests ensure the stability of your application, and prevents errors in the final application that get shipped to the end user. In test-driven development, the developer can make changes confidently to the code without fear of breaking a previously working feature. This is usually part of a continuous delivery methodology in which passing tests are automatically accepted and deployed for staging and/or production.

Jasmine and Mocha are the two most popular testing frameworks. They do have their similarities but use different assertions/expectations. Mocha does not have a built-in assertion library and is usually used in conjunction with Chai assertion library. Testing frameworks are usually run in a browser test runner such as Karma (for unit testing) or Protractor (for integration or end-to-end testing).

Version Control

Version control systems (VCS) help with managing source files in case you need to recall an earlier specific version. It also helps large or diverse teams collaborate simultaneously on the same code. The commonly used VCS include Git, SVN, Microsoft TFS, and Mercurial, with Git being the most popular and Github being used as a code repository.

For most modern web applications, picking a tool from one of each category listed above, will help create a productive workflow and allow for maximum efficiency, speed, and rapid development. Some of the more popular JavaScript frameworks come bundled with their own tools as an all-in-one complete solution for everything you need from development, testing, to deployment. The Angular2 seed application, for instance, comes bundled with Typescript preprocessor, npm scripts, and SystemJS as a build tool and Karma, Protractor, and Jasmine for unit and end-to-end (E2E) testing. Ember has Ember CLI which comes bundled with babel-preprocessor, QUnit and Ember QUnit for testing and Brocolli task runner, among others.

It might be easier to adopt the workflow that comes with your framework of choice or swap out some of the tools with what you are already comfortable with. For instance, even though Angular2 comes bundled with Jasmine, you don’t have to go with it if you are already familiar with Mocha. You could create whatever workflow works for you and change it to adapt to your current project if you wish. The important thing is to decide on the tools for your workflow, learn their strengths and shortcomings, and then you can make a better-informed decision on whether to stick with what you have or learn other tools that better suit your requirements. Your choice should ultimately be based on need, not hype.

Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *