doktor500/todo-app-frontend

Getting started

Install NodeJS and NPM
Run npm install && bower install to download all necessary dependencies
Use gulp help to get a list of available actions

Description of the main tasks:

gulp serve runs the frontend app using local mode by default
gulp serve:dev runs the frontend app using dev mode (you will need to run a backend as well)
gulp clean cleans the project
gulp test runs unit and integration tests in local mode by default
gulp test:all runs unit, integration and E2E browser tests in ** local** mode by default
gulp test:auto runs unit and integration tests in local mode by default watching for changes
gulp test:unit runs unit tests in local mode by default
gulp test:integration runs integration tests in local mode by default
gulp test:e2e runs E2E browser tests in local mode by default
gulp test:integration:dev runs integration tests in dev mode
gulp build:dist builds the frontend app using prod mode by default
gulp lint runs eslint for code under src/**/*

Language

ES6

ECMAScript 6 (ES6 or javascript 2015) will be the javascript version to use since it adds really useful feataures to the language like:

Classes, inheritance and in general a more OO approach
Arrow functions
String interpolation
Destructuring
Default parameter values, spread operators
let & const hoisting
Module system
Map, sets...
Native promises
Tail call optimizations
And much more

Links: ES6 features - Exploring ES6

Babel VS Traceur (Transpilers to ES5)

Babel is a JavaScript transpiler, also known as a source-to-source compiler. It converts JavaScript code with ES6 language features to equivalent code that uses only language features from the widely-supported ES5 specification.

The result is that we can all benefit from the new ES6 syntax right now as long as we meet these reasonable browser requirements.

Even after all ES6 features have been implemented in browsers and the need to support browsers without ES6 disappears, the story won’t end for Babel. Babel’s goal is to be a transpiler for all future versions of JavaScript, not just ES6. Consequently, new features will be included as they enter the proposal stage.

Traceur is a tool that can be use for the same goal, it traspiles ES6 code to ES5. Traceur requires a runtime and is mor difficult to configure. The code generated by Babel is more faithful to the original code making things easier to track during development, and considering that we can use compilers like closure, there is no need to use traceur as a transpiler.

Editor's choice: Babel

Links: Babeljs

Framework

Angular 1.X

Angular 1.X is the chosen framework to use since Angular 2.X is not released yet, however we can start coding an angular 1.X application with some style guides in mind to be able to have a smoother transition to Angular 2.X in the future.

Use latest version of Angular 1.X, and keep our app updated as new Angular versions are released.
Create web components, match controllers with directives and move the logic from our controllers to services, create thinner controllers that just handle interaction with the view.
Remove dependencies on $scope and work always with isolated scopes, $scope is removed in Angular 2.0 so it's better to attach our functions and values to this instead of $scope. Use the controller as approach. bindToController was introduced in Angular 1.3 to help us use isolated scope on the controller with a directive.

Links: Preparing for the future of angular - Unit testing - Angular ng-Annotate - Angular UI Router

Build system

NPM VS Grunt VS Gulp

Grunt pros:

It has over 4000 plugins available

Grunt cons:

Grunt focuses on configuration
Grunt uses temporary files to execute tasks

Gulp pros:

Gulp focuses on code
Gulp uses nodejs streams which are faster allowing to runs task with maximum concurrency
Allows to write less verbose tasks

Gulp cons:

It has 1700 plugins available

Another alternative would be to use just NPM. In this case it is more a matter of using custom build scripts rather than using gulp plugins already developed by the community, gulp e2e task is a good example about that, gulp-protractor plugin takes care of downloading web driver and run protractor browser tests for free. Usually it takes a matter of 5 to 15 min to have a new functionality working with gulp, because other people has already solved the same problem and published a plugin for it. gulp-closure-compiler-service it is another good example. Working with just NPM feels like the equivalent of not working with gradle and gradle plugins and use ant instead.

Editor's choice: Gulp

Links: Grunt VS Gulp

## Package manager

Bower & NPM

Bower pros:

Was born with the intention to be the package manager for client-side modules
The libraries are already minified and ready for production use
Bower won't install a package incompatible with one that's already installed

Bower cons:

39.000 packages available
Bower servers are down from time to time

NPM pros:

178.000 packages available
Nice integration with browserify and other tools to create bundled minified modules

NPM cons:

Larger minified files

Editor's choice: Both (Bower for fronted libs and npm for dev dependencies)

Links: Bower VS NPM

Code quality tools

JSHint VS ESLint

To analyse and report porblems of javascript code, while also making sure developers adheres to the defined coding standard.

JSHint pros:

Most settings can be configured
Supports a configuration file, making it easier to use in larger projects

JSHint cons:

Has basic support for ES6
Makes difficult to know which rule is causing an error
No custom rule support

ESLint pros:

Flexible: any rule can be toggled, and many rules have extra settings that can be tweaked
Very extensible and has many plugins available
Easy to understand output
Includes many rules not available in other linters, making ESLint more useful for detecting problems
ES6 support
Supports custom reporters

ESLint Cons:

Some configuration required
Slower

Editor's choice: ESLint

Links: A Comparison of JavaScript Linting Tools

Test runner

Karma

Karma is default test runner for AnguarJS applications. It also provides a coverage reporter to have an overview of parts of the code covered by tests, however the test coverage reporter doesn't seem to play well with ES6.

A plugin is available to integrate it with Gulp.

Links: Karma - gulp-karma

Testing framework

Jasmine

Jasmine (2.x) is the de default testing framework for AnguarJS applications in combination with angular testing libraries, sinon.js for advanced mocking features, and chai, sinon-chai and chai-as-promised to have a better assertion solution.

There are other alterantives like Mocha instead of Jasmine that could be an option as well.

Protractor

Protractor is the default testing framework to develop browser test with AngularJS, it has a good integration with gulp through the gulp-protractor plugin.

Angular tests with ES6

doktor500 / todo-app-frontend