De ontbrekende inleiding tot hoekige en moderne ontwerppatronen

Angular (ook bekend als Angular 2, 4, 5, 6 ...) is een nieuw framework dat volledig is herschreven en het nu welbekende AngularJS-framework vervangt (aka Angular 1.x).

Meer dan alleen een framework, moet Angular worden beschouwd als een heel platform dat wordt geleverd met een complete set tools zoals zijn eigen CLI, debug utilities of performance tools.

Angular bestaat al een tijdje, maar ik krijg nog steeds het gevoel dat het niet de liefde krijgt die het verdiende, waarschijnlijk vanwege andere spelers in het veld zoals React of VueJS. Hoewel de eenvoud achter deze frameworks zeker aantrekkelijk kan zijn, missen ze naar mijn mening wat essentieel is bij het maken van grote, enterprise-grade apps: een solide frame om zowel ervaren ontwikkelaars als beginners in dezelfde richting te leiden en een rationele convergentie van tools, patronen en documentatie. Ja, de hoekcurve lijkt misschien een beetje steil, maar het is het zeker waard.

Ermee beginnen

nieuweling

Als Angular nieuw voor je is, kun je je overweldigd voelen door de hoeveelheid nieuwe concepten die je moet aanhouden, dus voordat je de documentatie gaat bekijken, wil je misschien beginnen met deze progressieve tutorial die je stap voor stap helpt bij het bouwen van een complete Angular-applicatie.

AngularJS-veteraan

Als je van AngularJS komt en meteen in de nieuwe versie wilt graven, wil je zeker een kijkje nemen in de snelle referentie van AngularJS vs Angular.

Spiek briefje

Totdat je de volledige Angular API uit je hoofd kent, wil je deze misschien behouden
cheatsheet die de syntaxis en functies op een enkele pagina bij de hand hervat.

Stijlgids

Goed nieuws, er is een officiële Angular-stijlgids geschreven door het team.

Meer dan alleen codeerregels, deze stijlgids geeft ook adviezen en best practices voor een goede applicatie-architectuur en is een essentiële lezing voor starters. Als je dieper leest, kun je zelfs veel uitleg vinden voor enkele ontwerpkeuzes van het framework.

FAQ

Er is veel te graven in Angular en sommige vragen storen mensen vaak. De meeste onduidelijke dingen lijken in feite verband te houden met modules, bijvoorbeeld de gevreesde vraag "Core vs Shared modules".

De jongens van Angular hebben misschien gemerkt dat aangezien je nu een leuke FAQ op hun website kunt vinden] ze alle veelgestelde vragen over modules beantwoorden. Aarzel niet om het te bekijken, zelfs als u denkt dat u voldoende ervaring hebt met Angular

Dieper gaan

Hoewel ze niet verplicht zijn, is Angular ontworpen voor het gebruik van ontwerppatronen waaraan u misschien niet gewend bent, zoals reactieve programmering, unidirectionele gegevensstroom en gecentraliseerd statusbeheer.

Deze concepten zijn moeilijk in een paar woorden te hervatten, en hoewel ze nauw met elkaar verwant zijn, betreffen ze specifieke delen van een applicatiestroom, die elk vrij diep zijn om op zichzelf te leren.

U vindt hier in wezen een lijst met goede uitgangspunten voor meer informatie over deze onderwerpen.

Reactief programmeren

Je bent je er misschien niet van bewust, maar Angular is nu een reactief systeem. Hoewel je niet gedwongen bent om reactieve programmeerpatronen te gebruiken, vormen ze de kern van het framework en het is zeker aan te raden om ze te leren als je het beste van Angular wilt gebruiken.

Angular gebruikt RxJS om het Observable-patroon te implementeren.

Een waarneembare is een stroom asynchrone gebeurtenissen die kunnen worden verwerkt met array-achtige operators.
Voorbeeld Waarneembare gebeurtenisstream

Van beloften tot waarnemers

Terwijl AngularJS vroeger sterk afhankelijk was van beloften om asynchrone gebeurtenissen af ​​te handelen, worden Observables nu in plaats daarvan in Angular gebruikt. Hoewel in specifieke gevallen, zoals voor HTTP-aanvragen, een Observable kan worden omgezet in een Promise, is het raadzaam om het nieuwe paradigma te omarmen, omdat het veel meer kan dan Promises, met veel minder code. Deze overgang wordt ook uitgelegd in de Angular-tutorial. Nadat u de overstap hebt gemaakt, zult u nooit meer terugkijken.

Referenties leren

  • Wat is reactief programmeren ?, mooi uitgelegd via een eenvoudig beeldverhaal (5 min)
  • De inleiding tot reactief programmeren die je hebt gemist, de titel zegt het al (30 min)
  • Functioneel reactief programmeren voor Angular 2-ontwikkelaars, zie de functionele reactieve programmeerprincipes in de praktijk met Angular (15 min)
  • RxMarbles, een grafische weergave van Rx-operators die enorm helpen hun gebruik te begrijpen

Unidirectionele gegevensstroom

In tegenstelling tot AngularJS, waar een van de verkoopargumenten tweerichtingsgegevensbinding was, die uiteindelijk veel grote problemen voor complexe toepassingen veroorzaakte, dwingt Angular nu een unidirectionele gegevensstroom af.

Wat betekent het? Met andere woorden gezegd, het betekent dat veranderingsdetectie geen cycli kan veroorzaken, wat een van AngularJS problematische punten was. Het helpt ook om eenvoudiger en voorspelbaardere gegevensstromen in applicaties te behouden, samen met substantiële prestatieverbeteringen.

One-way gegevensstroom

Wacht, waarom vermeldt de Angular-documentatie dan een bindende syntaxis in twee richtingen?

Als u goed kijkt, is de nieuwe tweerichtingsbindingssyntaxis gewoon syntactische suiker om twee eenrichtingsbindingen te combineren (een eigenschap- en gebeurtenisbinding), waardoor de gegevensstroom unidirectioneel blijft.

Deze verandering is erg belangrijk, omdat het vaak de oorzaak was van prestatieproblemen met AngularJS en het een van de pijlers is voor betere prestaties in nieuwe Angular-apps.

Hoewel Angular probeert patroon-agnostisch te blijven en kan worden gebruikt met conventionele MV * -patronen, is het ontworpen met reactieve programmering in gedachten en schijnt het echt wanneer het wordt gebruikt met reactieve gegevensstroompatronen zoals
redux, Flux of MVI.

Gecentraliseerd staatsmanagement

Naarmate applicaties groter worden, kan het bijhouden van de status van alle afzonderlijke componenten en datastromen vervelend worden en vaak moeilijk te beheren en te debuggen zijn.

Het belangrijkste doel van het gebruik van een gecentraliseerd statusbeheer is om statusveranderingen voorspelbaar te maken door bepaalde beperkingen op te leggen aan hoe en wanneer updates kunnen plaatsvinden, met behulp van unidirectionele gegevensstroom.

Deze aanpak werd voor het eerst populair gemaakt bij React met de introductie van de Flux-architectuur. Veel bibliotheken ontstonden toen ze probeerden het oorspronkelijke concept aan te passen en te verfijnen, en een van deze werd enorm populair door een eenvoudiger, elegant alternatief te bieden: Redux.

Redux is tegelijkertijd een bibliotheek (met de grote R) en een ontwerppatroon (met de kleine r), de laatste is framework-agnostisch en werkt erg goed met Angular.

Het redux-ontwerppatroon is gebaseerd op deze 3 principes:

  • De applicatiestatus is een enkele onveranderlijke gegevensstructuur
  • Een statusverandering wordt veroorzaakt door een actie, een object dat beschrijft wat er is gebeurd
  • Pure functies genaamd verloopstukken nemen de vorige status en de volgende actie om de nieuwe status te berekenen

De kernconcepten achter deze principes worden in dit voorbeeld goed uitgelegd (3 min).

De updatecyclus van de redux-status

Voor geïnteresseerden werd het redux-patroon met name geïnspireerd door The Elm Architecture en het CQRS-patroon.

Welke bibliotheek te gebruiken?

Je kunt Angular laten werken met elke staatsbibliotheek die je wilt, maar je kunt het beste NGXS of @ngrx gebruiken. Beide werken hetzelfde als de populaire Redux-bibliotheek, maar met een nauwe integratie met Angular en RxJS, met een aantal leuke extra hulpprogramma's voor ontwikkelaars.

NGXS is gebaseerd op dezelfde concepten als @ngrx, maar met minder boilerplate en een mooiere syntaxis, waardoor het minder intimiderend is.

Enkele bronnen om te beginnen:

  • Angular NGXS tutorial met voorbeeld vanaf nul, een begeleide tutorial voor NGXS (10 min)
  • Bouw een betere Angular 2-applicatie met redux en ngrx, een leuke tutorial voor @ngrx (30 min)
  • Uitgebreide inleiding tot @ ngrx / store, een diepgaand onderzoek naar dit bibliotheekgebruik in Angular (60 min)

Wanneer gebruiken?

Je hebt misschien gemerkt dat de meeste startersjablonen geen gecentraliseerd systeem voor statusbeheer bevatten.
Waarom is dat? Hoewel er veel voordelen zijn aan het gebruik van dit patroon, is de keuze uiteindelijk aan jouw team en wat je wilt bereiken met je app.

Houd er rekening mee dat het gebruik van een enkele centrale status voor uw app een nieuwe laag introduceert, een complexiteit die mogelijk niet nodig is, afhankelijk van uw doel.

Prestaties optimaliseren

Hoewel de nieuwe Angular-versie de meeste prestatieproblemen met AngularJS oplost, is er altijd ruimte voor verbeteringen. Houd er rekening mee dat het leveren van een app met goede prestaties vaak een kwestie van gezond verstand en verstandige ontwikkelingsmethoden is.

Hier is een lijst met belangrijke punten om in uw app op te controleren om ervoor te zorgen dat u uw klanten de beste ervaring biedt:

Nadat u de checklist hebt doorlopen, moet u ook een audit van uw pagina uitvoeren via Lighthouse, de nieuwste Google-tool die u zinvol inzicht geeft in de prestaties van uw app, toegankelijkheid, mobiele compatibiliteit en meer.

Angular up-to-date houden

De hoekige ontwikkeling gaat snel en updates van de belangrijkste bibliotheken en tools worden regelmatig gepusht.

Gelukkig biedt het Angular-team hulpmiddelen om u te helpen de updates te volgen:

  • Met npm run ng update kunt u uw app en zijn afhankelijkheden bijwerken
  • De Angular update-website leidt u door Angular-wijzigingen en -migraties en biedt stapsgewijze handleidingen van de ene versie naar de andere.

Deze gids is inbegrepen bij alle Angular-projecten die zijn gegenereerd door ngX-Rocket. Als u op zoek bent naar een uitbreidbaar, goed gedocumenteerd starterspakket van ondernemingskwaliteit, moet u dit eens bekijken!