Inhoud
- 01. Voer een versiecontrole uit
- 02. Installeer Angular
- 03. Maak een projectskelet
- 04. Harnas differentieel laden
- 05. ... en zie de resultaten
- 06. Spawn een webwerker
- 07. Onderzoek de code
- 08. Zet steigers op
- 09. Maak je geen zorgen over het gebrek aan constructeur
- 10. Voer een kleine compilatierun uit
- 11. ... en zoek de uitvoer
- 12. Ga aan het werk
- 13. Verken Ivy
- 14. Probeer aangepaste ng-verwerking
- 15. Geniet van verbeterde migratie
- 16. Ontdek de controle over de werkruimte
- 17. Versnel het proces
- 18. Vermijd de wandelende doden
- 19. Bekijk het wijzigingslogboek
Angular 8 is de nieuwste versie van Angular van Google - een van de beste JavaScript-frameworks die er zijn. In dit artikel bespreken we wat er speciaal is aan Angular 8 en laten we zien hoe u aan de slag kunt. Eerst een korte terugblik op wat er tot nu toe met het framework is gebeurd.
De introductie van Angular leidde tot een paradigmaverschuiving in webontwikkeling: terwijl de meeste bibliotheken zich beperkten tot het bieden van ondersteuning aan ontwikkelaars met een relatief beperkte architectonische impact, ging het ontwikkelteam van Angular in de andere richting. Hun product dwingt je tot het hanteren van een specifieke architectuur, met afwijkingen variërend van moeilijk tot commercieel zinloos. In feite loopt de meeste Angular-code door een relatief complexe transpilatie-toolchain voordat deze ooit de browser raakt.
Door het enorme succes van Angular, zowel binnen als buiten Google Inc, is de ontwikkeling in grote lijnen gestabiliseerd. Dit betekent dat er maar weinig brekende codewijzigingen zijn, terwijl de halfjaarlijkse upgrades gericht zijn op het aanpassen van het raamwerk aan veranderingen in het webbrowserlandschap.
In het geval van Angular 8 wordt bijvoorbeeld een nieuwe JavaScript-compiler ingezet (zij het nog experimenteel). Het optimaliseert de gegenereerde compatibiliteitscode zodat deze aanzienlijk kleiner en sneller is, ten koste van oudere browsers. Bovendien is Web Worker-ondersteuning geïntegreerd om de verwerkingscapaciteit van Angular te vergroten. Kortom, er is veel te zien - dus laten we er meteen in duiken.
Als u liever een site zonder code ontwerpt, kunt u een van deze eenvoudige websitebouwers proberen. En om alles nog soepeler te laten verlopen, zorgt u voor een goede webhostingservice.
01. Voer een versiecontrole uit
De toolchain van Angular leeft in de NodeJS-omgeving. Op het moment van schrijven is Node.js 10.9 of hoger nodig - als je merkt dat je een oudere versie hebt, bezoek dan de Node.js-website en ontvang een upgrade. De onderstaande code toont de versiestatus op deze machine.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Installeer Angular
De toolchain van Angular bevindt zich in een opdrachtregelprogramma met de naam ng. Het kan worden geïnstalleerd via de bekende NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versie
Wees voorzichtig bij het beantwoorden van de vraag in de onderstaande afbeelding.
Versie-informatie uit de tool halen is vrij moeilijk - niet alleen is de syntaxis uniek, maar de uitvoer is ook uitgebreid (zie onderstaande afbeelding).
03. Maak een projectskelet
ng genereert voor ons de Hoekige steiger. In de volgende stappen willen we routing toevoegen en Sass gebruiken voor CSS-transpilatie. Mocht de implementatie om de een of andere reden mislukken, maak dan de werkmap leeg en start opnieuw ng met superuser-rechten.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nieuwe workertest
04. Harnas differentieel laden
De nieuwe versie van Angular optimaliseert achterwaartse compatibiliteitscode voor minder impact - een bestand met de naam browserlijst laat u beslissen welke browsers worden ondersteund. Open browserlijst en verwijder het woord niet voor IE 9 tot IE11.
. . . > 0,5% laatste 2 versies Firefox ESR niet dood IE 9-11 # Voor IE 9-11 ondersteuning, verwijder ’niet’.
05. ... en zie de resultaten
Bestel een compilatie van het project, ga naar de distributiemap en verwijder onnodige mapbestanden.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Roep de boomstructuur op om de resultaten te zien - ng maakt meerdere versies van verschillende codebestanden (zie onderstaande afbeelding).
06. Spawn een webwerker
Webwerkers laten JavaScript de laatste grens van native applicaties betreden: massaal parallelle verwerking van taken. Met Angular 8 kan een webwerker worden gemaakt vanuit het comfort van het ng opdrachtregelprogramma.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng web-worker myworker genereren CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes ) UPDATE angular.json (3640 bytes)
07. Onderzoek de code
ngDe output ziet er op het eerste gezicht waarschijnlijk intimiderend uit. Het bestand openen src / app / myworker.worker.ts in een code-editor naar keuze onthult code die u goed zou moeten kennen uit de WebWorker specificatie. De werknemer ontvangt in principe berichten en verwerkt deze naar behoefte.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Zet steigers op
Hoekige applicaties bestaan uit componenten. Het afvuren van onze webwerker kan het beste gebeuren in de AppComponent, die is uitgebreid met een luisteraar voor de OnInit evenement. Voorlopig zal het alleen statusinformatie uitzenden.
importeer {Component, OnInit} vanuit ’@ angular / core’; @Component ({...}) Exportklasse AppComponent implementeert OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Maak je geen zorgen over het gebrek aan constructeur
Ervaren TypeScript-ontwikkelaars vragen zich af waarom onze code de constructor van de programmeertaal niet gebruikt. De reden daarvoor is dat ngOnInit is een levenscyclusgebeurtenis die wordt geactiveerd wanneer een initialisatiegebeurtenis plaatsvindt - dit hoeft niet te worden gecorreleerd met klasse-aanroep.
10. Voer een kleine compilatierun uit
Op dit moment is het programma klaar voor gebruik. We zullen het uitvoeren vanaf de server in ng, die kan worden aangeroepen via het serve commando. Een mooi aspect van deze benadering is dat het programma wijzigingen detecteert en het project on-the-fly opnieuw compileert.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Bekijk de afbeelding om dit in actie te zien in de onderstaande afbeelding.
11. ... en zoek de uitvoer
ng serveren put het adres van zijn lokale webserver in, meestal http: // localhost: 4200 /. Open de webpagina en open de ontwikkelaarstools om de statusuitvoer te zien. Houd daar rekening mee console.log voert gegevens uit naar de browserconsole en laat de console van de NodeJS-instantie onaangeroerd.
12. Ga aan het werk
Op dit moment maken we een instantie van de werknemer en geven deze een bericht. De resultaten worden vervolgens weergegeven in de browserconsole.
if (typeof Worker! == ’undefined’) {// Maak een nieuwe const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’pagina heeft bericht: $ {data }’); }; worker.postMessage (’hallo’); } else {console.log ("Geen ondersteuning voor werknemers"); }
13. Verken Ivy
Toekomstige versies van Angular zullen een meer geavanceerde compiler gebruiken, wat leidt tot nog kleinere weergaven. Hoewel het product nog niet af is, kan een skelet met klimop worden uitgezet via ng nieuw klimop-project - enable-klimop. U kunt ook de instellingen van de compiler wijzigen zoals weergegeven in het fragment.
"angularCompilerOptions": {"enableIvy": true}
Een waarschuwing: klimop leidt tot verbazingwekkende verkleining van de afmetingen, maar het is niet gratis. Het product moet nog stabiliseren, dus gebruik in productieve omgevingen wordt niet aanbevolen.
14. Probeer aangepaste ng-verwerking
Angular's ng opdrachtregelprogramma gebruikte al enige tijd intern kindscripts. Angular 8 verhoogt de ante doordat u deze mogelijkheid nu ook kunt gebruiken om uw eigen taken uit te voeren terwijl uw applicatie wordt samengesteld en gecompileerd.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Een mooie applicatie van ng scripts omvat het rechtstreeks uploaden van applicaties naar cloudservices. De Git-repository biedt een handig script dat uw werk uploadt naar een Firebase-account.
15. Geniet van verbeterde migratie
Ontwikkelaars die weggingen van Angular 1.x, ook bekend als AngularJS, hebben een groot aantal problemen gehad om de navigator direct te laten werken in ’gecombineerde’ applicaties. De nieuwe Unified Location Service heeft tot doel dit proces soepeler te laten verlopen.
16. Ontdek de controle over de werkruimte
Grote projecten profiteren van de mogelijkheid om de structuur van de werkruimte dynamisch te veranderen. Dit wordt gedaan via de nieuwe Workspace API die is geïntroduceerd in Angular 8.0 - het fragment bij deze stap geeft een snel overzicht van het gedrag.
async-functie demonstr () {const host = workspaces. createWorkspaceHost (nieuwe NodeJsSyncHost ()); const workspace = wacht werkruimten. readWorkspace (’pad / naar / werkruimte / map /’, host); const project = workspace.projects. get (’mijn-app’); const buildTarget = project.targets. get (’build’); buildTarget.options.optimization = true; wacht op workspaces.writeWorkspace (workspace, host); }
17. Versnel het proces
Het bouwen van grote JavaScript-codebases wordt vervelend. Toekomstige versies van AngularJS zullen het Bazel-buildsysteem van Google gebruiken om het proces te versnellen - helaas was het op het moment van schrijven nog niet klaar voor primetime.
18. Vermijd de wandelende doden
Hoewel Google er uiterst zorgvuldig op let om de code niet te breken, moeten sommige functies eenvoudigweg worden verwijderd omdat ze niet langer nodig zijn. Bekijk deze lijst met waardeverminderingen voor meer informatie over functies die moeten worden vermeden.
19. Bekijk het wijzigingslogboek
Zoals altijd kan één artikel nooit recht doen aan een volledige release. Gelukkig biedt dit wijzigingslogboek een gedetailleerde lijst van alle wijzigingen - voor het geval je ooit zin hebt om de polsslag te controleren van een functie die je bijzonder dierbaar is.
Staat er veel bestanden klaar om naar uw site te uploaden? Maak er een back-up van in de meest betrouwbare cloudopslag.
Dit artikel is oorspronkelijk gepubliceerd in een creatief webdesignmagazine Webdesigner.
