Angular Best Practices - editie augustus 2017

(Dit bericht is geplaatst op https://fluin.io/blog/angular-best-practices-august-2017)

Nog een maand, nog een samenvatting van best practices. Deze maand zijn we terug bij enkele basisbegrippen over tooling en IDE-configuratie, en enkele reactieve programmeerprincipes die je zullen voorbereiden op toekomstig succes.

Best Practice 1: Gebruik de CLI

Tegenwoordig is de Angular CLI de beste manier om hoekige applicaties te bouwen. Veel ontwikkelaars begonnen met Angular voordat de CLI klaar was voor primetime, maar de CLI is geweldig voor de overgrote meerderheid van ontwikkelaars, startups en grote bedrijfsteams.

Een nieuw project starten? Maak het met de CLI.

Werkt u aan een bestaand project? Maak een nieuw project met de CLI en verplaats uw bestaande code naar / src / app /.

npm install -g @ angular / cli
ng nieuw mijn-project

De CLI heeft steiger (ook wel schema's genoemd) voor het maken van nieuwe projecten en het genereren van nieuwe code voor u, maar dit zijn niet het belangrijkste voordeel. Het belangrijkste voordeel van de CLI is de manier waarop het de build-pipeline automatiseert voor zowel live ontwikkeling met ng serve als voor productiecode die u naar browsers met ng build -prod zou verzenden

ng build -prod zal altijd profiteren van zoveel best practices als het Angular-team automatisch kan inschakelen. Dit betekent dat deze opdracht in de loop van de tijd krachtiger zal worden met functies zoals Service Workers of The Angular Optimizer.

Best Practice 2: installeer de Vs-code-extensie van John Papa

Visual Studio Code is een geweldige IDE voor het bouwen van Angular-apps. Een van de grootste gunsten die je zelf kunt doen, is het installeren van het Essential Angular Extension Pack van John Papa.

Dit maakt het werken met Angular in Visual Studio Code beter dan ooit.

Dit pakket bevat de volgende geweldige tools:

  1. De Angular Language Service - biedt sjabloonbewuste en hoekbewuste voltooiing en foutcontrole binnen uw toepassing
  2. EditorConfig - Verbindt de configuratie van VSCode met uw .editorconfig die we automatisch voor u genereren als onderdeel van een nieuw CLI-project
  3. Bracket Pair Colorizer - In plaats van standaard syntax highlighting, kleurt deze extensie haakjes, haakjes en accolades op basis van hun geneste laag. Visuele aanwijzingen voor het nesten zijn een enorme hulp bij het werken met gecompliceerde code.

Best Practice 3: Abonneer u niet op uw observables in componenten

Veel ontwikkelaars die voor het eerst met Observables werken, willen zich abonneren en de gegevens ergens lokaal opslaan.

Dit is meestal een antipatroon omdat het u de ontwikkelaar dwingt om de levenscyclus van componenten en abonnementen te beheren, in plaats van het framework dit voor u te laten doen.

De betere manier om dit te doen, is om de async-pijp in uw sjablonen te gebruiken en Angular alles voor u te laten beheren. Laten we een voorbeeldcode bekijken.

Doe dit niet:

...
sjabloon: `
    {{localData | json}}
`)
exportklasse MyComponent {
    localData;
    constructor (http: HttpClient) {
        http.get ( 'pad / naar / mijn / api.json')
        .subscribe (data => {
            this.localData = data;
        });
    }
}

Doe dit in plaats daarvan

...
sjabloon: `
    {{data | async | json}}
`)
exportklasse MyComponent {
    gegevens;
    constructor (http: HttpClient) {
        this.data = http.get ('pad / naar / mijn / api.json');
    }
}

Door de Observable te houden en in te schrijven via de sjabloon, vermijdt u geheugenlekken omdat Angular zich automatisch afmeldt bij de Observable wanneer het onderdeel wordt afgebroken. Dit lijkt misschien niet zo belangrijk voor HTTP, maar dit is om verschillende redenen leuk.

De Async-pipe annuleert HTTP-aanvragen als de gegevens niet langer nodig zijn, in plaats van te voltooien, te verwerken en er vervolgens niets mee te doen.

De Async-pijp betekent eindelijk dat we meer performante applicaties kunnen bouwen door uw ChangeDetectionStrategy over te schakelen naar OnPush. Wanneer u overschakelt naar OnPush, kunnen veel nieuwe en verbeterde strategieën de noodzaak van veranderingdetectie activeren, wat niet automatisch door uw handmatige abonnement wordt geactiveerd.

Hier zijn een paar voorbeelden van meer geavanceerde waarneembare strategieën:

De Async-pijp betekent dat als je later een eenvoudige HTTP-oproep uitwisselt met iets complexers zoals een realtime gegevensset zoals Firebase, je sjablooncode niet hoeft te worden gewijzigd.

Veel van de functies / mogelijkheden van Observables gaan verloren als je je handmatig abonneert. Observables kunnen worden verrijkt met gedrag zoals opnieuw proberen, startWith (voor dingen zoals offline caching) of op tijd gebaseerde verversing.

Best Practice 4: Vergeet SEO en Analytics niet

Websites en applicaties zijn krachtig vanwege de manier waarop zoekmachines zoals Google ze kunnen indexeren en uw inhoud met de hele wereld kunnen delen.

Analytics-producten kunnen u helpen de behoeften en het gedrag van uw gebruikers te begrijpen.

Om deze beide in te stellen, nemen we het Google Analytics-fragment op in onze index.html en vervangen we de trackingcode en verwijderen we de eerste paginaweergave die ze standaard bevatten.