Angular 7: wat is er nieuw?
Angular 7 is er al een tijdje en het is niet moeilijk om te upgraden. Wij sommen de belangrijkste punten van de laatste onderdelen en verbeteringen in Angular 7. Inclusief de CLI updates en betere prestaties. Ook ontkrachten we het verspreide nepnieuws.
De nieuwe versie van Angular was al lang verwacht, maar nu is hij er eindelijk. De Angular developers van System4 waren enthousiast om de update te installeren en de nieuwste onderdelen uit te proberen.
“Het is niet eng om te updaten naar angular 7.”
Google Developer Stephen Fluin over de Angular 7: “This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchonized major versions.” Stephen heeft het al meerdere keren gezegd: “beheren van verwachtingen.” Er is daarin geen verandering bij de uitgave van Angular 7. Snelheid en betrouwbaarheid zijn de belangrijke speerpunten van deze update.
Werk vandaag nog met angular 7
Zoals alle updates van Angular, kun je binnen jouw gemaakte applicatie, gemakkelijk de volgende command uitvoeren:
ng update @angular/cli @angular/core
Niets meer, niets minder. Het is elke update weer snel en probleemloos.
Cli prompt
De nieuwe CLI prompt is een stuk simpeler dan voorheen. Voorla door commands, zoals ‘ng new’ of ‘ng add’. Je kunt de laatste versie van de CLI installeren door de volgende command uit te voeren:
‘npm install -g @angular/cli@latest’
Nadat je dat hebt gedaan, probeer een nieuwe app te maken door ‘ng new’ + enter in te toetsen. Vul de naam van je nieuwe app, Angular routing > yes en binnen korte tijd is jouw nieuwe app aangemaakt.
Angular material krijgt kleine updates
Angular Material kreeg enkele nieuwe updates in het afgelopen jaar, inclusief de nieuwe homepage van material.io. Op deze website krijg je design begeleiding, development components, tooling en blijf je op de hoogte van het laatste nieuws.
Als je een Angular Material gebruiker bent, zul je na de update enkele veranderingen opmerken, aangezien de library meer is gericht op de geüpdate Material Design.
Angular Material verbeterde ook de toegankelijkheid voor selects. Je kunt nu gebruik maken van de native select binnen de mat-form-field. Omdat het een native element is, heeft het meer toegankelijkheid en betere prestaties dan de mat-select heeft. Beide zijn nu beschikbaar.
Virtual scrolling en drag & drop
De CDK heeft nu virtuele scrollmogelijkheden die je kunt gebruiken door de ‘scrollingmodule’ te importeren. Virtual scrolling is het laden (en ontladen) van DOM elementen op basis van waar de gebruiker zich bevindt in de lijst van items. Dit betekent natuurlijk dat het scrollen in lijsten een stuk sneller zal gaan.
Onderstaand een voorbeeld hoe de DOM veranderd als er gescrolld wordt.
Drag and drop
De CDK ondersteunt nu ook Drag & Drop met handige functies.
- Automatische weergave als een gebruiker items verplaatst
- ‘Helper methods’ voor het opnieuw ordenen/overbrengen van items in lijsten: moveItemInArray en transferArrayItem.
Verbeteren van Angular Applicatieprestaties
Budgets aanmaken voor nieuwe applicaties. Deze functie waarschuwt de developers als de applicatie over hun budget gaat (in bundle size). De standaardinstellingen zijn waarschuwingen bij 2 MB en een error-melding bij 5 MB. Deze standaardwaarden kunnen eenvoudig gewijzigd worden in je angular.json bestand. Je hoeft alleen wat budgetten toe te voegen, samen met de gewenste waarschuwingen en errors:
Bekijk jouw eigen applicatie bundle size
Als je nieuwsgierig bent naar het checken van jouw bundel size, moet je ‘ng serve’ uitvoeren in de CLI prompt.
Verwijderen van polyfill in productie
Bij het verbeteren van de prestaties, kwam het Angular-team erachter dat veel developers (ik noem geen namen) een polyfill met reflectiemetadata gebruikten (bedoeld voor development) in productie. De polyfill komt in Angular 7 niet meer beschikbaar in productie.
Angular 7: Geruchten & Nepnieuws
In april verschenen er artikelen met nepnieuws over wat er in Angular 7 nieuw zou zijn. Helaas begreep niet iedereen deze grap en doken er blogartikelen op met onjuiste functies die in Angular 7 zouden komen. We sommen hier enkele functies op die niet in Angular 7 zitten. Mocht je dus een artikel tegenkomen die dit wel vertelt, laat het de schrijver dan weten.
- Nieuwe ng-compiler
- @angular/core splitting
- @aiStore. Dit zou een op AI gebaseerde opslag worden die compatibel is met de eerder gemaakte ngrx code base.
- @angular/mine. Een npm package, waarmee je met behulp van je app prestaties Bitcoins zou kunnen minen.
Onze Angular Developers zijn Angular 7 nog verder aan het ontdekken. De developers van System4 werken graag met de nieuwste technieken en willen deze technieken ook zo snel mogelijk toepassen in innovatieve projecten. Ben jij een Angular Developer en weet jij all ins & outs van het Angular framework? Neem contact met ons op. We leren graag van anderen. Misschien ook wel andersom?