Articles

Úhlové jednostránkové aplikace( SPA): jaké jsou výhody?

13 října, 2020 by admin

V tomto příspěvku, budeme pokrývat hlavní výhody přijetí LÁZEŇSKÉ Architektury a zároveň k budování naší Úhlové Aplikací, a odpovědět na některé běžné otázky týkající Lázně obecně.

Tento příspěvek je součástí průběžné Úhlové pro Začátečníky série, zde je kompletní série:

Úhlové Pro Začátečníky Průvodce – jak začít (Nastavení Prostředí)
Úhlové Pro Začátečníky Průvodce: Proč Úhlové?, Hlavní výhody
Angular For Beginners Guide-komponenty vs směrnice
Proč aplikace pro jednu stránku, jaké jsou výhody? Co jsou lázně?

proč lázeňská Architektura?

začněme první otázkou: proč jednostránkové aplikace (Lázně)? Tento typ aplikací existuje již několik let, ale ve veřejném internetu se dosud nerozšířily.

a proč?

existuje pro to dobrý důvod a ještě lepší důvod, proč by se to mohlo v blízké budoucnosti změnit.,

Lázní dostal přijala hodně v posledních několika letech pro budování vlastní dashboard části SaaS (Software as a Service) platformy nebo Internetové služby obecně, jakož i pro budování enterprise data-řízený a tvořit náročné aplikace.

ale prosazuje Angular budování našich aplikací jako lázní?

odpověď zní ne, ne, ale to je zajímavá možnost, kterou přináší, vzhledem k mnoha výhodám budování aplikace tímto způsobem. Což nás přivádí k klíčové otázce:

proč byste chtěli vytvořit aplikaci jako lázně?,

to je něco, co je často považováno za samozřejmost. Každý takto buduje aplikace, ale jaká je v tom velká výhoda? Musí existovat alespoň pár zabijáckých funkcí, že?

začněme funkcí, která se příliš často nezmiňuje: nasazení výroby.

pochopení výhod lázeňského využití ve výrobě skutečně také zodpoví klíčovou otázku:

co je to aplikace na jednu stránku?

někdy názvy ve vývoji softwaru nejsou dobře vybrány a to může vést k velkému zmatku., To rozhodně není případ termínu SPA: aplikace na jednu stránku má doslova pouze jednu stránku !! 😊

Pokud chcete vidět jednu Stránku Aplikace v akci, zvu vás, aby přes hlavu na AngularUniv https://angular-university.io a začít kliknutím na domovskou stránku na seznamu nejnovější kurzy, a na horní menu.

Pokud se začnete navigovat kolem, uvidíte, že stránka není plně načíst – pouze nová data budou odeslána přes drát jako uživatel přejde prostřednictvím aplikace – to je příklad jedné stránky aplikace.,

dovolte mi, abych vám vysvětlil, jaká je výhoda při vytváření takové aplikace a jak to vůbec funguje.

pomocí nástrojů Chrome Dev zkontrolujte index.html webu AngularUniv, který se stáhne na domovské stránce (nebo na jakékoli jiné stránce, pokud navigujete a stisknete refresh).

stránka, která se stáhne, je první požadavek, který uvidíte na panelu síťových karet Chrome-to je doslova jediná stránka naší aplikace.

všimněme si jedné věci – tato stránka je téměř prázdná! S výjimkou značky se tu toho moc neděje.,

Poznámka: na skutečné webové stránky stáhnout také HTML, který byl pre-tavené na server pomocí Úhlové Univerzální

Všimněte si, že názvy CSS a Javascript svazků: Všechny CSS a dokonce i všechny Javascript aplikace (která zahrnuje Hranaté) není ani pocházející ze stejného serveru jako index.html – toto je z úplně jiné statické serveru:

V tomto případě, dva svazky jsou skutečně pochází z Amazon S3 kbelík.,

Také si všimněte, že název svazky verzi: obsahuje časové razítko, při které nasazení sestavení byla provedena, aby rozvinul tuto konkrétní verzi aplikace.

Produkční Nasazení Výhody Single Page Aplikace

scénář jsme viděli výše, je vlastně docela v pohodě výhodou single page aplikací:

Single Page Aplikace jsou super snadné nasazení do Výroby, a dokonce i na verzi v průběhu času!,

single page aplikace je super-jednoduchý na nasazení, když ve srovnání s více tradičními server-side poskytované aplikací: je to opravdu jen jeden index.html soubor s CSS svazku a Javascript svazku.

tyto 3 statické soubory lze nahrát na jakýkoli statický obsahový server, jako je Apache, Nginx, Amazon S3 nebo Firebase Hosting.

samozřejmě, že aplikace bude potřebovat, aby se volání do backend, aby si své údaje, ale to je samostatný server, který může být postaven v případě potřeby s úplně jinou technologií: jako Uzel, Java nebo PHP.,

ve Skutečnosti, pokud bychom vybudovat naše REST API nebo jiného typu backend v Uzlu, můžeme i postavit na Stroji stejně, a tak být schopen používat stejný jazyk na obou serveru a klienta, a dokonce i sdílet nějaký kód mezi nimi.

single Page application Versioning in Production

Další výhodou nasazení našeho frontendu jako aplikace pro jednu stránku je verzování a vrácení zpět. Jediné, co musíme udělat, je verze našeho výstupu sestavení (který produkuje svazky CSS a JS zvýrazněné žlutě výše).,

můžeme nakonfigurovat server, který slouží našim lázním, s parametrem, který určuje, kterou verzi aplikace frontend vytvořit: je to tak jednoduché!

tento typ implementačních stupnic velmi dobře: statické obsahové servery jako nginx mohou škálovat pro velmi velký počet uživatelů.

tento typ nasazení a verzování je samozřejmě platný pouze pro frontend část naší aplikace, To se nevztahuje na backend server. Ale i tak je to důležitá výhoda.

je však nasazení výroby jedinou výhodou jednostránkových aplikací?, Určitě ne, tady je další důležitá výhoda:

Single Page Aplikací A Uživatelské Zkušenosti

Pokud jste někdy použili webovou aplikaci, která je neustále překládání všechno ze serveru na téměř každé interakce uživatele, budete vědět, že tento typ aplikace dává špatné uživatelské zkušenosti, vzhledem k:

konstantní celá stránka znovu načte,
také vzhledem k síti a zpět, výlety do serveru načíst všechny HTML.,

V single page aplikaci, jsme vyřešili tento problém, tím, že používá zásadně odlišný architektonický přístup:

Na WELLNESS, po prvním načtení stránky, ne více HTML dostane poslal přes síť. Místo toho jsou ze serveru požadována pouze data (nebo odeslána na server).

takže zatímco SPA běží, pouze data jsou odesílána přes drát, což trvá mnohem méně času a šířky pásma než neustálé odesílání HTML. Pojďme se podívat na typ užitečného zatížení, které jde přes drát typicky v lázních.,

například v lázních AngularUniv, pokud kliknete na kurz, Žádný HTML nebude odeslán přes drát. Místo toho jsme si ajaxový požadavek, který obdrží JSON data s všechny data kurzu:

Jak můžeme vidět, HTML verze samozřejmě bude mnohem větší co do velikosti v porovnání s prostý JSON objekt vzhledem ke všem otevírací a uzavírací tagy, ale také tam je spousta duplicitních HTML pokud budeme neustále načítání podobné stránky znovu a znovu.

například věci jako záhlaví a zápatí stránky jsou neustále odesílány do prohlížeče, ale ve skutečnosti se nezměnily.,

Takže, zde máme druhou velkou výhodou single page aplikace:-vylepšené uživatelské zkušenosti vzhledem k nižší celá stránka znovu načte a lepší celkový výkon, protože méně šířky pásma je potřeba.

tak proč nepoužíváme Lázně všude?

Pokud mají Lázně tolik výhod, proč nebyly přijaty ve větším měřítku na veřejném internetu? K tomu je dobrý důvod.

až donedávna měly vyhledávače, jako je Google, těžké indexovat správně jednu stránkovou aplikaci. Ale co dnes?,

v minulosti bylo několik doporučení použít speciální režim procházení Ajax, který byl mezitím zastaralý. Takže je Google nyní schopen plně vykreslit Ajax?

V oficiálním oznámení, máme informace, že Google je nyní obecně schopen procházet Ajax, ale tam jsou některé zprávy, že to ještě není zcela schopen tak učinit.

a doporučením je místo toho použít progresivní vylepšení. Co to znamená, že v této fázi je možné používat lázně na veřejném internetu nebo ještě ne?

vyhledávač přátelské Lázně?,

je možné mít na výkon a uživatelské zkušenosti z LÁZNÍ spolu s dobrou SEO vlastnosti: použití Úhlové Univerzální pre-rendering engine nám umožňuje:

pre-render aplikace na backend
loď HTML do prohlížeče spolu s Úhlovou
a mají Úhlové bootstrap na straně klienta a převzít stránka LÁZNĚ

Lázně se Stávají Častější V Budoucnu?,

Představte si, že SEO friendly verze Amazon, který by obnovit sám na každou stránku načíst znovu a s mnohem lepší výkon a uživatelské zkušenosti: to bude mít pravděpodobně obrovský pozitivní dopad na čas, zákazníci tráví na webu!

takže technické výhody lázní šetrných k SEO jsou významné a ještě více na mobilu, a očekávali bychom, že tento typ lázeňských aplikací šetrných k SEO bude v budoucnu častější také na veřejném internetu.

ale to ponechává poslední otázku této části stále nezodpovězenou., V této fázi musíte přemýšlet po přečtení několika posledních sekcí:

Pokud je ze serveru načten pouze minimální HTML při spuštění, jak se stránka v průběhu času mění?

což nás vede k poslední otázce této sekce a možná nejdůležitější:

jak funguje Aplikace pro jednu stránku?

jak mohou fungovat, protože jsme ze serveru načítali jen velmi málo HTML? Jakmile je aplikace spuštěna, přes drát přejdou pouze data. Tak jak se nový HTML pochází?,

protože někde musí být generován nový HTML, protože je to jediný způsob, jak prohlížeč změní to, co zobrazuje, že?

odpověď je jednoduchá a souvisí to se způsobem, jakým aplikace na jedné stránce skutečně fungují ve srovnání s tradičními serverovými aplikacemi.

na tradiční aplikaci (která zahrnuje drtivou většinu dnešního veřejného internetu) se data transformace HTML (nebo Vykreslování) provádí na straně serveru.,

Na druhé straně, Single page aplikací je ve velmi odlišným způsobem:

V LÁZNÍCH po spuštění aplikace, data do HTML proces transformace byla přesunuta ze serveru na klienta – Lázně mají ekvivalent šablony motor běží ve vašem prohlížeči!

a tak s těmito informacemi v ruce zabalíme tuto sekci shrnutím klíčových bodů o aplikacích na jedné stránce.,– Výhody Lázně a Klíčový Pojem O tom, Jak Fungují

Budování naší aplikaci jako LÁZNĚ nám poskytne řadu výhod:

Budeme schopni přinést mnohem lepší zážitek pro uživatele.
aplikace se bude cítit rychleji, protože méně šířky pásma je používán, a ne celá stránka aktualizuje, jsou vyskytující se jako uživatel naviguje pomocí aplikace
aplikace bude mnohem jednodušší nasazení ve výrobě, alespoň určitě klientské části: vše, co potřebujeme, je statický server sloužit minimálně 3 soubory: naší jedinou stránku index.,html, balíček CSS a balíček JavaScriptu.
svazky můžeme v případě potřeby rozdělit na více částí pomocí rozdělení kódu.
frontend části aplikace je velmi jednoduchý na verzi ve výrobě, což pro zjednodušené nasazení a vrácení zpět k předchozí verzi rozhraní, pokud je potřeba,

A to jen jeden možný scénář nasazení Lázní ve výrobě.,

Další Výrobní Scénáře

Další scénáře zahrnují pre-rendering velké části z aplikace a nahrát všechno na statický hosting serveru, v paměti cache na serveru pouze určité stránky, verzování pomocí DNS, atd.

je to dnes jednodušší, než kdy jindy, aby SEO-friendly Lázně, tak budou pravděpodobně zvýšily přijetí v budoucnu, v situacích, kde Lázně nebyly často používané.,

Lázně

způsob, jakým to single page aplikace přinášejí tyto výhody je vázána na to, jak interně fungují:

Po spuštění, pouze získává data odeslána přes drát jako JSON payload, nebo nějaký jiný formát. Ale žádné HTML nebo CSS dostane poslal už přes drát po spuštění aplikace.,

klíčový bod pochopit, jak single page aplikací pracovat, je následující:

místo toho, aby převod dat do formátu HTML na serveru a pak poslat je přes drát, v LÁZNÍCH jsme se teď přestěhovali, že proces přeměny ze serveru na klienta.

konverze se stane poslední vteřinou na straně klienta,což nám umožňuje uživateli poskytnout mnohem lepší uživatelský zážitek.

doufám, že vás to přesvědčí o výhodách lázní., Pokud ne, dejte mi prosím vědět a proč tomu tak není, abych mohl lépe rozvíjet některé body.

v této fázi vám chci okamžitě ukázat nějaký kód. Postavme malé lázně Hello World V Úhlové, a vzít to odtamtud. Uvidíme, jak koncepty, které jsme zavedli mapu do malé aplikace, kterou se chystáme vybudovat.

doufám, že tento příspěvek pomohl pochopit klíčové výhody lázní a že jste si to užili!,