Autor: Zee Gimon
Jsme tak zvyklí, že online a s mobilním telefonem s rukama, že často nemáme ani přestat přemýšlet o tom, co druh technologie, pomáhá nám to, nebo že app. Obvykle to není problém – při zapnutí světel nemyslíme na elektřinu., Nicméně, když čelíte rozhodnutí vytvořit aplikaci pro vaše podnikání, pak je příznivé pochopit, co znamená SPA (single page application) a jak se liší od vícestránkových aplikací (MPA).
V tomto článku, budeme mluvit o tom, co je Single Page Aplikace (SPA), jaké výhody má LÁZNĚ přinést uživatelům a podnikům, jak to funguje s SEO, jaké jsou jeho klady a zápory, a nakonec, jak SPA funguje s takovou technologií jako Blazor, Úhlové, Reagovat.js a Vue.js.,
======================
V tomto vydání:
- Single Page Aplikace Definice
- Single Page Aplikace Výhody
- Single Page Aplikace Nevýhody
- Single Page Aplikace Otázkách Migrace
- Výhody LÁZNĚ pro Uživatele
- Výhody LÁZNĚ pro Firmy
- Single Page Aplikace Architektura
- LÁZNĚ a Úhlové, Reagovat.js, Vue.js, a .,NET
======================
Co Dělá Single Page Aplikace na Mysli a Proč Potřebujeme jednu Stránku Aplikace
single-page aplikace je aplikace, která nepotřebuje, aby znovu načíst stránku, během jeho použití a funguje v prohlížeči. Přemýšlejte o aplikacích, které používáte denně: Facebook, Mapy Google, Gmail, Twitter, Disk Google nebo dokonce GitHub. To vše jsou příklady lázní.
jednou z nejlepších výhod správně nakonfigurovaných lázní je uživatelský zážitek (UX), kde si uživatel užívá přirozeného prostředí aplikace, aniž by musel čekat na načtení stránky a další věci., Zůstanete na stejné stránce, která je napájena programovacím jazykem JavaScript.
předtím, Než půjdeme dále, tam jsou tři zkratky uvidíte v tomto článku:
- SPA – single-page aplikace (jako jsme se již zmínil výše)
- MPA – multi-stránka aplikace (tradiční aplikace, která načte nové stránky, když kliknete na odkaz)
- PWA – progresivní webové aplikace (webové stránky, která je vytvořena pomocí Javascriptu nebo jeho rámce a může fungovat jako aplikace, tj., můžete jej například přidat na domovskou stránku mobilního telefonu jako aplikaci)
výhody aplikace pro jednu stránku: Proč používat aplikaci pro jednu stránku?
hlavní výhodou jednostránkových aplikací je jeho rychlost. Většina zdrojů SPA potřeby (HTML + CSS + skripty) jsou načteny při spuštění aplikace a nemusí být znovu načten během používání. Jediná věc, která se mění, jsou data, která jsou přenášena na server a ze serveru. Výsledkem je, že aplikace je velmi citlivý na dotazy uživatele a nemusí čekat na komunikaci klient-server po celou dobu.,
Četné studie Google a klíčová zjištění společnostmi, jako je Amazon a Wal-Mart ukazují, že pokud stránky trvá více než 200 milisekund, aby zatížení, to má potenciál zničit vaše podnikání, nebo, přinejmenším, stát mnoho peněz. Například Amazon říká, že 1 sekunda dodatečného zpoždění načtení stránky je stojí 1% tržeb (což je vzhledem k objemu prodeje Amazonu 1, 6 miliardy dolarů ročně.)
z pohledu vývojáře je vytvoření takové aplikace zefektivněno a optimalizováno., Pro vykreslení stránek na serveru nemusíte psát kód. K zahájení procesu vývoje nepotřebujete ani server. Můžete odstartovat ze souboru, abyste mohli začít. Kromě toho může vývojář zcela znovu použít stejný backendový kód na straně serveru a efektivní API pro webovou aplikaci a nativní mobilní aplikaci.
jednostránkové aplikace jsou vynikající, když máte tým vývojářů, kteří pracují společně., Umožňuje vývojářům backendu soustředit se na API, zatímco vývojáři frontend mohou věnovat větší pozornost vytváření nejlepších uživatelských zkušeností založených na rozhraní API backend a implementaci krásného uživatelského rozhraní.
ladění jednostránkové aplikace je také snadné pomocí prohlížeče Chrome, protože má speciální nástroje pro úhlový Batarang a React (technologie používané pro SPAs.) Pomocí konzoly můžete sledovat síťové operace a zkoumat různé prvky stránky a související data.,
proces ukládání do mezipaměti je také docela efektivní-aplikace odešle pouze jeden požadavek, uloží všechna přenášená data a může tato data použít. To je zvláště důležité v době, kdy uživatel může mít špatnou konektivitu-s/on může stále používat aplikaci, protože je synchronizován se serverem, když se připojení zlepšuje.
výše jsme zmínili progresivní webové aplikace (PWA) a lázně lze snadno přeměnit na PWA. To zase umožňuje vývojářům poskytovat místní ukládání do mezipaměti a nabízet offline zážitek klientům a uživatelům.,
single page application nevýhody: proč ne jediná stránka aplikace?
navzdory všem výhodám jednostránkových aplikací není nic dokonalého. Podívejme se na časy, kdy lázně nemohou být ideálním řešením.
co máme na mysli nevýhody aplikace na jedné stránce?
jednostránkové aplikace výrazně zatěžují prohlížeč. Pokud například uživatelé mají zařízení s nízkým výkonem, budou mít špatné zkušenosti s aplikací z hlediska rychlosti.
další problémy s JavaScriptem vznikají, protože se musíte ujistit, že nedochází k únikům paměti., Protože aplikace může běžet na dlouhou dobu – hodiny v kuse (oproti MPA, kde životnost stránku se počítá v minutách), budete muset ujistěte se, že vaše WELLNESS není spotřebovávat více paměti, než je třeba. V opačném případě bude potěšení z rychlého načítání stránek zničeno pomalostí nedostupné paměti na zařízení uživatele.
další nevýhodou Javascriptu je, že uživatelé jednoduše mohou mít vypnuté na jejich zařízení, a pak budete muset myslet na další způsoby, jak mohou přístup k informacím na webu nebo vaší aplikace bez Javascriptu.,
další kritickou věcí, kterou je třeba pamatovat na používání nebo budování lázní, je bezpečnost. Vzhledem k skriptování mezi stránkami (XSS) a skutečnosti, že nejsou načteny žádné nové stránky, mohou hackeři získat přístup k vašemu webu a vložit nové skripty na straně klienta.
Pokud tedy uvažujete o vytvoření jednostránkové aplikace pro vaše podnikání, ujistěte se, že přijmete nezbytná opatření, abyste to nedopustili.
dalším bezpečnostním problémem je soukromí citlivých dat. Počáteční načtení stránky by nemělo obsahovat žádné informace, které by neměly být dostupné pro všechny uživatele., Protože celý SPA zatížení hned na zařízení uživatele, můžete nechtěně dát pryč údaje, které by měly být za přihlášení, nebo není k dispozici vůbec.
SEO optimalizace pro jednostránkové aplikace
SEO optimalizace je ošidná, když máte jednostránkovou aplikaci, proto jsme se rozhodli věnovat jí samostatnou sekci v lázeňských nevýhodách.
je bezpečnější používat SPAs, když se nespoléháte na optimalizaci vyhledávače (SEO) tolik, například pokud je vaše aplikace přístupná pouze prostřednictvím přihlášení.,
Pokud máte blog, na druhou stranu je pro vyhledávače těžší indexovat vaše webové stránky SPA na rozdíl od tradičních stránek poskytovaných serverem. Je to proto, že adresa URL se ve skutečnosti nemění a různé stránky obvykle nemají své adresy URL.
proto Vám doporučujeme: pokud se nechcete obtěžovat s nastavením adresy URL, vyberte rámec, který podporuje Vykreslování na straně serveru (SSR). Navíc nepoužívejte iframe windows, použijte statické adresy URL a optimalizujte skripty na vaší stránce, abyste je urychlili., Nakonec se ujistěte, že vaše stránky mají HTML5, aby k nim mohl přistupovat prohledávač Google.
měli byste také věnovat zvláštní pozornost zprávám serveru, zejména chybám 200 a 404.
problémy s migrací aplikací na jedné stránce
jednostránkové aplikace znějí, jako by byly odeslány z nebe, aby zjednodušily zkušenosti uživatelů s webem. Je to rychlé a pohodlné; je to téměř dokonalé. Je to opravdu tak?,
Když uvažujete o migraci do jednostránkové aplikace z MPA, musíte zastavit a zvážit výhody a nevýhody (které jsme zmínili výše.)
kdy použít SPA
můžete se ptát: „kdy mám použít jednu stránkovou aplikaci?“Pokud máte firmu nebo osobní web, který potřebuje dynamickou platformu a malý objem dat, je jednostránková aplikace dobrým nápadem. Je to také skvělá volba, pokud plánujete v budoucnu vyvinout mobilní aplikaci, protože, jak jsme již zmínili výše, rozhraní backend API lze použít jak pro webové, tak pro mobilní aplikace.,
hlavní nevýhodou je SEO, ale architektura je vhodná pro platformy Software-as-a-Service (SaaS), uzavřené komunity a sociální sítě (proto ji Facebook používá). Důvodem je to, že tyto stránky nepotřebují optimalizaci pro vyhledávání na Googlu.
kdy použít Mpa
velké společnosti s širokou škálou služeb a produktů by měly prospěch z tradičnější vícestránkové aplikace. Mezi takové podniky patří internetové obchody, firemní stránky, katalogy a Tržiště., Správa takové aplikace by byla také mnohem jednodušší, protože je možné ji připojit k více uživatelským databázím.
a Konečně, tyto typy společností by bylo třeba hledat motor optimalizace možnosti, protože spousta z nich by chtěl být nalezené v Google, Bing a další vyhledávače (prodávat výrobky nebo služby, které nabízejí.)
výhody SPA pro uživatele
hlavní výhodou jednostránkových aplikací pro koncové uživatele je samozřejmě rychlost načítání aplikace a schopnost pracovat offline.,
SPA nabízí lineární uživatelský zážitek, což znamená, že je snadné procházet web a pochopit, kde najít tuto nebo tu věc. Například Saucony SPA má jasný začátek, střed a konec. Pomocí designu UI/UX vývojáři aplikací Saucony použili posouvání paralaxy a přechody, aby se cesta zákazníka stala příjemnou.
jednostránkové aplikace jsou skvělé i na mobilních zařízeních, protože většinu času potřebují všichni uživatelé posouvat (přemýšlejte o nekonečné zdi Facebook). Nemusíte klikat na žádné odkazy a stačí si užít rolování.,
Výhody LÁZNĚ pro Podniky
Pokud jde o podniky, single-page aplikace, vývoj obvykle trvá méně času, protože stejný backend API může být použit jak pro web a mobilní. Výsledkem je, že tok informací je zefektivněn a je mnohem snazší vytvořit samostatnou nativní mobilní aplikaci.
Vzhledem k tomu, výhody v rychlosti optimalizace SPA, podniky mohou také těžit, protože uživatelé by se více zajímat pomocí aplikace, která je rychle (ergo, koupit něco, nebo stačí použít aplikaci častěji.,)
single page application Architecture and How Does Single Page application Work
Jak fungují jednostránkové aplikace? Jednostránková Architektura aplikací je poměrně přímočará-skládá se z technologií na straně klienta (v HUSPI se spoléháme na React.js, úhlový, a Vue.js) a technologie na straně serveru (pro které obvykle používáme Node.js)
pokud jde o způsob, jakým stránky vykresluje, jak to je prezentováno uživateli, tam jsou na výběr ze tří možností.,
Klienta straně vykreslování (CSR)
- prohlížeč odešle požadavek na HTML soubor ze serveru
- server odpoví rychle s jednoduchým HTML soubor se styly a skripty spojené
- uživatel vidí prázdnou stránku nebo nějaký loader obraz, zatímco js je provedení
- aplikace načte data, generuje názory, a vstřikuje do DOM
- Aplikace je připraven k použití
To může být možnost pro jednoduché webové stránky, ale mějte na paměti, že vykreslování informací na straně klienta vyžaduje mnoho zdrojů ze zařízení, a mohla by přetížit prohlížeče., V důsledku toho může být tato možnost nejpomalejší ze tří. Současně, pokud máte webové stránky s vysokým provozem, CSR by bylo lepší, protože by poskytovalo informace uživateli, aniž by museli příliš mluvit se serverem.
také, pokud potřebujete možnosti sociálního sdílení, mějte na paměti, že všechny stránky v CSR mají obvykle stejné hodnoty otevřeného grafu (og:), proto musíte použít SSR nebo SSG.,ng (SSR)
- prohlížeč odešle požadavek na HTML soubor ze serveru
- server, načte všechny potřebné údaje, vykreslí aplikace, a generuje aplikace je HTML soubor za běhu
- uživatel vidí obsah je k dispozici
- single-page application framework je to, co se váže události, vytváří virtuální DOM, a provádí další akce
- Aplikace je připraven k použití
Server-side rendering je možnost spolehnout se na HUSPI, protože to kombinuje rychlost single-page aplikace a nezatěžuje prohlížeč uživatele, aby aplikace rychle.,
Statického Webu Generátory (SSG)
- prohlížeč odešle požadavek na HTML soubor ze serveru
- server odpoví rychle s již připravený HTML soubor
- uživatel vidí stránku
- aplikace načte data, generuje názory, a vstřikuje do DOM
- Aplikace je připraven k použití
Dobrá a rychlá možnost, ale nezapomeňte, že pokud budete mít dynamický obsah na vaše webové stránky, statické stránky generátory nebyla by to vaše nejlepší přátele, protože jsou orientované více na statické stránky (jak jste už mohli uhodnout z názvu.,)
jak provést aplikaci jedné stránky pomocí úhlové, reagovat.js a Vue.js
Když jsem psal tento článek, konzultoval jsem s našimi vývojáři, abych pochopil, jaké jsou nejlepší postupy na světě, pokud jde o vytváření jednostránkových aplikací, které se zde používají v HUSPI.
HUSPI vývojáři se snažili a testovány mnoha rámců a mají různé pracovní prostředí, ale oni se sjednotit v tom, že tam jsou top-tři rámce pro frontend – Angular, React, a Vue – a je tam jeden hlavní (jejich oblíbené) pro backend – Uzel.js., Existuje několik dalších rámců dostupných na trhu (jako Ember nebo Knockout), ale nepoužíváme je tolik.
K vytvoření single-page aplikaci, budete potřebovat AJAX a HTML5 stavět responzivní stránky, zatímco Hranatá, Reagovat, a Vue jsou odpovědné za manipulaci „zvedání těžkých břemen“ na straně klienta LÁZNÍ.
Co si vybrat – React, Angular, nebo Vue?
napsali jsme několik článků na téma srovnání těchto rámců., Porovnejme je však znovu, abychom zjistili, zda mají výhody z hlediska vytváření jednostránkových aplikací.
Úhlové a jednostránkové aplikace
Angular je JavaScript framework, který byl představen společností Google v roce 2010. Mezi třemi možnostmi, které porovnáváme, je Angular nejstarší a je založen na TypeScriptu. Díky TypeScriptu je Angular skvělou volbou pro použití velkými týmy vývojářů a společností, které již tuto technologii používají ve svých dalších produktech.
je to nejvyspělejší z rámců a má slušný počet přispěvatelů na GitHub., Může to být těžší, pokud jde o křivku učení, ale zároveň to stojí za to.
Mezi klienty, kteří používají Úhlové pro jejich Single-Page Aplikací jsou Google (a jejich produktů, jako je Gmail a Google Drive) a Wix, takže pokud jste se rozhodli vytvořit jednu stránku aplikace pomocí Úhlové, budete ve skvělé společnosti.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
úhlová komunita se chystá uvolnit úhlovou 9.0.0 – co očekávat v nové verzi Angular?
reagovat.js a jednostránkové aplikace
reagovat.js je JavaScript knihovna, která byla vytvořena v roce 2013 Facebook., Facebook Instagram a WhatsApp jej používají ve velké míře v celé své produktové řadě, včetně takových známých jednostránkových aplikací, jako je Facebook sám, Instagram a WhatsApp. Kromě Facebook používá Uber také React.JS Knihovna pro jejich produkty.
ze tří konkurentů má React nejvýznamnější množství přispěvatelů na Githubu-přes tisíc – což pomáhá zůstat v aktuálním stavu s různými výzvami, kterým vývojáři čelí každý den.
naši vývojáři zde v HUSPI také upřednostňují reakci na projekty, které vyvíjíme (pokud neexistují požadavky na jiný rámec)., Je dostatečně lehký a zralý, aby mohl být testován a vyzkoušen a shledán hodným.
Reagovat, je správnou volbou pro ty, kteří jsou právě začínáme s JavaScript frontend rámců, stejně jako startupy a vývojáře, kteří chtějí být flexibilní. Reagovat nabízí dobré možnosti integrace s dalšími technologiemi a rámce, což je velmi užitečné, když pracujete na projektu s velkým ekosystému.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js a jednostránkové aplikace
Vue je nejmladší ze tří, vytvořené v roce 2014 bývalým zaměstnancem Google Yuxi (Evan) vy., Přestože žádná velká společnost nepodporuje její vývoj, Vue se podařilo zvýšit popularitu. V současné době takové společnosti jako GitLab, Baidu a Alibaba používají Vue.js pro jejich potřeby.
Pokud dáváte přednost jednoduchosti a flexibilitě ve vašich front-end rámcích, pak je Vue dobrou volbou. Kromě toho je to nejlehčí ze všech.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
Nedávno jsme napsali článek o React.js vs. Vue.js
Single-Stránky Aplikací a ASP.NET (Blazor)
rozhodli Jsme se přidat ASP.NET možnost do seznamu rámců a technologií pro single-page aplikací., V bloku je nový kluk jménem Blazor. Je to. NET framework, který používá C#/Razor a HTML, který běží v prohlížeči s WebAssembly, podle úložiště GitHub.
Microsoft oznámil vydání tohoto rámce dříve v roce 2019 a v současné době vypadá, že Verze 1.0 je připravena. Tento vážný podporu od velké společnosti je velkou výhodou Blazor, protože to okamžitě dělá tento open-source nástroj součástí 60,000+ OSS přispěvatelů společenství s 3,700+ OSS společnost přispěvatelů.,
Blazor je vhodný nástroj, protože není potřeba TypeScript nebo JavaScript, můžete psát veškerou logiku v C#. To řekl, Blazor nabízí interoperabilitu s JavaScript Api a knihoven, takže pokud váš ekosystém je velký a skládá se z JS knihovny, nejste ztraceni v přechodu.
. Net Blazor nabízí také dvě různé možnosti-pouze pro klienta Blazor a server-side Blazor. Ten by měl být dodáván s.net Core 3.0.
znamená to, že Blazor zabije Úhlové, reagovat, nebo Vue? To si nemyslíme. Je to však něco, na co je třeba dávat pozor.
pro lázeňské použití .,NET, můžete také použít ASP.NET jádro a ASP.NET MVC. Jak vytvořit jednu stránku aplikace v ASP.NET MVC? Nastavíte ji na backend sloužit HTML na frontend.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
závěr
vzhledem k nárůstu mobilních zařízení a životnímu stylu na cestách jsou jednostránkové aplikace skvělé. Ať už by vaše podnikání šlo o lázně nebo MPA – to je spíše otázka pro vaše obchodní analytiky a požadavky.,
Na HUSPI, máme obchodní analytici v týmu, kteří mohou pomoci s pochopením a definování technických potřeb projektu (a vývojáře, kteří mohou stavět architekturu a samotný projekt od základů).