în acest post, vom acoperi principalele beneficii ale adoptării unei arhitecturi SPA în timp ce construim aplicațiile noastre unghiulare și vom răspunde la câteva întrebări foarte frecvente cu privire la spa-uri în general.această postare face parte din seria Angular pentru începători, aici este seria completă:

• Angular pentru începători ghid-Noțiuni de bază (mediu de configurare)

• Angular pentru începători ghid: de ce Angular?, Beneficiile de Top

• unghiular pentru Incepatori Ghid – componente vs directive

• De ce o singură aplicație pagină, care sunt beneficiile? Ce este un SPA?

de ce arhitectura SPA?

să începem cu prima întrebare: De ce aplicații cu o singură pagină (spa-uri)? Acest tip de aplicații există de ani de zile, dar nu au devenit încă răspândite pe Internetul public.

și de ce este asta?

există atât un motiv bun pentru asta, cât și un motiv și mai bun pentru motivul pentru care acest lucru s-ar putea schimba în viitorul apropiat.,

spa-urile au fost adoptate foarte mult în ultimii ani pentru construirea părții de tablou de bord privat a platformelor SaaS (Software as a Service) sau a serviciilor de Internet în general, precum și pentru construirea de aplicații bazate pe date și intensive.

dar Angular impune apoi construirea aplicațiilor noastre ca spa-uri?răspunsul este nu, nu, dar aceasta este o posibilitate interesantă pe care o aduce, având în vedere numeroasele beneficii ale construirii unei aplicații în acest fel. Ceea ce ne aduce la o întrebare cheie:

de ce ai vrea să construiești o aplicație ca SPA?,

acesta este un lucru care este adesea luat de la sine. Toată lumea construiește aplicații în acest fel, dar care este marele avantaj al acestui lucru? Trebuie să existe cel puțin câteva caracteristici ucigașe, nu?să începem cu o caracteristică care nu este menționată foarte des: implementarea producției.

înțelegerea avantajelor utilizării SPA în producție va răspunde, de asemenea, la întrebarea cheie:

ce este o aplicație cu o singură pagină?uneori, numele în dezvoltarea de Software nu sunt bine alese, și care poate duce la o mulțime de confuzie., Cu siguranță nu este cazul cu termenul SPA: o singură aplicație de pagină are literalmente o singură pagină !! 😊

Dacă doriți să vedeți o Singură Pagină Aplicație în acțiune, vă invit să peste cap de la AngularUniv https://angular-university.io și începe făcând clic pe pagina de start de pe lista de cele mai recente cursuri, și în meniul de sus.dacă începeți navigarea, veți vedea că pagina nu se reîncarcă complet – doar date noi sunt trimise pe fir pe măsură ce utilizatorul navighează prin Aplicație – acesta este un exemplu de aplicație cu o singură pagină.,

permiteți-mi să vă dau o explicație pentru care este avantajul construirii unei astfel de aplicații și cum funcționează asta.folosind instrumentele Chrome Dev, să inspectăm indexul.html a site-ului AngularUniv care se descarcă pe pagina de pornire (sau orice altă pagină, dacă navigați și apăsați refresh).

pagina care este descărcată este prima solicitare pe care o veți vedea în Panoul tab – ului de rețea Chrome-adică literalmente singura pagină a aplicației noastre.să observăm un lucru – Această pagină este aproape goală! Cu excepția etichetei, nu se întâmplă prea multe aici.,

Notă: pe site-ul real pe pagina descărcat are, de asemenea, HTML, care a fost pre-prestate pe server folosind Unghiular Universal

Observați numele CSS și Javascript pachete: Toate CSS și Javascript cererii (care include Unghiulare) nu este chiar vine de la același server ca index.html – asta vine de la un complet diferite static server:

În acest caz, cele două pachete sunt de fapt vine de la un Amazon S3 cupă!,

de Asemenea, observați că numele de pachete este versiuni: ea conține marca de timp la care desfășurarea construi fost executat care a trimis această versiune special de aplicare.

Producția de Implementare Avantajele Singură Pagină Aplicații

scenariul am văzut mai sus este de fapt o destul de rece profite de o singură pagină aplicații:

o Singură Pagină Aplicații sunt super ușor de a implementa în Producție, chiar și la o versiune de-a lungul timpului!,

O singură pagină aplicația este super-simplu pentru a implementa în cazul în comparație cu tradiționale de server-side prestate aplicații: este într-adevăr doar un index.html fișier, cu un CSS pachet și un Javascript pachet.aceste 3 fișiere statice pot fi încărcate pe orice server de conținut static, cum ar fi Apache, Nginx, Amazon S3 sau Firebase Hosting.desigur, aplicația va trebui să efectueze apeluri către backend pentru a obține datele sale, dar acesta este un server separat care poate fi construit dacă este necesar cu o tehnologie complet diferită: cum ar fi Node, Java sau PHP.,

de fapt, dacă ne-am construi API-ul REST sau un alt tip de backend în Node, am putea chiar să-l construim și în Typescript, și astfel să putem folosi aceeași limbă atât pe server, cât și pe client și chiar să partajăm un cod între ele.un alt avantaj al implementării frontend – ului nostru ca aplicație cu o singură pagină este o versiune și un rollback. Tot ce trebuie să facem este să versiunea noastră de ieșire construi (care produce CSS și JS pachete evidențiate în galben de mai sus).,

putem configura serverul care servește SPA-ul nostru cu un parametru care specifică ce versiune a aplicației frontend să construiască: este la fel de simplu!

acest tip de implementare scalează foarte bine: serverele de conținut statice precum Nginx pot scala pentru un număr foarte mare de utilizatori.desigur, acest tip de implementare și versiune este valabil numai pentru partea frontend a aplicației noastre, acest lucru nu se aplică serverului backend. Dar totuși, este un avantaj important de a avea.dar implementarea producției este singurul avantaj al aplicațiilor cu o singură pagină?, Cu siguranță nu, aici este un alt avantaj important:

o Singură Pagină Aplicații Și Experiența Utilizatorului

Dacă ați folosit vreodată o aplicație web care este în mod constant de reîncărcare totul de la serverul pe aproape fiecare interacțiune cu utilizatorul, veți ști că acest tip de aplicație vă oferă o experiență de utilizare săraci din cauza:

• constanta full reîncărcările de pagină

• de asemenea, din cauza la rețea și înapoi excursii la server pentru a prelua toate că HTML.,într-o aplicație de o singură pagină, am rezolvat această problemă, folosind o abordare arhitecturală fundamental diferită:

  pe un SPA, după încărcarea inițială a paginii, nu mai este trimis HTML prin rețea. În schimb, numai datele sunt solicitate de la server (sau trimise la server).

  deci, în timp ce un SPA rulează, numai datele sunt trimise pe fir, ceea ce durează mult mai puțin timp și lățime de bandă decât trimiterea constantă a HTML. Să aruncăm o privire la tipul de sarcină utilă care trece peste sârmă de obicei într-un SPA.,

  de exemplu, în ANGULARUNIV SPA, dacă faceți clic pe un curs, nu va fi trimis HTML pe fir. În schimb, primim o solicitare Ajax care primește o sarcină utilă JSON cu toate datele cursului:

  după cum putem vedea, versiunea HTML a unui curs ar fi mult mai mare în comparație cu un obiect JSON simplu datorită tuturor etichetelor de deschidere și închidere, dar există și o mulțime de HTML duplicat dacă încărcăm constant pagini similare de mai multe ori.

  de exemplu, lucruri precum anteturile și subsolurile unei pagini sunt trimise în mod constant browserului, dar nu s-au schimbat cu adevărat.,deci, cu aceasta, avem aici un al doilea mare avantaj al unei aplicații cu o singură pagină: o experiență de utilizator mult îmbunătățită datorită reîncărcărilor de pagini mai puțin complete și a unei performanțe generale mai bune, deoarece este nevoie de o lățime de bandă mai mică.

  deci, de ce nu folosim spa-uri peste tot atunci?

  dacă spa-urile au atât de multe avantaje, de ce nu au fost adoptate la scară mai mare pe Internetul public? Există un motiv bun pentru asta.până relativ recent, motoarele de căutare precum Google au avut dificultăți în indexarea corectă a unei aplicații cu o singură pagină. Dar cum rămâne cu ziua de azi?,în trecut, au existat câteva recomandări pentru a utiliza o schemă specială de Crawling Ajax care a fost între timp depreciată. Deci, Google este acum capabil să redea pe deplin Ajax?

  într-un anunț oficial, avem informațiile conform cărora Căutarea Google este în general capabilă să acceseze Ajax, dar există unele rapoarte că încă nu este complet capabilă să facă acest lucru.

  și recomandarea este de a utiliza accesoriu progresivă în loc. Deci, ce înseamnă asta, în acest stadiu este posibil să folosiți spa-uri în Internetul public sau nu încă?

  spa-uri prietenoase pentru motoarele de căutare?,

  este posibil să aibă performanța și experiența de utilizare a SPA împreună cu SEO bun proprietăți: utilizarea Unghiular Universal pre-motor de randare ne permite să:

  • pre-face o aplicație pe backend
  • nava HTML pentru browser-ul împreună cu Unghiulare
  • și-au Unghiulare bootstrap pe partea de client și să preia pagina de un SPA

  Va SPAs Deveni Mai Frecvente În Viitor?,

  Imaginați-vă o versiune prietenoasă SEO a Amazon care nu s-ar reîmprospăta la fiecare reîncărcare a paginii și cu o performanță mult îmbunătățită și experiență a utilizatorului: acest lucru ar avea probabil un impact pozitiv uriaș asupra timpului petrecut de clienți pe site!deci, beneficiile tehnice ale spa-urilor prietenoase SEO sunt semnificative și cu atât mai mult pe mobil și ne-am aștepta ca aceste tipuri de aplicații SPA prietenoase SEO să devină mai frecvente în viitor și pe Internetul public.

  dar acest lucru lasă ultima întrebare a acestei secțiuni încă fără răspuns., Trebuie să vă gândiți în această etapă după ce ați citit ultimele secțiuni:

  Dacă numai HTML minim este încărcat de pe server la momentul pornirii, atunci cum se schimbă pagina în timp?ceea ce ne conduce la ultima întrebare a acestei secțiuni și poate cea mai importantă:

  cum funcționează aplicația cu o singură pagină?

  într-adevăr, cum pot funcționa pentru că am încărcat foarte puțin HTML de pe server? Odată ce aplicația este pornită, numai datele trec peste fir. Deci, cum vine noul HTML?,

  Pentru că trebuie să fie HTML nou generat undeva, deoarece este singura modalitate prin care browserul va schimba ceea ce afișează, nu?

  răspunsul este simplu și are legătură cu modul în care aplicațiile cu o singură pagină funcționează efectiv în comparație cu aplicațiile tradiționale bazate pe server.

  pe o aplicație tradițională (care include marea majoritate a Internetului public de astăzi), datele de transformare HTML (sau de redare) se face pe partea de server.,

  Pe de altă parte, o Singură pagină aplicații face într-un mod mult diferit:

  Într-un SPA după pornirea aplicației, datele HTML proces de transformare a fost mutat de la server la client – SPAs avea echivalentul de un motor de template rulează în browser-ul dvs.!

  și astfel, cu aceste informații în mână, să încheiem această secțiune rezumând punctele cheie despre aplicațiile cu o singură pagină.,– Avantajele oferite de Spa-uri și Concept-Cheie Despre Cum Funcționează

  pentru a construi aplicația noastră ca un SPA ne va da un număr semnificativ de beneficii:

  • Vom fi în măsură să aducă o experiență îmbunătățită a utilizatorului

  • cererea se va simti mai repede, deoarece mai puțin de lățime de bandă este utilizat, și nu plin reîmprospătează pagina apar ca utilizatorul navighează prin aplicarea

  • aplicația va fi mult mai ușor pentru a implementa în producție, cel puțin, cu siguranță, partea de client: tot ce avem nevoie este un statice server pentru a servi un minim de 3 fișiere: nostru singură pagină de index.,html, un pachet CSS și un pachet Javascript.de asemenea, putem împărți pachetele în mai multe părți, dacă este necesar, folosind divizarea codului.partea frontend a aplicației este foarte simplă pentru versiunea în producție, permițând implementarea simplificată și răsturnări la versiunea anterioară a frontend-ului, dacă este necesar

  și acest doar un scenariu posibil de implementare a spa-urilor în producție.,alte scenarii includ pre-redare părți mari ale aplicației și încărcați totul pe un server de găzduire statică, cache-ul în memorie pe serverul de numai anumite pagini, face versiuni folosind DNS, etc.

  astăzi este mai simplu ca niciodată să faci spa-uri prietenoase SEO, așa că probabil vor avea o adopție crescută în viitor, în scenarii în care Spa-urile nu au fost utilizate frecvent.,

  modul în care funcționează spa-urile

  modul în care aplicațiile cu o singură pagină aduc aceste beneficii este legat de modul în care funcționează intern:

  • după pornire, numai datele sunt trimise pe fir ca o sarcină utilă JSON sau un alt format. Dar nu HTML sau CSS este trimis mai peste sârmă după ce aplicația se execută.,

  punct-cheie pentru a înțelege cât de singură pagină aplicații de lucru este următorul:

  în loc de conversie a datelor în HTML de pe server și apoi trimite-l pe sârmă, într-un SPA ne-am mutat acum că procesul de conversie de la server la client.

  conversia are loc în ultima secundă pe partea de client, ceea ce ne permite să oferim utilizatorului o experiență mult îmbunătățită.sper că acest lucru vă convinge de avantajele spa-urilor., Dacă nu, vă rog să-mi spuneți și de ce nu este cazul, astfel încât să pot dezvolta mai bine unele dintre puncte.de asemenea, în această etapă vreau să vă arăt un cod imediat. Să construim un mic Spa Hello World în Angular și să-l luăm de acolo. Vom vedea cum conceptele pe care le-am introdus harta la aplicația mică pe care urmează să o construim.sper că această postare a ajutat la înțelegerea beneficiilor cheie ale spa-urilor și că v-a plăcut!,această postare face parte din seria Angular pentru începători, aici este seria completă:

  • Angular pentru începători ghid-Noțiuni de bază (mediu de configurare)

  • Angular pentru începători ghid: de ce Angular? Beneficiile de Top

  • unghiular pentru Incepatori Ghid – componente vs directive

  • De ce o singură aplicație pagină, care sunt beneficiile? Ce este un SPA?,

  vă invit să vă abonați la newsletter-ul nostru pentru a obține notificat atunci când mai multe capitole ieși:

  Dacă sunteți abia la început de învățare Unghiulare, au o privire la Unghiulare pentru Incepatori Curs:

  

  Alte mesaje pe Unghiulare

  Au, de asemenea, o privire, de asemenea, la alte posturi populare, care s-ar putea găsi interesant:

  • Obtinerea a Început Cu Unghiulară – Mediu de Dezvoltare de Bune Practici Cu Fire, Unghiulare CLI, de Configurare a unui IDE
  • de Ce o Singură Pagină Aplicații, care sunt Beneficiile ? Ce este un SPA ?,
  • componente inteligente unghiulare vs componente de prezentare: care este diferența, când să folosiți fiecare și de ce?
  • Unghiulare Router – Cum de A Construi un Meniu de Navigare cu Bootstrap 4 și Imbricate Rute
  • Unghiulare Router – Extended Tur Ghidat, A evita Capcanele Comune
  • Unghiulare Componente – Fundamentele
  • Cum de a construi Unghiulare aplicații folosind Observabile Servicii de Date – pentru a evita Capcane
  • Introducerea de Forme Unghiulare – Șablon Condus vs Modelul Condus
  • Unghiulare ngFor – să Învețe toate Caracteristicile, inclusiv trackBy, de ce nu este doar pentru Tablouri ?,
  • unghiular Universal în practică – cum să construiți aplicații SEO prietenoase cu o singură pagină cu unghiular
  • cum funcționează cu adevărat detectarea schimbărilor unghiulare ?