Angular 2+
best practices

by Gabriele Mittica, Co-founder @ Corley.it


What you feel
when develop with ng...

What can you do?

Do define one thing,
such as a service or component, per file.

Split component and limit files
to 400 lines of code.


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, OnInit } from '@angular/core';

class Hero { id: number; name: string; }

@Component({ ... })
class AppComponent implements OnInit { ... }

@NgModule({})
export class AppModule { ... }

platformBrowserDynamic().bootstrapModule(AppModule);

const HEROES: Hero[] = [
  {id: 1, name: 'Batman'},
  ...
];

function getHeroes(): Promise {
  return Promise.resolve(HEROES);
}

Stop starting from scratch

Use a solid boilerplate

https://github.com/gdi2290/angular-starter

Conventions are important
in class and file definitions

Are really really really important



                            @Component({ ... })
                            export class AppComponent { }

app.component.ts

@Pipe({ name: 'initCaps' })
export class InitCapsPipe implements PipeTransform { }

init-caps.pipe.ts

@Injectable()
export class UserProfileService { }

user-profile.service.ts

@Component({
  selector: 'wac-hero'
})
export class HeroComponent {}

use custom prefix (wac)

Apps usually need several common
features, logics and functions

Create a Core Module to rule them all

Import in (and only in) your AppModule


                            import { NgModule }      from '@angular/core';
                            import { BrowserModule } from '@angular/platform-browser';

                            import { AppComponent }   from './app.component';
                            import { HeroesComponent } from './heroes/heroes.component';
                            import { CoreModule }    from './core/core.module';

                            @NgModule({
                              imports: [
                                BrowserModule,
                                CoreModule,
                              ],
                              declarations: [
                                AppComponent,
                                HeroesComponent
                              ],
                              exports: [ AppComponent ],
                              entryComponents: [ AppComponent ]
                            })
                            export class AppModule {}

Your app has
presentation and business logics

Manage them in the right places

Services
Complex Logic
APP
Presentation Logic
Components

Templates are a core component of your app

Use them in the right way
to prevent performance issues

6.1 Use one-way data binding
Keeps data changes predictable and in-sync

6.2 Avoid referencing local template variables

6.3 Avoid side-effects in template expressions

6.4 Use the NgClass directive for managing multiple class names at the same time

6.5 Use the NgStyle directive when setting several inline styles at the same time

6.6 Use property binding with ngSwitch

All web apps work with API

You need to know
REST and HTTP perfectly

HTTP verbs
HTTP codes
REST constraints
REST naming
Http
Client

Angular has poor helpers for UI and UX

Include best frameworks and libraries to drive the experience

Bootstrap 4 (https://getbootstrap.com/)

ngBootstrap (https://ng-bootstrap.github.io/#/home)

Defatul web animations (https://angular.io/guide/animations)

Animate.css (https://daneden.github.io/animate.css/)

Ionic Framework (http://ionicframework.com/)

Font Awesome 5 (https://fontawesome.com/)

Angular Universal (https://angular.io/guide/universal)

https://github.com/rangle/angular2-guidelines

https://angular.io/guide/styleguide

https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines

Thanks for listening

#webappconf17

@gabrielemittica