Articles

szögletes egyoldalas Alkalmazások( SPA): milyen előnyökkel jár?

október 13, 2020 by admin

ebben a bejegyzésben lefedjük a spa architektúra elfogadásának fő előnyeit, miközben szögletes alkalmazásainkat építjük, és válaszolunk néhány nagyon gyakori kérdésre a gyógyfürdőkkel kapcsolatban.

Ez a bejegyzés része a folyamatban lévő szögletes kezdőknek sorozat, itt van a teljes sorozat:

szögletes kezdőknek útmutató-első lépések (beállítási környezet)
szögletes kezdőknek útmutató: miért szögletes?, A legfontosabb előnyök
Angular kezdőknek útmutató-komponensek vs Irányelvek
miért egyetlen oldal alkalmazás, milyen előnyökkel jár? Mi a gyógyfürdő?

miért a SPA architektúra?

kezdjük az első kérdéssel: Miért egyoldalas Alkalmazások (gyógyfürdők)? Az ilyen típusú alkalmazások már évek óta léteznek, de még nem váltak széles körben elterjedté a nyilvános interneten.

és miért?

ennek mind jó oka, mind pedig még jobb oka van annak, hogy miért változhat ez a közeljövőben.,

a gyógyfürdőket az elmúlt években sokat fogadták el a SaaS (szoftver mint szolgáltatás) platformok vagy általában az internetes szolgáltatások privát műszerfal részének építésére, valamint vállalati adatközpontú és űrlapintenzív alkalmazások építésére.

de az Angular akkor érvényesíti-e alkalmazásainkat gyógyfürdőként?

a válasz nem, nem, de ez egy érdekes lehetőség, amelyet hoz, tekintettel az alkalmazás ilyen módon történő felépítésének számos előnyére. Amely elvezet minket egy kulcsfontosságú kérdés:

miért akar építeni egy alkalmazást, mint egy SPA?,

ezt gyakran magától értetődőnek tekintik. Mindenki így épít alkalmazásokat, de mi ennek a nagy előnye? Legalább néhány gyilkos tulajdonságnak kell lennie, igaz?

kezdjük egy olyan funkcióval, amelyet gyakran nem említenek: termelési telepítés.

a gyógyfürdő használatának előnyei a termelésben valójában megválaszolják a kulcskérdést is:

mi az egyetlen oldal alkalmazás?

néha a szoftverfejlesztésben a neveket nem választják ki jól, ami sok zavart okozhat., Természetesen nem ez a helyzet a SPA kifejezéssel: egyetlen oldalas alkalmazásnak szó szerint csak egy oldala van !! 😊

Ha egy oldalas alkalmazást szeretne látni akcióban, Felkérem Önt, hogy menjen át az AngularUniv https://angular-university.io oldalra, majd kattintson a kezdőlapra a legújabb kurzusok listáján, valamint a felső menüben.

Ha elkezd navigálni körül, látni fogja, hogy az oldal nem töltődik be teljesen – csak az új adatok kerülnek elküldésre a vezetéket, mint a felhasználó navigál az alkalmazáson keresztül – ez egy példa egy oldal alkalmazás.,

hadd adjak magyarázatot arra, hogy mi az előnye egy ilyen alkalmazás építésének, és hogyan működik ez egyáltalán.

a Chrome Dev eszközök segítségével vizsgáljuk meg az indexet.az AngularUniv weboldal html-je, amelyet letöltenek a kezdőlapra (vagy bármely más oldalra, ha navigál, majd a Frissítés gombra kattint).

a letöltött oldal az első kérés, amelyet a Chrome hálózati lap panelen fog látni – ez az alkalmazás szó szerint egyetlen oldala.

vegyünk észre egy dolgot – ez az oldal szinte üres! Kivéve a címkét, itt nem sok folyik.,

Megjegyzés: a tényleges honlapján az oldal letöltött is HTML-ben előre nyújtott, a szerver használatával Szögletes Egyetemes

Figyeljük meg a nevét, a CSS pedig a Javascript csomag: a CSS-t, sőt, a Javascript alkalmazás (amely magában foglalja a Szögletes) nem is ugyanattól a szerver, mint a index.html – ez egy teljesen más statikus szerver:

ebben Az esetben, a két csomag valóban jött egy Amazon S3 vödör!,

azt is vegye figyelembe, hogy a kötegek neve verzióra van módosítva: tartalmazza azt az időbélyeget, amelyen a telepítési építést végrehajtották, amely az alkalmazás ezen verzióját telepítette.

az egyoldalas Alkalmazások termelési telepítési előnyei

a fent látott forgatókönyv valójában egy nagyon jó előnye az egyoldalas alkalmazásoknak:

az egyoldalas alkalmazások rendkívül könnyen telepíthetők a gyártásban, sőt a verzióra is idővel!,

egy oldalas alkalmazás szuper egyszerű telepíteni, ha összehasonlítjuk a hagyományos szerver oldali renderelt alkalmazások: ez tényleg csak egy index.html fájl, egy CSS köteg és egy Javascript csomagot.

Ezek a 3 statikus fájlok feltölthetők bármilyen statikus tartalomszerverre, például Apache, Nginx, Amazon S3 vagy Firebase Hosting.

persze az alkalmazás kell, hogy hívja a backend, hogy az adatok, de ez egy külön szerver építeni lehet, ha szükséges, egy teljesen más technológia: mint Csomópont, Java vagy PHP.,

valójában, ha a REST API-t vagy más típusú backend-et építenénk a Node-ban, akkor még a Typescript-ben is felépíthetjük, így ugyanazt a nyelvet használhatjuk mind a kiszolgálón, mind az ügyfélen, sőt még egy kódot is megoszthatunk közöttük.

Single Page Application Versioning in Production

a frontend egyetlen oldalas alkalmazásként történő telepítésének másik előnye a verzió és a visszagörgetés. Mindössze annyit kell tennünk, hogy a verzió a build kimenet (amely létrehozza a CSS és JS kötegek kiemelve sárga felett).,

konfigurálhatjuk a SPA-t kiszolgáló kiszolgálót egy olyan paraméterrel, amely meghatározza a frontend alkalmazás melyik verzióját: ez ilyen egyszerű!

Az ilyen típusú telepítési skálák nagyon jól működnek: az olyan statikus tartalomszerverek, mint az Nginx, nagyon sok felhasználó számára skálázhatók.

természetesen ez a fajta telepítés és verziókészítés csak az alkalmazás frontend részére érvényes, ez nem vonatkozik a backend szerverre. De mégis, ez egy fontos előnye, hogy.

de a termelési telepítés az egyetlen előnye az egyoldalas alkalmazásoknak?, Persze, hogy nem, itt van egy másik fontos előny:

Egy Oldal Alkalmazások vagy a Felhasználói Élmény

Ha valaha régen egy web alkalmazás, amely folyamatosan újratöltése mindent a szerver szinte minden felhasználói interakció, akkor tudni fogja, hogy ez a fajta alkalmazás ad egy szegény felhasználói élmény miatt:

az állandó teljes lap letöltése
is köszönhető, hogy a hálózati oda-vissza utak, hogy a szerver, hogy hozzon hogy a HTML.,

egyetlen oldal alkalmazásban megoldottuk ezt a problémát egy alapvetően eltérő építészeti megközelítés alkalmazásával:

egy gyógyfürdőben, a kezdeti oldal betöltése után, nincs több HTML küld a hálózaton keresztül. Ehelyett csak az adatokat kérik a kiszolgálótól (vagy elküldik a kiszolgálónak).

tehát amíg egy SPA fut, csak az adatok kerülnek elküldésre a huzalon keresztül, ami sokkal kevesebb időt és sávszélességet igényel, mint a HTML folyamatos küldése. Vessünk egy pillantást a típusú hasznos teher, hogy megy át a vezetéket általában egy SPA.,

például az AngularUniv SPA-ban, ha rákattint egy kurzusra, akkor a HTML nem kerül elküldésre a huzalon. Ehelyett kapunk egy Ajax kérést, amely JSON hasznos terhet kap az összes kurzusadattal:

amint láthatjuk, a kurzus HTML verziója sokkal nagyobb méretű lenne, mint egy egyszerű JSON objektumhoz képest az összes nyitó és záró címke miatt, de sok duplikált HTML is van, ha folyamatosan hasonló oldalakat töltünk be újra és újra.

például az olyan dolgok, mint a fejlécek vagy az oldal láblécei, folyamatosan elküldésre kerülnek a böngészőbe, de ezek nem igazán változtak.,

tehát ezzel itt van egy második nagy előnye egy oldal alkalmazásnak: sokkal jobb felhasználói élmény a kevesebb teljes oldal újratöltése és a jobb általános teljesítmény miatt, mivel kevesebb sávszélességre van szükség.

akkor miért nem használjuk a gyógyfürdőket mindenhol?

Ha a Gyógyfürdőknek annyi előnye van, miért nem fogadták el őket nagyobb léptékben a nyilvános interneten? Ennek jó oka van.

egészen a közelmúltig a Google-hoz hasonló keresőmotoroknak nehéz volt helyesen indexelni egyoldalas alkalmazást. De mi van ma?,

a múltban volt néhány ajánlás egy speciális Ajax feltérképezési rendszer használatára, amelyet időközben elavult. Tehát a Google most képes teljes mértékben megjeleníteni az Ajaxot?

egy hivatalos bejelentésben azt az információt kapjuk, hogy a Google search általában képes feltérképezni az Ajax-ot, de vannak olyan jelentések, amelyek szerint még nem képes erre.

és az ajánlás az, hogy inkább progresszív fejlesztést alkalmazzunk. Tehát mit jelent ez, ebben a szakaszban lehetséges a fürdők használata a nyilvános interneten,vagy még nem?

keresőbarát gyógyfürdők?,

lehetséges, hogy a teljesítmény és a felhasználói élmény egy SPA együtt jó SEO tulajdonságok: a használata a szögletes univerzális pre-renderelő motor lehetővé teszi számunkra, hogy:

pre-render egy alkalmazás a backend
hajó a HTML a böngésző együtt Angular
és Angular bootstrap a kliens oldalon, és vegye át az oldalt a SPA

lesz SPAs gyakoribbak a jövőben?,

Képzeljünk el egy SEO barát változata Amazon, amely nem frissíti magát minden oldalon újratöltés, és egy sokkal jobb teljesítményt és felhasználói élményt: ez valószínűleg egy hatalmas pozitív hatással van az idő az ügyfelek töltenek az oldalon!

tehát a SEO-barát gyógyfürdők technikai előnyei jelentősek, sőt még inkább mobilon, és arra számítunk, hogy az ilyen típusú SEO-barát SPA alkalmazások a jövőben gyakoribbá válnak a nyilvános interneten is.

de ez a szakasz utolsó kérdését továbbra sem válaszolja meg., Ebben a szakaszban gondolkodnia kell az utolsó néhány szakasz elolvasása után:

Ha csak minimális HTML van betöltve a kiszolgálóról indításkor, akkor hogyan változik az oldal az idő múlásával?

ami a szakasz utolsó kérdéséhez vezet, talán a legfontosabb:

hogyan működik az egyoldalas alkalmazás?

valóban, hogyan működhetnek, mert csak nagyon kevés HTML-t töltöttünk be a szerverről? Az alkalmazás elindítása után csak az adatok mennek át a huzalon. Tehát hogyan származik az új HTML?,

mert valahol új HTML-t kell generálni, mivel ez az egyetlen módja annak, hogy a böngésző megváltoztassa azt, amit megjelenít, ugye?

a válasz egyszerű, és annak köze van ahhoz, ahogyan az egyoldalas alkalmazások ténylegesen működnek a hagyományos szerver alapú alkalmazásokhoz képest.

egy hagyományos alkalmazáson (amely magában foglalja a mai nyilvános Internet túlnyomó részét), a HTML-transzformáció (vagy renderelés) adatait a szerver oldalon végezzük.,

másrészt az egyoldalas alkalmazások sokkal másképp csinálják:

egy SPA-ban az alkalmazás indítása után a HTML átalakítási folyamat adatait áthelyezték a szerverről az ügyfélre-a SPAs-K egyenértékűek a böngészőben futó sablonmotorral!

így ezzel az információval a kezében, zárjuk le ezt a részt az egyoldalas alkalmazások legfontosabb pontjainak összefoglalásával.,– Előnye, Gyógyfürdők, illetve a Kulcs Fogalma Arról, Hogyan Működnek

az Épület az alkalmazást, mint a GYÓGYFÜRDŐ ad nekünk egy jelentős számú előnyök:

már képes lesz arra, hogy egy sokkal jobb tapasztalat, hogy a felhasználó
Az alkalmazás fogja érezni, gyorsabb, mert kevesebb sávszélességet használják, nem teljes oldal frissítése jelennek meg, mint a felhasználó között navigál az alkalmazás
Az alkalmazás sokkal könnyebb lesz telepíteni a termelés, legalábbis az ügyfél részéről: szükségünk van egy statikus szerver szolgálja, minimum 3 fájlok: az egyetlen oldal index.,html, egy CSS csomag és egy Javascript csomag.
a kötegeket szükség esetén több részre is feloszthatjuk a kód felosztásával.
A frontend része az alkalmazás nagyon egyszerű változat a termelés, amely lehetővé teszi az egyszerűsített kiépítés legyen megszorítás, hogy korábbi változata a frontend ha szükséges,

ez csak egy lehetséges telepítési forgatókönyv Gyógyfürdők a termelés.,

Egyéb Termelési Forgatókönyvek

Egyéb forgatókönyvek közé előfeldolgozási nagy része az alkalmazást, majd a feltöltés minden statikus tárhely szerver memória cache a szerveren csak bizonyos oldalakat, mit verziószámozás segítségével DNS, stb.

a mai egyszerűbb, mint valaha, hogy SEO-barát gyógyfürdők, így valószínűleg nőtt elfogadása a jövőben, olyan forgatókönyvekben, ahol gyógyfürdők nem gyakran használják.,

a gyógyfürdők működésének módja

az, hogy az egyoldalas alkalmazások ezeket az előnyöket hozzák, kapcsolódik ahhoz, ahogyan belsőleg működnek:

az Indítás után csak az adatok JSON hasznos adatként vagy más formátumként kerülnek elküldésre a huzalon keresztül. De az alkalmazás futtatása után már nem küld HTML-t vagy CSS-t a huzalon keresztül.,

A lényeg, hogy megértsük, hogy egyetlen oldal alkalmazások működnek a következő:

helyett konvertáló adatok HTML-a kiszolgálón, majd küldje el a vezeték, a GYÓGYFÜRDŐ most költözött, hogy az átalakítási folyamat a szerverről a kliens.

az átalakítás az utolsó másodpercben történik az ügyféloldalon, ami lehetővé teszi számunkra, hogy sokkal jobb felhasználói élményt nyújtsunk a felhasználónak.

remélem, hogy ez meggyőzi Önt a gyógyfürdők előnyeiről., Ha nem kérem, tudassa velem, és miért nem ez a helyzet, így jobban tudok fejleszteni néhány pontot.

Ezen a ponton azonnal meg akarok mutatni néhány kódot. Építsünk egy kis Hello World SPA-t Angularban, és vegyük onnan. Látni fogjuk, hogy az általunk bevezetett fogalmak hogyan mutatják be a térképet a kis alkalmazáshoz, amelyet hamarosan felépítünk.

remélem, hogy ez a bejegyzés segített megérteni a gyógyfürdők legfontosabb előnyeit, és hogy élvezte!,