Cadre de dezvoltare web - 4 JavaScript pentru a fi optim

Cuprins:

Anonim

JavaScript Web Development Framework

Instrumentele de dezvoltare web au devenit foarte populare în ultimii ani în dezvoltarea web. S-au dovedit a fi o modalitate excelentă de a accelera dezvoltarea aplicațiilor web. Dezvoltarea web, în ​​special dezvoltarea front-end, a progresat semnificativ în ultimii ani. Acest lucru este excelent pentru utilizatori și pentru tehnologie în general, dar înseamnă, de asemenea, că, în calitate de dezvoltator web, vă veți confrunta cu presiuni constante pentru a adăuga mai multe abilități în repertoriul dvs. și pentru a afla mai multe dezvoltări web. Există sute de instrumente de dezvoltare web disponibile în dezvoltarea web și este posibil să fi experimentat deja câteva dintre ele. Dar este nevoie de un angajament serios de timp și efort pentru a le stăpâni. Evident, aceasta înseamnă că nu puteți stăpâni toate cadrele de dezvoltare web. Trebuie să alegeți cu atenție în care doriți să investiți, iar acest lucru poate fi o provocare. Ideea de a învăța o nouă dezvoltare web degeaba nu este deloc atrăgătoare, mai ales dacă termini să dezvolți o aplicație pe care trebuie să o întreții.

Cu alte cuvinte, trebuie să alegeți cu atenție instrumentele de dezvoltare web. Dar de ce chiar te deranjează cu dezvoltarea web în primul rând? De ce nu mergeți cu o aplicație convențională din partea serverului? Răspunsul se datorează faptului că instrumentele de dezvoltare web oferă o experiență de utilizator mai bună, iar experiența utilizatorului este nucleul oricărei aplicații web.

De exemplu, dacă un utilizator face clic pe un buton, o aplicație web convențională din partea serverului trebuie să reîncarce întreaga pagină și acest lucru poate dura timp. Cadrele de dezvoltare web JavaScript, însă, încarcă doar acele părți ale paginii cu care utilizatorul interacționează. Aceasta se traduce printr-o interfață de utilizator mai rapidă și mai receptivă și crearea unei experiențe de utilizator la fel de ascuțite și rapide ca o aplicație mobilă nativă.

În cadrele de dezvoltare web puteți obține rezultate similare cu o aplicație tradițională pe server și unele jQuery, dar acest lucru poate merge foarte repede în jos. Gestionarea codurilor cu jQuery este o provocare importantă, cu excepția cazului în care aveți de-a face cu unele aplicații simple, deoarece aproape întotdeauna duce la coduri de spaghete. Pe de altă parte, dezvoltarea web modernă JavaScript rezolvă provocarea gestionării codurilor cu utilizarea unei arhitecturi de aplicații bine definite. Adesea folosesc un model de design Model-View-Controller (MVC), care nu are jQuery. Aceste cadre web de dezvoltare sunt arhitecturi bine definite duc la o dezvoltare mai ușoară. Alegeți un cadru de dezvoltare web și veți obține direct interfețe de utilizator responsive și cod bine întreținut și structurat.

Cadre de dezvoltare web JavaScript de învățat

Iată o privire a primelor patru cadre de dezvoltare web JavaScript și beneficiile acestora:

1.Backbone

Backbone.js este unul dintre cele mai vechi cadre de dezvoltare web, cu lansarea sa în 2010, dar este încă unul de luat în considerare serios, în ciuda vârstei sale. Pentru unul, este extrem de ușor, cu o dimensiune de doar 6, 3 KB. Acest lucru este atunci când este comprimat și minificat pentru producție și cu o singură dependență. Cadrele de dezvoltare web sunt extrem de versatile și prezintă designul minimalist MVC, care alimentează majoritatea site-urilor web populare astăzi, inclusiv Pinterest, Hulu și Twitter.

Puteți face multe cu Backbone, care nu are la fel de multe restricții ca alte dezvoltări web. De exemplu, nu are un motor de șablon în afară de motorul de bază inclus în Underscore.js. Acest lucru vă oferă opțiunea de a alege orice doriți pentru proiectul dvs.

Natura ușoară a Backbone strălucește cu adevărat atunci când este utilizată pentru proiecte mai simple, în care viteza este cea mai mare prioritate, cum ar fi aplicațiile Pinterest cu o singură pagină, sau widget-urile care fac parte dintr-o aplicație web convențională.

Dar greutatea sa ușoară poate fi, de asemenea, cel mai mare defect. O coloană vertebrală poate fi atât de dezbrăcată încât ai nevoie de abilități JavaScript serioase pentru a lucra cu ea. Acest lucru îl face mai potrivit pentru dezvoltatorii JavaScript avansați. Cu acest instrument de dezvoltare web, rezultatele depind foarte mult de experiența și nivelul de abilități. Puteți amesteca și potrivi o mulțime de plug-in-uri și biblioteci pentru a construi o aplicație Backbone, care este o amploare imensă pentru dezvoltatorii cu experiență, dar o provocare pentru începători.

De asemenea, unii dezvoltatori se plâng de necesitatea de a scrie o mulțime de coduri de cazane pentru ca instrumentul de dezvoltare web să fie pus în funcțiune pentru un proiect. Dezvoltatorii mai experimentați au spus că nu scriu aproape un cod, ceea ce sugerează încă o dată că Backbone este mai potrivit pentru oamenii experimentați. O altă problemă semnificativă despre Backbone este lipsa de redare din partea serverului, ceea ce veți vedea în multe alte instrumente de dezvoltare web, în ​​special în cele care utilizează modele MVC.

Lipsa de redare din partea serverului poate afecta cu adevărat performanțele aplicației web și poate afecta, de asemenea, SEO. Motoarele de căutare care nu pot analiza JavaScript nu primesc conținut de pe site-uri care nu acceptă redarea din partea serverului. Desigur, există soluții pentru această problemă, dar trebuie să țineți cont de acest lucru dacă optați pentru Backbone.

2.AngularJS

Deci, mai devreme în dezvoltarea web, am vorbit despre Backbone, care este unul dintre cele mai vechi cadre de dezvoltare web de acolo. Ei bine, AngularJS este mai vechi decât Backbone de un an în care a fost lansat de Brat Tech în 2009. Dar a decolat cu adevărat doar sub sprijinul Google, motiv pentru care este văzut ca un cadru de dezvoltare web mai tânăr decât este în realitate. Angular a început să câștige tracțiune în 2012 și a crescut rapid în popularitate în ultimii ani.

Această izbucnire a popularității a dus la o comunitate puternică de contribuabili, dar unii au spus că Angular nu este în conformitate cu ritmul. Comprimat cu fermoar și comprimat pentru producție, Angular are o dimensiune de 36 KB și nu respectă modelul de design MVC, motiv pentru care se spune adesea că are tehnologii de dezvoltare web „Model-View-Whatever”. Este de aproximativ trei ori mai mare decât dimensiunea coloanei vertebrale și, din motive întemeiate, vine cu mai multe funcționalități încorporate. Unele dintre cele mai populare site-uri care utilizează această dezvoltare web sunt MSNBC, VEVO și The Weather Channel.

Una dintre cele mai cunoscute caracteristici ale Angular este legarea datelor în două sensuri. Acum, legarea datelor înseamnă că datele sunt conectate la un element HTML din View și elementul poate actualiza și afișa datele. În AngularJS, atât View cât și Model pot actualiza datele, motiv pentru care se numește legarea datelor „în două sensuri”. Cu această caracteristică, aveți nevoie de mai puține codări pentru a crea vizualizări dinamice.

Directivele sunt o altă caracteristică populară a Angular. Acestea permit dezvoltatorilor să atașeze comportamente speciale la anumite părți ale DOM, extinzând HTML. De exemplu, directiva „ng-repere” permite dezvoltatorilor să repete un element, care este foarte util pentru tipărirea unui tablou de elemente sau pentru efectuarea altor acțiuni. Puteți chiar să vă faceți propriile directive în afară de cele care vin cu Angular, ceea ce adaugă mai multă flexibilitate la crearea de comportamente pentru UI.

Angular vine, de asemenea, cu o caracteristică numită injecție de dependență, care permite dezvoltatorilor să includă servicii pentru modulele lor cu ușurință. De exemplu, dacă doriți să utilizați o locație la scrierea unei funcții, tot ce trebuie să faceți este să o includeți ca parametru funcțional. Apoi, Angular se va asigura că o funcție a instanței este pusă la dispoziția funcției. Acest lucru este util în special pentru a injecta date discret în componente, ceea ce face ca Angular să fie foarte testabil.

Prezența Google ca sponsor este, de asemenea, un plus uriaș și o considerație critică. Acesta este motivul pentru care atât de multe companii și dezvoltatori au ales Angular. Dar legătura cu două sensuri a datelor care o face atât de populară poate fi și una dintre cele mai mari preocupări ale acesteia. Are tendința de a afecta performanța aplicației și complică depurarea.

Unghiular poate fi, de asemenea, lent atunci când este utilizat în aplicații mai complexe, mai mari, ceea ce subminează un motiv imens pentru utilizarea unei dezvoltări web. Dar cadrele de dezvoltare web calificate rezolvă această problemă într-o mare măsură. Există, de asemenea, Angular 2.0, care este acum în Beta și este o schimbare semnificativă față de cadrele anterioare de dezvoltare web, cu o compatibilitate înapoi zero. Dacă intenționați să optați pentru Angular, este posibil să mergeți și pentru 2.0, dar acest lucru este un risc, având în vedere că este încă în Beta. De asemenea, unghiulară nu are randare din partea serverului.

Cursuri recomandate

  • Curs de certificare C #
  • Cursuri PHP și MySQL
  • Cursuri de semiconductori
  • Formare certificare în estimare software

3.Ember

Ember este una dintre cele mai tinere dezvoltări web în comparație cu Angular sau Backbone, fiind lansat pentru prima dată în 2011 de Yehuda Katz, membru al echipelor de bază Ruby on Rails și jQuery. Acest lucru este crucial deoarece Ember se simte adesea foarte asemănător cu șinele. A fost construită de o comunitate de dezvoltatori dedicați, fără sponsor corporativ în spatele acesteia. Până acum, atât de bine în cadrele de dezvoltare web.

Comprimat și comprimat pentru producție, Ember vine la 95 KB, ceea ce o face una dintre cele mai grele dezvoltări web din această listă de tehnologii de dezvoltare web. Handlebars și jQuery sunt dependențe necesare care sunt incluse în pachetul respectiv. Această greutate suplimentară vine cu o funcționalitate suplimentară? Da, da. Nest, Vine, Qualcomm și NBC News folosesc Ember pentru site-urile lor web.

Cu Ember, convenția depășește configurația. Există o „modalitate neplăcută” de a face lucrurile atunci când utilizați această dezvoltare web, aceste instrumente vin cu aproape tot ce este necesar pentru a construi o aplicație web, inclusiv o bibliotecă de șabloane și alte lucruri care economisesc mult timp pentru dezvoltatori și îi ajută să se concentreze. pe probleme mai mari axate pe proiecte.

O parte interesantă a Ember este Ember CLI, un instrument de linie de comandă care nu este necesar, dar care poate fi cu adevărat util. Gestionează cele mai multe lucruri pentru care utilizează Gulp sau Grunt, cum ar fi minificarea JS și CSS sau compilarea Sass. Dacă nu aveți un sistem de construire în funcție, Ember CLI este foarte util pentru a începe.

Lipsa unui sponsor corporativ este de asemenea un plus uriaș pentru mai mulți dezvoltatori. Echipa din spatele acestui instrument de dezvoltare web este dedicată mișcării open source. Dacă sponsorizarea corporativă este ceva care vă este aproape, acest lucru poate fi o formă potrivită.

„Modul de îmbrățișare” de a face lucrurile facilitează dezvoltarea într-un fel, dar vă limitează și capacitățile. Modul Ember este similar cu Angular, dar este cu siguranță foarte diferit de cele mai vechi tehnologii de dezvoltare web, cum ar fi Backbone etc, care vă oferă mult mai multă libertate de a amesteca și a potrivi lucrurile. De asemenea, există o mulțime de coduri care sunt generate, astfel încât este posibil să aveți probleme să vă dați seama ce se întâmplă exact. Curba de învățare poate fi destul de abruptă atunci când aveți o dezvoltare web atât de mare, cu o mulțime de funcționalități încorporate. Ember oferă, de asemenea, toate avantajele și dezavantajele legării datelor în două sensuri, chiar dacă folosește o implementare diferită. De asemenea, îi lipsește redarea din partea serverului, dar echipa Ember a spus că se va îndepărta de legarea bidirecțională și de redarea serverului.

4.React

React este cea mai tânără dezvoltare web aici în tehnologiile de dezvoltare web, cu o vechime de doar trei ani în tehnologiile de dezvoltare web, cu prima lansare în 2013 de către nimeni altul decât Facebook. această dezvoltare web este cu mult diferită în abordarea sa decât alte dezvoltări web din această listă de tehnologii de dezvoltare web, motiv pentru care trebuie să luați în considerare cu atenție investiția în aceste tehnologii de dezvoltare web.

În timp ce celelalte trei instrumente de dezvoltare web aici au un design MVC din partea clientului, React este mai concentrat pe partea de vizualizare, conform Facebook. Pentru restul modelului, arhitectura de aplicații Flux, care este cea mai potrivită pentru aplicații mari în tehnologiile de dezvoltare web. Practic vorbind, React în forma sa simplă ar trebui să facă bine pentru majoritatea aplicațiilor.

În dezvoltarea web reacția este dimensionată la 120 KB, comprimată și redusă pentru producție. Deși cea mai grea din această listă de instrumente de dezvoltare web, nu are dependențe necesare. Facebook, desigur, folosește React, la fel și Instagram, Netflix și BBC.

În ciuda dimensiunii dezvoltării web, React este cea mai rapidă dezvoltare web de pe această listă de instrumente de dezvoltare web și aceasta are multe de-a face cu evenimentele sintetice și implementarea unui DOM virtual. De asemenea, este ușor de învățat, ceea ce apreciază fiecare dezvoltator. Ember și Angular prezintă o mulțime de limbaje specifice domeniului, care este motivul principal pentru curbele lor abrupte de învățare. Reacționează, însă, nu, făcând mai ușor să înveți atât timp cât îți cunoști JavaScript.

Dacă sunteți familiarizați cu modulele CommonJS, v-ați potrivi destul de bine cu React, deoarece are o abordare bazată pe componente. Fiecare componentă face parte dintr-o interfață de utilizator, cum ar fi un titlu de pagină sau un element de formular, care poate fi amestecat și asortat și permite reutilizarea maximă a codului.

Un plus uriaș cu React este că, după ce îl înveți, îl poți folosi pentru a scrie web, precum și aplicații iOS. Acesta poate fi un beneficiu major, având în vedere cât de importante sunt aplicațiile mobile acum. De asemenea, React acceptă deja redarea din partea serverului, deci nu este nevoie să folosiți soluții ca în tehnologiile de dezvoltare web de mai sus. Dar un aspect controversat al acestui cadru este utilizarea componentelor pentru UI și absența șabloanelor. Aceasta înseamnă în esență că HTML-ul dvs. este în JavaScript.

Concluzii tehnologii de dezvoltare web

Deocamdată, React pare să fie cea mai puternică dezvoltare web aici, dar adevărul este că fiecare are beneficiile și dezavantajele sale, iar ți se cuvine să decizi care vrei să înveți. JavaScript a devenit esențial pentru dezvoltarea web, iar aceste dezvoltări web sunt vitale pentru a face saltul și pentru a obține expertiză în mai multe tehnologii de dezvoltare web pentru a fi la curent cu vremurile.

Articole recomandate

Acesta a fost un ghid pentru Instrumentele de Dezvoltare Web și beneficiile cadrelor de dezvoltare web în dezvoltarea web. De asemenea, puteți afla unele avantaje externe urmând acest link.

  1. Cel mai bun ghid pentru interviuri de dezvoltare web
  2. 10 noi instrumente de dezvoltare web pentru începători (gratuit)
  3. Află cele 8 uimitoare diferențe între știința datelor și dezvoltarea web
  4. Începeți cu Python și Django pentru Dezvoltare Web
  5. Angular 2 vs Vue JS: Care sunt caracteristicile uimitoare
  6. Întrebări de interviu SASS: Întrebări utile