ebben a cikkben végigvezetem néhány alapvető koncepciót az egyoldalas alkalmazások (SPA) építéséhez és néhány egyoldalas alkalmazáspéldát, amelyeket a Syncfusion Essential JS 2 komponensek segítségével hoztak létre.
mi az egyoldalas alkalmazás (SPA)?,
az egyoldalas alkalmazás (SPA) egy olyan webes alkalmazás, amelyben egyetlen gyökérnézeti oldal kerül betöltésre a kiszolgálóról, majd a felhasználói interakció alapján az alkalmazás dinamikusan frissíti a tartalmat az ügyféloldalon, oldal újratöltése nélkül.
a gyógyfürdők folyékonyabbak és érzékenyebbek, mint a hagyományos többoldalas alkalmazások, és ezek a legalkalmasabbak SaaS (szoftver mint szolgáltatás), vállalati irányítópultok és egyéb űrlapvezérelt webes alkalmazások létrehozására.,
A SPA életciklusa
Több keretrendszer létezik egy SPA építésére, de a SPA fogalma minden keretben ugyanaz marad. Hozd a teljes kliens oldali felhasználói felületet vagy nézetet a kiszolgálóról a kezdeti terhelés alatt. Ezután a felhasználói interakciók vagy az alkalmazáson keresztüli navigáció alapján a felhasználói felület dinamikusan frissül az ügyféloldalon.
a SPA minimális sávszélességet használ, hogy kapcsolatba lépjen a kiszolgálóval a felhasználói interakciók adatainak frissítéséhez, valamint a frissített adatok letöltéséhez a weboldal frissítésekor.,
képforrás :
A SPA előnyei
az egyoldalas alkalmazások folyékonyabbak és érzékenyebbek, mint a többoldalas alkalmazások. Ennek köszönhetően ezek az alkalmazások jól alkalmazhatók mobil eszközökre is, nincs szükség külön natív mobilalkalmazás létrehozására.
SPA támogatja a gazdag kölcsönhatások több komponens, mint például a szerkesztők és a pop-up, a nézet oldalon. Ezeknek az összetevőknek lehetnek olyan közbenső állapotai, amelyeket nehezebb megvalósítani a szerver oldali megjelenítéssel.,
a kezdeti oldalterhelés mellett a SPA kevesebb sávszélességet használ az UI frissítéséhez. Nincs oldal frissíti, míg a felhasználó navigál az alkalmazás, így az alkalmazás kényelmesebb használni a mobil eszközök.
mivel a nézetréteget és az adatréteget külön-külön tartják fenn a gyógyfürdőben, ez sokkal könnyebb lesz a gyártásban telepíteni.
fontos fogalmak SPA
Routing
a SPA, Minden tartalom megmarad külön URL-eket, és lehet navigálni a különböző tartalmak gyorsan használja ezeket az URL-eket.,
az egyoldalas alkalmazások az URL-ek vagy a sávállapotok belső használatával fenntartják az állapotot, miközben a felhasználó az alkalmazáson keresztül navigál.
a SPA-ban az oldal útválasztásával kapcsolatos legfontosabb felhasználási eset az, amikor egy személy megosztja az URL-t. Ez a személy biztos lehet benne, hogy bárki, aki megnyitja ezt a linket, pontosan ugyanazt a tartalmat fogja látni, ha az alkalmazásban a pontos URL-re navigál.
adatkötés és szinkronizálás
a SPA minimális sávszélességet használ a kiszolgálóval való kapcsolatfelvételhez az adatok lekéréséhez vagy az adatmodell frissítéséhez az alkalmazás felhasználói interakciója után.,
miközben a felhasználó az alkalmazáson keresztül navigál, a kiszolgálón lévő adatmodell egyszerre frissül aszinkron HTTP kéréssel (AJAX).
a felhasználói interakciók alapján az adatokat frissítjük a szerver adatmodelljére. Ezek az adatváltozások egyszerre frissülnek vissza a felhasználói felületre, ezáltal a felhasználó mindig megtekintheti a frissített weboldalt anélkül, hogy frissítené.
gyors és folyékony válaszidő
A SPA a felhasználói interakciókra adott gyors és zökkenőmentes válaszokról ismert., Gazdag interfészeik kezelik a felhasználói műveletet, dinamikusan frissítik az UI-t késedelem vagy kérés nélkül a kiszolgálótól. Így elkerülhetik az élmény megszakítását, és a webalkalmazás inkább asztali alkalmazásként viselkedhet.
A nézet és az adatréteg elválasztása
a SPA modell-nézet-vezérlő (MVC) és Model-View-ViewModel (MVVM) minták segítségével épül fel, de az alkalmazást továbbra is saját MV* mintájára építheti.,
az alkalmazás UI renderelését és az alkalmazás adatrétegét tároló nézetfájl (a CSS csomaggal együtt) a SPA architektúrában külön-külön is jól karbantartható.
a nézet és az adatréteg elválasztása arra szolgál, hogy a felhasználó újra felhasználhassa a megtekintési oldalt különböző adatkészletekhez, vagy megváltoztassa a megtekintési oldalt anélkül, hogy befolyásolná a gyártás adatmodelljét.
a spa nézet – és adatrétegválasztása megkönnyíti a gyártás változatosságát és visszagörgetését.,
Single page application examples and demos
ezek a valós egyoldalas alkalmazás példák, amelyek alapvető Js 2 vezérlőkkel készültek.
Kiadás Tracker
A Kiadás Tracker egyoldalas alkalmazási példa, vitrinek több Alapvető JS 2 ellenőrzések együtt, hogy nyomon, valamint szemléltesse a napi költségek egy nagy, UI.,
Költség tracker – SPA
az alkalmazás különböző weboldalai, műszerfal, tranzakciók, és körülbelül, használja a DataGrid, diagramok, és egyéb lényeges js 2 vezérlők megjelenítéséhez az adatmodell. Ez az alkalmazás egy oldal útválasztási mechanizmust használ az oldalátmenetekhez a nézetek közötti navigáláshoz.
a felhasználók ezen nézetek között navigálhatnak az URL-ek segítségével, amelyeket az Útválasztás miatt minden weboldalhoz létrehoznak., Mivel ez az alkalmazás spa architektúrával épül fel, az összes weboldal letöltésre kerül a webes alkalmazás kezdeti betöltésekor. Ezután az oldalátmenetek teljesen az ügyféloldalon történnek anélkül, hogy a szerver weboldalait kérnék. A különböző nézetekbe való navigálás közben az alkalmazás URL-címe ennek megfelelően frissül.
az adatkötés jelentős szerepet játszik a SPA – ban. Mivel az összes weboldal kliens oldalon töltődik le,az UI komponenseket frissíteni kell a frissített adatokkal, majd ott., A tranzakciós weboldal bármely szerkesztési műveletének végrehajtása közben a módosítások egyidejűleg frissülnek az adatmodellre. Ezek a változások tükröződnek a más oldalakon elérhető felhasználói felület összetevőiben is.
mivel a SPA kiválóan alkalmas mind az asztali böngészők, mind a mobil környezetek megjelenítésére, ez az alkalmazás folyékony és érzékeny kialakítású a mobil eszközök megjelenítéséhez.
az alkalmazás élő demója elérhető a weboldalunkon, a Githubon pedig itt található forrás.,
Költségkövető – Mobil nézet
Web Mail
A Web Mail egyoldalas alkalmazás példa egy Outlook-szerű felhasználói felülettel, amely egy postafiók kezelésére készült.
Ez az alkalmazás gazdag interfészekkel és interaktív dizájnnal készült, Syncfusion komponensekkel, mint például a harmonika, a ListView és az oldalsáv, mint egynézeti weboldal. Az alkalmazás három részre oszlik a postafiók kezelésére: mail mappák, mail elemek, valamint a mail tartalom terület., Reszponzív kialakításának köszönhetően ez az alkalmazás könnyedén megjeleníthető mobil eszközökön és asztali böngészőkön keresztül.
az adatkötés jelentős szerepet játszik ebben az alkalmazásban a postafiók frissítésében, valamint a levelezési tartalom felhasználói interakció alapján történő megjelenítésében. A Levelezőlista elemek frissítésre kerülnek a megfelelő tartalommal, a levelező mappák felhasználói kiválasztása alapján. A levelezési terület frissítésre kerül a frissített tartalommal, amikor a felhasználó kiválaszt egy e-mail elemet a levelezőlistából.
az alkalmazás élő demóját a weboldalunkon találja, a forrást pedig a Githubon.,
Web Mail – SPA
az alkalmazás több felhasználói interakciót kezel, és ennek megfelelően frissíti a tartalmat oldalfrissítés nélkül, így az alkalmazás asztali alkalmazásnak tűnik.
az alkalmazás érzékeny kialakítása megkönnyíti a mobil eszközök közötti megjelenítést a legjobb felhasználói felülettel.,
Hitelkalkulátor
A hitelkalkulátor egyoldalas alkalmazáspélda, amely olyan összetevőket jelenít meg, mint a DataGrid, a diagramok, a csúszka, és mások együtt egy nézetben a hitelkifizetés kiszámításához a hitelösszeg, a kamat és a futamidő alapján.,
Hitel Kalkulátor – SPA
Az adatok kötelező alkalmazás működik, oly módon, hogy, míg a beállítási értékek a hitelösszeg, kamatok, valamint a kifejezést használja a csúszkát komponens, a diagram adatait, valamint rács alkatrészek frissülni fog, a megfelelő adatot.
a diagram tartalmát is frissítheti úgy, hogy kiválasztja a kívánt hónapot a DatePicker vezérlővel. Amikor a megtekintendő hónap megváltozik, a megfelelő hónap adatait visszaadják a modellből., Ugyanez frissítésre kerül a diagramok vezérlésében is.
az alkalmazás élő demóját a weboldalunkon találja, annak forrását pedig a GitHub-on.
Health Tracker
Az Health Tracker egy másik egyoldalas alkalmazás, amely nyomon követi az ember egészségét azáltal, hogy nyomon követi az élelmiszerek bevitelét, a távolságot, a fogyasztott vizet és az alvás időtartamát.
Ez az alkalmazás gazdag interfészekkel és interaktív dizájnnal készült, Syncfusion vezérlőkkel, például diagramokkal és kártyákkal, mint egynézeti weboldal. Az adatok kötése a diagramban szereplő adatok bemutatására szolgál., A minta forrása megtalálható ebben a GitHub helyen.
Health Tracker – SPA
Diagram Builder
a Diagram Builder egy olyan alkalmazás, amely segít létrehozni a különböző diagramok különböző felhasználási esetekben, mint a szervezeti diagramok, hierarchikus fák, és elme térképek.
Ez az alkalmazás erős és funkciókban gazdag vezérlőkkel készült, mint a Diagram, a színválasztó, a párbeszédpanel és a tartomány csúszka. Ennek a mintának a forrása megtalálható ebben a GitHub helyen.,
Diagram Builder – SPA
Story Estimator
A Story Estimator egy hatékony, agilis alapú eszköz becslésére történet pont történetek segítségével tervezés póker technikák.
Ez az alkalmazás olyan vezérlőkkel készült, mint a DataGrid, a diagramok, a bemeneti maszk, a gomb, a rádió gomb, valamint a jelölőnégyzet. A minta forrása megtalálható ebben a GitHub helyen.,
Story Estimator – SPA
Stock Chart
a Stock Chart bármely vállalat részvényárfolyamának nyomon követésére és megjelenítésére szolgál egy adott időszak alatt.
Ez az alkalmazás épül a diagramok, eszköztár, DateTimePicker, legördülő, gomb vezérlők. Megtalálható a forrás GitHub.,
Stock Chart – SPA
Asset Management
Az Asset Management alkalmazás egyoldalas alkalmazás példa egy szervezet szoftver-és hardvereszközeinek követésére és megjelenítésére.
Ez az alkalmazás épül a DataGrid, diagramok, TreeMap, DateRangePicker ellenőrzések. Megtalálható a forrás GitHub.,
Asset Management – SPA
szempontok SPA
mellett a több előnye az egyoldalas alkalmazás, van néhány különleges megfontolások szem előtt tartani SPA:
- egy kell biztosítani objektum-orientált elvek létrehozása közben SPA. Ha figyelmen kívül hagyja, ez vezet a memória szivárgás a böngészőben. Így az alkalmazás lelassul, ezáltal rontja a teljesítményét.
- kezelje megfelelően a böngésző hátsó gombját egyoldalas alkalmazásokban., Ha nem, akkor a felhasználó rákattinthat a böngésző Vissza gombjára, ami munkafolyamat elvesztéséhez vezet.
a megfelelő technikák azonban megoldhatják ezeket a kérdéseket.
összefoglaló
ebben a blogbejegyzésben láttuk az egyoldalas alkalmazások előnyeit a többoldalas alkalmazásokkal szemben. Is, láttuk a valós egyoldalas alkalmazás példák épített több Syncfusion Essential JS 2 ellenőrzések.
a korábban tárgyalt egyoldalas alkalmazás példák is rendelkezésre állnak szögletes, JavaScript, ASP.NET mag és ASP.,NET MVC platformok, valamint megtalálható az élő demo ezen alkalmazások honlapunkon. Itt ellenőrizheti a Syncfusion komponensekkel épített más valós alkalmazásokat is.
javasoljuk, hogy saját maga ellenőrizze a forráskódot, amely a GitHub-on elérhető, amely könnyen futtatható, hogy megnézze, hogyan épülnek egyoldalas alkalmazások a Syncfusion komponensek segítségével.