I prepared overview of possible JavaScript tools and framework that can be used to build modern web application. Most of them are used to build Czas na Rower frontend. Mentioned project uses GruntJS for tasks management, JSHint for code linting Mocha and SinonJS for unit testing, RequireJS for module loading, jQuery, Bootstrap, Flight and Backone.js for JavaScript code development. You can see more on project site on GitHub.

JavaScript tools

Code linting

JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool created by Douglas Crockford. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

There is also JSHint which is a community-driven tool forked from JSLint with better configuration options. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in.

Code testing

There is big number of unit testing frameworks for JavaScript. Some of them that are worth mention:

• Jasmine – a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
• QUnit – a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself.
• Mocha – a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Allows to use BDD, TDD, QUnit styles via interfaces.
• Sinon – Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework. Must have when writing JS tests.

Code documentation

There are also JavaScript tools that help with code documentation:

• YUIDoc – a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen. Example.
• Docco – a quick-and-dirty documentation generator, written in Literate CoffeeScript. It produces an HTML document that displays your comments intermingled with your code. Example.

Task runner

Why use task runner? In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you with basically zero effort.

GruntJS is most popular JavaScript task runner. It has hundreds of plugins which automate all common tasks for JavaScript and  other frontend parts like CSS and images.

It is worth to mention that all described tools so far have existing Grunt plugin!

Grunt contrib project contains collection of common grunt tasks. This is list of some tasks we could use to have better control over frontend:

• clean – Clean files and folders.
• connect – Start a connect web server.
• copy – Copy files and folders.
• cssmin – Compress CSS files.
• csslint – Lint CSS files.
• imagemin – Minify PNG and JPEG images.
• jasmine – Run jasmine specs headlessly through PhantomJS.
• jshint – Validate JavaScript files with JSHint.
• less – Compile LESS files to CSS.
• requirejs – Optimize RequireJS projects using r.js.
• stylus – Compile Stylus files to CSS.
• uglify – Minify JavaScript files with UglifyJS.
• watch – Run predefined tasks whenever watched file patterns are added, changed or deleted.
• yuidoc – Compile YUIDoc Documentation for JavaScript code.

Package manager

Bower is a package manager for the web, created at Twitter. Front end (including JavaScript) equivalent to composer. Bower runs over Git, and is package-agnostic. It works nicely in combination with GruntJS allowing to have one command to control over all frontend dependencies with one command.

JavaScript frameworks

JQuery

JQuery is industry leader used by over 60% of top 10 000 web sites. Must have. Nothing to add here.

Web modules – AMD

The Asynchronous Module Definition (**AMD**) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. It gives:

• Some sort of #include/import/require
• ability to load nested dependencies
• ease of use for developer but then backed by an optimization tool that helps deployment

There is also new emerging project InjectJS from LinkedIn. It supports CommonJS and AMD module loading, cross-origin fetching, localStorage caching, and more. Though comparing to RequireJS it is still in early development stage – version 0.4.x at the moment of writing.

Templating systems

Some of popular systems in alphabetical order:

• Dust – asynchronous templates for the browser and node.js. It is LinkedIn fork of dust.js.
• Handlebars – is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
• Mustache – is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
• Underscore / Lo-Dash – Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. There is also

MV* frameworks family

Some of popular frameworks in alphabetical order:

• AngularJS – lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control. Oh yeah and it also helps with server-side communication, taming async callbacks with promises and deferreds; and make client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake.
• Backbone.js – gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. There is also Marionette which is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that Derick Bailey have built with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft’s “Prism” framework.
• EmberJS – is a JavaScript framework that does all the heavy lifting that you’d normally have to do by hand. There are tasks that are common to every web app; Ember.js does those things for you, so you can focus on building killer features and UI. These are the three features that make Ember.js a joy to use: bindings, computed properties, auto-updating templates.
• Flight – is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.

UI frameworks

Some of popular frameworks in alphabetical order:

• Bootstrap – Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• jQuery Mobile – touch-Optimized Web Framework for Smartphones & Tablets. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
• jQuery UI – is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
• Kendo UI – comprehensive HTML5/JavaScript framework for modern web and mobile app development.

Credits

This article was reviewed by Dawid Drelichowski.