V tomto článku se budu vás provede některé základní pojmy pro budování single-page aplikace (SPA) a některé single-page aplikace příklady vytvořené pomocí Syncfusion Essential JS 2 komponenty.
co je jednostránková aplikace (SPA)?,
single-page aplikace (SPA) je webová aplikace, ve kterých jeden kořen zobrazení stránky budou načteny ze serveru a pak, na základě interakce s uživatelem, aplikace bude dynamicky aktualizovat obsah na straně klienta, bez stránku načíst znovu.
SPAs jsou tekutější a citlivější než běžné vícestránkové aplikace a jsou nejvhodnější pro vytváření SaaS (Software jako služba), podnikových dashboardů a dalších webových aplikací řízených formou.,
životní cyklus SPA
existuje více rámců pro vybudování lázní, ale koncept lázní v každém rámci zůstává stejný. Načtěte celé uživatelské rozhraní na straně klienta nebo zobrazení ze serveru během počátečního zatížení. Poté, na základě uživatelských interakcí nebo navigace prostřednictvím aplikace, bude uživatelské rozhraní dynamicky obnovováno na straně klienta.
SPA používá minimální šířku pásma pro kontaktování serveru pro aktualizaci dat z uživatelských interakcí a pro načtení aktualizovaných dat při aktualizaci webové stránky.,
zdroj Obrázku : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Výhody SPA
Single-page aplikace jsou více tekutin a citlivější než vícestránkové aplikace. Díky tomu jsou tyto aplikace také vhodné pro mobilní zařízení, aniž by bylo nutné vytvářet samostatnou nativní mobilní aplikaci.
SPA podporuje bohaté interakce s více komponentami, jako jsou editory a vyskakovací okna, na stránce zobrazení. Tyto komponenty mohou mít mezilehlé stavy, které mohou být těžší implementovat s renderováním na straně serveru.,
kromě počátečního načtení stránky používá SPA pro aktualizaci uživatelského rozhraní menší šířku pásma. Neexistují žádné stránky osvěžuje, zatímco uživatel naviguje aplikaci, takže aplikace pohodlnější pro použití v mobilních zařízeních.
vzhledem k tomu, že vrstva zobrazení a datová vrstva jsou udržovány odděleně v lázních, bude mnohem snazší ji nasadit ve výrobě.
důležité pojmy SPA
Routing
V SPA je veškerý obsah udržován samostatnými adresami URL a pomocí těchto adres URL lze rychle přejít na jiný obsah.,
jednostránkové aplikace udržují stav pomocí adres URL nebo sledování stavů interně, zatímco uživatel prochází aplikací.
hlavní případ použití se směrováním stránek v SPA je, když osoba sdílí adresu URL. Tato osoba si může být jistá, že každý, kdo otevře tento odkaz, uvidí přesně stejný obsah navigací na přesnou adresu URL v aplikaci.
vázání Dat a synchronizaci
SPA používá minimální šířku pásma pro kontaktování serveru pro načítání dat nebo aktualizace datového modelu po interakci s uživatelem v aplikaci.,
zatímco uživatel prochází aplikací, datový model na Serveru bude aktualizován současně pomocí asynchronního požadavku HTTP (AJAX).
na základě uživatelských interakcí jsou data aktualizována na datový model na serveru. A tyto změny dat jsou aktualizovány zpět do uživatelského rozhraní současně, čímž je uživatel vždy schopen zobrazit aktualizovanou webovou stránku, aniž by ji osvěžil.
Rychlé a plynulé odezvy
SPA je známý pro své rychlé a bezproblémové reakce na interakci s uživatelem., Jejich bohatá rozhraní zpracovávají akci uživatele a dynamicky obnovují uživatelské rozhraní bez jakéhokoli zpoždění nebo požadavku ze serveru. Mohou se tak vyhnout přerušení zkušeností a přimět webovou aplikaci, aby se chovala spíše jako desktopová aplikace.
Oddělení view a datové vrstvy
SPA je postaven za použití Model-View-Controller (MVC) a Model-View-ViewModel (MVVM) vzorů, ale stále můžete stavět aplikace na vašem vlastním MV* vzorek.,
prohlížení souborů (spolu s CSS bundle), který drží vykreslování uživatelského ROZHRANÍ pro aplikace a datové vrstvy aplikace jsou dobře udržované samostatně v LÁZEŇSKÉ architektury.
oddělení view a datové vrstvy je určena pro uživatele, aby znovu zobrazit stránku pro různé datové sady nebo měnit zobrazení stránky bez ovlivnění datového modelu ve výrobě.
oddělení pohledové a datové vrstvy v SPA usnadňuje verzování a vrácení slibů ve výrobě.,
příklady aplikací na jedné stránce a ukázky
jedná se o některé z příkladů jednostránkových aplikací v reálném světě vytvořených pomocí ovládacích prvků Essential JS 2.
Expense Tracker
příklad aplikace Expense Tracker single-page ukazuje několik základních ovládacích prvků JS 2 společně pro sledování a vizualizaci denních výdajů s velkým uživatelským rozhraním.,
Expense tracker – SPA
různé webové stránky v aplikaci Dashboard, Transakce, a Asi, použijte ovládací prvek DataGrid, Grafy a další Nezbytný JS 2 ovládací prvky pro vizualizaci datového modelu. Tato aplikace používá mechanismus směrování stránek pro přechody stránek pro navigaci mezi pohledy.
uživatelé mohou procházet mezi těmito pohledy pomocí adres URL, které budou vytvořeny pro každou webovou stránku z důvodu směrování., Vzhledem k tomu, že tato aplikace je postavena pomocí lázeňské architektury, budou všechny webové stránky staženy při počátečním načítání webové aplikace. Pak se přechody stránek stanou zcela na straně klienta, aniž by vyžadovaly žádné webové stránky serveru. Při navigaci do různých pohledů bude URL aplikace odpovídajícím způsobem aktualizována.
vazba dat má hlavní roli v SPA. Protože všechny stránky jsou staženy na straně klienta, UI komponenty by měly být aktualizovány s aktuální data pak a tam., Při provádění jakékoli editační akce na webové stránce transakce budou změny aktualizovány na datový model současně. Tyto změny se projeví také v komponentách uživatelského rozhraní dostupných na jiných stránkách.
Protože LÁZNĚ jsou vhodné pro vykreslování jak v desktopových prohlížečů a mobilních prostředích, tato aplikace je postaven s tekutinou a citlivý design pro vykreslování v mobilních zařízeních.
živé demo této aplikace je k dispozici na našich webových stránkách a zdroj najdete na Githubu zde.,
Expense Tracker – Mobilní zobrazení
Webový e-Mail
Webový e-Mail je single-stránka aplikace příklad aplikace Outlook-jako uživatelské rozhraní postavené pro správu poštovní schránky.
Tato aplikace je postaven s bohatou rozhraní a interaktivní design pomocí Syncfusion komponenty, jako je Akordeon, ListView, a postranním Panelu jako single-zobrazení webové stránky. Aplikace je rozdělena do tří částí pro správu poštovní schránky: poštovní složky, poštovní položky a oblast obsahu pošty., Vzhledem k jeho citlivý design, tato aplikace může být použita s lehkostí napříč mobilních zařízení a desktopových prohlížečů.
vazba dat hraje významnou roli v této aplikaci pro aktualizaci poštovní schránky a pro zobrazení obsahu pošty na základě interakce uživatele. Položky seznamu pošty budou aktualizovány příslušným obsahem na základě výběru uživatele v poštovních složkách. Oblast pošty bude aktualizována aktualizovaným obsahem, když uživatel vybere položku pošty ze seznamu pošty.
živé demo této aplikace najdete na našich webových stránkách a zdroj najdete na Githubu.,
Web Mail – SPA
aplikace zpracovává více uživatelských interakcí a aktualizuje obsah, tedy bez jakéhokoliv stránka se obnoví, aby aplikace vypadat jako desktop aplikace.
citlivý design této aplikace usnadňuje vykreslení napříč mobilními zařízeními s nejlepším uživatelským rozhraním.,
Půjčky Kalkulačka
Půjčky Kalkulačka je single-stránka aplikace příklad, který prezentuje komponenty, jako je DataGrid, Grafy, Slider, a další společně v jednom-zobrazit stránku pro výpočet splátky úvěru na základě výše úvěru, úroků a termín.,
Úvěr Kalkulačka – SPA
vazba dat v této aplikaci funguje tak, že při nastavování hodnoty úvěru, úroků a termín pomocí posuvníku složka, data pro graf a součásti sítě budou aktualizovány s odpovídající údaje odpovídajícím způsobem.
můžete také aktualizovat obsah grafu výběrem požadovaného měsíce, který chcete zobrazit pomocí ovládacího prvku DatePicker. Po změně měsíce, který se má zobrazit, budou data za odpovídající měsíc vrácena z modelu., Totéž bude aktualizováno v ovládacím prvku grafy příliš.
živé demo této aplikace najdete na našich webových stránkách a její zdroj najdete na Githubu.
Health Tracker
Health Tracker je další jednostránkový příklad aplikace pro sledování zdraví člověka sledováním příjmu potravy, chůze na dálku, konzumace vody a trvání spánku.
Tato aplikace je postaven s bohatou rozhraní a interaktivní design pomocí Syncfusion kontrol, jako jsou Grafy a Karty jako single-zobrazení webové stránky. Vazba dat se používá k zobrazení dat v grafu., Zdroj pro tento vzorek lze nalézt v tomto místě GitHub.
Zdraví Tracker – SPA
Diagram Builder
Diagram Builder je aplikace, která pomáhá při vytváření různých diagramů pro různé případy použití, jako jsou organizační schémata, hierarchické stromy, a myšlenkové mapy.
tato aplikace je postavena s výkonnými a funkcemi bohatými ovládacími prvky, jako je Diagram, výběr barev, dialog a posuvník rozsahu. Zdroj tohoto vzorku lze nalézt v tomto místě GitHub.,
Diagram Builder – SPA
Příběh Odhad
Příběh Odhad je efektivní, Agilní-based nástroj pro odhad příběh body pro příběhy pomocí Plánování Poker techniky.
tato aplikace je postavena s ovládacími prvky, jako je DataGrid, grafy, Vstupní maska, tlačítko, Tlačítko rádia a zaškrtávací políčko. Zdroj pro tento vzorek lze nalézt v tomto místě GitHub.,
Příběh Odhad – SPA
Akciové Grafu
Akciové Chart slouží ke sledování a vizualizaci cena akcie nějaké společnosti za určité časové období.
tato aplikace je postavena s grafy, panel nástrojů, DateTimePicker, rozevírací a tlačítka ovládacích prvků. Jeho zdroj najdete na Githubu.,
Akciové Chart – SPA
Asset Management
Asset Management aplikace je jediná stránka, příklad aplikace slouží ke sledování a vizualizaci softwarových a hardwarových aktiv organizace.
tato aplikace je postavena s ovládacími prvky DataGrid, Charts, TreeMap a DateRangePicker. Jeho zdroj najdete na Githubu.,
Asset Management – SPA
důvody pro LÁZNĚ
Kromě více výhod single-page aplikaci, tam jsou některé zvláštní aspekty je třeba mít na paměti, s SPA:
- Jeden by měl zajistit, objektově orientované principy při vytváření SPA. Pokud bude ignorován, povede to k únikům paměti v prohlížeči. Tím se aplikace zpomalí, čímž se sníží její výkon.
- zpracovat tlačítko zpět prohlížeče správně v jednostránkových aplikací., Pokud tomu tak není, uživatel může kliknout na tlačítko zpět prohlížeče, což vede ke ztrátě pracovního postupu.
všechny tyto problémy však mohou řešit správné techniky.
shrnutí
v tomto blogu jsme viděli výhody jednostránkových aplikací oproti vícestránkovým aplikacím. Také jsme viděli příklady jednostránkových aplikací v reálném světě postavené s více ovládacími prvky Syncfusion Essential JS 2.
dříve diskutované jednostránkové příklady aplikací jsou také k dispozici pro úhlové, JavaScript, ASP.NET jádro a ASP.,Net MVC platformy, a můžete najít živé demo těchto aplikací na našich webových stránkách. Zde můžete také zkontrolovat další aplikace v reálném světě postavené pomocí komponent Syncfusion.
doporučujeme vyzkoušet si zdrojový kód sami, k dispozici na Githubu, který je snadno spustitelný, abyste viděli, jak jsou jednostránkové aplikace vytvářeny pomocí komponent Syncfusion.