szerző: Zee Gimon
annyira megszoktuk, hogy online vagyunk, és egy mobiltelefon a kezünkkel, hogy gyakran nem még arra sem kell gondolni, hogy milyen technológia segít nekünk futtatni ezt vagy azt az alkalmazást. Általában ez nem jelent problémát – nem gondolunk az elektromosságra, amikor bekapcsoljuk a lámpákat., Azonban, ha szembe a döntést, hogy hozzon létre egy alkalmazást az üzleti, akkor elősegíti, hogy megértsük, mit jelent SPA (egyoldalas alkalmazás) azt jelenti, és hogyan különbözik a többoldalas Alkalmazások (MPA).
ebben a cikkben arról fogunk beszélni, hogy mi az egyoldalas alkalmazás (SPA), milyen előnyökkel jár a SPA a felhasználók és a vállalkozások számára, hogyan működik a SEO-val, milyen előnyei és hátrányai vannak, végül pedig hogyan működik a SPA olyan technológiákkal, mint a Blazor, az Angular, a React.js, és Vue.js.,
======================
ebben A kérdésben:
- Egyetlen Oldal Definíció Alkalmazás
- Egyetlen Oldal alkalmazásának Előnyei
- Egyetlen Oldal az Alkalmazás Hátránya,
- Egyetlen Oldal Alkalmazás Migrációs Kérdések
- Előnyei GYÓGYFÜRDŐ a Felhasználók számára,
- Előnyei GYÓGYFÜRDŐ a Vállalkozások
- Egyetlen Oldal Alkalmazás Architektúra
- GYÓGYFÜRDŐ, valamint Szögletes, Reagálni.js, Vue.js, és .,NET
======================
mit jelent az egyoldalas alkalmazás, és miért van szükségünk egyoldalas alkalmazásra
az egyoldalas alkalmazás olyan alkalmazás, amelynek használata során nem kell újratöltenie az oldalt, és böngészőn belül működik. Gondolj a napi használt alkalmazásokra: Facebook, Google Maps, Gmail, Twitter, Google Drive vagy akár GitHub. Mindezek példák egy gyógyfürdőre.
a helyesen konfigurált SPA egyik legjobb előnye a felhasználói élmény (UX), ahol a felhasználó az alkalmazás természetes környezetét élvezi anélkül, hogy meg kellene várnia az oldal újratöltését stb., Ön ugyanazon az oldalon marad, amelyet a JavaScript programozási nyelv táplál.
Mielőtt tovább mennénk, három rövidítések látni fogja, hogy ez a cikk:
- GYÓGYFÜRDŐ – egyoldalas alkalmazás (mint már említettük)
- MPA – multi-page alkalmazás (egy hagyományos alkalmazás, amely betölti az új oldal, ha rákattint a hivatkozásra)
- PWA – haladó webes alkalmazás (egy honlapon, hogy épült a JavaScript, vagy a keretek, illetve járhat, mint egy alkalmazást, azaz,, felveheti például a mobiltelefon kezdőlapjára alkalmazásként)
egyoldalas alkalmazás előnyei: Miért használjon egyoldalas alkalmazást?
az egyoldalas alkalmazások fő előnye a sebesség. A legtöbb erőforrás (HTML + CSS + szkriptek)az alkalmazás indításakor kerül betöltésre, a használat során nem kell újratölteni. Az egyetlen dolog, ami megváltozik, az a szerverre továbbított adatok. Ennek eredményeként az alkalmazás nagyon érzékeny a felhasználó lekérdezéseire, nem kell folyamatosan várnia az ügyfél-szerver kommunikációra.,
a Google számos tanulmánya, valamint az olyan vállalatok legfontosabb megállapításai, mint az Amazon és a Wal*Mart, azt mutatják, hogy ha egy oldal betöltése több mint 200 milliszekundumot igényel, akkor potenciálisan tönkreteheti vállalkozását, vagy legalábbis sok pénzt költ. Például az Amazon azt mondja, hogy az oldalterhelés további késleltetésének 1 másodperce az értékesítés 1% – át teszi ki (ami az Amazon értékesítésének összegét figyelembe véve évente 1, 6 milliárd dollár.)
fejlesztői szempontból egy ilyen alkalmazás létrehozása egyszerű és optimalizált., Nem kell kódot írni az oldalak kiszolgálón történő megjelenítéséhez. A fejlesztési folyamat megkezdéséhez nem is kell szerver. Akkor rúgni egy fájlt az induláshoz. Emellett a fejlesztő teljesen újra felhasználhatja ugyanazt a backend szerver oldali kódot, valamint a hatékony API-t a webes alkalmazáshoz, valamint egy natív mobilalkalmazáshoz.
az egyoldalas alkalmazások kiválóak, ha egy fejlesztői csapat dolgozik együtt., Ez lehetővé teszi a backend fejlesztők számára, hogy az API-ra összpontosítsanak, míg a frontend fejlesztői nagyobb figyelmet fordíthatnak a legjobb felhasználói élmény létrehozására a backend API alapján, valamint egy gyönyörű felhasználói felület megvalósítására.
Hibakeresés egyoldalas alkalmazás is könnyű használja a Chrome böngészőt, mivel speciális eszközök Szögletes Batarang Reagál (az alkalmazott technológiák Gyógyfürdők.) Egy konzol segítségével nyomon követheti a hálózati műveleteket, valamint megvizsgálhatja a különböző oldalelemeket és a kapcsolódó adatokat.,
a gyorsítótárazási folyamat is nagyon hatékony – az alkalmazás csak egy kérést küld, az összes továbbított adatot tárolja, ezeket az adatokat felhasználhatja. Ez különösen fontos azokban az időkben, amikor a felhasználó rossz kapcsolat – s/ő továbbra is használhatja az alkalmazást, mivel ez szinkronizálva van a szerver, amikor a kapcsolat javul.
már említettük progresszív Web Apps (PWA) felett, gyógyfürdők könnyen átalakítható egy PWA. Ez viszont lehetővé teszi a fejlesztők számára, hogy helyi gyorsítótárazást biztosítsanak, valamint offline élményt nyújtsanak az ügyfeleknek és a felhasználóknak.,
egyoldalas alkalmazás hátrányai: miért nem egyetlen oldal alkalmazás?
az egyoldalas alkalmazások minden előnye ellenére semmi sem tökéletes. Nézzük meg azokat az időket, amikor a gyógyfürdő nem lehet ideális megoldás.
mit értünk egyoldalas alkalmazás hátrányai alatt?
az egyoldalas alkalmazások jelentősebb terhelést jelentenek a böngészőre. Például, ha a felhasználók alacsony fogyasztású eszközökkel rendelkeznek, akkor a sebesség szempontjából rossz alkalmazásélményük lesz.
további JavaScript problémák merülnek fel, mert meg kell győződnie arról, hogy nincs memória szivárgás., Mivel az alkalmazás futhat hosszú ideig-óra egy időben (szemben az MPA, ahol az élettartama egy oldal számított perc), meg kell győződnie arról, hogy a SPA nem fogyaszt több memóriát, mint amennyire szüksége van. Ellenkező esetben a gyors betöltésű oldalak örömét megsemmisíti a Felhasználó eszközén nem elérhető memória lassúsága.
a JavaScript még egy hátránya, hogy a felhasználók egyszerűen letilthatják az eszközökön, majd további módokon kell gondolkodniuk arról, hogy miként férhetnek hozzá az Ön webhelyén vagy az alkalmazásában található információkhoz JavaScript nélkül.,
egy másik kritikus dolog, amelyet meg kell emlékezni a gyógyfürdő használatáról vagy építéséről, a biztonság. A webhelyeken keresztüli szkriptek (XSS) és az új oldalak betöltése miatt a hackerek hozzáférhetnek az Ön webhelyéhez, és új szkripteket adhatnak be az ügyféloldalon.
ezért, ha egyoldalas alkalmazás létrehozására gondol vállalkozása számára, győződjön meg róla, hogy megteszi a szükséges óvintézkedéseket, hogy ne hagyja, hogy ez megtörténjen.
egy másik biztonsági probléma az érzékeny adatok adatvédelme. A kezdeti oldal betöltése nem tartalmazhat olyan információt, amely nem minden felhasználó számára elérhető., Mivel az egész SPA azonnal betöltődik a felhasználó eszközére, véletlenül olyan adatokat adhat meg, amelyeknek a bejelentkezés mögött kell lenniük, vagy egyáltalán nem állnak rendelkezésre.
SEO optimalizálás egyoldalas alkalmazásokhoz
a SEO optimalizálás trükkös, ha egyoldalas alkalmazással rendelkezik, ezért úgy döntöttünk, hogy külön szakaszt szentelünk neki a SPA Hátrányaiban.
biztonságosabb a gyógyfürdők használata, ha nem támaszkodik a keresőmotor optimalizálására (SEO), például ha az alkalmazás csak bejelentkezéssel érhető el.,
ha van blogja, másrészt a keresőmotorok számára nehezebb indexelni a SPA webhelyét, szemben a hagyományos szerver által megjelenített oldalakkal. Ez azért van, mert az URL nem igazán változik, és a különböző oldalak általában nem rendelkeznek URL-címekkel.
ezért azt tanácsoljuk Önnek: ha nem akarja zavarni az URL-beállításokat, válasszon olyan keretet, amely támogatja a szerver oldali megjelenítést (SSR). Ezenkívül ne használjon iframe Windowst, ne használjon statikus URL-eket, és optimalizálja az oldal szkriptjeit, hogy felgyorsítsa őket., Végül győződjön meg róla, hogy oldalai HTML5-tel rendelkeznek, hogy a Google crawler hozzáférhessen hozzájuk.
külön figyelmet kell fordítani a szerver üzenetekre is, különösen a 200 és 404 hibára.
egyoldalas alkalmazás migrációs kérdések
egyoldalas alkalmazások úgy hangzik, mintha a mennyből küldték volna őket, hogy egyszerűsítsék a felhasználók tapasztalatait a weboldalon. Gyors és kényelmes, szinte tökéletes. Tényleg így van?,
amikor az egyoldalas alkalmazásba egy MPA-ból való áttérésre gondol, meg kell állnia, és figyelembe kell vennie a fent említett előnyöket és hátrányokat.)
mikor kell használni a SPA
lehet, hogy azt kérdezi, ” Mikor kell használni egy oldal alkalmazás?”Ha van egy üzleti vagy személyes honlap, amely szüksége van egy dinamikus platform, valamint a kis adatmennyiség, az egyoldalas alkalmazás egy jó ötlet. Ez egy nagyszerű lehetőség, ha a jövőben mobilalkalmazást tervez fejleszteni, mivel, amint fentebb említettük, a backend API mind a webes, mind a mobilalkalmazásokhoz használható.,
a fő hátránya a SEO, de az architektúra alkalmas szoftver-as-a-Service (SaaS) platformokra, zárt közösségekre és közösségi hálózatokra (ezért használja a Facebook). Ennek oka az, hogy ezeknek a webhelyeknek nincs szükségük optimalizálásra a Google-on történő kereséshez.
mikor kell használni az MPA
szolgáltatásokat és termékeket kínáló nagyvállalatok számára előnyös lenne egy hagyományosabb, többoldalas alkalmazás. Az ilyen vállalkozások közé tartoznak az online áruházak, vállalati oldalak, katalógusok, piacterek., Egy ilyen alkalmazás kezelése is sokkal könnyebb lenne, mivel több felhasználói adatbázishoz csatlakoztatható.
végül, az ilyen típusú vállalatoknak keresőoptimalizálási lehetőségekre lenne szükségük, mivel sokan szeretnék megtalálni a Google-ban, a Bing-ben és más keresőmotorokban (az általuk kínált termékek vagy szolgáltatások eladásához.)
A SPA előnyei a felhasználók számára
az egyoldalas alkalmazások fő előnye a végfelhasználók számára természetesen az alkalmazás betöltésének sebessége, valamint az offline munka képessége.,
a SPA lineáris felhasználói élményt kínál, ami azt jelenti, hogy könnyű navigálni a weboldalon, és megérteni, hogy hol található ez vagy az a dolog. Például a Saucony SPA-nak egyértelmű kezdete, közepe és vége van. Az UI / UX design használatával a Saucony alkalmazásfejlesztők parallax görgetést és átmeneteket használtak, hogy az ügyfél utazása élvezetes legyen.
az egyoldalas alkalmazások nagyszerűek a mobil eszközökön is, mivel az idő nagy részében minden felhasználónak görgetnie kell (gondoljon a végtelen Facebook falra). Nem kell kattintania semmilyen hivatkozásra, csak élvezheti a görgetést.,
A SPA előnyei a vállalkozások számára
amikor a vállalkozásokról van szó, az egyoldalas alkalmazásfejlesztés általában kevesebb időt vesz igénybe, mivel ugyanaz a backend API használható mind a web, mind a mobil számára. Ennek eredményeként az információáramlás áramvonalas, így sokkal könnyebbé válik egy önálló natív mobil alkalmazás létrehozása.
figyelembe véve a SPA sebességoptimalizálásának előnyeit, a vállalkozások is profitálhatnak, mivel a felhasználókat jobban érdekli egy gyors alkalmazás használata (ergo, vásároljon valamit, vagy csak gyakrabban használja az alkalmazást.,)
egyoldalas alkalmazás architektúra és hogyan működik az egyoldalas alkalmazás
hogyan működnek az egyoldalas alkalmazások? Az egyoldalas alkalmazás architektúra meglehetősen egyszerű – az ügyféloldali technológiákból áll (a HUSPI-nél a React-re támaszkodunk.js, Angular és Vue.js) és a szerver oldali technológiák (amelyekre általában Node-ot használunk.js)
a webhely megjelenítésének módja szempontjából három lehetőség közül választhat.,
Kliens-oldali renderelés (CSR)
- A böngésző kérést küld a HTML fájlt a szerverről
- A szerver válaszol gyorsan egy egyszerű HTML fájlt stílusok, valamint a szkriptek kapcsolódó
- A felhasználó lát egy üres oldal, vagy egyes betöltő kép, míg a js a végrehajtó
- Az alkalmazás letölti az adatokat, generál nézetek, pedig fecskendez be DOM
- az Alkalmazás használatra készen
Ez egy lehetőség, egyszerű honlapok, de ne feledje, hogy a renderelés információk a kliens-oldali sok erőforrást igényel a készülék lehet, hogy túlterheli a böngésző., Ennek eredményeként ez a lehetőség lehet A leglassabb a három közül. Ugyanakkor, ha van egy nagy forgalmú weboldala, akkor a CSR jobb lenne, mivel az információkat a felhasználónak anélkül mutatná be, hogy túl sokat kellene beszélnie a szerverrel.
továbbá, ha Szociális megosztási lehetőségekre van szüksége, ne feledje, hogy a CSR összes oldala általában azonos nyitott gráf (og:) értékekkel rendelkezik, ezért SSR vagy SSG értéket kell használnia.,ng (SSR)
- A böngésző kérést küld a HTML fájlt a szerverről
- A szerver meghív minden szükséges adat teszi az alkalmazás, illetve generál az alkalmazás HTML fájlt a fly
- A felhasználó lát a rendelkezésre álló tartalom
- A egyoldalas alkalmazás keretrendszer, amit tulajdonít események, létrehoz egy virtuális DOM, s végez más intézkedések
- az Alkalmazás használatra készen
Szerver-oldalon renderelés a lehetőség támaszkodunk a HUSPI, mert egyesíti mind a sebesség, a egyoldalas alkalmazás nem terheli meg a felhasználó böngészőjének, hogy az alkalmazás gyorsan.,
Statikus Site-Generátorok (SSG)
- A böngésző kérést küld a HTML fájlt a szerverről
- A szerver gyorsan reagál egy már elkészített HTML-fájl
- A felhasználó lát az oldal
- Az alkalmazás letölti az adatokat, generál nézetek, pedig fecskendez be DOM
- az Alkalmazás használatra készen
Jó de gyorsan lehetőség, de ne feledjük, hogy ha a dinamikus tartalom a honlapon, statikus oldal generátorok nem lenne a legjobb barátok, mert orientált több a statikus oldalak (mint te lehet, hogy már kitalálta a neve.,)
hogyan kell csinálni egyoldalas alkalmazás segítségével Angular, React.js, és Vue.js
ahogy ezt a cikket írtam, konzultáltam a fejlesztőinkkel, hogy megértsük, mi a világ legjobb gyakorlata az egyoldalas alkalmazás létrehozásában, amelyet itt használnak a HUSPI-n.
A HUSPI fejlesztők számos keretrendszert kipróbáltak és teszteltek, különböző munka háttérrel rendelkeznek, de egyesülnek abban, hogy a frontend-Angular, React és Vue – nak van egy fő (kedvencük) a backend – csomóponthoz.js., Van egy maroknyi más keretek állnak rendelkezésre a piacon (mint parázs vagy Knockout), de nem használjuk őket annyira.
egyoldalas alkalmazás felépítéséhez AJAX és HTML5 kell, hogy reagáló oldalakat építsen, míg szögletes, React és Vue felelős a” nehéz emelés ” kezeléséért a SPA kliens oldalán.
mit válasszon – reagáljon, szögletes vagy Vue?
több cikket írtunk a keretek közötti összehasonlítás témájáról., Azonban hasonlítsuk össze őket újra, hogy lássuk, vannak-e előnyei az egyoldalas alkalmazás létrehozása szempontjából.
az Angular and Single-Page Applications
az Angular egy JavaScript keretrendszer, amelyet a Google még 2010-ben vezetett be. Az általunk összehasonlított három lehetőség közül az Angular a legrégebbi, a TypeScript alapján. A TypeScript miatt az Angular nagyszerű lehetőség arra, hogy olyan fejlesztők és vállalatok nagy csapatai használják ezt a technológiát más termékeikben.
Ez a legérettebb a keretek között, tisztességes számú közreműködővel rendelkezik a GitHub – on., Lehet, hogy nehezebb a tanulási görbe szempontjából, de ugyanakkor megéri.
az egyoldalas alkalmazásokhoz az Angular alkalmazást használó ügyfelek között van a Google (és termékeik, például a Gmail és a Google Drive), valamint a Wix, tehát ha úgy dönt, hogy egyetlen oldalas alkalmazást hoz létre az Angular használatával, akkor nagyszerű társaság lesz.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
az Angular közösség hamarosan kiadja az Angular 9.0.0-t-mire számíthat az Angular új verziójában?
React.JS és egyoldalas Alkalmazások
React.a JS egy JavaScript könyvtár, amelyet 2013-ban hozott létre a Facebook., Facebook, Instagram és WhatsApp néven széles körben használják termékcsaládjuk egész területén, beleértve az olyan jól ismert egyoldalas alkalmazásokat is, mint maga a Facebook, az Instagram és a WhatsApp. A Facebook mellett az Uber a React-et is használja.js könyvtár a termékek.
A három versenytárs közül a React rendelkezik a Githubon a legjelentősebb közreműködőkkel – több mint ezer -, ami segít naprakészen maradni a fejlesztők minden nap felmerülő kihívásaival.
fejlesztőink itt a HUSPI-nél is inkább reagálnak az általunk kifejlesztett projektekre (kivéve, ha vannak követelmények egy másik keretre)., Mind könnyű, mind érett ahhoz, hogy teszteljék és kipróbálják, és méltónak találják.
a React a megfelelő választás azok számára, akik csak most kezdik el a JavaScript frontend keretrendszereket, valamint a rugalmasságot kedvelő startupokat és fejlesztőket. A React jó integrációs lehetőségeket kínál különböző más technológiákkal és keretrendszerekkel, ami nagyon hasznos, ha egy nagy ökoszisztémával rendelkező projekten dolgozik.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js és egyoldalas Alkalmazások
Vue a legfiatalabb a három közül, amelyet 2014-ben hozott létre a Google volt alkalmazottja, Yuxi (Evan) te., Annak ellenére, hogy egyetlen nagyvállalat sem támogatja a fejlődését, a Vue népszerűsége nőtt. Jelenleg olyan vállalatok, mint a GitLab, a Baidu és az Alibaba használják a Vue-t.js az igényeiknek.
Ha az egyszerűséget és a rugalmasságot részesíti előnyben a front-end keretekben, akkor a Vue egy jó lehetőség. Különben is, ez a legkönnyebb.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
nemrég írtunk egy cikket a React-ről.js vs. Vue.js
egyoldalas alkalmazások és ASP.NET (Blazor)
úgy döntöttünk, hogy hozzáadjuk a ASP.NET lehetőség az egyoldalas alkalmazások keretrendszereinek és technológiáinak listájára., Van egy új srác a blazor nevű utcában. Ez egy. NET keretrendszer, amely C # / Razor és HTML-t használ, amely a böngészőben fut a WebAssembly segítségével, a GitHub repository szerint.
A Microsoft korábban, 2019-ben jelentette be a keretrendszer kiadását, jelenleg úgy tűnik, hogy az 1.0 verzió készen áll. Ez a komoly támogatást egy nagyvállalat egy nagy előnye Blazor, mert azonnal teszi ezt a nyílt forráskódú eszköz egy része a 60.000 + OSS közreműködők közösség 3,700 + OSS cég közreműködők.,
Blazor egy kényelmes eszköz, mert nincs szükség TypeScript vagy JavaScript, írhat minden logika C#. Ez azt jelenti, hogy a Blazor interoperabilitást kínál a JavaScript API-kkal és a könyvtárakkal, így ha az ökoszisztéma nagy, és JS könyvtárakból áll, akkor nem vész el az átmenet során.
A. NET Blazor két különböző lehetőséget is kínál – csak kliens Blazor és szerver oldali Blazor. Ez utóbbit a. net Core 3.0 – val kell szállítani.
Ez azt jelenti, hogy Blazor megöli szögletes, reagál, vagy Vue? Nem hinnénk. Azonban ez valami, hogy tartsa szemmel.
SPA használata .,NET, akkor is használhatja ASP.NET mag és ASP.NET MVC. Hogyan hozzunk létre egyoldalas alkalmazás ASP.NET MVC? Beállította a backend, hogy szolgálja a HTML a frontend.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
következtetés
figyelembe véve a mobil eszközök növekedését és az on-the-go életmódot, az egyoldalas alkalmazások nagyszerűek. Függetlenül attól, hogy az üzleti menne egy SPA vagy MPA – ez inkább egy kérdés az üzleti elemzők és követelmények.,
A HUSPI-nél olyan üzleti elemzők vannak a csapatban, akik segíthetnek a projekt technikai igényeinek megértésében és meghatározásában (valamint olyan fejlesztők, akik az architektúrát és magát a projektet az alapoktól kezdve építhetik).