Angular Best Practices

Transcript

1. Angular Best Practices Thorsten Rinne - 26. Juni 2018
2. Hallo, ich bin Thorsten.
3. Software-Architekt
4. https://github.com/thorsten https://twitter.com/ThorstenRinne
5. PHP → TypeScript
6. Best Practices?
7. Unser Projekt
8. 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
9. !==
10. Angular • TypeScript • komponentenbasiertes Framework • kein $scope und keine Controller • modular aufgebaut • rxjs • angular-cli • feste Releasezyklen und Semantic Versioning
11. 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
12. Learnings der zwei Jahre
13. $ ng new <project>
14. angular-cli • entwickelt vom Angular Team • standardisierte Projektstruktur inkl Tests • Production Build • Webpack • ab v6: Updates und Libraries
15. 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
 

16. 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
17. Struktur Architektur
18. Angular Architektur ngModule ngModule root Module ngModule Router Component Template Styles Service Pipe Directive imports PropertyBinding EventBinding DI
19. Architektur-Vorschlag • CoreModule • SharedModule • Feature Module • fachlich • technisch
20. CoreModule • Singleton Services • nur einmal pro Instanz • Beispiele • (Authentifizierung / User) • MediaQueries • Datum/Zeit
21. modules/ core/ services/ core.module.ts index.ts Re-Export von CoreModule
22. SharedModule • beinhaltet „einfache“ Components • Pipes • Import und Re-Export von Angular Material Komponenten
23. Feature Modules • Components • Components • Pages • Dialogs • Services • Konstanten • Models • Utilities
24. modules/ foo-bar/ components/ baz/ baz.component.html baz.component.scss baz.component.spec.ts baz.component.ts constants/ dialogs/ directives/ models/ pages/ pipes/ services/ utils/
25. Faustregeln für Feature Modules • sind fachlich gekapselt • importieren Services nur aus dem CoreModule • Lazy loaded
26. Lazy Loading AppRoutingModule Feature Module Routing Module Component
27. const routes: Routes = [ { path: 'feature', loadChildren: 'app/feature/feature.module#FeatureModule' }, { path: '', redirectTo: '', pathMatch: 'full' } ]; src/app/app-routing.module.ts
28. 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
29. Aliase
30. @app • konsistente Importe in der kompletten App • Beispiel
 
 import { 
 FooService 
 } from '../../../core/package/foo.service'; • besser:
 
 import { FooService } from '@app/core';
31. { "compilerOptions": { "...": "...", "baseUrl": "src", "paths": { "@app/*": ["app/*"], "@env/*": ["environments/*"] } } } tsconfig.json
32. 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
33. Typings
34. Typings interface User { firstName: string;
 lastName: string;
 age: number;
 createdDate: string | Date;
 } Response vom Server Rückgabewert eines Datepickers
35. Typ Restriktionen (I) interface Order { state: 'pending' | 'approved' | 'rejected'; }
36. Typ Restriktionen (II) enum States { pending = 1, approved = 2, rejected = 3; } interface Order { state: States; }
37. rxjs/observable
38. 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
39. SCSS
40. SCSS • SCSS ist ein CSS Präprozessor • Features • Variablen • Funktionen • Mixins • Angular Materials nutzt SCSS • Für neue Projekte: $ ng new <project> --style scss
41. 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; }
42. Testing
43. 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
44. 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
45. 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
46. Jest Installation $ yarn add --dev jest jest-preset-angular @types/jest
47. Vorteile von Jest • 300% schnellere Testausführung • ~2200 Tests laufen in etwa 60 Sekunden • Integration in WebStorm und VS Code • Snapshot Testing möglich
48. Commit Messages + ChangeLog Generator
49. • 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
50. fix(foo-bar): removes dependency of jQuery We don’t need jQuery, so it can be removed closes #4711
51. 2.0.0 (2018-06-26) Bug Fixes • FooBar: removes dependency of jQuery (8a0f5aa), closes #4711 Semantic Versioning SHA-1 Hash
52. Build
53. 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"

54. 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"
55. Debugging mit Augury
56. Augury • Google Chrome Developer Tool Erweiterung • visualisiert Components • visuelles Debugging möglich • Change Detection und Performance Checks
57. Augury
58. Danke für eure Aufmerksamkeit!
59. Fragen?
60. thorsten@rinne.info @ThorstenRinne