Share
Există o mulțime de biblioteci JavaScript disponibile și majoritatea sunt foarte bune pentru a furniza interacțiunile tradiționale DOM-centrice pe care site-urile dvs. tipice au nevoie. Dar când este momentul să construim o bază de cod gestionabilă pentru o aplicație de o singură pagină, acolo intră o serie întreagă de cadre noi pentru a netezi lucrurile.
Vechea zicală este adevărată: "Utilizați cel mai bun instrument pentru sarcină."
Nu este faptul că bibliotecile tradiționale, cum ar fi jQuery, nu vă pot ajuta să construiți experiențe asemănătoare desktop-urilor, nu este cazul în acest caz și lipsesc lucruri precum legarea datelor, rutarea evenimentelor și gestionarea de stat. Desigur, probabil că puteți coborî împreună o mulțime de plugin-uri pentru a obține o parte din această funcționalitate, dar pornind de la un cadru care a fost construit în mod special de la bază pentru a aborda aceste probleme specifice, în opinia mea, are mai mult sens. Vechea zicală este adevărată: "Utilizați cel mai bun instrument pentru sarcină."
Recent am făcut un interviu cu echipa Ember.js; a fost motivată de dorința mea de a cunoaște ceea ce am ajuns să numesc "noua hotness": Ember.js.
Ember se potrivește facturii pentru ceea ce am descris mai sus și face acest lucru într-un mod care aduce aminte de o mulțime de modul în care jQuery permite dezvoltatorilor să se ridice și să funcționeze rapid. Echipa a luat măsuri intenționate pentru a rezuma o mulțime de complexități inerente proiectării și construirii aplicațiilor bazate pe Model / View / Controller, folosind ani de experiență și cunoștințe dobândite prin construirea de aplicații de mari dimensiuni.
Ceea ce aș vrea să fac este să vă ajut să vă grăbiți cu Ember.js, prin intermediul unei serii de articole cu mai multe părți, care vă vor introduce treptat conceptele cadrului. Vom începe cu intro-ul obișnuit (care se întâmplă să fie acest post), și apoi treptat, până la construirea unei aplicații complete. Cea mai mare parte este că acest lucru mă va ajuta, de asemenea, să întăresc conceptele pe care le-am învățat deja și poate să iau niște tehnici noi de-a lungul drumului! Voi face tot posibilul pentru ca echipa Ember.js să revadă acest material pentru acuratețe și poate chiar să contribuie cu niște nugget-uri.
Înainte de a continua, un cap de sus: Ember.js face o mulțime de magie pentru tine. Există momente când veți privi codul și veți spune: "Cum?" Am fost acolo și voi face tot posibilul pentru a distila lucrurile, dar nu mă voi arunca cu capul în interiorul codului cadru al lui Ember. În schimb, voi discuta cum puteți utiliza instrumentele și API-ul pentru a construi aplicația.
Deci haideți să lăsăm asta.
Ember.js nu este un cadru pentru construirea site-urilor tradiționale.
Primul lucru pe care trebuie să-l rețineți este că Ember.js nu este un cadru pentru construirea de site-uri tradiționale. Bibliotecile precum jQuery și MooTools sunt potrivite pentru acest lucru. Dacă vă gândiți la Ember.js, atunci presupunerea este că încercați să construiți experiențe asemănătoare desktop-ului - mai ales cele scalabile. De fapt, sloganul pentru cadrul este "un cadru pentru dezvoltarea de aplicații web ambițioase", care vă spune că nu este evident biblioteca JavaScript a tatei dvs..
Am menționat anterior că Ember utilizează modelul MVC pentru promovarea gestionării și organizării corespunzătoare a codurilor. Dacă nu ați făcut niciodată dezvoltarea bazată pe MVC, ar trebui să citiți cu siguranță acest lucru. Nettuts + are un articol extraordinar pe această temă. Pentru cei obișnuiți cu conceptele, trebuie să vă simțiți acasă. Singurul lucru pe care l-am auzit în mod constant este că trecerea de la Backbone la Ember.js este de fapt ușor deoarece Ember face o mulțime de ridicare grele pentru tine, păstrând în același timp modele de organizare a codului pe care acești dezvoltatori sunt obișnuiți să.
Ember se bazează, de asemenea, pe șabloane de pe partea clientului ... a MULT. Utilizează biblioteca templantă Handlebars care oferă expresii care vă permit să creați șabloane dinamice bazate pe HTML. Un dezvoltator Ember poate lega date la aceste expresii încorporate și poate schimba dinamic afișarea aplicației lor în zbor. De exemplu, pot crea un șablon care să poată primi o serie de persoane și să le afișeze într-o listă neordonată:
Observați expresia "#each" care funcționează ca o directivă a buclă, enumerând peste fiecare element al matricei "people" și înlocuind expresia "name" cu o valoare reală. Este important să rețineți că parantezele duble sunt jetoanele folosite de Handlebars pentru a identifica expresiile. Acesta este un exemplu mic și ne vom arunca cu mai multe detalii mai târziu.
Handlebars este un motor incredibil de puternic pe tema clientului și aș recomanda să revizuiți nu numai ghidurile Ember, ci și site-ul Web Handlebars pentru a înțelege pe deplin opțiunile disponibile. Veți folosi destul de puțin.
Ember.js se bazează pe biblioteci suplimentare, deci va trebui să luați o copie a jQuery și Handlebars. Dar așteptați, nu am spus că jQuery și Ember joacă în spații diferite? Da, da, dar aici e treaba: echipa Ember are de gand sa nu reinventeze roata. Ei au ales jQuery să facă ceea ce face cel mai bine: să lucreze cu DOM. Și este un lucru bun, deoarece jQuery este foarte bun la asta. De asemenea, ei au mers cu Handlebars, o bibliotecă excelentă care a fost scrisă de Yehuda Katz, membru al echipei Ember.
Cel mai simplu mod de a obține fișierele de care aveți nevoie este să mergeți la repo Ember.js Github și să trageți în jos Kitul de pornire. Este o boilerplate pentru a începe cu tine. La momentul acestei scrieri, ea conține:
Există, de asemenea, un șablon html de bază, care este codificat pentru a include toate bibliotecile asociate (jQuery, Ember etc.) și împreună cu un exemplu de șablon Handlebars și "app.js", care include codul pentru lansarea unei aplicații de bază Ember.
Rețineți că app.js nu face parte din cadrul. Este un fișier ole JavaScript simplu; puteți numi orice doriți. Și, în timp ce o vom folosi în scopul acestei serii de tutorial, pe drum, probabil că veți sfărâma JavaScript în mai multe fișiere, la fel cum ați face pentru orice alt site sau aplicație. De asemenea, Ember nu se așteaptă la o anumită structură de directoare pentru fișierele dvs. cadru.
Când te uiți la codul Starter Kit, acesta ar putea arăta ca un cod tipic al site-ului tău. În unele privințe, aveți dreptate! Odată ce începem să organizăm lucruri, veți vedea că construirea unei aplicații Ember este diferită.
Înainte de a începe hacking-ul la cod, este important să înțelegeți cum funcționează Ember.js și că aveți gros de piese în mișcare care formează o aplicație Ember. Să aruncăm o privire asupra acelor părți și asupra relațiilor dintre ele.
Șabloanele reprezintă o parte esențială a definirii interfeței dvs. de utilizator. Așa cum am menționat anterior, Handlebars este biblioteca client-side folosită în Ember și expresiile oferite de bibliotecă sunt folosite în mod extensiv la crearea interfeței UI pentru aplicația dvs. Iată un exemplu simplu:
Observați că expresiile sunt amestecate în marcajul dvs. HTML și, prin Ember, vor modifica dinamic conținutul afișat pe pagină. În acest caz, substituenții firstName și lastName vor fi înlocuiți cu datele extrase din aplicație.
Handlebars oferă o mulțime de putere, printr-un API flexibil. Va fi important să înțelegeți ce oferă.
Router-ul unei aplicații ajută la gestionarea stării aplicației.
Router-ul unei aplicații ajută la gestionarea stării aplicației și a resurselor necesare ca utilizator navigând în aplicație. Acestea pot include activități cum ar fi solicitarea datelor dintr-un model, conectarea controlorilor la vizualizări sau afișarea de șabloane.
Faceți acest lucru creând un traseu pentru anumite locații din cadrul aplicației. Rutele specifică părțile aplicației și adresele URL asociate acestora. Adresa URL este identificatorul cheie pe care Ember îl folosește pentru a înțelege care dintre starea aplicației trebuie prezentată utilizatorului.
Accentsconagua
App.Router.map (funcția () this.route ('despre'); // ne duce la "/ about"); Comportamentele unui traseu (de ex .: solicitarea de date dintr-un model) sunt gestionate prin instanțe ale obiectului de traseu Ember și sunt concediate atunci când un utilizator navighează către o anumită adresă URL. Un exemplu ar fi solicitarea datelor dintr-un model, cum ar fi:
App.EmployeesRoute = Ember.Route.extend (model: function () retur App.Employee.find (););
În acest caz, atunci când un utilizator navighează la secțiunea "/ employees" a aplicației, traseul solicită modelului o listă a tuturor angajaților.
O reprezentare obiect a datelor.
Modelele reprezintă o reprezentare obiect a datelor pe care le va utiliza aplicația. Ar putea fi o matrice simplă sau date extrase dinamic dintr-un API RESTful JSON, printr-o solicitare Ajax. Biblioteca de date Ember oferă API-ul pentru încărcarea, maparea și actualizarea datelor la modele din cadrul aplicației.
Controlorii sunt de obicei utilizați pentru a stoca și a reprezenta date și atribute ale modelului. Ele se comportă ca un proxy, oferindu-vă acces la atributele modelului și permițând șabloanelor să le acceseze pentru a afișa dinamic afișajul. Acesta este motivul pentru care un șablon va fi întotdeauna conectat la un controler.
Principalul lucru de reținut este că, în timp ce un model preia date, un controler este ceea ce veți utiliza pentru a expune programatic respectivele date la diferite părți ale aplicației. Deși se pare că modelele și controlorii sunt strâns cuplați, de fapt, modelele, ele însele, nu au cunoștință de controlorii care le vor folosi ulterior.
De asemenea, puteți stoca alte proprietăți ale aplicațiilor care trebuie să persiste, dar nu trebuie să fie salvate pe un server.
Vizualizările din Ember.js sunt menite să gestioneze evenimentele din jurul interacțiunii utilizatorilor și să le traducă în evenimente care au semnificație în cadrul aplicației. Deci, dacă un utilizator dă clic pe un buton pentru a șterge un angajat, vizualizarea este responsabilă pentru interpretarea evenimentului respectiv și pentru procesarea acestuia în mod adecvat în contextul stării actuale a aplicației.
Una dintre modalitățile prin care Ember.js ajută la minimizarea cantității de cod necesar și să se ocupe de lucrurile din spatele scenei este prin convențiile de numire. Modul în care definiți și denumiți rutele (și resursele) influențează denumirea controlorilor, modelelor, vizualizărilor și șabloanelor. De exemplu, dacă creez un traseu numit "angajați":
App.Router.map (funcția () this.resource ("angajații");); Apoi aș numi componentele mele, după cum urmează:
Utilizarea acestei convenții de desemnare servește unui scop dublu. În primul rând, vă oferă o relație semantică între componente asemănătoare. În al doilea rând, Ember poate crea automat obiectele necesare care ar putea să nu existe (de exemplu: un obiect de traseu sau un controler) și să le conecteze pentru a fi utilizate în aplicația dvs. Aceasta este "magia" pe care am menționat-o mai devreme. De fapt, aceasta este în mod specific ceea ce face Ember la nivel global de aplicație, atunci când instanțiați obiectul Application:
var App = Ember.Application.create ();
Linia respectivă creează referințele implicite la ruterul, controlerul, vizualizarea și șablonul aplicației.
Revenind la ruta "angajați" pe care am creat-o mai sus, ceea ce se va întâmpla este că, atunci când un utilizator navighează la "/ employees" în aplicația dvs., Ember va căuta următoarele obiecte:
Dacă nu le găsește, va crea o instanță a fiecăruia, dar pur și simplu nu va face nimic, deoarece nu ați specificat un model pentru a obține date sau un șablon pentru a afișa datele. Acesta este motivul pentru care convenția de numire este atât de importantă. Acesta permite Ember să știe cum să se ocupe de sarcinile asociate cu un anumit traseu, fără să trebuiască să faceți lucrurile manual.
Observați că, în primul exemplu, am folosit numele singular, "Angajat", pentru a defini modelul. Asta e în scop. Natura însăși a numelui "Angajați" dictează că pot lucra cu 0 la mulți angajați, deci este important să construim un model care să ofere flexibilitatea de a reveni unui angajat sau tuturor angajaților. Singura convenție de denumire a acestui model nu este o cerință a lui Ember, deoarece modelele nu au nici o cunoaștere a controlorilor care le vor folosi mai târziu. Deci aveți flexibilitate în denumirea acestora, dar pentru consecvență, respectarea acestei convenții va face ca gestionarea codului să fie mult mai ușoară.
De asemenea, am ales să utilizez resursă() pentru a defini traseul meu, deoarece în acest scenariu, probabil că aș avea rute imbricate pentru a gestiona paginile detaliate pentru informații specifice despre angajați. Vom vorbi despre cuibărit mai târziu în serie.
Takeaway-ul cheie este că, folosind o schemă de numire consecventă, Ember poate gestiona cu ușurință cârligele care leagă aceste componente împreună fără a fi nevoie să definiți explicit relațiile printr-o tona de cod.
Detalii complete despre convențiile de numire ale lui Ember sunt furnizate pe site-ul proiectului și sunt a trebuie citit.
În următoarea parte a seriei, vom aborda codul pentru a crea baza pentru aplicația noastră.
Am trecut peste conceptele esențiale ale lui Ember și am discutat aspectele fundamentale de nivel înalt ale cadrului. În următoarea parte a seriei, vom aborda codul pentru a crea baza pentru aplicația noastră. Între timp, vreau să vă recomandăm să începeți să vă uitați la documentația Handlebars pentru a obține o sentiment pentru sintaxa expresiilor. De asemenea, dacă sunteți într-adevăr chomping la un pic pentru a obține în Ember, stați tuned la Tuts + Premium, care va oferi în curând o cursă completă care te plimbă prin construirea unei aplicații bazate pe Ember!
După cum am observat la începutul acestui articol, Ember.js Core Team îl conduce pe Yehuda Katz și Tom Dale care au analizat acest lucru pentru acuratețe și i-au dat degetele. Echipa Ember a aprobat! Ne vedem imediat!
