Szögletes: A mai munkaerőpiac egyik legnépszerűbb front end eszköze

Mint mindannyian tudjuk, az Angular a legtöbbet szó a frontend fejlesztői világban. Ezekben az években nagy népszerűségre tett szert. Az Angular sok frontend fejlesztő választásává válik, és én is közéjük tartozom.

Ebben a cikkben kiemelem, hogy mikor jött a szögletes és milyen gyorsan nőtt piaczá. Félévente érkezik az Angular csapat a szögletes új verziójával, amely új funkciókkal erősebbé teszi. Értékelnem kell a szögletes csapatot csodálatos erőfeszítéseikért.

Nos, most izgatott lehet, hogyan fejlődött, milyen új funkciókkal bővült a különböző verziókban. Most vége a várakozásnak. Kezdjük el!

Mielőtt továbblépnék, szeretném tudatni olvasóimmal, hogy az 'Angular 8' a legújabb verzió, amelyet tehetséges szögletes csapatunk kiadott.

Hős születése (AngularJS) - 2010

2010-ben született meg a mai piaci hős. 'AngularJS' néven ismert.

Az AngularJS egy Javascript keretrendszer, amelyet a Google fejlesztett ki. Egyoldalas alkalmazás (SPA) készítésére használják. Várjon! Remélem, tudja, mi az a SPA. Ha nem, kérdezze meg a Google-t erről, majd térjen vissza, mivel ez az egyik gyönyörű megközelítés, amelyet szögletesen alkalmaz, de itt van egy rövid bevezető a SPA-ból (aki tudja, kihagyhatja):

A SPA vagy az Single page alkalmazás olyan alkalmazás, amelyben mindent egy mozdulattal letölthet. Az összes szükséges kód egy mozdulattal letölthető. A többoldalas alkalmazástól eltérően nem kell weboldalt kérnie a szervertől minden egyes találathoz és az oldal betöltéséhez. A SPA-ban az index.html fájl egyszer letölti az összes tartalmat, majd minden URL-változás után a meglévő weboldal dinamikusan betölti az igényes tartalmat. Ez a megközelítés jobb felhasználói élményt nyújt a különböző oldalak közötti váltásban, és érzi az alkalmazást.

Ennyit a SPA-ról. Remélem, hogy rövid képet ad róla. Térjünk át az eredeti témára.

Az AngularJS lehetővé teszi a fejlesztők számára a webalkalmazások gyorsabb fejlesztését. Ügyféloldali renderelést alkalmaz - egy olyan technikát, amelyben a tartalom renderelését az ügyfél (böngésző) gondoskodja. Nos, nem részletezem, mi az előnye és hátránya ennek a technikának, de a legfőbb gond ebben a technikában a SEO. Ez a szögletes felhasználás a SEO-ban gyenge. Várjon! Ne gondolja, hogy a szögletes rossz. Nagyon népszerű a bollywoodi párbeszéd - „Kép abhi baki hai mere dost (A film még hátra van, barátom)”. Úgy gondolom, hogy ez a párbeszéd megfelel a jelenlegi helyzetnek. Megbeszélem, miért mondtam ezt.

Most az AngularJS jellemzőire kell összpontosítanunk. Itt van néhány :

1) Adatkötés  - automatikus szinkronizálás a modell és a nézet között.

2) Dependency Injection System  - olyan tervezési minta, amelyben a rendszer az objektum létrehozásakor ellátja a függő objektumokat.

3) hatókör  - amely gondoskodik az irányítóról és a nézetről.

4) Szolgáltatások  - információk megosztására az alkalmazás különböző részei között.

5) Irányelvek  - Szuper hatalmat ad a HTML-nek. Például ng-model, ng-app.

6) Vezérlők  - az alkalmazás szíve, ahol a logika található.

7) Sablon  - nézet, amely információt ad a vezérlőnk és a modellünk segítségével.

Ez a lista hosszú. Nem térek ki részletesen az angularJS-re, de az angularJS-ben a vezérlők jelentik az alkalmazás szívét. Nos, az angularJS számos funkcióval érkezett egy erőteljes webalkalmazás kifejlesztéséhez, de egy bizonyos ponton kudarcot vallott, például hatalmas csomagméret, teljesítményproblémák, SEO-probléma, kódfenntarthatósági problémák, de ez nem jelenti azt, hogy teljes kudarcról van szó. Az adatkötés, a függőségi injekció fogalmai szögletes sikerek. Ezért azt mondhatjuk, hogy ez félig kudarc és fél siker.

Az AngularJS hiányossága arra késztette a szögletes csapatot, hogy a teljes keretet a nulláról írja át. A keretrendszer / könyvtár új verziójának ilyen nagy változásával még soha nem találkoztunk a piacon. Az angular új verziója teljesen eltér az AngularJS-től. Miben más? Értsük meg, ha belemerülünk a következő altémába.

Szögletes 2–2016

Az AngularJS későbbi verziója 2016-ban jelent meg a piacon, akkor ez már nem volt ismert AngularJS néven. 'Szögletes' nevet kapott. Az Angular 1.x verzió AngularJS néven ismert. A 2.x utáni későbbi verzió Angular néven ismert. Amikor webfejlesztési utamon találkoztam ezzel a két szóval. Szó szerint azt gondoltam, hogy ez két különböző keretrendszer, és egy kutatás után megismertem, hogy az angularJS frissített változata. Remélem, olvasóim nem értették volna félre.

Az Angular 2 drasztikus változásokkal került piacra. A legnagyobb változás a gépírás bevezetése volt. A gépírás a javascript halmaza további funkciókkal, például a Hoppá fogalmakat követi, erősen beírva. Az objektumorientált világból érkező programozók a javascripttel ellentétben jobban ismerik.

Az alkatrészek a szögletes 2+ világ szívét jelentik. Az Angular különféle csomagokat vezetett be az alapvető és fontos funkciók elérése érdekében, például útválasztási csomag az útvonalak egyszerű meghatározásához, http-csomag az adatok lekéréséhez a szerverről, animációs csomag animációkhoz és így tovább.

Az Angular 2 olyan irányelv-koncepciót is kínál, mint az AngularJS. Az irányelvek szuperhatalmakat adnak HTML-fájljainknak, mint például a * ngFor, * ngIf (strukturális irányelv) dinamikussá teszi html-jünket, míg az attribútum-irányelvek, mint például az ngModel (kétirányú adatkötéshez), az ngStyle gondoskodik a DOM megjelenéséről és viselkedéséről.

Egy másik jellemző, amely szögben nem változik, az a DI rendszert is használja. Az angularJS-hez hasonlóan a DI-rendszer is a függő objektumokat (függőségeket) szállítja az alkatrészhez.

Várjon! Elfelejtettem mesélni a csodálatos segítő kézről, amelyik szögletes, melyik szögletes. Nagyszerű segítő kéz, amely segít az alkalmazásunk gyorsabb fejlesztésében, például az összetevők előállításához, csak használja az 'ng gc component-name' szót ('g' generál, a 'c' pedig komponens). Ez egy másik hűvös szolgáltatás, amelyet szögletesen adtak hozzá.

Ez nem a vég. Mondtam, hogy az angularjs legnagyobb hátránya, hogy gyenge a SEO-ban, és emlékezzen arra a híres párbeszédre, amelyet mondtam. Néhány perc múlva meg fogja érteni, miért használtam ezt.

A legnagyobb hátrány, hogy az angularJS gyenge a SEO-ban. Az oldalforrás megtekintésekor láthatja, hogy semmi (nincs HTML) teszi a robotokat arra, hogy haszontalannak gondolják a weboldalt, azaz mindenféle információ nélkül. Nagyon fájdalmas, amikor webhelye azt akarja, hogy a google robotok indexeljék őket, és arra késztessék őket, hogy a google keresésben az élen járjanak, de nem tudták elérni. A szögletes csapat gondoskodott róla, és bevezetett egy szögletes univerzált, amely gondoskodik a szögletes webhely SEO-ról. A kiszolgálóoldali renderelést használja, amely viszont megoldja a SEO problémáját.

Ezek azok a jellemzők, amelyekkel a szögletes 2 piacra került.

Szögletes 4 - 2017. március

Az altéma elolvasása után felmerülhet a kérdés, hogy miért nem az Angular 3? Ez egy gyakori kérdés, amely bárki számára felmerülhet. Ne aggódj! Majd tudatom veled. Az ok, hogy miért nem szögletes 3, a router csomag miatt volt. A szögletes útválasztó csomag már v3-ként volt terjesztve. A félreértések elkerülése érdekében a szögletes csapat kiadta a szögletes 4-es verziót. Azt hiszem, most olvasóim megismerhetik a 4-es szög jellemzőit.

Az Angular 4 hibajavításokkal és egyéb új funkciókkal és fejlesztésekkel érkezett. A legnagyobb javulás a köteg méretében történt. 60% -kal csökkentették a csomag méretét, ami viszont könnyebbé tette az alkalmazást, és ezzel csökkentette az alkalmazás betöltési idejét.

A másik dolog animációs csomagban történt. Kihúzták az animációs funkciót külön csomagban- @ angular / animations.

További javulás volt a strukturális irányelvek terén. * ngIf jött egy másik része ebben a verzióban.

Ez a 4-es szög jellemzőinek rövid bemutatása.

Angular 5 - 2017. nov

Hat hónap elteltével a szögletes csapat egy újabb új verzióval érkezett, azaz az 5-ös szöggel. Ez a szögletes 5-ös verzió sok új funkcióval, fejlesztéssel és hibajavítással érkezett.

Mivel minden weboldal fő gondja a gyorsabb betöltési idő. Az Angular ebben a verzióban is gondoskodott róla. Az alkalmazás teljesítményének fokozása érdekében bevezették a build optimalizálót. Ez egy olyan eszköz, amelyet kis csomagméret készítéséhez vezettek be. Fa remegési technikával távolítja el az elhalt kódot az alkalmazásból.

Fordítói fejlesztések is történtek, amelyek gyorsabbá teszik az alkalmazás újjáépítését.

A másik bevezetett funkció az állapotátviteli kulcs volt (TransferStateKey, amely a platform / böngésző csomag része). Jól! Gondolhatod, mi ez? Mikor kell használni? SSR-t használva kihasználhatja ennek a szolgáltatásnak a szépségét. Igen, ha implementálta az SSR-t, akkor az állapotátviteli kulcs funkciót kell használnia. Azért mondtam ezt, mert amikor SSR-t használsz, és az alkalmazásod bármilyen HTTP-kérést ad (ami meglehetősen gyakori), akkor ez a kérés kétszer lesz meghívva, azaz az egyik a szerveren, a másik a böngészőben. Ez villódzási problémát okoz (ezt a villódzó problémát átéltem az alkalmazásomban, mert a HTTP-kérés kétszer is meghívott). Az államátviteli kulcs funkciónak köszönhetően. Ez a szolgáltatás arra készteti a böngészőt, hogy a kiszolgálón eltalált HTTP-kérelem válaszát használja.Azt a választ használja, amelyet a szerver a HTTP-kérésből kap. Ahogy a neve is mutatja, a szerver a válasz állapotát html-rel továbbítja a böngészőbe. Így elkerülhető a HTTP kérés kétszeres elütése.

Egy másik fejlesztés a http kliens csomagban történt. Ebben a verzióban a HTTPClientModule olyan fejlesztésekkel érkezett, mint a modul használata, a fejlesztőknek nem kell térképen elemezniük a választ. Az elemzési lépésre már nincs szükség. Tegyük fel, hogy van nem JSON típusú válasz, akkor megadhatja azt a választ a HTTP-kérésben a responseType használatával.

Ez az 5-ös szög jellemzőiről szól. Most eljött az ideje, hogy a szögletes 6-os verzióra lépjünk. Újabb hat hónap elteltével a 6-os szögletes, nagyobb erővel került piacra.

Szögletes 6 - 2018. május

2018 májusában - alig fél év elteltével - a szögletes csapat kiadta a szögletes másik - szögletes 6 - verzióját. Ez a verzió sok új funkcióval is rendelkezett. Felsorolok néhányat közülük.

Ebben a verzióban a szögletes CLI frissült. Új parancsokat vezettek be, mint például az ng update. A szögletes projektfüggőségek legfrissebbre frissítéséhez használhatja. Például:

frissítés @ szögletes / mag

A másik fejlesztés az RxJS könyvtárban volt, amelyet RxJS6-nak hívtak. A két fontos változás a következő volt:

  1. Az RxJS6 új belső csomagstruktúrát vezetett be.
  2. Operátorok használata.

Az új belső csomagstruktúra megváltoztatja a csomagok importálásának módját. A kapcsolódó import helyett ebben az esetben egyetlen importálást használhatunk. Például :

importálja az {Observable} fájlt az 'rxjs / Observable' fájlból; importálja a (z) {Subject} fájlt az 'rxjs / Subject' fájlból; import 'rxjs / add / operator / map';

Most az rxjs6-tal:

import {Megfigyelhető, Tárgy} az 'rxjs' fájlból; importálja a {map} fájlt az 'rxjs / operators' fájlból;

Az operátorok használata a 6-os szögben is megváltozik. Például:

Régi verzió:

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

Új verzió:

importálja a {map} fájlt az 'rxjs / operators' fájlból; this.http.get (url) .pipe (térkép ((adatok) => adatok * 2)

Remélem, megkapta az RxJS könyvtárban végrehajtott változtatásokat.

Egy másik változás - az angular-cli.json helyébe az angular.json lép. Ez a fájl meghatározza a projekt konfigurációját, például stílusokat, szkripteket, tesztelést, összeállítási folyamatot és így tovább. Az angular.json fájlban további konfigurációs lehetőségek jelennek meg, például több projekt konfigurálása is elvégezhető.

A további fejlesztések - mostantól elérhető. Változik a szolgáltatások elérhetővé tételének módja az előző verzióhoz hasonlóan, ha a szolgáltatást teljes alkalmazásban vagy egy adott komponensben szeretnénk elérhetővé tenni - szolgáltató tömbben kell megadnunk, de ebben a verzióban ott a szolgáltatás fájlban a rendelkezésre álló 'biztosítottIn' metaadatok. Itt adhatja meg a szolgáltatások elérhetőségét. Alapértelmezés szerint a szolgáltatást root szinten teszi elérhetővé.

Egy másik szépség, amelyet hozzáadnak, egy „szögletes elem” csomag. Ez a csomag lehetővé teszi a fejlesztők számára, hogy a szögletes összetevőt egy másik környezetben (nem szögletes környezetben), például a Vue.js-ben használják. Ez egy másik érdekes tulajdonság, amely arra készteti, hogy szögletes alkatrészeit más környezetben használja

Ez mind a 6-os szögletes tulajdonságairól szól, amelyeket megtanultam. Most a legutóbbi változat jellemzőit fogom megvitatni, melyik az - Angular 7

Szögletes 7. - 2018. október

2018 októberében egy újabb, több szépséggel rendelkező változat került a piacra.

A hozzáadott funkciók a CLI-felszólítások, a virtuális görgetés, a fogd és vidd, valamint a csomagcsomag csökkentése volt. A CLI-felszólításokban az angular-cli olyan lehetőségekről kérdez, mint amikor új alkalmazást készít új alkalmazásnév használatával. A CLI megkérdezi, hogy hozzá akarja-e adni az útválasztási fájlt vagy sem, és így tovább. Van olyan költségvetési tulajdonság is hozzáadva az angular.json fájlba, amelyben megadhatja a maximális és a legkisebb költségkeret-értéket.

Ez a szögletes 7 jellemzőjéről szól. Tudom, hogy a 7-es szög összes többi jellemzőjét nem mondtam meg, mert nem mentem bele ezekbe a jellemzőkbe. Ezért nem kényelmes ezekről beszélni. Azt is tudjuk, hogy az Angular 8 verzió kiadásra került, de ugyanazon ok miatt, hogy nem térek ki az angular 8 jellemzőire, nem írtam róla.

Megjegyzés olvasóimnak: Lehet, hogy sok funkciót hagytam, de mindent megtettem, hogy röviden írjak a különböző verziók jellemzőiről (Nem lehet felsorolni az összes szolgáltatást, de kipróbáltam azokat a szolgáltatásokat, amelyeket olvastam utam során), de örülnék, ha olvasóim megjegyzést fűzhetnek azokhoz a funkciókhoz, amelyeket megtanultak útjuk során.

Köszönöm, hogy elolvasta.