How to Write a Clean and Scalable Angular 2 Application: Best Practices for Angular 2

Angular 2 is becoming more popular worldwide and because of that, people are starting to learn how to use it. It doesn’t matter if you’re a beginner or an advanced coder, there are some practices you should follow when using Angular 2.

CLI/Boilerplate

If you’re just starting with Angular 2, use angular-cli (npm i angular-cli -g). It’s based on ember-cli. You can generate a good example with ng init project-name. This command will initialize a new Angular 2 application. This application should already be following all the best practices from the official Angular 2 style guide. Besides that, it installs the required npm dependencies. It also creates unit testing and e2e testing scripts. Long story short, it does everything that is required to start a new Angular 2 application. If you don’t like the directory structure or system.js you can use the best starter kit angular2-webpack-starter or other boilerplates.

Build the app

Angular2 uses Rollup to build bundle there is next-generation ES6 module bundler. A good example is browserify or webpack, because there are more loaders and plugins available for support Rollup feature set eg: rollup-loader and rollupify. Rollup can make smaller code however webpack and browserify have rollup-loader or browserify rollupify transformer which you can use to shrink your bundle. In the near future, it is going to be recommended to use @angular/compiler(-cli) and @angular/platform-browser which was made with template compiler, precompiled templates, and styles. Follow this example to speed up your bundle by more than nine times!

Server side (universal) rendering

Universal means rendering pages on both the server and client side. It usually implies the use of frontend JavaScript and Node.js because they allow for the re-usage of libraries, allowing browser JavaScript code to be run in the Node.js environment with very little modification. As a result of this interchangeability. If you want to use Typescript in Nodejs, we don’t suggest using ts-node or any node module which hacks the require.extension. Use “browserify  – node” or webpack with the right configuration to generate server side build.

IDE/Editor

We use Sublime and official Microsoft plugin but we think atom and vscode (unofficial editor of Angular 2) is also ideal for development, but much slower than Sublime. If you prefer complex IDE then use webstorm which has Angular 2 Support.

Linting

We suggest using tslint, it’s the best when using typescript with codelyzer and ng2lint. Valor-software has a very useful lint project, tslint-config-valor contains all rules explicitly.

Documentation

We use typedoc for generating the documentation, there’s a great little tool that allows us to generate HTML documentation based in our TypeScript files similar to what JavaDoc does. This will compile all the documentation (classes, namespaces, functions, etc.), it will be put under the doc folder in the current directory where that command is ran.

Testing

Karma has an over complicated architecture. We suggest using only jasmine (mocha isn’t working yet). Never run tests on ts files, first you need to compile. Unfortunately ts-node is really slow, even with the newest versions. Our tests run with ts-node 10s long and with compiles js only 1s.

TypeScript vs ES6

We use typescript in an Angular 2 based application, and we usually use rxjs too (it is also written by typescript). When you write code, which most often depends on node modules: express, node libs and middlewares use ES6, a lot of packages don’t have typing definition (d.ts). Typescript compiler (tsc) compile the fastest code, but sometimes not the standard way.

Naming Conventions

Naming standards help developers to understand each other’s code better and keep everything tidy. There are naming conventions for file and folder names as well as for class names and selectors. Some examples: – File and folder names should use dash-case and have a suffix which refers to their functionality, like: *.component.ts, *.service.ts *.interface.ts – Selectors should also use dash-case and have a prefix, which functions as a namespace. – Classes (components, services, directives, etc.) and interfaces should use camelCase and have a suffix which refers to the type of the class, like: *Component, *Service, etc.

Directory and File Structure

Directory and file structures are really difficult to keep standardized. The demands always change project by project. In the official style guide you use shared folder (for common components, styles etc.).

Redux

Someday your application will grow up so you have to make a good architecture not only for a big set of components and services. You must handle the states and actions. I think redux is the best container for your app, because all frontend developers know it.

Performance

It is important to know that if you have a component that only expects immutable data to be passed in via a property, you can further optimize rendering speed by adding changeDetection: ChangeDetectionStrategy.OnPush to the component.

Reactivity

Rxjs is a great library and it is much better to depend on library, than a framework. Frameworks change very often, but libraries have a more stable API. Use @ngrx extension like @ngrx/store and@ngrx/router to make a better use of reactivity.

Router

Don’t use the deprecated router (@angular/router-deprecated), Angular 2 is in release candidate status but also has a deprecated router too. We suggest the use of the new router (@angular/router) or @ngrx/router reactive solution, which is the greatest yet. Angular 2 is in release candidate status, but this practice will be useful in the future.