Den manglende introduktion til vinklede og moderne designmønstre

Angular (alias Angular 2, 4, 5, 6…) er en ny ramme, der er helt omskrevet fra grunden, og erstatter den nu velkendte AngularJS-ramme (alias Angular 1.x).

Mere end bare en ramme, skal Angular betragtes som en hel platform, der leveres med et komplet sæt værktøjer som dets egen CLI, debug-værktøjer eller ydeevneværktøjer.

Angular har eksisteret i nogen tid nu, men jeg får stadig en fornemmelse af, at det ikke får den kærlighed, den fortjente, sandsynligvis på grund af andre spillere på banen som React eller VueJS. Selvom enkelheden bag disse rammer bestemt kan være attraktiv, mangler de efter min mening, hvad der er vigtigt, når man laver store apps i virksomhedsklasse: en solid ramme, der fører både erfarne udviklere og begyndere i samme retning og en rationel konvergens af værktøjer, mønstre og dokumentation. Ja, den vinklede læringskurve virker muligvis lidt stejl, men det er bestemt værd.

Kom godt i gang

Begynder

Hvis du er ny på Angular, kan du føle dig overvældet af mængden af ​​nye koncepter, du skal forstå, så inden du går i dokumentationen, kan du muligvis starte med denne progressive tutorial, der vil guide dig trin for trin til at opbygge en komplet Angular-applikation.

AngularJS-veteran

Hvis du kommer fra AngularJS og ønsker at grave lige i den nye version, vil du helt sikkert kigge på den hurtige reference til AngularJS vs Angular.

Snydeark

Indtil du uden at kende det fulde vinkelformede API uden for, vil du måske beholde dette
cheatsheet, der genoptager syntaks og funktioner på en enkelt side ved hånden.

Style guide

Gode ​​nyheder, der er en officiel guide til vinkelform skrevet af teamet.

Mere end blot kodningsregler giver denne stilguide også råd og bedste praksis for en god applikationsarkitektur og er en vigtig læsning for startere. Når du læser dybere, kan du endda finde mange forklaringer på nogle designvalg af rammen.

Ofte stillede spørgsmål

Der er meget at grave i Angular, og nogle spørgsmål generer ofte folk. Faktisk ser det meste ud af uklare ting at være relateret til moduler, for eksempel det frygtede “Core vs Shared modules” -spørgsmål.

Fyrene på Angular har måske bemærket, at da du nu kan finde en dejlig FAQ på deres websted], der besvarer alle de almindelige spørgsmål vedrørende moduler. Tøv ikke med at kigge på det, selvom du synes, du er erfaren nok med Angular

Gå dybere

Selvom de ikke er obligatoriske, var Angular designet til brug af designmønstre, som du måske ikke er vant til, som reaktiv programmering, ensrettet dataflow og centraliseret tilstandsstyring.

Disse koncepter er vanskelige at genoptage med få ord, og selvom de er tæt knyttet til hinanden, vedrører de specifikke dele af en applikationsstrøm, hvor de hver især er ganske dybe at lære på sine egne.

Her finder du hovedsageligt en liste over gode udgangspunkt for at lære mere om disse emner.

Reaktiv programmering

Du er måske ikke opmærksom på det, men Angular er nu et reaktivt system ved design. Selvom du ikke er tvunget til at bruge reaktive programmeringsmønstre, udgør de kernen i rammen, og det anbefales bestemt at lære dem, hvis du vil udnytte det bedste fra Angular.

Angular bruger RxJS til at implementere det observerbare mønster.

En observerbar er en strøm af asynkrone begivenheder, der kan behandles med matrixlignende operatører.
Eksempel observerbar begivenhedsstrøm

Fra løfter til observerbare ting

Mens AngularJS plejede at stole stærkt på løfter til at håndtere asynkrone begivenheder, bruges Observables nu i stedet i Angular. Selvom en observerbar i specifikke tilfælde som for HTTP-anmodninger kan konverteres til en løfte, anbefales det at omfavne det nye paradigme, da det kan gøre meget mere end løfter med langt mindre kode. Denne overgang er også forklaret i vinkelvejledningen. Når du har skiftet, ser du aldrig tilbage igen.

Læring referencer

  • Hvad er reaktiv programmering ?, forklaret pænt gennem en simpel billedhistorie (5 min)
  • Introduktionen til reaktiv programmering, du har manglet, titlen siger det hele (30 min)
  • Funktionel reaktiv programmering for Angular 2-udviklere, se de funktionelle reaktive programmeringsprincipper i praksis med Angular (15 min)
  • RxMarbles, en grafisk repræsentation af Rx-operatører, der i høj grad hjælper med at forstå deres brug

Enkeltvejsstrøm

I modsætning til AngularJS, hvor et af dets salgspunkter var tovejsbinding, hvilket endte med at forårsage en masse store hovedpine til komplekse applikationer, håndhæver Angular nu envejs dataflow.

Hvad betyder det? Med andre ord betyder det, at ændringsdetektering ikke kan forårsage cyklusser, hvilket var et af AngularJS-problematiske punkter. Det hjælper også med at bevare enklere og mere forudsigelige datastrømme i applikationer sammen med betydelige ydelsesforbedringer.

Envejs dataflow

Vent, hvorfor nævner vinkeldokumentationen en tovejs bindende syntaks?

Hvis du ser nøje, er den nye tovejs-bindende syntaks bare syntaktisk sukker til at kombinere to envejsbindinger (en egenskabs- og begivenhedsbinding), hvilket holder dataflowet i enkel retning.

Denne ændring er virkelig vigtig, da det ofte var årsagen til ydelsesproblemer med AngularJS, og det er en af ​​søjlerne, der muliggør bedre ydelse i nye Angular-apps.

Mens Angular forsøger at forblive mønster-agnostisk og kan bruges med konventionelle MV * mønstre, blev det designet med reaktiv programmering i tankerne og skinner virkelig, når det bruges med reaktive dataflowmønstre som
redux, Flux eller MVI.

Centraliseret statsforvaltning

Efterhånden som applikationer vokser i størrelse, kan det blive kedeligt at holde styr på alle dets individuelle komponenters tilstand og datastrømme og har tendens til at være vanskeligt at administrere og fejlsøge.

Hovedmålet med at bruge en centraliseret statsledelse er at gøre tilstandsændringer forudsigelige ved at indføre visse begrænsninger for, hvordan og hvornår opdateringer kan ske, ved hjælp af envejsdataflyt.

Denne tilgang blev først gjort populær hos React med introduktion af Flux-arkitekturen. Mange biblioteker dukkede op og forsøgte at tilpasse og forfine det originale koncept, og et af disse fik enorm popularitet ved at tilvejebringe et enklere, elegant alternativ: Redux.

Redux er på samme tid et bibliotek (med den store R) og et designmønster (med det lille r), hvor sidstnævnte er ramme-agnostisk og fungerer meget godt med Angular.

Reduktionsdesignmønsteret er baseret på disse 3 principper:

  • Applikationstilstanden er en enkelt uforanderlig datastruktur
  • En tilstandsændring udløses af en handling, et objekt, der beskriver, hvad der skete
  • Rene funktioner, der kaldes reducere, udfører den forrige tilstand og den næste handling for at beregne den nye tilstand

Kernebegreberne bag disse principper er pænt forklaret i dette eksempel (3 min).

Opdateringscyklus for reduxtilstand

For de interesserede blev redux-mønsteret især inspireret af The Elm Architecture og CQRS-mønsteret.

Hvilket bibliotek skal bruges?

Du kan få Angular til at arbejde med ethvert statsledelsesbibliotek, du kan lide, men dit bedste alternativ ville være at bruge NGXS eller @ngrx. Begge fungerer det samme som det populære Redux-bibliotek, men med en tæt integration med Angular og RxJS, med nogle dejlige ekstra udviklerværktøjer.

NGXS er baseret på de samme koncepter som @ngrx, men med mindre kedelplade og en pænere syntaks, hvilket gør den mindre skræmmende.

Nogle ressourcer til at komme i gang:

  • Vinkelformet NGXS-tutorial med eksempel fra bunden, en guidet tutorial til NGXS (10 min)
  • Lav en bedre Angular 2-applikation med redux og ngrx, en dejlig tutorial til @ngrx (30 min)
  • Omfattende introduktion til @ ngrx / store, et dybtgående gennemgang til dette biblioteksbrug i Angular (60 min)

Hvornår skal du bruge det?

Du har muligvis bemærket, at de fleste starter skabeloner ikke inkluderer et centraliseret tilstandsstyringssystem ud af boksen.
Hvorfor det? Selvom der er mange fordele ved at bruge dette mønster, er valget i sidste ende op til dit team, og hvad du vil opnå med din app.

Husk, at brug af en enkelt centraltilstand til din app introducerer et nyt lag en kompleksitet, der muligvis ikke er nødvendig, afhængigt af dit mål.

Optimering af ydeevne

Mens den nye Angular-version løser ved at designe de fleste af de ydelsesproblemer, der kan opleves med AngularJS, er der altid plads til forbedringer. Bare husk, at levering af en app med god ydelse ofte er et spørgsmål om sund fornuft og fornuftig udviklingspraksis.

Her er en liste over nøglepunkter, du skal tjekke efter i din app for at sikre, at du leverer den bedste oplevelse til dine kunder:

Efter at have gennemgået tjeklisten, skal du sørge for også at køre en revision af din side gennem Lighthouse, det nyeste Google-værktøj, der giver dig meningsfuld indsigt om din apps ydeevne, tilgængelighed, mobilkompatibilitet og mere.

Hold vinkel up-to-date

Vinkeludviklingen bevæger sig hurtigt, og opdateringer til core libs og værktøjer skubbes regelmæssigt.

Heldigvis leverer Angular-teamet værktøjer, der hjælper dig med at følge opdateringerne:

  • npm kørsel ng-opdatering giver dig mulighed for at opdatere din app og dens afhængigheder
  • Webstedet med Angular-opdateringer guider dig gennem Angular-ændringer og migreringer, og giver trin for trin guider fra en version til en anden.

Denne vejledning er inkluderet i alle vinkelprojekter genereret af ngX-Rocket. Hvis du er på udkig efter et udvideligt, veldokumenteret, startkit i virksomhedsklasse, bør du tjekke det ud!