Angular Best Practices - August 2017 Edition

(Dette innlegget er krysset fra https://fluin.io/blog/angular-best-practices-august-2017)

Nok en måned, nok en oppsummering av beste praksis. Denne måneden er vi tilbake til noen av de grunnleggende om verktøy og IDE-konfigurasjon, og noen reaktive programmeringsprinsipper som vil sette deg opp for fremtidig suksess.

Beste praksis 1: Bruk CLI

I dag er Angular CLI den beste måten å bygge Angular Applications. Mange utviklere kom i gang med Angular før CLI var klar for første gang, men CLI er kjempebra for de aller fleste utviklere, startups og store bedriftslag.

Starter du et nytt prosjekt? Lag den med CLI.

Jobber du med et eksisterende prosjekt? Lag et nytt prosjekt med CLI og flytt deretter din eksisterende kode til / src / app /.

npm installer -g @ vinkel / cli
ng nytt mitt prosjekt

CLI har stillasverktøy (aka skjematisk) verktøy for å lage nye prosjekter og generere ny kode for deg, men disse er ikke den største fordelen. Den største fordelen med CLI er måten den automatiserer build-rørledningen for både liveutvikling med ng serve, så vel som for produksjonskode som du vil sende ned til nettlesere med ng build -prod

ng build -prod kommer alltid til å dra nytte av så mange beste fremgangsmåter som Angular-teamet kan slå på automatisk. Dette betyr at denne kommandoen blir kraftigere over tid med funksjoner som Service Workers eller The Angular Optimizer.

Beste praksis 2: Installer John Papas Vs Code Extension

Visual Studio Code er en fantastisk IDE for å bygge Angular-apper. En av de største fordelene du kan gjøre for deg selv er å installere John Papas Essential Angular Extension Pack.

Dette gjør det å jobbe med Angular i Visual Studio Code bedre enn noen gang.

Denne pakken inneholder følgende fantastiske verktøy:

  1. The Angular Language Service - Tilbyr kompletterings- og feilkontroll gjennomført med mal og vinkelmessig klargjøring av applikasjonen din
  2. EditorConfig - Kobler VSCodes konfigurasjon til .editorconfig som vi genererer automatisk for deg som en del av et nytt CLI-prosjekt
  3. Bracket Pair Colorizer - I stedet for standard syntaks utheving, farger denne utvidelsen parenteser, parenteser og krøllete seler basert på det nestede laget. Visuelle indikasjoner på hekking er en stor hjelp når du jobber med komplisert kode.

Beste praksis 3: Ikke abonner på dineobjekter i komponenter

Mange utviklere som jobber med Observables for første gang, ønsker å abonnere og lagre dataene lokalt et sted.

Dette er vanligvis en antipattern fordi den tvinger deg utvikleren til å administrere livssyklusen til komponenter og abonnement, i stedet for å la rammene gjøre dette for deg.

Den bedre måten å gjøre dette på er å bruke async-røret i malene dine, og la Angular styre hele saken for deg. La oss ta en titt på en prøvekode.

Ikke gjør dette:

...
mal: `
    {{localData | json}}
`)
eksportklasse MyComponent {
    localData;
    konstruktør (http: HttpClient) {
        http.get ( 'sti / til / min / api.json')
        .subscribe (data => {
            this.localData = data;
        });
    }
}

I stedet gjør dette

...
mal: `
    {{data | async | json}}
`)
eksportklasse MyComponent {
    data;
    konstruktør (http: HttpClient) {
        this.data = http.get ('sti / til / min / api.json');
    }
}

Ved å holde Observable og abonnere via malen, unngår du minnelekkasjer fordi Angular automatisk vil melde seg av Observable når komponenten rives ned. Dette virker kanskje ikke like viktig for HTTP, men dette er fint av flere grunner.

Async-røret avbryter HTTP-forespørsler hvis dataene ikke lenger er nødvendig, i stedet for å fullføre, behandle og så ikke gjøre noe med det.

Async-røret betyr endelig at vi kan bygge mer performante applikasjoner ved å bytte ChangeDetectionStrategy til OnPush. Når du bytter til OnPush, kan mange nye og forbedrede strategier utløse behovet for endringsdeteksjon, noe det manuelle abonnementet ditt ikke automatisk utløser.

Her er noen eksempler på mer avanserte observerbare strategier:

Async-røret betyr at senere hvis du bytter ut en enkel HTTP-samtale med noe mer komplekst som et sanntidsdatasett som Firebase, trenger ikke malkoden din endres.

Mange av funksjonene / kreftene til Observables går tapt når du manuelt abonnerer. Observasjoner kan berikes med oppførsel som forsøk på nytt, startWith (for ting som offline cache) eller timerbasert forfriskning.

Beste praksis 4: Ikke glem SEO og Analytics

Nettsteder og applikasjoner er kraftige på grunn av måten søkemotorer som Google kan indeksere dem og dele innholdet ditt med verden.

Analytics-produkter kan hjelpe deg med å forstå brukernes behov og atferd.

For å konfigurere begge disse, la oss ta med Google Analytics-utdraget i indeksen vår.html og erstatte sporingskoden og fjerne den første sidevisningen som de inkluderer som standard.