Puuttuva johdatus kulmallisiin ja moderneihin kuvioihin

Kulma (alias Angular 2, 4, 5, 6…) on uusi kehys, joka on kokonaan kirjoitettu alusta alkaen, korvaa nyt tunnettu AngularJS-kehys (alias Angular 1.x).

Enemmän kuin vain kehys, Angularia olisi pidettävä kokonaisena alustana, joka toimitetaan täydellisellä työkalusarjalla, kuten omalla CLI: llä, vianetsintäapuohjelmilla tai suoritustyökaluilla.

Angular on ollut olemassa jo jonkin aikaa, mutta minusta tuntuu edelleen, ettei se saa ansaitsemansa rakkautta, luultavasti muiden kentällä toimivien pelaajien, kuten React tai VueJS, vuoksi. Vaikka näiden kehysten takana oleva yksinkertaisuus voi ehdottomasti olla houkuttelevaa, mielestäni niistä puuttuu mikä on välttämätöntä suurten, yritysluokan sovellusten tekemisessä: vankka kehys johtamaan sekä kokeneita kehittäjiä että aloittelijoita samaan suuntaan sekä työkalujen, kuvioiden rationaalinen lähentyminen ja dokumentaatio. Kyllä, kulmikas oppimiskäyrä saattaa tuntua hieman jyrkkä, mutta se on ehdottomasti sen arvoista.

Päästä alkuun

Tulokas

Jos olet uusi kulmikkaassa, saatat tuntea itsesi tyrmistyväksi uusien käsitteiden määrän suhteen, joten kannattaa aloittaa tästä asteittaisesta opetusohjelmasta, ennen kuin tutkit asiakirja-aineistoa, joka opastaa sinua askel askeleelta kokonaisen kulma-sovelluksen rakentamiseen.

KulmikasJS-veteraani

Jos olet kotoisin AngularJS: stä ja haluat kaivaa suoraan uutta versiota, haluat varmasti katsoa AngularJS vs Angular -pikaoppaan.

Lunttilappu

Haluat ehkä pitää tämän, kunnes tiedät täydellisen kulmikkaan sovellusliittymän
cheatsheet, joka jatkaa syntaksia ja ominaisuuksia yhdellä sivulla käsillä.

Tyyliopas

Hyviä uutisia, joukkue on kirjoittanut virallisen kulmatyylin oppaan.

Pelkästään koodaussääntöjen lisäksi tämä tyyliopas antaa myös neuvoja ja parhaita käytäntöjä hyvästä sovellusarkkitehtuurista ja on tärkeä lukema aloittelijoille. Syvemmälle lukemalla voit löytää jopa monia selityksiä joillekin kehyksen suunnitteluvalinnoista.

Ohje

Kulmassa on paljon kaivaa, ja jotkut kysymykset häiritsevät usein ihmisiä. Itse asiassa suurin osa epäselvistä asioista näyttää liittyvän moduuleihin, esimerkiksi pelättyyn "Ydin vs. jaetut moduulit" -kysymykseen.

Angularin kaverit ovat ehkä huomanneet, että koska löydät nyt mukavan UKK: n heidän verkkosivustoltaan], joka vastaa kaikkiin moduulien yleisiin kysymyksiin. Älä epäröi katsoa asiaan, vaikka luuletkin olevan riittävän kokenut Angular : n kanssa

Mennään syvemmälle

Vaikka ne eivät ole pakollisia, Angular on suunniteltu käyttämään suunnittelumallit, joihin et ehkä ole tottunut, kuten reaktiivinen ohjelmointi, yksisuuntainen tiedonkulku ja keskitetty tilahallinta.

Näitä käsitteitä on vaikea jatkaa muutamassa sanassa, ja huolimatta tiiviistä suhteesta toisiinsa, ne koskevat sovellusvirran tiettyjä osia, joista jokaisella on melko syvä oppia yksinään.

Löydät täältä lähinnä luettelon hyvistä lähtökohdista oppia lisää näistä aiheista.

Reaktiivinen ohjelmointi

Et ehkä tiedä sitä, mutta Angular on nyt rakenteeltaan reaktiivinen järjestelmä. Vaikka sinua ei pakoteta käyttämään reaktiivisia ohjelmointimalleja, ne muodostavat kehyksen ytimen, ja on ehdottomasti suositeltavaa oppia ne, jos haluat hyödyntää parhaiten kulmaista.

Kulma käyttää RxJS: ää havainnollistavan kuvion toteuttamiseen.

Observable on asynkronisten tapahtumien virta, jota voidaan käsitellä matriisimaisten operaattoreiden kanssa.
Esimerkki havaittavissa oleva tapahtumavirta

Lupauksista havaittavissa oleviin

Vaikka AngularJS luottaa aiemmin voimakkaasti lupauksiin käsitellä asynkronisia tapahtumia, havainnoitavia käytetään nyt sen sijaan kulmikkaana. Vaikka tietyissä tapauksissa, kuten HTTP-pyyntöjen yhteydessä, havainnollistavissa olevat voidaan muuntaa lupaukseksi, suositellaan omaksumaan uusi paradigma, koska se voi tehdä paljon enemmän kuin lupaukset, ja koodilla on vähemmän. Tätä muutosta selitetään myös Kulma-opetusohjelmassa. Kun olet vaihtanut, et koskaan katso enää takaisin.

Oppimisviitteet

  • Mikä on reaktiivinen ohjelmointi?, Selitettiin hienosti yksinkertaisella kuvallisella tarinalla (5 min)
  • Johdatus reaktiiviseen ohjelmointiin, josta puuttuit, otsikko kertoo kaiken (30 min)
  • Toiminnallinen reaktiivinen ohjelmointi Angular 2 -kehittäjille, katso toiminnalliset reaktiiviset ohjelmointiperiaatteet käytännössä Angular-ohjelmalla (15 min)
  • RxMarbles, graafinen esitys Rx-operaattoreista, jotka auttavat suuresti ymmärtämään niiden käyttöä

Yksisuuntainen tiedonkulku

Vastakohtana AngularJS: lle, jossa yksi sen myyntipisteistä oli kaksisuuntainen datasidonta, joka lopulta aiheutti paljon suurta päänsärkyä monimutkaisille sovelluksille, Angular valvoo nyt yksisuuntaista tiedonkulkua.

Mitä se tarkoittaa? Toisin sanoen, se tarkoittaa, että muutosten havaitseminen ei voi aiheuttaa jaksoja, mikä oli yksi AngularJS: n ongelmallisista kohdista. Se auttaa myös ylläpitämään yksinkertaisempia ja ennakoitavissa olevia tiedonkulkuja sovelluksissa sekä parantamaan huomattavasti suorituskykyä.

Yksisuuntainen tiedonkulku

Odota, miksi kulmikkaassa dokumentaatiossa mainitaan kaksisuuntainen sitova syntaksi?

Jos tarkastellaan tarkkaan, uusi kaksisuuntainen sitova syntaksi on vain syntaktista sokeria kahden yksisuuntaisen sidoksen (ominaisuuden ja tapahtuman sitominen) yhdistämiseksi pitäen datavirta yksisuuntaisena.

Tämä muutos on todella tärkeä, koska se on usein aiheuttanut AngularJS: n suorituskykyongelmia, ja se on yksi pilareista, jotka mahdollistavat uuden suorituskyvyn parantamisen uusissa kulmaisissa sovelluksissa.

Vaikka Kulma yrittää pysyä malliagnostiikkana ja sitä voidaan käyttää tavanomaisten MV * -mallien kanssa, se suunniteltiin reaktiivisen ohjelmoinnin mielessä ja todella paistaa, kun sitä käytetään reaktiivisen tiedonkulun kuvioiden, kuten
redux, flux tai MVI.

Keskitetty valtionhallinto

Sovellusten koon kasvaessa kaikkien yksittäisten komponenttien tilan ja tietovirtojen seuraaminen voi olla tylsiä, ja niiden hoitaminen ja virheenkorjaus on yleensä vaikeaa.

Keskitetyn valtionhallinnan käytön päätavoitteena on tehdä tilamuutoksista ennakoitavissa asettamalla tietyt rajoitukset päivitysten tapaukselle ja milloin, käyttämällä yksisuuntaista tiedonkulkua.

Tämä lähestymistapa tehtiin ensimmäistä kertaa suosituksi Reaktin käyttöön ottamalla Flux-arkkitehtuuri. Sitten syntyi monia kirjastoja, jotka yrittivät mukauttaa ja tarkentaa alkuperäistä konseptia, ja yksi niistä sai suuren suosion tarjoamalla yksinkertaisemman, tyylikkään vaihtoehdon: Redux.

Redux on samanaikaisesti kirjasto (iso R) ja suunnittelumalli (pienellä r), jälkimmäinen on runko-agnostinen ja toimii erittäin hyvin Angularin kanssa.

Pelkistysmalli perustuu näihin kolmeen periaatteeseen:

  • Sovellustila on yksi muuttumaton tietorakenne
  • Tilanmuutos laukaistaan ​​toiminnolla, esine, joka kuvaa tapahtunutta
  • Pure toiminnot, joita kutsutaan pelkistimiksi, suorittavat edellisen tilan ja seuraavan toimenpiteen uuden tilan laskemiseksi

Näiden periaatteiden taustalla olevat keskeiset käsitteet selitetään hienosti tässä esimerkissä (3 min).

Pelkistystilan päivitysjakso

Kiinnostuneille redux-malli innoitti erityisesti The Elm Architecture ja CQRS-malli.

Mitä kirjastoa käytetään?

Voit tehdä Kulmasuhteita minkä tahansa haluamasi valtionhallintakirjaston kanssa, mutta sinun kannattaa käyttää NGXS: ää tai @ngrx: ää. Molemmat toimivat samalla tavalla kuin suosittu Redux-kirjasto, mutta tiiviillä integroinnilla Angularin ja RxJS: n kanssa, ja mukana on joitain mukavia lisäkehitysapuohjelmia.

NGXS perustuu samoihin käsitteisiin kuin @ngrx, mutta vähemmän kattilalevyä ja mukavampaa syntaksia, mikä tekee siitä vähemmän pelottelevan.

Jotkut resurssit aloittamiseen:

  • Kulmainen NGXS-opetusohjelma esimerkillä tyhjästä, opastettu opas NGXS: lle (10 min)
  • Luo parempi kulma 2 -sovellus reduxilla ja ngrx: llä, hieno opetusohjelma @ngrx: lle (30 min)
  • Kattava johdanto @ ngrx / kauppaan, perusteellinen kuvaus tämän kirjaston käytöstä kulmassa (60 min)

Milloin sitä käytetään?

Olet ehkä huomannut, että useimmissa aloitusmalleissa ei ole keskitettyä valtionhallintajärjestelmää.
Miksi niin? No, vaikka tämän kuvion käytöstä on monia etuja, valinta on viime kädessä joukkueesi päättämä ja se, mitä haluat saavuttaa sovelluksellasi.

Muista, että yhden keskitilan käyttäminen sovelluksessasi tuo uuden tason monimutkaisuuteen, jota ei välttämättä tarvita tavoitteesta riippuen.

Suorituskyvyn optimointi

Vaikka uusi kulmaversio ratkaisee suunnittelulla suurimman osan suorituskykyongelmista, joita AngularJS: llä voi kokea, parannuksia on aina. Muista vain, että hyvän suorituskyvyn sovelluksen toimittaminen on usein järkevän ja järkevän kehityksen käytäntö.

Tässä on luettelo avainkohdista, joita sinun on tarkistettava sovelluksessasi varmistaaksesi, että tarjoat parhaan mahdollisen kokemuksen asiakkaillesi:

Kun olet käynyt läpi tarkistusluettelon, muista suorittaa myös sivusi tilintarkastus majakan kautta, viimeisimmällä Google-työkalulla, joka antaa sinulle mielekästä tietoa sovelluksesi suorituskyvystä, saavutettavuudesta, mobiiliyhteensopivuudesta ja muusta.

Pidä kulma ajan tasalla

Kulmakehitys etenee nopeasti, ja päivityksiä ydinalueisiin ja työkaluihin työnnetään säännöllisesti.

Onneksi Kulmajoukkue tarjoaa työkaluja, joiden avulla voit seurata päivityksiä:

  • npm run ng update antaa sinun päivittää sovelluksesi ja sen riippuvuudet
  • Kulmapäivityksen verkkosivusto opastaa sinut kulmamuutosten ja siirtojen läpi tarjoamalla vaiheittaiset oppaat versiosta toiseen.

Tämä opas sisältyy kaikkiin ngX-Rocketin tuottamiin kulmaprojekteihin. Jos etsit laajennettavaa, hyvin dokumentoitua, yritysluokan aloituspakettia, sinun tulisi tarkistaa se!