Hva er inne i Angular 8?

Innhold

• 01. Kjør en versjonskontroll
• 02. Installer kantet
• 03. Lag et prosjektskjelett
• 04. Sele differensialbelastning
• 05. ... og se resultatene
• 06. Gyte en webarbeider
• 07. Utforsk koden
• 08. Sett opp stillas
• 09. Ikke bekymre deg for mangelen på konstruktør
• 10. Utfør en liten kompileringskjøring
• 11. ... og finn utdataene
• 12. Kom deg på jobb
• 13. Utforsk Ivy
• 14. Prøv modifisert behandling
• 15. Nyt forbedret migrasjon
• 16. Utforsk arbeidsområdekontroll
• 17. Akselerere prosessen
• 18. Unngå vandrende døde
• 19. Se på endringsloggen

Angular 8 er den siste versjonen av Googles Angular - en av de beste JavaScript-rammene rundt. I denne artikkelen vil vi gå gjennom det som er spesielt med Angular 8, og vise deg hvordan du kommer i gang. Først en kort tilbakeblikk på hva som har skjedd med rammeverket så langt.

Angular innføring førte til et paradigmeskifte i nettutvikling: mens de fleste biblioteker begrenset seg til å gi støtte til utviklere med relativt begrenset arkitektonisk innvirkning, gikk Angular sitt utvikler team i den andre retningen. Produktet deres tvinger deg til å bruke en bestemt arkitektur, med avvik som spenner fra vanskelig til kommersielt meningsløs. Faktisk går de fleste vinkelkoder gjennom en relativt kompleks transpileringsverktøyskjede før den noen gang treffer nettleseren.

På grunn av den enorme suksessen til Angular, både innenfor og utenfor Google Inc, har utviklingen - stort sett - stabilisert seg. Dette betyr at kodeendringene er få, mens de halvårlige oppgraderingene fokuserer på å tilpasse rammeverket til endringer i nettlesingslandskapet.

I tilfelle Angular 8, for eksempel, blir en ny JavaScript-kompilator distribuert (om enn fortsatt eksperimentelt). Det optimaliserer generert kompatibilitetskode for å bli betydelig mindre og raskere på bekostning av eldre nettlesere. Videre er Web Worker-støtte integrert for å øke Angulars prosesseringsevne. Kort sagt, det er mye å se - så la oss dykke rett inn.

Hvis du heller vil utforme et nettsted uten kode, kan du prøve en av disse enkle nettstedbyggerne. Og for å få ting til å gå enda glattere, få webhotelltjenesten din riktig.

01. Kjør en versjonskontroll

Angular's verktøykjede lever inne i NodeJS-miljøet. I skrivende stund er Node.js 10.9 eller bedre nødvendig - hvis du befinner deg i en eldre versjon, kan du gå til Node.js-nettstedet og få en oppgradering. Koden nedenfor viser versjonsstatus på denne maskinen.

tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0

02. Installer kantet

Angular's verktøykjede ligger i et kommandolinjeprogram som heter ng. Den kan installeres via velkjente NPM.

tamhan @ TAMHAN18: ~ $ sudo npm install -g @ vinkel / cli tamhan @ TAMHAN18: ~ $ ng versjon

Vær forsiktig med å svare på spørsmålet vist på bildet nedenfor.

Å få versjonsinformasjon ut av verktøyet er ganske vanskelig - ikke bare er syntaksen unik, men utdataene er også omfattende (se bildet nedenfor).

03. Lag et prosjektskjelett

ng genererer vinkelstillaset for oss. I de følgende trinnene ønsker vi å legge til ruting, og bruke Sass for CSS-transpilering. Hvis distribusjonen mislykkes av en eller annen grunn, tøm arbeidskatalogen og start på nytt ng med superbrukerrettigheter.

tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng ny arbeidstest

04. Sele differensialbelastning

Den nye versjonen av Angular optimaliserer bakoverkompatibilitetskode for redusert innvirkning - en fil som heter nettleserliste lar deg bestemme hvilke nettlesere som skal støttes. Åpen nettleserliste og fjern ordet ikke foran IE 9 til IE11.

. . . > 0,5% siste 2 versjoner Firefox ESR ikke død IE 9-11 # For støtte for IE 9-11, fjern 'ikke'.

05. ... og se resultatene

Bestill en kompilering av prosjektet, bytt til distribusjonsmappen og rens unødvendige kartfiler.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls

Påkalle treet for å se resultatene - ng oppretter flere versjoner av forskjellige kodefiler (se bildet nedenfor).

06. Gyte en webarbeider

Nettarbeidere lar JavaScript gå inn i den siste grensen for innfødte applikasjoner: massiv parallell behandling av oppgaver. Med Angular 8 kan en webarbeider opprettes rett fra komforten til ng kommandolinjeverktøy.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generer webarbeider myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes) ) UPDATE angular.json (3640 byte)

07. Utforsk koden

ngProduksjonen er sannsynlig å se skremmende ut ved første øyekast. Åpne filen src / app / myworker.worker.ts i en kodeditor av valg avslører kode som du bør kjenne godt fra Webarbeider spesifikasjon. I prinsippet mottar arbeideren meldinger og behandler dem etter behov.

/// referanse lib = "webworker" /> addEventListener (’melding’, ({data}) => {const response = `arbeiderrespons til $ {data}`; postMessage (respons);});

08. Sett opp stillas

Vinkelapplikasjoner består av komponenter. Avfyring av vår webarbeider gjøres best inne i AppComponent, som utvides til å omfatte en lytter til OnInit begivenhet. Foreløpig vil den bare avgi statusinformasjon.

importer {Component, OnInit} fra ‘@ vinkel / kjerne’; @Component ({..}) Eksportklasse AppComponent implementerer OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}

09. Ikke bekymre deg for mangelen på konstruktør

Erfarne TypeScript-utviklere spør seg selv hvorfor koden vår ikke bruker konstruktøren som tilbys av programmeringsspråket. Årsaken til det er at ngOnInit er en livssyklushendelse som blir sparket når en initialiseringshendelse finner sted - dette trenger ikke å være korrelert med klasseanrop.

10. Utfør en liten kompileringskjøring

På dette tidspunktet er programmet klart til å kjøres. Vi vil utføre den fra serveren inne i ng, som kan påberopes via serverkommandoen. Et pent aspekt ved denne tilnærmingen er at programmet oppdager endringer og kompilerer prosjektet på nytt.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve

Ta en titt på figuren for å se dette i aksjon på bildet nedenfor.

11. ... og finn utdataene

ng server putputs adressen til den lokale webserveren, som vanligvis er http: // localhost: 4200 /. Åpne websiden og åpne utviklerverktøyene for å se statusutdataene. Husk det console.log sender ut data til nettleserkonsollen og lar konsollen til NodeJS-forekomsten være uberørt.

12. Kom deg på jobb

På dette tidspunktet oppretter vi en forekomst av arbeideren og gir den en melding. Resultatene vises deretter i nettleserkonsollen.

if (typeof Worker! == ’undefined’) {// Opprett en ny const worker = ny Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’side fikk melding: $ {data }’); }; worker.postMessage (’hei’); } annet {console.log ("Ingen arbeidstakersupport"); }

13. Utforsk Ivy

Fremtidige versjoner av Angular vil bruke en mer avansert kompilator, noe som fører til enda mindre visninger. Selv om produktet ikke er ferdig ennå, kan et eføy-aktivert skjelett gytes via ng nytt eføy-prosjekt - aktiver-eføy. Alternativt kan du endre kompilatorinnstillingene som vist i kodebiten.

"angularCompilerOptions": {"enableIvy": true}

Et ord av advarsel: Ivy fører til fantastiske størrelsesreduksjoner, men det er ikke gratis. Produktet har ennå ikke stabilisert seg, så det anbefales ikke å bruke det i produktive miljøer.

14. Prøv modifisert behandling

Angular’s ng kommandolinjeverktøyet brukte barneskripter internt i noen tid. Angular 8 øker ante ved at du nå også kan bruke dette anlegget til å kjøre dine egne oppgaver når applikasjonen din blir samlet og samlet.

"arkitekt": {"build": {"builder": "@ angular-devkit / build-angular: browser",

En pen applikasjon av ng skript innebærer direkte opplasting av applikasjoner til skytjenester. Git-depotet gir et nyttig skript som laster opp arbeidet ditt til en Firebase-konto.

15. Nyt forbedret migrasjon

Utviklere som migrerer vekk fra Angular 1.x, også kjent som AngularJS, har hatt en god del problemer med å få navigatøren til å fungere rett i 'kombinerte' applikasjoner. Den nye Unified Location Service har som mål å gjøre denne prosessen jevnere.

16. Utforsk arbeidsområdekontroll

Store prosjekter drar nytte av muligheten til å endre arbeidsområdestrukturen dynamisk. Dette gjøres via den nye Workspace API introdusert i Angular 8.0 - utdraget som følger med dette trinnet gir en rask oversikt over oppførselen.

async-funksjon demonstrere () {const host = arbeidsområder. createWorkspaceHost (ny NodeJsSyncHost ()); const arbeidsområde = venter på arbeidsområder. readWorkspace (’bane / til / arbeidsområde / katalog /’, vert); const project = workspace.projects. få (’min-app’); const buildTarget = project.targets. få (’bygge’); buildTarget.options.optimization = true; avvente workspaces.writeWorkspace (arbeidsområde, vert); }

17. Akselerere prosessen

Å bygge store JavaScript-kodebaser blir kjedelig. Fremtidige versjoner av AngularJS vil bruke Googles Bazel-byggesystem for å akselerere prosessen - dessverre var det i skrivende stund ikke klart for primetime.

18. Unngå vandrende døde

Selv om Google tar ekstrem forsiktighet for ikke å bryte koden, må noen funksjoner bare fjernes ettersom de ikke lenger er nødvendige. Sjekk denne avskrivningslisten for å lære mer om funksjoner som bør unngås.

19. Se på endringsloggen

Som alltid kan en artikkel aldri gjøre rettferdighet til en hel utgivelse. Heldigvis gir denne endringsloggen en detaljert liste over alle endringene - bare hvis du noen gang har lyst til å sjekke pulsen til en funksjon som er spesielt kjær for deg.

Har du mange filer klare for opplasting til nettstedet ditt? Sikkerhetskopier dem i den mest pålitelige skylagringen.

Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesign Webdesigner.