Kulmikas: Matka nykypäivän työmarkkinoiden suosituimmista käyttöliittymätyökaluista

Kuten me kaikki tiedämme, Angular on eniten keskusteltu sana frontend-kehitysmaailmassa. Se on saanut paljon suosiota näinä vuosina. Angularista tulee monien käyttöliittymäkehittäjien valinta, ja olen myös yksi heistä.

Tässä artikkelissa korostan, milloin kulmikas tuli ja kuinka nopeasti se kasvoi markkinoiksi. Puolen vuoden välein Angular-tiimillä on uusi kulma-versio, mikä tekee siitä tehokkaamman uusilla ominaisuuksilla. Minun on arvostettava kulmaryhmää heidän upeista ponnisteluistaan.

No, nyt saatat olla innoissaan siitä, miten se kehittyi, mitä uusia ominaisuuksia lisättiin eri versioihin. Nyt odotus on ohi. Aloitetaan!

Ennen eteenpäin siirtymistä haluaisin kertoa lukijoilleni, että Angular 8 on viimeisin versio, jonka lahjakas kulmaryhmämme julkaisi.

Sankarin syntymä (AngularJS) - 2010

Vuonna 2010 syntyi tämän päivän markkinakangelo. Se tunnettiin nimellä 'AngularJS'.

AngularJS on Javascript-kehys, jonka Google on kehittänyt. Sitä käytetään yhden sivun sovelluksen (SPA) tekemiseen. Odota! Toivon, että tiedät mikä on SPA. Jos ei, kysy Googlelta ja palaa sitten takaisin, koska tämä on yksi kauniista lähestymistavasta, jota kulmikas käyttää, mutta tässä on lyhyt SPA-intro (ne, jotka tietävät, voit ohittaa):

SPA tai Single page -sovellus on sovellus, jossa kaikki ladataan yhdellä kertaa. Kaikki tarvittavat koodit ladataan yhdellä kertaa. Toisin kuin monisivuinen sovellus, sinun ei tarvitse pyytää verkkosivua palvelimelta jokaisesta osumasta ja lataamaan sivun. SPA: ssa index.html-tiedosto ladataan kerran koko sisällön kanssa ja sitten jokaisesta URL-muutoksesta nykyinen verkkosivusto lataa vaativan sisällön dynaamisesti. Tämä lähestymistapa antaa paremman käyttömukavuuden eri sivujen välillä vaihdettaessa ja antaa sinulle tunteen sovelluksesta.

Se on SPA: sta. Toivon, että se antaa sinulle lyhyen kuvan siitä. Siirrytään alkuperäiseen aiheeseen.

AngularJS antaa kehittäjille mahdollisuuden kehittää verkkosovelluksia nopeammin. Se käyttää asiakaspuolen mallinnusta - tekniikkaa, jossa asiakas (selain) huolehtii sisällön renderoinnista. No, en aio mennä yksityiskohtiin siitä, mitkä ovat tämän tekniikan edut ja haitat, mutta tärkein huolenaihe tässä tekniikassa on SEO. Tämä kulmikas käyttötapa on heikko SEO: ssä. Odota! Älä ajattele, että kulma on huono. Bollywoodissa käydään erittäin suosittua vuoropuhelua - "Kuva abhi baki hai mere dost (elokuva on vielä jäljellä, ystäväni)". Mielestäni tämä vuoropuhelu sopii nykytilanteeseen. Keskustelen miksi sanoin tämän.

Nyt meidän tulisi keskittyä AngularJS: n ominaisuuksiin. Tässä on joitain:

1) Tietojen sidonta  - automaattinen synkronointi mallin ja näkymän välillä.

2) Riippuvuusinjektiojärjestelmä  - suunnittelumalli, jossa järjestelmä toimittaa riippuvat objektit, kun se luo objektin.

3) soveltamisala  - joka huolehtii ohjaimesta ja näkymästä.

4) Palvelut  - tietojen jakamiseen sovelluksen eri osien välillä.

5) Direktiivit  - Se antaa supervoimaa HTML: lle. Esimerkiksi ng-malli, ng-sovellus.

6) Ohjaimet  - logiikan sisältävän sovelluksen sydän.

7) Malli  - näkymä, joka antaa tietoja ohjaimen ja mallin avulla.

Tämä luettelo on pitkä. En mene yksityiskohtiin kulma-JS: stä, mutta kulma-JS: ssä ohjaimet ovat sovelluksen ydin. No, angularJS: llä oli paljon ominaisuuksia tehokkaan verkkosovelluksen kehittämiseen, mutta se epäonnistui jossain vaiheessa, kuten valtava nippukoko, suorituskykyongelmat, SEO-ongelmat, koodin ylläpidettävyysongelmat, mutta se ei tarkoita, että se olisi täydellinen epäonnistuminen. Tietojen sitominen, riippuvuuden injektiokäsitteet ovat kulmien menestys. Siksi voimme sanoa, että se on puoliksi epäonnistuminen ja puoliksi menestys.

AngularJS: n epätäydellisyys sai kulmikkaan tiimin kirjoittamaan koko kehyksen tyhjästä. Tällaista suurta muutosta minkä tahansa kehyksen / kirjaston uudessa versiossa ei koskaan tapahtunut markkinoilla. Uusi kulmaversio eroaa täysin AngularJS: stä. Kuinka se on erilainen? Ymmärretäänpä sukeltamalla seuraavaan ala-aiheeseemme.

Kulma 2–2016

Myöhempi versio AngularJS: stä tuli markkinoille vuonna 2016, Sitten sitä ei enää tunnettu nimellä AngularJS. Se sai nimen 'Kulmikas'. Angular 1.x -versio tunnetaan nimellä AngularJS. Myöhempi versio 2.x: n jälkeen tunnetaan nimellä Angular. Kun tapasin nämä kaksi sanaa verkkokehitysmatkallani. Ajattelin kirjaimellisesti, että nämä ovat kaksi erilaista kehystä, ja tutkimuksen jälkeen sain tietää, että kulma on päivitetty versio angularJS: stä. Toivon, että lukijani eivät olisi ymmärtäneet sitä väärin.

Angular 2 tuli markkinoille dramaattisten muutosten myötä. Suurin muutos oli konekirjoituksen käyttöönotto. Typescript on javascriptin yläjoukko lisäominaisuuksilla, kuten se seuraa voimakkaasti kirjoitettua oho-käsitteitä. Kohdekeskeisestä maailmasta tuleva ohjelmoija löytää sen tutummaksi toisin kuin javascript.

Komponentit ovat kulmikkaan 2+ maailman sydän. Angular esitteli useita paketteja perustoimintojen ja tärkeiden toimintojen saavuttamiseksi, kuten reitityspaketti reittien määrittelemiseksi helposti, http-paketti tietojen noutamiseksi palvelimelta, animaatiopaketti animaatioita varten ja niin edelleen.

Angular 2 tarjoaa myös direktiivikäsitteen, kuten AngularJS. Direktiivit antavat supervoimia HTML-koodillemme, kuten * ngFor, * ngIf (rakennedirektiivi) tekee html-tiedostostamme dynaamisen, kun taas attribuuttidirektiivit, kuten ngModel (kaksisuuntaiseen datan sitomiseen), ngStyle huolehtii DOM: n ulkoasusta ja toiminnasta.

Toinen ominaisuus, joka ei muutu kulmassa, on se, että se käyttää myös DI-järjestelmää. Kuten kulmikasJS, DI-järjestelmä toimittaa riippuvat objektit (riippuvuudet) komponentille.

Odota! Unohdin kertoa teille upeasta avustavasta kädestä, jonka kulma tarjoaa, mikä on kulma-cli. Se on hieno avustava käsi, joka auttaa meitä kehittämään sovelluksemme nopeammin, kuten komponentin luomiseen, käytä vain 'ng gc komponentin nimi' ('g' on generoitu ja 'c' on komponentti). Tämä on toinen viileä ominaisuus, joka on lisätty kulmaksi.

Tämä ei ole loppu. Sanoin teille, että angularjsin suurin haittapuoli on se, että se on huono SEO: ssä ja muista se kuuluisa vuoropuhelu, jonka sanoin. Ymmärrät muutamassa minuutissa, miksi käytin sitä.

Suurimmat haitat ovat, että angularJS on heikko SEO: ssä. Kun tarkastelet sivulähdettä, näet, ettei mikään (ei html) saa indeksoijat ajattelemaan verkkosivustoa hyödyttömäksi eli ilman mitään tietoa. On erittäin tuskallista, kun verkkosivustosi haluaa google-indeksoijien indeksoivan ne ja saavan heidät saavuttamaan Google-haun kärjen, mutta ei onnistunut. Kulmaryhmä huolehti siitä ja esitteli kulmaisen universalin, joka huolehtii kulmasivustosi SEO: stä. Se käyttää palvelinpuolen hahmonnusta, mikä puolestaan ​​ratkaisee SEO-ongelman.

Näiden ominaisuuksien avulla kulma 2 tuli markkinoille.

Kulma 4 - maaliskuu 2017

Luettuasi ala-aiheen saatat ihmetellä, miksi et Angular 3? Tämä on yleinen kysymys, joka voi tulla kenenkään mieleen. Älä huoli! Kerron sinulle sitten. Syy miksi ei kulmikas 3 johtui reititinpaketista. Kulmareititinpaketti oli jo jaettu nimellä v3. Sekaannusten välttämiseksi kulmaryhmä julkaisi kulmikkaan 4 version. Luulen, että lukijani voivat nyt ymmärtää kulma 4: n ominaisuuksia.

Angular 4: n mukana tuli virhekorjauksia ja muita uusia ominaisuuksia ja parannuksia. Suurin parannus, joka tehtiin, oli kimpun koko. Ne pienensivät kimpun kokoa 60%, mikä puolestaan ​​kevensi sovellusta ja siten sovelluksen latausaika lyheni.

Toinen asia, joka tehtiin, oli animaatiopaketti. He vetivät animaatio-ominaisuuden erilliseen pakettiin - @ kulma / animaatiot.

Toinen parannus oli rakennedirektiivissä. * ngIf mukana tuli muu osa tässä versiossa.

Tämä on lyhyt esittely kulma 4: n ominaisuuksista.

Kulma 5 - marraskuu 2017

Kuuden kuukauden kuluttua kulmaryhmälle tuli toinen uusi versio, kulmikas 5. Tässä kulmikkaassa 5-versiossa oli jälleen paljon uusia ominaisuuksia, parannuksia ja virhekorjauksia.

Jokaisen verkkosivuston päähuolena on nopeampi latausaika. Angular huolehti siitä myös tässä versiossa.Sovellusten suorituskyvyn parantamiseksi he esittivät rakennuksen optimoijan - Se on työkalu, joka otettiin käyttöön pienen nippukoon valmistamiseksi. Se käyttää puun ravistustekniikkaa kuolleen koodin poistamiseksi sovelluksesta.

Lisäksi tehtiin kääntäjäparannuksia, jotka nopeuttavat sovelluksen uudelleenrakentamista.

Toinen käyttöön otettu ominaisuus oli tilansiirtoavain (TransferStateKey, joka on osa alustaa / selainpakettia). Hyvin! Saatat ajatella, mikä se on? Milloin käyttää? Voit käyttää tämän ominaisuuden kauneutta sovelluksessasi, jos käytät SSR: ää. Kyllä, jos olet ottanut käyttöön SSR: n, sinun on käytettävä tilansiirtoavaimen ominaisuutta. Syy miksi sanoin tämän, koska kun käytät SSR: ää ja sovelluksesi tekee HTTP-pyyntöjä (mikä on melko yleistä), tämä pyyntö tulee olemaan kutsuttava kaksi kertaa eli yksi palvelimelle ja toinen selaimelle. Tämä aiheuttaa välkkyvän ongelman (olen käynyt läpi tämän välkkyvän ongelman sovelluksessani, koska HTTP-pyyntö vetoaa kaksi kertaa). Kiitos valtion siirtoavaimen ominaisuuden. Tämä ominaisuus saa selaimen käyttämään HTTP-pyynnön vastausta, joka osuu palvelimelle.Se käyttää vastausta, jonka palvelin saa HTTP-pyynnöstä. Kuten nimestään käy ilmi, palvelin siirtää vastaustilan html-muodossa selaimeen. Siksi kaksi kertaa HTTP-pyynnön osuminen voidaan välttää.

Toinen parannus, joka tehtiin, oli http-asiakaspaketti. Tässä versiossa HTTPClientModule sisälsi parannuksia, kuten tämän moduulin käyttäminen, kehittäjien ei tarvitse jäsentää vastausta kartalla. Jäsennysvaihetta ei enää tarvita. Oletetaan, että jos vastausta ei ole JSON-tyyppinen, voit määrittää vastauksen HTTP-pyyntösi responseType-parametrilla.

Tässä on kyse kulma 5: n ominaisuudesta. Nyt on aika siirtyä kulma 6 -versioon. Uuden kuuden kuukauden kuluttua kulmikas 6 tuli markkinoille tehokkaammin.

Kulma 6 - toukokuu 2018

Toukokuussa 2018 - juuri kuuden kuukauden kuluttua kulmaryhmä julkaisi toisen kulmaisen version - kulma 6. Tässä versiossa oli myös paljon uusia ominaisuuksia. Luettelon joitain niistä.

Tässä versiossa kulmikas CLI päivitettiin. Uusia komentoja esiteltiin kuten ng update. Voit päivittää kulmaprojektiriippuvuutesi uusimpiin käyttämällä sitä. Esimerkiksi:

päivitys @ kulma / ydin

Toinen parannus, joka tehtiin, oli RxJS-kirjastossa nimeltä RxJS6. Kaksi tärkeää muutosta olivat:

  1. RxJS6 esitteli uuden sisäisen pakettirakenteen.
  2. Operaattoreiden käyttö.

Uusi sisäinen pakettirakenne sisältää muutoksia pakettien tuontitapaan. Liittyvän tuonnin sijaan voimme käyttää tässä yksittäistä tuontia. Esimerkiksi :

tuo {Observable} tiedostosta 'rxjs / Observable'; tuo {Subject} kohteesta "rxjs / Subject"; tuo 'rxjs / add / operator / map';

Nyt rxjs6: n kanssa:

tuo {havaittava, aihe} rxjs: stä; tuo {map} tiedostosta 'rxjs / operators';

Operaattorin käyttöä muutetaan myös kulmassa 6. Esimerkiksi:

Vanha versio:

tuo 'rxjs / add / operator / map'; this.http.get (url) .map ((vastaus) => response.json)

Uusi versio:

tuo {map} tiedostosta 'rxjs / operators'; this.http.get (url) .pipe (kartta ((data) => data * 2)

Toivon, että sait muutokset, jotka tehdään RxJS-kirjastossa.

Toinen muutos on - kulma-cli.json korvataan kulmalla.json. Tämä tiedosto määrittelee projektin kokoonpanon, kuten tyylit, komentosarjat, testauksen, rakennusprosessin ja niin edelleen. Tiedostossa angular.json lisätään lisää vaihtoehtoja kokoonpanoon, kuten useiden projektien kokoonpano voidaan tehdä.

Muut parannukset ovat nyt saatavilla. Palvelujen saatavuuden asettamisessa käytettäväksi on muutettu, kuten edellisessä versiossa, jos haluamme tarjota palvelun saataville koko sovelluksessa tai tietyissä komponenteissa - meidän on tarjottava se palveluntarjoajaryhmässä, mutta tässä versiossa itse palvelutiedostossa on sille saatavilla oleva 'nosacIn' metatieto. Voit määrittää siellä palvelujen saatavuuden. Oletuksena se tarjoaa palvelun saataville juuritasolla.

Toinen lisätty kauneus on 'kulmikas elementti' -paketti. Tämän paketin avulla kehittäjät voivat käyttää kulmakomponenttiasi toisessa ympäristössä (ei-kulmaympäristössä), kuten Vue.js. Se on toinen mielenkiintoinen ominaisuus, joka saa sinut käyttämään kulmakomponenttiasi muussa ympäristössä

Tämä koskee kulma 6: n ominaisuuksia, jotka opin. Nyt keskustelen viimeisimmän version ominaisuudesta - Angular 7

Kulma 7 - lokakuu 2018

Lokakuussa 2018 markkinoille tuli toinen versio, jossa oli enemmän kauneutta.

Lisätyt ominaisuudet olivat CLI-kehotteet, virtuaalinen vieritys, vetäminen ja pudottaminen ja uudelleen niputtaminen koon pienentämiseksi. CLI-kyselyissä kulma-cli kysyy vaihtoehdoista, kuten kun teet uuden sovelluksen käyttämällä uutta sovelluksen nimeä. CLI kysyy haluatko lisätä reititystiedoston vai ei, ja niin edelleen. Angular.json-tiedostoon on myös lisätty budjettiominaisuus, jossa voit määrittää budjettisi suurimman ja pienimmän koon arvon.

Tässä on kyse kulma 7: n ominaisuudesta. Tiedän, että en ole ilmoittanut kaikkia muita kulma 7: n ominaisuuksia, koska en ole perehtynyt niihin ominaisuuksiin, joten en ole mukava puhua niistä. Tiedämme myös, että Angular 8 -versio julkaistaan, mutta samasta syystä, koska en mene kulma 8: n ominaisuuksiin, en ole kirjoittanut siitä.

Huomautus lukijoilleni: Olen saattanut jättää monia ominaisuuksia, mutta yritin parhaani mukaan kirjoittaa eri versioiden ominaisuuksista lyhyesti (kaikkia ominaisuuksia ei ole mahdollista luetella, mutta kokeilin mitä tahansa ominaisuuksia, jotka luin matkan aikana), mutta olen olisi hienoa, jos lukijani voisivat kommentoida niitä ominaisuuksia, jotka he löysivät oppimismatkallaan.

Kiitos lukemisesta.