Vă prezentăm Hoodie: Full Stack Development pentru dezvoltatorii front-end

Dacă nu ați auzit încă de Hoodie, ar trebui să o verificați.

Hoodie este o nouă bibliotecă progresivă pentru dezvoltatorii front-end, care adoptă niște filozofii noi remarcabile, care ar putea transforma atât dezvoltarea aplicației, cât și experiența utilizatorului. Hoodie pune controlul asupra dezvoltării de aplicații front-end complet în mâinile dezvoltatorilor front-end și guru-urilor experienței utilizatorului, eliberându-i de obiecțiile tehnice uneori imperceptibile ale omologilor lor back-end. În plus, aplicațiile Hoodie eliberează utilizatorii de cătușele conectivității neîntreruptibile, permițându-le să-ți folosească aplicația în deplasare, în aer sau sub mare, fără grijă.

Deși platforma este încă la început, oferă deja câteva instrumente noi puternice care merită încercate pentru orice dezvoltator front-end care dorește să treacă înaintea jocului. Echipa din spatele Hoodie are o experiență dovedită, lucrând la alte proiecte de mare succes, cum ar fi CouchDB, Async, Moustache.js și multe altele.

După ce am aflat despre ceea ce are în lucru biblioteca de dezvoltare Hoodie full stack și am devenit foarte entuziasmat de proiect, am decis să-l încerc și eu. Permiteți-mi să vă spun puțin mai multe despre Hoodie și să vă arăt o parte din potențialul pe care îl are pentru dezvoltarea de aplicații grozave.

Ce este Hoodie?

În primul rând, ce este Hoodie? Ce este atât de grozav la asta? Hoodie este o platformă și un API cu sursă deschisă, complet JavaScript, care combină câteva paradigme noi puternice într-un pachet de dezvoltare complet, în beneficiul atât pentru dezvoltatorii care creează aplicații Hoodie, cât și pentru utilizatorii finali care interacționează cu acestea. Principalele dintre aceste concepte sunt mișcările „noBackend” și „Offline First”, împreună cu un proces puternic condus de comunitate, cunoscut sub numele de „Dreamcode” pentru construirea API-ului.

noBackend

Hoodie crede că cheia dezvoltării excelente de aplicații front-end stă în mâinile experților și dezvoltatorilor în experiența utilizatorului, care știu cum să facă o aplicație să arate grozav și să fie o plăcere de utilizat, dar care prea des sunt restricționați de tehnicile back-end. asupra cărora nu au nici un control. Interacțiunile fundamentale cu serverul care au existat de veci, cum ar fi înregistrarea/conectarea utilizatorului, stocarea datelor sau expedierea e-mailului, continuă să necesite implementări personalizate consumatoare de timp pentru fiecare aplicație nouă, forțând dezvoltatorul front-end să învețe și să codifice pentru noi back-end. termină cu ciudateniile de fiecare dată.

Hoodie pune controlul înapoi în mâinile designerului și dezvoltatorului front-end, prin abstracția completă a back-end-ului. Cu dezvoltarea aplicației front-end Hoodie, în loc să vă faceți griji pentru partea dvs. de server, tot ce trebuie să vă faceți este API-ul front-end simplu, ușor de învățat și de implementat încorporat în Hoodie. De exemplu, doriți să vă înregistrați un utilizator nou? Acest lucru se poate face într-o singură linie de cod:

 hoodie.account.signUp(username, password);

Aceasta este ideea din spatele inițiativei noBackend, față de care Hoodie se angajează pe deplin. noBackend înseamnă că nu aveți nevoie de un dezvoltator back-end! Doar implementați back-end-ul Hoodie pe serverul dvs. și uitați de el .

Hoodie este scris în întregime în JavaScript. Back-end-ul său autonom folosește Node.JS cu Apache CouchDB ca bază de date. La această scriere, caracteristicile de bază pe care Hoodie le-a implementat deja includ înregistrarea și administrarea utilizatorilor, încărcarea datelor, stocarea și e-mailurile. Aceste caracteristici de bază pot fi extinse cu ușurință prin adăugarea de pluginuri suplimentare Node.js.

Dreamcode

Hoodie este în primul rând un API - acesta este ceea ce face posibil noBackend. Implementarea Hoodie se poate schimba și îmbunătăți în timp, dar interfața oferită dezvoltatorilor va rămâne aceeași, astfel încât să nu vă faceți griji vreodată.

Hoodie este încă în creștere rapidă, iar noi funcții sunt adăugate tot timpul. Hoodie, ca și alte proiecte noBackend, folosește o abordare condusă de comunitate pentru a proiecta API-ul numit Dreamcode. În esență, visezi codul pe care ai vrea să-l scrii și, dacă primește suficient sprijin din partea comunității, Hoodie îl va face să se întâmple.

Această abordare bazată pe API, bazată pe crowdsource, pentru proiectarea API-ului Hoodie înseamnă că codul Hoodie este ușor de scris și ușor de citit. Este codul visurilor tale!

În primul rând offline

Hoodie rezolvă o mulțime de probleme pentru dezvoltatorii de aplicații front-end cu noBackend, API-ul condus de Dreamcode. Dar unul dintre obiectivele principale ale Hoodie este acela de a rezolva o problemă majoră și pentru utilizatori - dependența lor adesea paralizantă de conectivitate.

Pe măsură ce trecerea la dispozitivele mobile cu aplicații mobile continuă, vechea presupunere bazată pe desktop a conectivității continue a rămas neschimbată. În tot acest timp, promisiunea a fost că oriunde ai merge, internetul va fi acolo. Până în prezent, pierderea conectivității este tratată ca o anomalie, oprind capacitatea utilizatorilor de a face ceva până când sunt din nou online. Dar, după cum știm cu toții, rețeaua de telecomunicații nu a reușit să își îndeplinească această promisiune. Conectivitatea iese pe fereastră în avioane, în metrou, pe drumurile rurale și în nenumărate alte situații. Și asta în părțile dezvoltate ale lumii! În zone uriașe ale planetei, accesul stabil la internet este excepția rară de la regulă.

Mișcarea Offline First caută o armonizare grațioasă cu acest simplu fapt al vieții. Cu Offline First, non-conectivitate este doar o altă stare normală a aplicației. De fapt, este starea implicită! Hoodie adoptă cu entuziasm această filozofie. În spatele API-ului se află o implementare front-end completă a stocării locale temporare și o sincronizare automată și grațioasă ori de câte ori devine disponibilă o conexiune.

Cu Hoodie, puteți posta comentarii, trimite e-mailuri, edita conturi și puteți face aproape orice altă activitate de zi cu zi, fără să vă faceți griji că aveți o conexiune. Întregul sistem de stocare și sincronizare poate fi întrerupt în orice moment, fără teama de a pierde date.

Desigur, acest model vine cu propriul său set de provocări și abordări unice de design, dar echipa de la Hoodie este pionierat în tehnicile pentru a rezolva aceste provocări.

Offline First este o nouă abordare interesantă a dezvoltării aplicațiilor, aflată în stadiile incipiente de adoptare. Mai sunt multe de făcut pentru a dezvolta tehnicile necesare. Aruncă o privire aici pentru a vedea cum face Hoodie.

O aplicație simplă care folosește hanocul

Pentru a demonstra utilizarea Hoodie ca instrument de dezvoltare front-end, am decis să scriu o aplicație simplă care să le permită membrilor comunității să-și creeze propriile evenimente și să le publice pentru ca alți ingineri să le răsfoiască și să le adauge la programul lor. Rețineți că scopul aici este de a demonstra Hoodie și nu de a oferi o aplicație gata de producție. Puteți găsi codul pe pagina mea GitHub.

Sub coperte Hoodie este în esență combinația dintre o parte server construită în NodeJS și o bibliotecă JavaScript pe partea client. Pe lângă procesul simplu de instalare și implementare, dezvoltatorul care lucrează la aplicație va lucra doar pe codul clientului. Biblioteca încorporată poate vorbi cu partea serverului fără ca dezvoltatorul să știe nimic despre cum funcționează.

Ce se întâmplă dacă aplicația noastră ne cere să facem ceva personalizat pe server? Putem crea oricând pluginuri Hoodie. Iată mai multe informații despre pluginuri.

Pornirea aplicației Hoodie

Primul pas cu dezvoltarea stivă completă a oricărei aplicații Hoodie este să folosiți instrumentul de linie de comandă Hoodie pentru a ne scoate la iveală:

 hoodie new toptalCommunity

Acest lucru va crea o aplicație Hoodie inițializată care are deja un cod și putem deja rula aplicația noastră! Dacă tastăm

 cd toptalCommunity hoodie start

browserul se va deschide cu un exemplu de aplicație de la echipa Hoodie:

Am făcut puțină menaj în acest moment. Aplicațiile Hoodie vin în prezent cu Bootstrap și Prism, dar am scos versiunile furnizate. Nu aveam nevoie de Prism și doream să folosesc propria mea versiune de Bootstrap, astfel încât să pot folosi fonturile și JS pe care doream să le folosesc. De asemenea, am făcut câteva modificări la main.css pe măsură ce am construit aplicația, pentru a-i oferi propriul stil și pentru a permite șablonul meu simplu de bootstrap. Am folosit jQuery doar pentru manipularea DOM și evenimente. Hoodie are grijă de orice altceva.

Hanorac și Dreamcode

În timp ce lucram la crearea acestui exemplu de aplicație, mi-am dat seama rapid de toate beneficiile lucrului cu Hoodie. Atât de multe dintre întrebările obișnuite la care trebuie răspuns atunci când începe un proiect pur și simplu nu erau acolo. Hoodie mi-a permis să scriu cod și să văd aplicația live și funcționând.

Ce strategie ar trebui să folosim pentru gestionarea contului de utilizator? Pluginul pentru contul Hoodie este răspunsul. Cum ar trebui să ne stocăm datele pe backend? API-ul de stocare simplu de la Hoodie se ocupă de asta pentru noi, oferindu-ne gratuit funcționalitatea Offline First! Nu a fost nevoie de niciun efort pentru ca această aplicație Hoodie să funcționeze offline, pur și simplu funcționează.

Să ne aprofundăm puțin asupra implementării:.

Gestionarea contului utilizatorului

Hoodie are un plugin care se ocupă de gestionarea contului pentru noi, numit hoodie-plugin-users . API-ul nu ar putea fi mai simplu.

Cum adăugăm un utilizator nou?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Cum ne autentificăm un utilizator?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Avem un utilizator autentificat?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Acest lucru chiar nu ar putea fi mai simplu. Oh, stai și cum va reacționa interfața noastră la toate acestea? Hoodie are evenimente pregătite pentru tine

Reacționați când utilizatorul se conectează:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Stocare a datelor

Aplicația noastră eșantion va permite utilizatorilor să-și creeze propriile evenimente (date private) și să le publice dacă doresc (făcând date publice), astfel încât alți utilizatori să se poată alătura evenimentului.

Hoodie ne permite să adăugăm date în magazinul local fără a ne autentifica, deci de unde știe cărui utilizator îi aparțin aceste date? Ei bine, îl păstrează local și nu se va sincroniza cu serverul până când acel utilizator nu se va conecta. Hoodie se va asigura, de asemenea, că numai acel utilizator poate ajunge la acele date.

Deci, iată cum funcționează:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

Este atat de simplu! Ok, așa că ne-ar ajuta să creăm un eveniment, cum îl vom împărtăși altora? Aici ne va ajuta global share plugin . Trebuie să-l instalăm deoarece nu este un plugin implicit:

 hoodie install global-share

Acum avem pluginul la locul lui, să-l folosim! Trebuie să publicăm datele pe care le-am adăugat deja în magazinul nostru de utilizatori în magazinul global.

 hoodie.store.findAll('event').publish();

Acest lucru va semnala toate evenimentele salvate pentru acest utilizator ca fiind publice, astfel încât atunci când interogăm magazinul global vom obține acele date ca rezultat.

 hoodie.global.findAll('event'); //This is read-only

Pe pagina Evenimentele mele, utilizatorul poate crea evenimente care sunt publicate direct în magazinul global.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Evenimentele publicate sunt vizibile pentru toată lumea, așa că acum orice utilizator poate vedea evenimentele create pe pagina Evenimente.

Deci, cum rămâne cu datele care nu ar trebui să fie publice? Stocăm evenimentele la care utilizatorul nostru a aplicat și le afișăm pe pagina Evenimente. Pe măsură ce utilizatorul face clic pe butonul de aplicare, acesta este ceea ce se execută:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

Cele două capturi de ecran de mai jos arată două ferestre de browser care rulează simultan. În primul browser, utilizatorul este conectat ca utilizator a@aa care a aplicat la Evenimentul A. În al doilea, utilizatorul b@bb este autentificat și a aplicat la B Event .

Sondaj lung

Prin abonarea la unele evenimente oferite de Hoodie putem folosi în mod transparent tehnici precum sondajul lung, care oferă aplicației noastre o caracteristică interesantă, deoarece diferiți utilizatori o folosesc și colaborează la ea.

Acest lucru este cu adevărat ușor de făcut. În aplicația noastră eșantion, o singură linie a făcut truc:

 hoodie.global.on('add:event', loadEvent);

Acea linie simplă se va ocupa de interogarea lungă a serverului pentru a verifica dacă există evenimente noi care ar fi putut fi adăugate de alți utilizatori și pentru a le adăuga la pagina Evenimentele mele.

Unele Preocupări

După ce am construit acest exemplu de aplicație pentru a juca cu Hoodie și cu funcțiile sale de dezvoltare a aplicației front-end, sunt foarte încântat de ceea ce are de oferit. Cu toate acestea, câteva probleme clare mi-au remarcat.

Hoodie face ca dezvoltatorul să comunice atât de ușor cu serverul încât orice dezvoltator ar putea adăuga lucruri în baza noastră de date doar folosind consola, care are în mod clar implicații majore de securitate și integritate a datelor.

Bibliotecii încă mai lipsesc o mulțime de lucruri esențiale de care ai avea nevoie în orice aplicație de producție, cum ar fi validarea datelor, URL-uri care pot fi conectate, un cadru de testare și partajarea privată a datelor (deși acestea fac deja progrese bune în această ultimă). Pentru a folosi Hoodie în producție chiar acum, ar trebui să-l asociem cu o altă soluție precum AngularJS, Ember sau oricare dintre multele alte soluții care ne ajută să ne asigurăm că avem cod JavaScript structurat și care poate fi întreținut corespunzător pentru proiectele noastre Front-End. Deoarece aceste cadre se apropie de complexitatea tehnologiilor back-end în zilele noastre, această soluție ar învinge în mare măsură scopul Hoodie.

Viitorul hanoracului

Hoodie este încă în curs de dezvoltare intensă pentru a rezolva toate aceste probleme. Echipa lucrează din greu pentru a implementa noi funcții și pentru a le îmbunătăți pe cele existente pentru a face platforma gata pentru consum în masă și, desigur, acest proces necesită timp. Dacă plănuiți o nouă aplicație la scară largă chiar acum, poate doriți să găsiți o altă platformă pe care să o construiți de data aceasta.

Între timp, totuși, cu siguranță nu este prea devreme pentru a începe să te ocupăm de dezvoltarea aplicației front-end folosind Hoodie, așa cum sper că tocmai am demonstrat. Există o mulțime de idei noi puternice deja încorporate în Hoodie, care cred că vor deveni foarte populare. Să mergi înaintea jocului cu aceste lucruri, probabil, nu este o idee rea.

Dacă echipa de la Hoodie continuă munca grea, API-ul ar trebui să fie gata pentru prime time în cel mai scurt timp. Dacă doriți să urmăriți progresul echipei Hoodie, aruncați o privire la instrumentul lor de urmărire a reperelor.

Hoodie promite că va face dezvoltarea de aplicații grozave pentru cei care se deplasează și cei care se agită. Dacă ideile Hoodie întruchipează, este posibil să vedem că nevoia unei echipe de dezvoltatori back-end pentru fiecare proiect nou devine un lucru din trecut. Cu astfel de proiecte, este ușor să ne imaginăm o epocă de aur pentru dezvoltatorii front-end într-un viitor nu prea îndepărtat. În mod similar, beneficiile oferite utilizatorilor de idealul Offline First reprezintă un pas uriaș pentru accesibilitate, extinzând raza de acțiune a stilului nostru de viață mobil și conectat în acele locuri în care internetul în sine nu merge.

Mergeți la Hoodie pentru a urmări progresul Hoodie-ului și pentru a deveni parte din noile schimbări interesante pe care se pregătește să le introducă.

Mulțumiri speciale echipei Hoodie. Sigla Hoodie folosită cu permisiunea proiectului Hoodie Open Source