suntem atât de folosit pentru a fi on-line și cu un telefon mobil cu mâinile noastre care de multe ori nici macar nu ne oprește să se gândească la ce fel de tehnologie este de a ne ajuta rula acest lucru sau că app. De obicei, aceasta nu este o problemă – nu ne gândim la electricitate atunci când aprindem luminile., Cu toate acestea, atunci când vă confruntați cu decizia de a crea o aplicație pentru afacerea dvs., atunci este favorabil să înțelegeți ce înseamnă SPA (aplicație cu o singură pagină) și cum este diferită de aplicațiile cu mai multe pagini (mpa). în acest articol, vom vorbi despre ce este aplicația cu o singură pagină (SPA), ce beneficii aduce SPA utilizatorilor și întreprinderilor, cum funcționează cu SEO, care sunt avantajele și dezavantajele sale și, în final, cum funcționează SPA cu tehnologii precum Blazor, Angular, React.js, și Vue.J. S.,

======================

În această problemă:

• o Singură Pagină Potrivită Definiție
• o Singură Pagină Aplicații Avantaje
• Single Page Application Dezavantaje
• Single Page Application Problemele Migrației
• Beneficiile SPA pentru Utilizatori
• Beneficiile SPA pentru Afaceri
• o Singură Pagină Aplicații Arhitectura
• centru de SPA și Unghiulare, să Reacționeze.js, Vue.js, și .,NET

======================

ce înseamnă aplicație cu o singură pagină și de ce avem nevoie de aplicație cu o singură pagină

o aplicație cu o singură pagină este o aplicație care nu trebuie să reîncarce pagina în timpul utilizării sale și funcționează într-un browser. Gândiți-vă la aplicațiile pe care le utilizați zilnic: Facebook, Google Maps, Gmail, Twitter, Google Drive sau chiar GitHub. Toate acestea sunt exemple de SPA.unul dintre cele mai bune avantaje ale unui SPA configurat corect este experiența utilizatorului (UX), unde utilizatorul se bucură de un mediu natural al aplicației fără a fi nevoie să aștepte reîncărcările paginii și alte lucruri., Rămâneți pe aceeași pagină, care este alimentată de limbajul de programare JavaScript. înainte de a merge mai departe, există trei abrevieri pe care le veți vedea în acest articol:

• SPA – aplicație cu o singură pagină (așa cum am menționat mai sus)
• MPa – aplicație cu mai multe pagini (o aplicație tradițională care încarcă pagini noi când faceți clic pe un link)
• PWA-aplicație web progresivă (un site web care este construit folosind JavaScript,, puteți, de exemplu, să o adăugați la pagina dvs. de pornire a telefonului mobil ca aplicație)

avantajele aplicației cu o singură pagină: de ce să folosiți aplicația cu o singură pagină?

principalul avantaj al aplicațiilor cu o singură pagină este viteza sa. Cele mai multe resurse nevoile SPA (HTML + CSS + script-uri) sunt încărcate la lansarea aplicației și nu trebuie să fie reîncărcate în timpul utilizării. Singurul lucru care se schimbă este datele care sunt transmise către și de la server. Drept urmare, aplicația este foarte receptivă la întrebările utilizatorului și nu trebuie să aștepte comunicarea client-server tot timpul.,numeroase studii efectuate de Google și constatările cheie ale unor companii precum Amazon și Wal * Mart arată că, dacă o pagină durează mai mult de 200 de milisecunde pentru a se încărca, are potențialul de a vă ruina afacerea sau, cel puțin, vă costă mulți bani. De exemplu, Amazon spune că 1 secundă de întârziere suplimentară în încărcarea paginii le costă 1% din vânzări (care, având în vedere valoarea vânzărilor Amazon, este de 1, 6 miliarde de dolari pe an.)

Din punctul de vedere al dezvoltatorului, crearea unei astfel de aplicații este simplificată și optimizată., Nu aveți nevoie pentru a scrie cod pentru a face paginile de pe server. Nici măcar nu aveți nevoie de un server pentru a începe procesul de dezvoltare. Puteți începe dintr-un fișier pentru a începe. În plus, dezvoltatorul poate reutiliza complet același cod backend server-side și API eficient pentru aplicația web și o aplicație mobilă nativă. aplicațiile cu o singură pagină sunt excelente atunci când aveți o echipă de dezvoltatori care lucrează împreună., Permite dezvoltatorilor backend să se concentreze pe API, în timp ce dezvoltatorii frontend pot acorda mai multă atenție creării celei mai bune experiențe de utilizator bazate pe API-ul backend și implementării unei interfețe de utilizator frumoase. depanarea unei aplicații cu o singură pagină este, de asemenea, ușoară folosind browserul Chrome, deoarece are instrumente speciale pentru Batarang unghiular și React (tehnologiile utilizate pentru spa-uri.) Folosind o consolă, puteți monitoriza operațiunile de rețea, precum și investiga diverse elemente de pagină și date asociate., procesul de cache este, de asemenea, destul de eficient – aplicația trimite o singură Solicitare, stochează toate datele transmise și poate utiliza aceste date. Acest lucru este deosebit de important în momentele în care utilizatorul poate avea o conectivitate slabă – poate utiliza în continuare aplicația dvs., deoarece este sincronizată cu serverul atunci când conexiunea se îmbunătățește.am menționat mai sus aplicațiile web progresive (PWA), iar spa-urile pot fi ușor transformate într-un PWA. La rândul său, acest lucru permite dezvoltatorilor să furnizeze cache-ul local și să ofere experiența offline clienților și utilizatorilor.,

dezavantaje aplicație singură pagină: de ce nu o singură aplicație pagină?

În ciuda tuturor avantajelor aplicațiilor cu o singură pagină, nimic nu este niciodată perfect. Să verificăm momentele în care SPA-ul nu poate fi o soluție ideală.

ce înțelegem prin dezavantaje aplicație singură pagină? aplicațiile cu o singură pagină pun o sarcină mai semnificativă pe browser. De exemplu, dacă utilizatorii dvs. au dispozitive cu putere redusă, vor avea o experiență slabă a aplicației în ceea ce privește viteza.

probleme suplimentare cu JavaScript apar pentru că trebuie să vă asigurați că nu există scurgeri de memorie., Deoarece aplicația poate rula o perioadă lungă de timp – ore la un moment dat (spre deosebire de MPA, unde durata de viață a unei pagini a fost contorizată în câteva minute), trebuie să vă asigurați că SPA-ul dvs. nu consumă mai multă memorie decât are nevoie. În caz contrar, plăcerea de a încărca rapid paginile va fi distrusă de lentoarea memoriei indisponibile de pe dispozitivul utilizatorului.un alt dezavantaj al JavaScript este că utilizatorii pur și simplu pot avea dezactivat pe dispozitivele lor, și apoi trebuie să se gândească la modalități suplimentare de modul în care acestea pot accesa informațiile de pe site-ul sau aplicația fără JavaScript., un alt lucru critic de reținut despre utilizarea sau construirea unui SPA este securitatea. Datorită cross-site scripting (XSS) și faptul că nu sunt încărcate pagini noi, hackerii pot avea acces la site-ul dvs. web și pot injecta scripturi noi pe partea clientului. prin urmare, dacă vă gândiți să construiți o aplicație cu o singură pagină pentru afacerea dvs., asigurați-vă că luați măsurile de precauție necesare pentru a nu permite acest lucru. o altă problemă de securitate este confidențialitatea datelor sensibile. Încărcarea inițială a paginii nu trebuie să conțină informații care nu ar trebui să fie disponibile pentru toți utilizatorii., Deoarece întregul SPA se încarcă imediat pe dispozitivul utilizatorului, este posibil să oferiți din greșeală date care ar trebui să fie în spatele unei autentificări sau care nu sunt disponibile deloc. optimizarea SEO este dificilă atunci când aveți o aplicație cu o singură pagină, motiv pentru care am decis să-i dedicăm o secțiune separată în dezavantajele SPA.este mai sigur să folosiți spa-uri atunci când nu vă bazați atât de mult pe optimizarea motoarelor de căutare (SEO), de exemplu, dacă aplicația dvs. poate fi accesată doar printr-o autentificare.,

dacă aveți un blog, pe de altă parte, este mai greu pentru motoarele de căutare să vă indexeze site-ul SPA, spre deosebire de paginile tradiționale redate de server. Acest lucru se datorează faptului că adresa URL nu se schimbă cu adevărat, iar paginile diferite nu au de obicei adresele URL. prin urmare, sfatul nostru pentru dvs.: dacă nu doriți să vă deranjați cu setările URL, alegeți un cadru care acceptă randarea din partea serverului (SSR). În plus, nu utilizați iframe windows, utilizați URL-uri statice și optimizați scripturile de pe pagina dvs. pentru a le accelera., În cele din urmă, asigurați-vă că paginile dvs. au HTML5 pentru ca Google crawler să le poată accesa.de asemenea, ar trebui să acordați o atenție deosebită mesajelor serverului, în special erorilor 200 și 404.

o Singură Pagină Aplicarea Aspectelor legate de Migrație

o Singură pagină aplicații suna ca acestea au fost trimise din cer pentru a simplifica experiența utilizatorilor cu site-ul. Este rapid și convenabil; este aproape perfect. Este într-adevăr așa?,când vă gândiți să migrați la aplicația cu o singură pagină dintr-un MPA, trebuie să vă opriți și să luați în considerare argumentele pro și Contra (pe care le-am menționat mai sus.)

când să utilizați un SPA

s-ar putea să vă întrebați: „când ar trebui să folosesc o aplicație cu o singură pagină?”Când aveți o afacere sau un site web personal care are nevoie de o platformă dinamică și un volum mic de date, aplicația cu o singură pagină este o idee bună. De asemenea, este o opțiune excelentă dacă intenționați să dezvoltați o aplicație mobilă în viitor, deoarece, așa cum am menționat mai sus, API-ul backend poate fi utilizat atât pentru aplicațiile web, cât și pentru cele mobile.,principalul dezavantaj este SEO, dar arhitectura este potrivită pentru platformele Software-as-a-Service (SaaS), comunitățile închise și rețelele sociale (motiv pentru care Facebook o folosește). Motivul pentru aceasta este că aceste site-uri nu au nevoie de optimizare pentru căutarea pe Google.

când să utilizați un MPA

companiile mari cu o gamă largă de servicii și produse ar beneficia de o aplicație mai tradițională pe mai multe pagini. Astfel de afaceri includ magazine online, site-uri de companie, cataloage și piețe., Gestionarea unei astfel de aplicații ar fi, de asemenea, mult mai ușoară, deoarece este posibilă conectarea acesteia la mai multe baze de date ale utilizatorilor. în cele din urmă, aceste tipuri de companii ar avea nevoie de opțiuni de optimizare a motoarelor de căutare, deoarece multe dintre ele ar dori să fie găsite în Google, Bing și alte motoare de căutare (pentru a vinde produsele sau serviciile pe care le oferă.principalul avantaj al aplicațiilor cu o singură pagină pentru utilizatorii finali este, desigur, viteza cu care se încarcă aplicația, precum și capacitatea de a lucra offline.,SPA oferă o experiență liniară pentru utilizatori, ceea ce înseamnă că este ușor să navigați pe site și să înțelegeți unde să găsiți acest lucru sau acel lucru. De exemplu, Saucony SPA are un început clar, mijloc și sfârșit. Folosind designul UI / UX, dezvoltatorii de aplicații Saucony au folosit defilarea și tranzițiile parallax pentru a face călătoria clientului una plăcută. aplicațiile cu o singură pagină sunt excelente și pe dispozitivele mobile, deoarece de cele mai multe ori, tot ce trebuie utilizatorii este să deruleze (gândiți-vă la peretele Facebook nesfârșit). Nu trebuie să faceți clic pe niciun link și vă bucurați doar de defilare., când vine vorba de afaceri, dezvoltarea de aplicații cu o singură pagină durează de obicei mai puțin timp, deoarece același API backend poate fi utilizat atât pentru web, cât și pentru mobil. Drept urmare, fluxul de informații este simplificat și devine mult mai ușor să creați o aplicație mobilă nativă independentă. având în vedere avantajele în optimizarea vitezei SPA-ului, întreprinderile pot beneficia, de asemenea, deoarece utilizatorii ar fi mai interesați să folosească o aplicație rapidă (ergo, să cumpere ceva sau să folosească aplicația mai des.,)

arhitectura aplicației cu o singură pagină și cum funcționează aplicația cu o singură pagină

cum funcționează aplicațiile cu o singură pagină? Arhitectura de aplicații cu o singură pagină este destul de simplă – constă în tehnologiile client-side (la HUSPI, ne bazăm pe React.js, Angular și Vue.js) și tehnologiile server-side (pentru care folosim de obicei nod.js)

În ceea ce privește modul în care site-ul redă așa cum este prezentat utilizatorului, există trei opțiuni din care să alegeți.,

Client-side rendering (CSR)

1. browser-ul trimite o cerere de fișier HTML de pe server
2. serverul răspunde rapid, cu un simplu fișier HTML cu stiluri și script-uri legate
3. utilizatorul vede o pagină goală sau un încărcător de imagine în timp ce js se execută
4. aplicație preia date, generează opinii, și injectează în DOM
5. Cererea este gata de utilizare

Acest lucru ar putea fi o opțiune pentru site-uri simple, dar păstrează în minte faptul că de redare a informațiilor de pe partea de client necesită o mulțime de resurse de pe dispozitiv și ar putea suprasolicita browser-ul., Drept urmare, această opțiune ar putea fi cea mai lentă dintre cele trei. În același timp, dacă aveți un site web cu trafic ridicat, CSR ar fi mai bine, deoarece ar prezenta informațiile utilizatorului fără a fi nevoie să vorbească prea mult cu serverul.de asemenea, dacă aveți nevoie de opțiuni de partajare socială, rețineți că toate paginile din CSR au de obicei aceleași valori open graph (og:), prin urmare trebuie să utilizați fie SSR, fie SSG.,ng (SSR)

1. browser-ul trimite o cerere de fișier HTML de pe server
2. serverul preia toate datele necesare, face cerere, și generează app fișier HTML pe zbor
3. utilizatorul vede conținutul disponibil
4. single-page application framework este ceea ce se ataseaza evenimente, generează un DOM virtual, și efectuează alte acțiuni
5. Cererea este gata de utilizare

Server-side rendering este o opțiune ne bazăm pe la HUSPI, deoarece combină viteza singură pagină aplicații și nu supraîncărcați browser-ul utilizatorului, ceea ce face app rapid.,

Site Static Generatoare (SSG)

1. browser-ul trimite o cerere de fișier HTML de pe server
2. serverul răspunde rapid, cu un deja pregătit fișier HTML
3. utilizatorul vede pagina
4. aplicație preia date, generează opinii, și injectează în DOM
5. Cererea este gata de utilizare

Bună și rapidă opțiune, dar amintiți-vă că, dacă aveți conținut dinamic pe site-ul dvs., site static generatoare de n-ar fi cei mai buni prieteni, deoarece acestea sunt orientate mai mult la pagini statice (după cum ați putut deja am ghicit din nume.,)

cum se face o singură aplicație pagină folosind Angular, React.js, și Vue.JS

în timp ce scriam acest articol, m-am consultat cu dezvoltatorii noștri pentru a înțelege care sunt cele mai bune practici din lume în ceea ce privește crearea de aplicații cu o singură pagină care sunt utilizate aici la HUSPI.dezvoltatorii HUSPI au încercat și testat numeroase cadre și au medii de lucru diferite, dar se unesc spunând că există trei cadre de top pentru frontend-Angular, React și Vue – și există un principal (favoritul lor) pentru nodul backend.J. S., Există o mână de alte cadre disponibile pe piață (cum ar fi Ember sau Knockout), dar nu le folosim la fel de mult. pentru a construi o aplicație cu o singură pagină, aveți nevoie de AJAX și HTML5 pentru a construi pagini receptive, în timp ce Angular, React și Vue sunt responsabile pentru manipularea „ridicării grele” pe partea clientului unui SPA.

ce să alegeți – React, Angular sau Vue?

am scris mai multe articole pe tema comparației între aceste cadre., Cu toate acestea, să le comparăm din nou pentru a vedea dacă au avantaje în ceea ce privește crearea aplicațiilor cu o singură pagină.

Aplicații unghiulare și cu o singură pagină

Angular este un cadru JavaScript care a fost introdus de Google în 2010. Dintre cele trei opțiuni pe care le comparăm, Angular este cea mai veche și se bazează pe TypeScript. Datorită TypeScript, Angular este o opțiune excelentă de utilizat de către echipe mari de dezvoltatori și companii care folosesc deja această tehnologie în celelalte produse.este cel mai matur dintre cadre și are un număr decent de contribuitori pe GitHub., Ar putea fi mai greu în ceea ce privește curba de învățare, dar, în același timp, merită. printre clienții care folosesc Angular pentru aplicațiile lor cu o singură pagină se numără Google (și produsele lor, cum ar fi Gmail și Google Drive) și Wix, deci dacă decideți să creați o aplicație cu o singură pagină folosind Angular, veți fi într-o companie excelentă.

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

comunitatea unghiulară este pe cale să elibereze Angular 9.0.0-ce să se aștepte în noua versiune a Angular?

reacționează.JS și aplicații cu o singură pagină

React.js este o bibliotecă JavaScript care a fost creată în 2013 de Facebook., Facebook Instagram, Instagram și WhatsApp o folosesc pe scară largă pe toată linia lor de produse, inclusiv aplicații cunoscute cu o singură pagină, cum ar fi Facebook în sine, Instagram și WhatsApp. Pe lângă Facebook, Uber folosește și React.biblioteca js pentru produsele lor.dintre cei trei concurenți, React are cel mai considerabil număr de contribuitori pe GitHub – peste o mie – ceea ce ajută să rămână la curent cu diferitele provocări cu care se confruntă dezvoltatorii în fiecare zi.

dezvoltatorii noștri de la HUSPI preferă, de asemenea, React pentru proiectele pe care le dezvoltăm (cu excepția cazului în care există cerințe pentru un alt cadru)., Este atât de ușor și suficient de matur pentru a fi testat și încercat și a fi găsit demn.

React este alegerea potrivită pentru cei care abia încep cu cadrele JavaScript frontend, precum și startup-urile și dezvoltatorii cărora le place să fie flexibili. React oferă opțiuni bune de integrare cu diverse alte tehnologii și cadre, ceea ce este foarte util atunci când lucrați la un proiect cu un ecosistem mare.

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.js și aplicații cu o singură pagină

Vue este cel mai tânăr dintre cele trei, creat în 2014 de către un fost angajat Google Yuxi (Evan) tu., Chiar dacă nici o corporație mare nu susține dezvoltarea sa, Vue a reușit să crească în popularitate. În prezent, companii precum GitLab, Baidu și Alibaba folosesc Vue.js pentru nevoile lor.dacă preferați simplitatea și flexibilitatea cadrelor front-end, atunci Vue este o opțiune bună. În plus, este cel mai ușor dintre toate.

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

recent, am scris un articol despre React.js vs. Vue.js

o Singură Pagină Aplicații și ASP.NET (Blazor)

Ne-am decis pentru a adăuga ASP.NET opțiunea de a lista de cadre și tehnologii pentru o singură pagină aplicații., E un copil nou pe bloc numit Blazor. Este un. NET framework care utilizează c # / Razor și HTML care rulează în browser cu WebAssembly, conform depozitului GitHub.

Microsoft a anunțat lansarea acestui cadru mai devreme în 2019 și în prezent, se pare că versiunea 1.0 este gata. Acest sprijin serios de la o mare corporație este un mare avantaj al Blazor, deoarece face imediat acest instrument open-source o parte din comunitatea contribuitorilor 60,000+ OSS cu contribuitori 3,700 + OSS company.,

Blazor este un instrument convenabil, deoarece nu este nevoie de TypeScript sau JavaScript, puteți scrie toate logica în C#. Acestea fiind spuse, Blazor oferă interoperabilitate cu API-uri JavaScript și biblioteci, deci dacă ecosistemul dvs. este mare și este format din biblioteci JS, nu vă pierdeți în tranziție.

.NET Blazor, de asemenea, oferă două opțiuni diferite – client-numai Blazor și server-side Blazor. Acestea din urmă ar trebui să fie livrate împreună cu.NET Core 3.0.

înseamnă că Blazor va ucide Angular, React, sau Vue? Nu credem asta. Cu toate acestea, este ceva de urmărit.

pentru utilizarea SPA .,NET, puteți utiliza, de asemenea ASP.NET Core și ASP.NET MVC. Cum de a crea o singură aplicație pagină în ASP.NET MVC? Ați setat-o pe backend pentru a servi HTML pe frontend.

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

Concluzie

având în Vedere creșterea de dispozitive mobile și on-the-go stil de viață, o singură pagină aplicații sunt mari. Indiferent dacă afacerea dvs. ar merge pentru un SPA sau un MPA – aceasta este mai mult o întrebare pentru analiștii și cerințele dvs. de afaceri.,la HUSPI, avem analiști de afaceri în echipă care pot ajuta la înțelegerea și definirea nevoilor tehnice ale proiectului (și dezvoltatori care pot construi arhitectura și proiectul în sine de la zero).