Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Best Practices

Angular Best Practices

Thorsten Rinne

June 26, 2018
Tweet

More Decks by Thorsten Rinne

Other Decks in Programming

Transcript

  1. Zahlen & Fakten • Web App mit verschiedenen Backend-Systemen •

    Branche: Energiemanagement • Start Mitte September 2016 mit Angular 2.0.0 • bis zu sieben Frontend-Entwickler • über 70 fachliche und technische Module • über 300 Komponenten • über 2200 Unittests
  2. !==

  3. Angular • TypeScript • komponentenbasiertes Framework • kein $scope und

    keine Controller • modular aufgebaut • rxjs • angular-cli • feste Releasezyklen und Semantic Versioning
  4. Angular Versionen • September 2016: 2.0 • März 2017: 4.0

    • November 2017: 5.0 • Mai 2018: 6.0 • aktuell: 6.0.5 und 6.1.0-beta
  5. angular-cli • entwickelt vom Angular Team • standardisierte Projektstruktur inkl

    Tests • Production Build • Webpack • ab v6: Updates und Libraries
  6. ng add $ ng add @angular/material • fügt Angular Material

    in die Applikation • fügt die CSS Themes hinzu • das Default Theme • alle nötigen Imports des Moduls $ ng generate @angular/material:material-nav —name=nav • erstellt eine NavComponent • erstellt den kompletten Boilerplate-Code
 

  7. ng update • aktualisiert Pakte und startet Migrationsskripte (wenn verfügbar)

    $ ng update @angular/cli --migrate-only -- from=1.7.4 • aktualisiert von v1.7.4 auf v6.0.5 • fügt fehlende Abhängigkeiten hinzu • migriert zur neuen angular.json Datei
  8. Angular Architektur ngModule ngModule root Module ngModule Router Component Template

    Styles Service Pipe Directive imports PropertyBinding EventBinding DI
  9. CoreModule • Singleton Services • nur einmal pro Instanz •

    Beispiele • (Authentifizierung / User) • MediaQueries • Datum/Zeit
  10. Feature Modules • Components • Components • Pages • Dialogs

    • Services • Konstanten • Models • Utilities
  11. const routes: Routes = [ { path: 'feature', loadChildren: 'app/feature/feature.module#FeatureModule'

    }, { path: '', redirectTo: '', pathMatch: 'full' } ]; src/app/app-routing.module.ts
  12. import { NgModule } from '@angular/core'; import { CommonModule }

    from '@angular/common'; import { FeatureRoutingModule } from './feature-routing.module'; import { FeatureComponent } from './feature/feature.component'; @NgModule({ imports: [ CommonModule, FeatureRoutingModule ], declarations: [ FeatureComponent ] }) export class FeatureModule { } src/app/modules/feature/feature.module.ts
  13. @app • konsistente Importe in der kompletten App • Beispiel


    
 import { 
 FooService 
 } from '../../../core/package/foo.service'; • besser:
 
 import { FooService } from '@app/core';
  14. { "compilerOptions": { "...": "...", "baseUrl": "src", "paths": { "@app/*":

    ["app/*"], "@env/*": ["environments/*"] } } } tsconfig.json
  15. import { Component, OnInit } from '@angular/core'; import { Observable

    } from 'rxjs/Observable'; import { SingletonService } from '@app/core'; import { environment } from '@env/environment'; import { ExampleService } from './example.service'; @Component({ /* ... */ }) export class ExampleComponent implements OnInit { constructor( private SingletonService: SingletonService, private exampleService: ExampleService ) {} } example.component.ts Third Party App Globals Locally
  16. Typings interface User { firstName: string;
 lastName: string;
 age: number;


    createdDate: string | Date;
 } Response vom Server Rückgabewert eines Datepickers
  17. Typ Restriktionen (II) enum States { pending = 1, approved

    = 2, rejected = 3; } interface Order { state: States; }
  18. class CountryService { private countries: Observable<Country[]>; constructor(private http: Http) {

    this.countries = this.http.get('/api/countries') .publishReplay(1) .refCount(); } public getCountries(): Observable<Country[]> { return this.countries; } } country.service.ts rxjs cached den letzten Emittenten Wert. das Observable ist nutzbar, solange Subscriptions aktiv sind
  19. SCSS • SCSS ist ein CSS Präprozessor • Features •

    Variablen • Funktionen • Mixins • Angular Materials nutzt SCSS • Für neue Projekte: $ ng new <project> --style scss
  20. Beispiel @import "config/colors"; :host { display: flex; align-items: center; max-width:

    px-to-rem(200); }
 
 $rem-base: 16; @function px-to-rem($px-value) { @return $px-value / $rem-base * 1rem; }
  21. ng test • Testen von Angular Apps ist einfach
 


    $ ng test • Es wird Jasmine mit Karma und PhantomJS verwendet • Nachteile • langsam • PhantomJS hat eine veraltete Rendering Engine • PhantomJS wird nicht mehr weiter entwickelt
  22. ng test • Chrome 59 und später hat einen Headless

    Modus • Das geht einfach
 
 $ ng test --browser ChromeHeadless --single-run • Nachteile • es ist immer noch langsam
  23. Jest • „Delightful JavaScript Testing“ von Facebook • Jest ist

    fast API-kompatibel mit Jasmine • Fokus auf die Entwicklung (schnell und einfach zu nutzen) • abstrahiert den DOM über JSDOM • Code Coverage out of the box • TypeScript Support
  24. Vorteile von Jest • 300% schnellere Testausführung • ~2200 Tests

    laufen in etwa 60 Sekunden • Integration in WebStorm und VS Code • Snapshot Testing möglich
  25. • github.com/conventional-changelog/standard-version • definiert • Typ des Commits (Fix, Feature,

    Layout, usw.) • Optional den Scope (Component oder Module) • Commit Message • Optional Body • Ticket-ID
  26. 2.0.0 (2018-06-26) Bug Fixes • FooBar: removes dependency of jQuery

    (8a0f5aa), closes #4711 Semantic Versioning SHA-1 Hash
  27. Development Build • $ yarn start • startet yarn serve


    
 "serve": "ng serve —sourcemaps --ssl -- host=0.0.0.0 --disable-host-check --extract-css" • startet das Testbackend mit yarn test-backend
 
 "test-backend": "nodemon --watch test-backend -e js,ts,json -i '*.spec.ts' --exec \"cd test- backend && ts-node -r tsconfig-paths/register\" src/server.ts"

  28. Production Build • Unser Production Build
 
 "build:prod": "npm run

    version && npm run node-with-more-memory ./node_modules/ @angular/cli/bin/ng build -- —build- optimizer --env=prod --sourcemaps"
  29. Augury • Google Chrome Developer Tool Erweiterung • visualisiert Components

    • visuelles Debugging möglich • Change Detection und Performance Checks