În acest articol, eu voi merge prin unele concepte fundamentale pentru construirea singură pagină aplicații (SPA) și unele singură pagină exemple de aplicații create folosind Syncfusion Essential JS 2 componente.
ce este aplicația cu o singură pagină (SPA)?,
o aplicație cu o singură pagină (SPA) este o aplicație web în care o singură pagină de vizualizare rădăcină va fi încărcată de pe server și apoi, pe baza interacțiunii utilizatorului, aplicația va actualiza dinamic conținutul din partea clientului fără nicio reîncărcare a paginii.spa-urile sunt mai fluide și mai receptive decât aplicațiile convenționale cu mai multe pagini și sunt cele mai potrivite pentru crearea SaaS (Software as a Service), tablouri de bord pentru întreprinderi și alte aplicații web bazate pe formular.,
ciclul de viață al SPA
există mai multe cadre pentru a construi un SPA, dar conceptul de SPA în fiecare cadru rămâne același. Fetch întreaga interfață de Utilizator client-side sau vedere de pe server în timpul încărcării inițiale. Apoi, pe baza interacțiunilor utilizatorului sau a navigării prin aplicație, UI va fi reîmprospătat dinamic la nivelul clientului.
SPA folosește lățimea minimă de bandă pentru a contacta serverul pentru a actualiza datele din interacțiunile utilizatorului și pentru a prelua datele actualizate în timp ce reîmprospătează pagina web.,
sursa Imaginii : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Avantaje ale SPA
o Singură pagină aplicații sunt mult mai fluid și receptiv mult mai multe aplicații. Datorită acestui fapt, aceste aplicații sunt, de asemenea, potrivite pentru dispozitivele mobile, fără a fi nevoie să construiți o aplicație mobilă nativă separată.SPA acceptă interacțiuni bogate cu mai multe componente, cum ar fi editori și ferestre pop-up, pe pagina de vizualizare. Aceste componente pot avea stări intermediare care pot fi mai greu de implementat cu randarea din partea serverului.,în afară de încărcarea inițială a paginii, SPA folosește mai puțină lățime de bandă pentru actualizarea interfeței de utilizare. Nu există nicio actualizare a paginii în timp ce un utilizator navighează în aplicație, făcând aplicația mai confortabilă pentru a fi utilizată pe dispozitivele mobile.deoarece stratul de vizualizare și stratul de date sunt menținute separat în SPA, acest lucru va fi mult mai ușor de implementat în producție.
concepte importante ale SPA
rutare
în SPA, tot conținutul este menținut cu URL-uri separate și se poate naviga la conținut diferit rapid folosind aceste URL-uri.,
aplicațiile cu o singură pagină mențin starea folosind URL-uri sau stări de urmărire intern în timp ce un utilizator navighează prin aplicație.
cazul de utilizare major cu rutarea paginii în SPA este atunci când o persoană împărtășește adresa URL. Acea persoană poate fi sigură că oricine deschide acel link va vedea exact același conținut navigând la adresa URL exactă din aplicație.
legarea și sincronizarea datelor
SPA utilizează o lățime de bandă minimă pentru contactarea serverului pentru preluarea datelor sau pentru actualizarea modelului de date după interacțiunea utilizatorului în aplicație.,
în timp ce un utilizator navighează prin aplicație, modelul de date din server va fi actualizat simultan folosind o solicitare HTTP asincronă (AJAX).
pe baza interacțiunilor utilizatorului, datele sunt actualizate la modelul de date din server. Și aceste modificări de date sunt actualizate înapoi la interfața de utilizare simultan, făcând astfel utilizatorul să poată vizualiza întotdeauna o pagină web actualizată fără a o reîmprospăta.
timp de răspuns rapid și fluid
SPA este cunoscut pentru răspunsurile rapide și fără probleme la interacțiunea cu utilizatorul., Interfețele lor bogate gestionează acțiunea utilizatorului și reîmprospătează UI dinamic fără întârziere sau solicitare de la server. Prin urmare, pot evita întreruperile în experiență și pot face ca aplicația web să se comporte mai mult ca o aplicație desktop.Spa este construit folosind modele Model-View-Controller (MVC) și Model-View-ViewModel (MVVM), dar puteți construi în continuare aplicația pe propriul model MV*.,fișierul de vizualizare (împreună cu pachetul CSS) care deține redarea UI pentru aplicație și stratul de date al aplicației sunt bine întreținute separat în arhitectura SPA.separarea stratului de vizualizare și de date este destinată utilizatorului să reutilizeze pagina de vizualizare pentru diferite seturi de date sau să modifice pagina de vizualizare fără a afecta modelul de date în producție.
separarea stratului de vizualizare și de date în SPA facilitează jurămintele de versiune și de revocare în producție.,
Exemple de aplicații cu o singură pagină și demo-uri
acestea sunt câteva dintre exemplele de aplicații cu o singură pagină din lumea reală construite folosind controale esențiale Js 2.Expense Tracker exemplul aplicației Expense Tracker cu o singură pagină, prezintă mai multe controale esențiale JS 2 împreună pentru a urmări și vizualiza cheltuielile zilnice cu o interfață de utilizare excelentă.,
Cheltuieli tracker – SPA
diferite pagini web în aplicație, tabloul de Bord, Tranzacții, și Despre, utilizați DataGrid, Diagrame, și alte Esențiale JS 2 controale pentru a vizualiza modelul de date. Această aplicație utilizează un mecanism de rutare a paginii pentru tranzițiile de pagină pentru a naviga printre vizualizări.utilizatorii pot naviga printre aceste vizualizări folosind adresele URL, care vor fi create pentru fiecare pagină web din cauza rutării., Deoarece această aplicație este construită folosind arhitectura SPA, toate paginile web vor fi descărcate la încărcarea inițială a aplicației web. Apoi, tranzițiile de pagină vor avea loc complet pe partea de client, fără a solicita pagini web ale serverului. În timp ce navigați la diferite vizualizări, adresa URL a aplicației va fi actualizată în consecință.legarea datelor are un rol major în SPA. Deoarece toate paginile web sunt descărcate de la client-side, componentele UI ar trebui să fie actualizate cu datele actualizate atunci și acolo., În timp ce efectuați orice acțiune de editare în pagina web a tranzacției, modificările vor fi actualizate simultan la modelul de date. Aceste modificări vor fi reflectate și în componentele UI disponibile și în alte pagini.deoarece SPA sunt foarte potrivite pentru redare atât în browsere desktop și medii mobile, această aplicație este construit cu un design fluid și receptiv pentru redare în dispozitive mobile.demo-ul live al acestei aplicații este disponibil pe site-ul nostru și puteți găsi sursa pe GitHub aici.,
Cheltuieli Tracker – vizualizare Mobil
Web Mail
e-Mail-ul este o singură pagină exemplu de aplicare cu un Outlook-ca interfață de utilizator construit pentru gestionarea o cutie poștală.această aplicație este construită cu interfețe bogate și un design interactiv folosind componente Syncfusion precum acordeonul, ListView și bara laterală ca pagină web cu o singură vizualizare. Aplicația este împărțită în trei secțiuni pentru gestionarea casetei de e-mail: foldere de e-mail, articole de e-mail și zona de conținut de e-mail., Datorită designului său receptiv, această aplicație poate fi redată cu ușurință pe dispozitive mobile și browsere desktop.legarea datelor joacă un rol semnificativ în această aplicație pentru actualizarea căsuței poștale și pentru afișarea conținutului de e-mail pe baza interacțiunii utilizatorului. Elementele din lista de e-mail vor fi actualizate cu conținutul corespunzător bazat pe selectarea utilizatorului în dosarele de e-mail. Zona de e-mail va fi actualizată cu conținutul actualizat atunci când utilizatorul selectează un element de e-mail din lista de e-mail.puteți găsi demo-ul live al acestei aplicații pe site-ul nostru și puteți găsi sursa pe GitHub.,
Web Mail – SPA
aplicația se ocupă de utilizator multiple interacțiuni și reîmprospătează conținutul în mod corespunzător, fără nici o pagina se reîmprospătează, face cererea arata ca o aplicație desktop.designul receptiv al acestei aplicații îl face ușor de a face pe toate dispozitivele mobile cu cel mai bun UI.,calculatorul de împrumut este un exemplu de aplicație cu o singură pagină care prezintă componente precum DataGrid, diagrame, glisor și altele împreună într-o pagină cu o singură vizualizare pentru calcularea unei plăți de împrumut pe baza sumei împrumutului, a dobânzii și a termenului.,
Calculator de Împrumut – SPA
datele obligatorii în această aplicație funcționează în așa fel încât, în timp ce ajustarea valorilor din suma împrumutului, dobânda, și pe termen lung, folosind cursorul componentă, datele pentru diagramă și grila componente vor fi actualizate cu date adecvate în consecință.de asemenea, se poate actualiza conținutul graficului alegând luna dorită pentru a fi vizualizată folosind controlul DatePicker. Când luna care urmează să fie vizualizată este modificată, datele pentru luna corespunzătoare vor fi returnate din model., Același lucru va fi actualizat și în controlul graficelor.puteți găsi demo-ul live al acestei aplicații pe site-ul nostru și puteți găsi sursa acesteia pe GitHub.Tracker de sănătate este un alt exemplu de aplicație cu o singură pagină pentru a urmări sănătatea unei persoane prin urmărirea aportului de alimente, a distanței parcurse, a apei consumate și a duratei somnului.această aplicație este construit cu interfețe bogate și un design interactiv folosind controale Syncfusion, cum ar fi diagrame și carte ca o singură vizualizare pagină web. Legarea datelor este utilizată pentru a prezenta datele din diagramă., Sursa pentru acest eșantion poate fi găsită în această locație GitHub.
Health Tracker – SPA
Diagrama de Constructor
Diagrama Builder este o aplicație care vă ajută în crearea de diverse diagrame de cazuri de utilizare diferite, cum ar fi organigrame, ierarhic copaci, și hărți mentale.această aplicație este construită cu controale puternice și bogate în caracteristici, cum ar fi diagrama, selectorul de culori, dialogul și glisorul de gamă. Sursa acestui eșantion poate fi găsită în această locație GitHub.,
Diagrama Constructor – SPA
Povestea Estimator
Povestea Estimator este un mod eficient, Agil pe baza de instrument pentru estimarea poveste puncte pentru povești folosind tehnici de Planificare de Poker.această aplicație este construită cu controale precum DataGrid, diagrame, mască de intrare, buton, buton Radio și casetă de selectare. Sursa pentru acest eșantion poate fi găsită în această locație GitHub.,
Povestea Estimator – SPA
Stoc Diagramă
Stoc Diagramă este utilizată pentru a urmări și vizualiza prețul de stoc de orice companie de peste o anumită perioadă de timp.această aplicație este construit cu diagrame, bara de instrumente, DateTimePicker, DropDown, și butoanele de control. Puteți găsi sursa pe GitHub.,
Stoc Diagramă – SPA
Asset Management
Asset Management aplicație este o pagină singur exemplu de aplicare utilizate pentru a urmări și vizualiza software-ul și hardware-ul active ale unei organizații.această aplicație este construită cu controalele DataGrid, Charts, TreeMap și DateRangePicker. Puteți găsi sursa pe GitHub.,pe lângă multiplele avantaje ale aplicației cu o singură pagină, există câteva considerații speciale de care trebuie să țineți cont cu SPA:
- unul ar trebui să asigure principii orientate pe obiecte în timp ce creați un SPA. Dacă este ignorat, va duce la scurgeri de memorie în browser. Astfel, determinând încetinirea aplicației, degradând astfel performanța acesteia.
- manipulați butonul Înapoi al browserului în mod corespunzător în aplicațiile cu o singură pagină., Dacă nu, utilizatorul poate face clic pe butonul Înapoi al browserului, ceea ce duce la pierderea fluxului de lucru.cu toate acestea, tehnicile potrivite pot aborda toate aceste probleme.
rezumat
În această postare pe blog, am văzut beneficiile aplicațiilor cu o singură pagină față de aplicațiile cu mai multe pagini. De asemenea, am văzut exemplele de aplicații cu o singură pagină din lumea reală construite cu mai multe controale Syncfusion Essential JS 2.exemplele de aplicații cu o singură pagină discutate anterior sunt de asemenea disponibile pentru Angular, JavaScript, ASP.NET Core și ASP.,Platforme NET mvc și puteți găsi demo-ul live al acestor aplicații pe site-ul nostru. Puteți verifica, de asemenea, alte aplicații din lumea reală construite cu componente Syncfusion aici.
vă recomandăm să verificați codul sursă de tine, disponibil pe GitHub, care este ușor runnable, pentru a vedea cât de singură pagină aplicații sunt construite folosind Syncfusion componente.