Kampinis: kelionė į vieną populiariausių „Front End“ įrankių šiandieninėje darbo rinkoje

Kaip visi žinome, „Angular“ yra labiausiai aptariamas žodis „frontend“ plėtros pasaulyje. Šiais metais jis sulaukė didelio populiarumo. „Angular“ tampa daugybės „frontend“ kūrėjų pasirinkimu, ir aš taip pat esu vienas iš jų.

Šiame straipsnyje aš pabrėžiu apie tai, kada atsirado kampas ir kaip greitai jis išaugo į rinką. Per šešis mėnesius „Angular“ komanda ateina su nauja „Angular“ versija, todėl ji tampa galingesnė su naujomis funkcijomis. Turiu įvertinti kampinę komandą už nuostabias pastangas.

Na, dabar jums gali būti malonu, kaip jis vystėsi, kokios naujos funkcijos buvo pridėtos skirtingose ​​versijose. Dabar laukimas baigėsi. Pradėkime!

Prieš žengdamas į priekį, norėčiau pranešti savo skaitytojams, kad „Angular 8“ yra naujausia versija, kurią išleido mūsų talentinga kampuota komanda.

Herojaus gimimas (AngularJS) - 2010 m

2010 m. Gimė šiandieninis rinkos herojus. Tai buvo žinoma kaip „AngularJS“.

„AngularJS“ yra „Javascript“ sistema, kurią sukūrė „Google“. Jis naudojamas vieno puslapio programai (SPA) kurti. Laukti! Tikiuosi, kad žinote, kas yra SPA. Jei ne, paklauskite „Google“ apie tai ir grįžkite, nes tai yra vienas iš gražiausių požiūrių, kuriuos taiko kampinis, tačiau čia yra trumpas SPA įvadas (tie, kurie žino, galite praleisti):

SPA arba vieno puslapio programa yra programa, kurioje viskas atsisiųsta vienu ypu. Visas reikalingas kodas atsisiunčiamas vienu ypu. Skirtingai nuo kelių puslapių programos, nereikia prašyti tinklalapio iš serverio už kiekvieną įvykį ir įkelti puslapį. SPA faile index.html failas atsisiunčiamas vieną kartą su visu turiniu, o po kiekvieno URL pakeitimo esamas tinklalapis dinamiškai įkelia reikiamą turinį. Šis metodas suteikia geresnį „UX“ perjungimą tarp skirtingų puslapių ir leidžia jaustis programai.

Viskas apie SPA. Tikiuosi, kad tai suteiks jums trumpą jo vaizdą. Pereikime prie pradinės temos.

„AngularJS“ leidžia kūrėjams greičiau kurti žiniatinklio programas. Jis naudoja kliento atvaizdavimą - metodą, kai turinio perteikimu rūpinasi klientas (naršyklė). Na, nesigilinsiu, kokie yra šios technikos pliusai ir minusai, tačiau pagrindinis šios technikos rūpestis yra SEO. Šis atvaizdavimas, kurį naudoja kampu, yra menkas SEO. Laukti! Nemanykite, kad kampinis yra blogas. Vyksta labai populiarus Bolivudo dialogas - „Paveikslėlis abhi baki hai mere dost (filmas dar liko, mano drauge)“. Manau, kad šis dialogas tinka dabartinei situacijai. Aptarsiu, kodėl taip sakiau.

Dabar turėtume sutelkti dėmesį į „AngularJS“ ypatybes. Stai keleta :

1) Duomenų susiejimas  - automatinis modelio ir vaizdo sinchronizavimas.

2) Priklausomybės įpurškimo sistema  - dizaino modelis, kuriame sistema tiekia priklausomus objektus, kai sukuria objektą.

3) taikymo sritis  - kuri rūpinasi valdikliu ir vaizdu.

4) Paslaugos  - skirtos dalytis informacija tarp skirtingų programos dalių.

5) direktyvos  - tai suteikia super galios HTML. Pavyzdžiui, „ng-model“, „ng-app“.

6) Valdikliai  - programos, kurioje yra logika, esmė.

7) Šablonas  - rodinys, kuriame pateikiama informacija naudojant mūsų valdiklį ir modelį.

Šis sąrašas ilgas. Nenagrinėsiu kampinio JS, tačiau valdantieji yra programos esmė. Na, „angularJS“ turėjo daug funkcijų, leidžiančių sukurti galingą žiniatinklio programą, tačiau tam tikru momentu nepavyko, pavyzdžiui, didžiulis paketo dydis, našumo problemos, SEO problemos, kodo išlaikymo problemos, tačiau tai nereiškia, kad tai yra visiškas gedimas. Duomenų įpareigojimas, priklausomybės injekcijos sąvokos yra kampinės sėkmės. Taigi galime sakyti, kad tai pusiau nesėkmė ir pusė sėkmės.

„AngularJS“ netobulumas privertė kampinę komandą perrašyti visą karkasą nuo nulio. Tokio didelio bet kokios sistemos / bibliotekos naujos versijos pokyčio rinkoje niekada nebuvo. Nauja kampinio versija visiškai skiriasi nuo AngularJS. Kuo jis kitoks? Supraskime pasinerdami į kitą potemę.

Kampinis 2–2016 m

Vėlesnė „AngularJS“ versija pasirodė rinkoje 2016 m., Tada ji nebebuvo žinoma kaip „AngularJS“. Jis gavo pavadinimą „Kampinis“. „AngularJx“ versija yra žinoma kaip „AngularJS“. Vėlesnė versija po 2.x yra žinoma kaip kampinė. Kai susidūriau su šiais dviem žodžiais savo žiniatinklio kūrimo kelionėje. Aš tiesiog pagalvojau, kad tai yra dvi skirtingos struktūros, ir po tyrimo sužinojau, kad kampinis yra atnaujinta angularJS versija. Tikiuosi, kad mano skaitytojai nebūtų to nesupratę.

„Angular 2“ į rinką atėjo kardinaliai pasikeitus. Didžiausias pokytis buvo įvesta mašinraštis. „Typcriptcript“ yra „javascript“ rinkinys su papildomomis funkcijomis, tokiomis kaip „Oops“, griežtai įvestos. Programuotojams, kurie ateina iš objektinio pasaulio, jis yra labiau pažįstamas, skirtingai nei „javascript“.

Komponentai yra kampinio 2+ pasaulio širdis. „Angular“ pristatė įvairius paketus, skirtus pagrindinėms ir svarbioms funkcijoms pasiekti, pvz., Maršrutų paketas, skirtas lengvai nustatyti maršrutus, http paketas, skirtas duomenims gauti iš serverio, animacijos paketas, skirtas animacijoms ir pan.

„Angular 2“ taip pat pateikia tokią direktyvinę koncepciją kaip „AngularJS“. Direktyvos suteikia didelę galią mūsų HTML, pvz., * NgFor, * ngIf (struktūrinė direktyva) daro mūsų HTML dinamišką, o atributų direktyvos, pvz., NgModel (skirtos dvipusiam duomenų įrišimui), ngStyle rūpinasi mūsų DOM išvaizda ir elgesiu.

Kita savybė, kuri nesikeičia kampu, yra ta, kad ji naudoja ir DI sistemą. Kaip ir kampinis JS, DI sistema tiekia komponentui priklausomus objektus (priklausomybes).

Laukti! Aš pamiršau papasakoti apie nuostabią pagalbos ranką, kuri kampinė teikia kuri yra kampinė-cli. Tai puiki pagalbos ranka, padedanti mums greičiau kurti programą, pavyzdžiui, kuriant komponentą, tiesiog naudokite „ng gc komponento pavadinimą“ („g“ generuoja, o „c“ yra komponentas). Tai dar viena šauni funkcija, pridėta kampu.

Tai dar ne pabaiga. Aš jums sakiau, kad didžiausias angularjs trūkumas yra tas, kad jis yra prastas SEO ir prisiminkite tą garsųjį dialogą, kurį pasakiau. Per kelias minutes suprasite, kodėl aš tuo pasinaudojau.

Didžiausias minusas, kad angularJS yra prastas SEO. Peržiūrėję puslapio šaltinį galite pamatyti, kad nėra nieko (be HTML), dėl kurio tikrintuvai mano, kad svetainė yra nenaudinga, ty be jokios informacijos. Labai skaudu, kai jūsų svetainė nori, kad „Google“ tikrintuvai juos indeksuotų ir priverstų pasiekti „Google“ paiešką į viršų, tačiau to negalėjo pasiekti. Kampinė komanda tuo pasirūpino ir pristatė kampinį universalųjį, kuris rūpinasi jūsų kampinės svetainės SEO. Jis naudoja serverio atvaizdavimą, kuris savo ruožtu išsprendžia SEO problemą.

Tai yra bruožai, kuriais rinkoje pasirodė kampinis 2.

Kampinis 4 - 2017 m. Kovo mėn

Perskaitę potemę, galite pagalvoti, kodėl gi ne „Angular 3“? Tai dažnas klausimas, kuris gali kilti bet kurio žmogaus mintyse. Nesijaudink! Aš tau pranešiu. Kodėl ne kampinis 3, priežastis buvo maršrutizatoriaus paketas. Kampinio maršrutizatoriaus paketas jau buvo platinamas kaip v3. Siekdama išvengti painiavos, kampinė komanda išleido kampinę 4 versiją. Manau, kad dabar mano skaitytojai gali perprasti 4 kampo ypatybes.

„Angular 4“ buvo su klaidų taisymais ir kitomis naujomis funkcijomis bei patobulinimais. Didžiausias patobulinimas buvo paketo dydis. Jie sumažino paketo dydį 60%, o tai savo ruožtu palengvino naudojimą ir sumažino naudojimo laiką.

Kitas dalykas, kuris buvo atliktas, buvo animacijos paketas. Jie ištraukė animacijos funkciją atskirame pakete- @ angular / animations.

Kitas patobulinimas buvo struktūrinės direktyvos srityje. * ngIf šioje versijoje buvo kita dalis.

Tai trumpas kampinio 4 bruožų pristatymas.

Kampinis 5 - 2017 m. Lapkričio mėn

Po šešių mėnesių kampinė komanda pateikė dar vieną naują versiją, ty kampinę 5. Ši kampinė 5 versija vėl pateikė daugybę naujų funkcijų, patobulinimų ir klaidų taisymų.

Kaip pagrindinė kiekvienos svetainės problema yra greitesnis įkėlimo laikas. „Angular“ tuo rūpinosi ir šioje versijoje. Norėdami labiau pagerinti programos našumą, jie pristatė kūrimo optimizavimo priemonę. Tai įrankis, kuris buvo pristatytas norint padaryti nedidelį ryšulio dydį. Jis naudoja medžio purtymo techniką, kad pašalintų negyvą kodą iš programos.

Taip pat buvo atlikti kompiliatorių patobulinimai, kurie leidžia greičiau atkurti programą.

Kita pristatyta funkcija buvo būsenos perdavimo raktas („TransferStateKey“, kuris yra platformos / naršyklės paketo dalis). Na! Galite pagalvoti, kas tai yra? Kada naudoti? Galite naudoti šios funkcijos grožį savo programoje, jei naudojate SSR. Taip, jei įdiegėte SSR, turite naudoti būsenos perdavimo rakto funkciją. Priežastis, kodėl taip sakiau, nes kai naudojate SSR ir jūsų programa pateikia HTTP užklausą (kas yra gana įprasta), ši užklausa bus iškviečiama du kartus, ty vieną serveryje, kitą naršyklėje. Tai sukelia mirgėjimo problemą (aš praėjau šią mirgėjimo problemą savo programoje, nes HTTP užklausa buvo naudojama du kartus). Dėka valstybės perdavimo rakto funkcijos. Ši funkcija suteikia naršyklei galimybę naudoti HTTP užklausos, įvykusios serveryje, atsakymą.Jis naudoja atsakymą, kurį serveris gauna iš HTTP užklausos. Kaip rodo jo pavadinimas, serveris perduoda atsakymo būseną su HTML į naršyklę. Taigi, dvigubo HTTP užklausos įvykio galima išvengti.

Kitas patobulinimas buvo atliktas http kliento pakete. Šioje versijoje „HTTPClientModule“ buvo patobulinta, pvz., Naudojant šį modulį, kūrėjams nereikia analizuoti atsakymo naudojant žemėlapį. Analizavimo žingsnio nebereikia. Tarkime, jei yra ne JSON tipo atsakymas, galite nurodyti tą atsakymą naudodami „responseType“ savo HTTP užklausoje.

Viskas yra apie kampinio 5 ypatybę. Dabar atėjo laikas pereiti prie kampinės 6 versijos. Po dar šešių mėnesių kampinis 6 pasirodė rinkoje, turėdamas daugiau galios.

Kampinis 6 - 2018 m. Gegužės mėn

2018 m. Gegužės mėn., Praėjus vos šešiems mėnesiams, „Angular“ komanda išleido kitą „Angular 6“ versiją. Ši versija taip pat turėjo daug naujų funkcijų. Kai kuriuos iš jų išvardysiu.

Šioje versijoje kampinis CLI buvo atnaujintas. Buvo pristatytos naujos komandos, pvz., Atnaujinimas. Norėdami atnaujinti kampines projekto priklausomybes iki naujausių, galite jas naudoti. Pavyzdžiui:

atnaujinimas @ kampinis / šerdis

Kitas patobulinimas buvo atliktas RxJS bibliotekoje, vadinamoje RxJS6. Du svarbūs pakeitimai buvo:

  1. „RxJS6“ pristatė naują vidinio paketo struktūrą.
  2. Operatorių naudojimas.

Nauja vidinė paketų struktūra apima paketų importavimo būdų pakeitimus. Vietoj susijusio importo galime naudoti vieną importą. Pavyzdžiui :

importuoti {Observable} iš 'rxjs / Observable'; importuoti {Subject} iš 'rxjs / Subject'; importuoti „rxjs / add / operator / map“;

Dabar su „rxjs6“:

importuoti {Observable, Subject} iš 'rxjs'; importuoti {map} iš 'rxjs / operators';

Operatorių naudojimas taip pat keičiamas kampu 6. Pavyzdžiui:

Sena versija:

importuoti „rxjs / add / operator / map“; this.http.get (url) .map ((response) => response.json)

Nauja versija:

importuoti {map} iš 'rxjs / operators'; this.http.get (url) .pipe (žemėlapis ((duomenys) => duomenys * 2)

Tikiuosi, kad turite pakeitimų, kurie atliekami RxJS bibliotekoje.

Kitas pokytis - kampinis-cli.json pakeičiamas kampiniu.json. Šis failas apibrėžia projekto konfigūraciją, pvz., Stilius, scenarijus, testavimą, kūrimo procesą ir pan. Svetainėje angular.json pridedama daugiau konfigūravimo parinkčių, pvz., Galima konfigūruoti kelis projektus.

Kiti patobulinimai yra - dabar yra vietoj. Pasikeitė paslaugų teikimo būdas naudotis, kaip ir ankstesnėje versijoje, jei mes norime, kad paslauga būtų prieinama visoje programoje arba konkrečiame komponente - turime ją pateikti teikėjo masyve, bet šioje versijoje - pačiame paslaugos faile yra „numatyta“ metaduomenys, kurie jam prieinami. Čia galite nurodyti paslaugų prieinamumą. Pagal numatytuosius nustatymus ji teikia paslaugą šakniniu lygiu.

Kitas pridedamas grožis yra „kampinio elemento“ paketas. Šis paketas leidžia kūrėjams naudoti jūsų kampinį komponentą kitoje aplinkoje (ne kampinėje aplinkoje), tokioje kaip „Vue.js“. Tai dar viena įdomi funkcija, leidžianti naudoti kampinį komponentą kitoje aplinkoje

Tai viskas apie kampinio 6 bruožus, kuriuos išmokau. Dabar aptarsiu paskutinės versijos funkciją - „Angular 7“

Kampinis 7 - 2018 m. Spalio mėn

2018 m. Spalio mėnesį į rinką atėjo dar viena versija su daugiau grožio.

Pridėtos funkcijos buvo CLI raginimai, virtualus slinkimas, vilkite ir upuść ir vėl sugrupuotas dydis. CLI raginimuose kampinis „cli“ klausia jūsų, pavyzdžiui, kai kuriate naują programą naudodami naują programos pavadinimą. CLI klausia, ar norite pridėti maršruto failą, ir ne. Taip pat yra biudžeto ypatybė, pridėta angular.json, kurioje galite nurodyti didžiausią ir mažiausią biudžeto dydžio vertę.

Viskas apie 7 kampinio bruožą. Aš žinau, kad nenurodžiau visų kitų 7 kampinio bruožų, nes nesigilinau į šias savybes. Taigi, nepatogu kalbėti apie tuos. Mes taip pat žinome, kad „Angular 8“ versija yra išleista, tačiau dėl tos pačios priežasties, kodėl nesigilinau į „Angular 8“ ypatybes, apie tai nerašiau.

Pastaba savo skaitytojams: galbūt palikau daug funkcijų, bet stengiausi trumpai parašyti apie skirtingų versijų ypatybes (neįmanoma išvardyti visų funkcijų, bet aš išbandžiau visas funkcijas, kurias perskaičiau savo kelionėje), bet aš labai norėčiau, jei mano skaitytojai galėtų pakomentuoti tas savybes, kurias jie rado mokydamiesi.

Ačiū, kad skaitėte.