ng-conf 2018: ontwikkelingen in Angular - ilionx
Created with Sketch. Group 4 Group 10

Actueel Created with Sketch. Developers Blog

ng-conf 2018: ontwikkelingen in Angular

24-04-2018

Wat zijn de belangrijkste ontwikkelingen op het gebied van Angular? Vorige week was ilionx met drie ontwikkelaars op de ng-conf in Salt Lake City. ng-conf bestaat uit twee dagen workshops, drie dagen presentaties en is met 1500 bezoekers de grootste Angular-conferentie ter wereld. Kon je er niet bij zijn? Hieronder vatten we samen wat ons het meest opviel.

Klein, kleiner, kleinst: de nieuwe ivy-compiler

Angular 6 is zo goed als definitief en het Angular-team heeft het weer geflikt. Met versie 6 is het grondwerk gedaan waardoor de ivy-compiler als drop-in kan worden toegevoegd met een minor update, en krijg je kleinere bundle sizes (bijna) cadeau. En dat betekent wederom een kleinere payload en een kortere wachttijd voordat de gebruiker met je applicatie aan de slag kan. Om dit voor elkaar te krijgen is de compiler die jouw html-templates naar uitvoerbare JavaScript vertaalt volledig herschreven. Angular maakt gebruik van tree shaking om ongebruikte code uit je builds te elimineren. Hierbij kun je bijvoorbeeld denken aan delen van libraries die je niet gebruikt. In de nieuwe ivy-compiler is de code zo gerangschikt, dat de tree shaker zijn werk zo goed mogelijk kan doen. Een gecompileerde hello-world-applicatie komt hiermee ruim onder de 10kb, en om die reden kreeg iedereen op de conferentie ng-taart.

Meer informatie over de ivy compiler en andere ontwikkelingen zie je in de Day 1 Keynote.

Snel, sneller, snelst: service workers en PWA’s

“Als ze nou nog een keer gaan vertellen dat ik service workers moet gebruiken om mijn applicatie sneller te maken dan word ik gek,” aldus één van ons op de laatste dag van de conferentie. Service workers waren een nogal vaak terugkerend thema. Met service workers maak je, onder andere, je applicatie robuuster als je op een slecht netwerk zit. Hoe dat in zijn werk gaat? Nadat je applicatie voor de eerste keer geladen is, zorgt de service worker ervoor dat jouw applicatie in de browser gecachet wordt. Iedere volgende keer dat de gebruiker naar jouw website gaat, wordt je applicatie opgehaald uit de cache en verschijnt deze dus meteen op het scherm. En dankzij de service worker kun je de gebruiker zonder veel moeite zelf waarschuwen wanneer er een nieuwere versie van de website beschikbaar is.

Vaak worden service workers in één adem genoemd met Progressive Web Apps, maar ook voor ‘normale’ websites kan het gebruik van service workers lonen. Als je verwacht dat je gebruiker vaker dan één keer op je website komt, dan heeft het gebruik van service workers al zin. En dat het inbouwen van service workers helemaal niet zoveel werk is bewees Alyssa Nicoll in haar presentatie Angular Service Workers & Cows – a love story

Nog gemakkelijker: nieuwe CLI-commando’s

De command line interface van Angular maakte het leven van ontwikkelaars al gemakkelijk, maar met een aantal nieuwe CLI-commando’s wordt dat misschien nog wel gemakkelijker. Zo kun je snel libraries aan je project toevoegen, zonder dat je daarvoor nog handmatig code hoeft aan te passen. En ook het aanpassen van je code naar een nieuwe versie van een library kan met de nieuwe CLI in principe worden geautomatiseerd.

Om modules, componenten en andere elementen te genereren maakte de CLI al gebruik van zogenaamde schematics. Die schematics zijn in versie 6 dusdanig aangepast dat ze niet alleen nieuwe bestanden kunnen genereren, maar ook bestaande broncode kunnen aanpassen. Zoals je ook kunt zien in Angular Material’s Trees, kun je met ng add @angular/material eenvoudig de material-library aan je project toevoegen, en de CLI past dan automatisch de nodige bronbestanden aan zodat je de library meteen kunt gebruiken. En met het nieuwe ng update commando wordt je bestaande code automatisch aangepast naar nieuwe library versies. Hoe de code precies moet worden aangepast ligt vast in de betreffende library zelf. Iedere library kan deze mechanismen dus naar eigen inzicht implementeren.

Architectuur: ngrx

Qua architectuur hebben frontend-applicaties de laatste jaren grote stappen gemaakt. Een van de meest recente stappen in Angular is de implementatie van het Redux-pattern uit React voor Angular in de ngrx-library. Dat dat niet zonder gevolgen was, bleek op de conferentie. Er was al een workshop van een dag aan ngrx gewijd en op de tweede conferentiedag ging één gehele track volledig over dit onderwerp.

ngrx is een library om op een heel gestructureerde manier met state binnen je applicatie om te gaan. Met name in wat grotere applicaties, waarin state tussen verschillende pagina’s bewaard moet blijven en het bijhouden van state in afzonderlijke services snel onoverzichtelijk wordt, biedt ngrx een goed bruikbaar paradigma. Alle state binnen je applicatie sla je op in zogenaamde stores. Het aanpassen van state doe je door zogenaamde actions af te vuren (bijvoorbeeld een AddTodoAction). In zogenaamde reducers implementeer je wat er met de store moet gebeuren op het moment dat zo’n action afgaat. En in zogenaamde effects  implementeer je side effects, zoals schrijven en lezen naar de backend. Zoek op de YouTube van ng-conf naar ngrx en je vindt er diverse presentaties over.

Angular in praktijk

De keynote op de derde dag ging in over een vragen die het Angular Core team vaak krijgt. Vragen als “Moet ik Angular Universal gebruiken?”, “Moet ik NGRX gebruiken?” en “Moet ik Reactive Forms gebruiken?” kwamen hier voorbij. Sommige vragen zijn simpel; het antwoord op de Reactive Forms is een korte “Ja”. Andere vragen zijn moeilijker te beantwoorden en ligt aan je situatie. Door kort in te gaan op wanneer je zeker iets moet gebruiken, wanneer je ernaar kunt kijken of wanneer je het over kunt slaan, probeerden Rob Wormald en Stephen Fluin veel van de vragen te beantwoorden.

Keynote dag 3

De presentatie Angular at Large Organizations van Victor Savkin ging verrassend genoeg over zijn ervaringen van het toepassen van Angular grote bedrijven met 100-en ontwikkelaars. Een paar punten waarom Angular goed past bij grote enterprise bedrijven staan hieronder opgesomt:

Angular in large organizations

Tot slot

De ontwikkelingen in front-end-ontwikkeling volgen elkaar razendsnel op, zo bleek ook nu weer. Volg dit blog, en dan houden we je zo goed mogelijk op de hoogte.

Resources

 

 

Door: Michel Vollebregt en Gerhard Boer

Lees verder

Nieuws / 03-08-2018

ilionx trotse sponsor van Surfkids

Page 1 Copy 3Lees verder

Nieuws / 02-08-2018

Omroep Flevoland succesvol over naar NIS 6

Page 1 Copy 3Lees verder

Blog / 01-08-2018

Rik going electric … Blog #2

Page 1 Copy 3Lees verder