Single Page Application Example using Essential JS 2 Components

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.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Tovább az eszköztárra