Aplicațiile pe o singură pagină - aka Single Page Applications
single-page-application angularjs aplicatie-pe-o-singura-pagina javascript spa backbonejs
Una dintre cele mai noi și incitante tendințe în dezvoltarea web actuală o reprezintă Aplicațiile pe o singură pagină (Single Page Application, SPA). Pentru un începător în programarea web termenul este confuz: cum adică să faci un sait - care este compus din multiple pagini legate între ele prin hyperlink-uri - pe o singură pagină?
În cele ce urmează voi încerca să descriu pe scurt ce este o Aplicațiile pe o singură pagină, ce tehnologii are în spate și cum se deosebește de aplicațiile web standard actuale.
Marea diferență dintre o SPA și o aplicație web standard (PHP, MySQL, CSS, HTML și ceva Javascript) o constituie faptul că în cadrul celei din urmă fiecare navigare la altă pagină necesită o generare completă a paginii, adică fiecare pagină este complet (re)încărcată (ca atunci când dai refresh în browser la o pagină) de pe serverul web. În cadrul unei SPA întreg saitul este încărcat o singură dată - atunci când intri prima oară pe el - și apoi (oricât ai naviga pe respectivul sait) nu mai este niciodată încărcată complet vreo pagină de pe server (adică nu va mai avea loc niciun refresh). Evident că saitul va avea mai multe pagini (de ex. "Home", "About", "Contact" etc. , dar acestea sunt încărcate (împreună cu diverse date) ca fragmente HTML, fără a se reîncărca complet o pagină.
Primul beneficiu care sare imediat în ochi este faptul că o SPA este mult mai rapidă decăt o aplicație standard: nu trebuie mereu să aștepți ca o pagină să fie încărcată complet când o accesezi. Prin aceasta, o SPA se aseamănă mai mult cu o aplicație desktop: paginile curg mai ușor una după alta fără a trebui să aștepți de fiecare dată ca serverul web să reîncarce toate resursele unei pagini înainte de a o reda.
Un alt beneficiu - mai puțin vizibil la prima vedere - este faptul că mare parte din funcționalitatea saitului este executată pe partea de client (adică în browser) - și nu pe partea de server (cum este într-o aplicație web standard) și deci aștepti mai puțin după server. Cum este realizată pe partea de client? Cu ajutorul JavaScript-ului pur sau a unor Softuri-cadru (frameworks) în Javascript.
Al treilea beneficiu (mai ales pentru designerii web care cunosc JavaScript) este faptul că pot coda si partea de client și partea de server (de când există node.js ) și partea de server într-un singur limbaj, cunoscut lor: JavaScript.
Cele mai folosite (și cunoscute) softuri-cadru in JavaScript sunt:
Angular - un framework cu sursă deschisă (open source) dezvoltat și menținut de Google. În ultimul timp a devenit probabil cel mai folosit. Trăsătura lui caracteristică o constituie faptul că extinde HTML-ul cu etichete și proprietăți noi. Cu ajutorul directivelor poți chiar tu crea elemente HTML noi.
Backbone - printre primele softuri-cadru în JavaScript apărute. Se pare că lucrează la un nivel mai bazic, așa că necesită să scrii mai mult cod. Este mai asemănător cu jQuery pentru că în general manipulezi elemente DOM.
Ember - cunoscut inițial ca Sproutcore 2.0, este un framework făcut pentru a ușura munca dezvoltatorilor web. Este cel mai nou dintre ele si se pare că este promițător.
Pentru a vede o SPA în acțiune pun mai jos un link către o aplicație demo făcută în Angular.js (a se observa cum paginile se incarcă fără a se da refresh).
(ro)Cod cu spor!