Comparația cadrelor Js. Biblioteci, instrumente și cadre JavaScript esențiale pe care ar trebui să le cunoașteți. Ce este JavaScript Framework

SetElement: function(el) ( this.list = document.createElement("ul"); el.appendChild(this.list); return this; )

Acum nu mai trebuie să stocăm o referință la elementul container. Este suficient să creezi un element

și adaugă-l o dată în copac.

Logica care îmbunătățește performanța se află în cadrul metodei de actualizare:

„actualizare”: funcție(lista) (pentru (var i = 0; i< list.length; i++) { if (!this.rows[i]) { var row = document.createElement("LI"); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }

Prima buclă for iterează prin toate liniile trecute și creează elemente dacă este necesar

• . Referințele la aceste elemente sunt stocate în matricea this.rows. Și dacă există deja un element acolo la un anumit index, cadrul își actualizează proprietatea textContent doar dacă este posibil. A doua buclă elimină elemente dacă dimensiunea matricei este mai mare decât numărul de șiruri trecute.

  Iată rezultatul:

  
  

  Browserul redesenează doar partea care s-a schimbat.

  Vestea bună este că cadrele precum React funcționează deja corect cu DOM. Browserele devin mai inteligente și folosesc trucuri pentru a reda cât mai puțin posibil. Dar totuși, este mai bine să țineți cont de acest lucru și să verificați cum funcționează cadrul pe care îl alegeți.

  Sper că în viitorul apropiat nu va mai trebui să ne gândim la astfel de lucruri, iar cadrele se vor ocupa singure de asta.

  Gestionarea evenimentelor DOM

  Aplicațiile JavaScript interacționează de obicei cu utilizatorul prin evenimente DOM. Elementele de pe pagină trimit evenimente, iar codul nostru le procesează. Iată o bucată de cod în Backbone.js care efectuează o acțiune dacă utilizatorul interacționează cu pagina:

  Var Navigation = Backbone.View.extend(( „evenimente”: ( „click .header.menu”: „toggleMenu” ), „toggleMenu”: function() ( // ... ) ));

  Deci, ar trebui să existe un element corespunzător selector.header.menu și atunci când utilizatorul face clic pe el, ar trebui să afișăm sau să ascundem meniul. Problema acestei abordări este că legăm obiectul JavaScript la un anumit element DOM. Dacă vrem să edităm marcajul și să înlocuim .menu cu .main-menu , va trebui să edităm și JavaScript. Cred că controlorii ar trebui să fie independenți și nu ar trebui să fie strâns cuplati cu DOM.

  Prin definirea funcțiilor, delegăm sarcini unei clase JavaScript. Dacă aceste sarcini sunt handlere de evenimente DOM, este logic să le creați din HTML.

  Îmi place modul în care AngularJS gestionează evenimentele.

  click pe mine

  go este o funcție înregistrată în controlerul nostru. Dacă respectăm acest principiu, nu trebuie să ne gândim la selectoarele DOM. Pur și simplu aplicăm comportamentul direct nodurilor HTML. Această abordare este bună, deoarece vă scutește de a juca plictisitoare cu DOM.

  În general, m-aș bucura dacă acest tip de logică ar fi în interiorul HTML. Interesant este că am petrecut mult timp convingând dezvoltatorii să separe conținutul (HTML) și comportamentul (JavaScript), i-am învățat să încorporeze stiluri și scripturi direct în HTML. Dar acum văd că ne poate economisi timp și ne poate face componentele mai flexibile. Desigur, nu mă refer la așa ceva:

  text banner

  Vorbesc despre atribute vizuale care controlează comportamentul unui element. De exemplu:

  …

  Acest lucru nu ar trebui să arate ca programarea JavaScript în HTML, ci mai degrabă configurarea configurației.

  Managementul dependenței

  Managementul dependenței este o sarcină importantă în procesul de dezvoltare. De obicei depindem de funcții externe, module sau biblioteci. De fapt, creăm dependențe tot timpul. Nu scriem totul într-o singură metodă. Împărțim sarcinile aplicației în diferite funcții și apoi le conectăm. În mod ideal, dorim să încapsulăm logica în module care se comportă ca niște cutii negre. Ei știu doar acele detalii care se referă la munca lor și nimic altceva.

  RequireJS este unul dintre instrumentele populare de rezolvare a dependențelor. Ideea este că codul este învelit într-o închidere care trece modulele necesare:

  Require(["ajax", "router"], function(ajax, router) ( // … ));

  Acest exemplu de funcție necesită două module: ajax și router. Metoda magic require citește matricea transmisă și apelează funcția noastră cu argumentele necesare. Definiția routerului arată cam așa:

  // router.js define(["jquery"], function($) ( return ( "apiMethod": function() ( // ... ) ) ));

  Rețineți că există o altă dependență - jQuery. Un alt detaliu important: trebuie să returnăm API-ul public al modulului nostru. În caz contrar, codul care solicită modulul nostru nu va putea accesa funcționalitatea în sine.

  AngularJS merge puțin mai departe și ne oferă ceva numit fabrică. Ne înregistrăm dependențele acolo și ele devin magice disponibile în controlere. De exemplu:

  MyModule.factory("greeter", function($window) ( return (" salut": function(text) ( $window.alert(text); ) ); )); funcția MyController($scope, greeter) ( $scope.sayHello = function() ( greeter.greet("Hello World"); )

  În general, această abordare ușurează munca. Nu trebuie să folosim funcții precum require pentru a ajunge la dependență. Tot ceea ce este necesar este să tastați cuvintele corecte în lista de argumente.

  Bine, ambele metode de injectare a dependenței funcționează, dar fiecare necesită un stil de codare diferit. În viitor, aș dori să văd cadre care să elimine această limitare. Ar fi mult mai elegant să folosiți metadate atunci când creați variabile. Acum limbajul nu face posibil acest lucru. Dar ar fi grozav dacă ai putea face asta:

  Var router:;

  Dacă dependența este situată lângă definiția variabilei, atunci putem fi siguri că această dependență este injectată doar dacă este necesară. RequireJS și AngularJS, de exemplu, funcționează la nivel funcțional. Adică, se poate întâmpla să utilizați un modul doar în anumite cazuri, dar inițializarea și implementarea acestuia se vor întâmpla întotdeauna. În plus, putem defini dependențe doar într-un loc strict definit. Suntem atașați de asta.

  Șabloane

  Folosim adesea șabloane. Și facem acest lucru din cauza necesității de a separa datele și marcajul HTML. Cum funcționează cadrele moderne cu șabloane? Iată cele mai comune abordări:

  Modelul este definit în Hello, !

  Această abordare este adesea folosită deoarece șabloanele sunt în HTML. Acest lucru pare natural și are sens, deoarece HTML are etichete. Browserul nu redă conținutul elementelor, iar acest lucru nu poate distorsiona aspectul paginii.

  Șablonul este încărcat prin AJAX Backbone.View.extend(( „șablon”: „șablon-my-view-”, „render”: function() ( $.get("/templates/" + this.template + ".html ", function(template) ( var html = $(template).tmpl(); ) ));

  Ne punem codul în extern fișiere HTMLși a evitat utilizarea etichetelor suplimentare. Dar acum avem nevoie de mai multe solicitări HTTP și acest lucru nu este întotdeauna adecvat (cel puțin până când suportul HTTP2 devine mai larg).

  Șablonul face parte din markup - cadrul îl primește din arborele DOM. Această metodă se bazează pe HTML deja generat. Nu trebuie să facem solicitări HTTP suplimentare, să creăm fișiere noi sau .

  Șablonul face parte din markupul paginii var HelloMessage = React.createClass(( render: function() ( // Vă rugăm să rețineți: următoarea linie de cod // nu este JavaScript valid. return Hello (this.props.name); ) ));

  Această abordare a fost introdusă în React, care utilizează propriul analizor care transformă părți nevalide ale JavaScript în cod valid.

  Șablon - nu HTML

  Unele cadre nu folosesc HTML deloc direct. În schimb, șabloanele sunt stocate ca JSON sau YAML.

  În sfârșit, despre șabloane

  Bine, ce urmează? Mă aștept ca, în cadrul viitorului, să privim datele separat și markupul separat. Ca să nu se intersecteze. Nu vrem să ne ocupăm de încărcarea șirurilor de caractere în HTML sau de transmiterea datelor către funcții speciale. Vrem să atribuim valori variabilelor și să facem ca DOM-ul să se actualizeze. Comun legare în două sensuri nu ar trebui să fie ceva în plus, ar trebui să fie obligatoriu funcționalitate de bază.

  În general, comportamentul AngularJS este cel mai apropiat de ceea ce se dorește. Citește șablonul din conținutul paginii furnizate și implementează legarea magică în două sensuri. Cu toate acestea, nu este încă perfect. Uneori există pâlpâire. Acest lucru se întâmplă atunci când browserul redă HTML, dar mecanismele de încărcare AngularJS nu au început încă. În plus, AngularJS folosește cec murdar dacă s-a schimbat ceva. Această abordare este uneori foarte costisitoare. Sperăm că toate browserele vor accepta Object.observe în curând și legarea va fi mai bună.

  Mai devreme sau mai târziu, fiecare dezvoltator se confruntă cu problema șabloanelor dinamice. Cu siguranță, există părți în aplicațiile noastre care apar după descărcare. Cu cadrul ar trebui să fie ușor. Nu ar trebui să ne facem griji cu privire la solicitările AJAX, iar API-ul ar trebui să fie astfel încât procesul să pară sincron.

  Modularitate

  Îmi place când opțiunile pot fi activate și dezactivate. Și dacă nu folosim ceva, de ce să-l păstrăm în codul proiectului? Ar fi bine dacă framework-ul ar avea un builder care să genereze o versiune cu doar modulele necesare. Ca, de exemplu, YUI, care are un configurator. Selectăm modulele pe care le dorim și obținem un fișier JavaScript redus și gata de utilizat.

  Chiar și așa, există cadre care au ceva numit miez. Pe lângă acesta, putem folosi un pachet de plugin-uri (sau module). Dar am putea îmbunătăți acest lucru. Procesul de selectare a funcțiilor dorite nu trebuie să implice descărcarea fișierelor. Nu trebuie să le includem manual pe pagină. Acest lucru trebuie cumva să facă parte din codul cadru.

  Pe lângă capacitățile de instalare adecvate, un mediu ideal ar trebui să permită extensibilitatea. Ar trebui să putem scrie propriile plugin-uri și să le împărtășim cu alți dezvoltatori. Cu alte cuvinte, mediul ar trebui să fie propice pentru scrierea modulelor. Este imposibil să creezi o comunitate puternică fără existența unor condiții adecvate pentru dezvoltatori.

  Deschideți API

  Majoritatea cadrelor oferă un API pentru funcționalitatea lor de bază. Dar folosind aceste API-uri putem ajunge doar la acele părți pe care furnizorii au decis că sunt necesare pentru noi. Și aici pot fi utile hack-urile. Vrem să obținem ceva, dar nu există instrumente potrivite pentru asta. Și trebuie să folosești trucuri și să faci un ocol. Luați în considerare acest exemplu:

  Var Framework = function() ( var router = nou Router(); var factory = nou ControllerFactory(); return ( "addRoute": function(path) ( var rData = router.resolve(path); var controller = factory.get) (rData.controllerType); router.register(cale, controller.handler); var AboutCtrl = Framework.addRoute("/about");

  Acest cadru are un router încorporat. Definim calea și controlerul este inițializat automat. Când un utilizator vizitează o anumită adresă URL, routerul apelează metoda de gestionare a constructorului. Acest lucru este grozav, dar ce se întâmplă dacă trebuie să executăm o funcție JavaScript mică atunci când o adresă URL este potrivită? Din anumite motive, nu dorim să creăm un controler suplimentar. Acest lucru nu va funcționa cu API-ul actual.

  Am putea să o facem diferit, de exemplu astfel:

  Var Framework = function() ( var router = nou Router(); var factory = nou ControllerFactory(); return ( "createController": function(path) ( var rData = router.resolve(path); return factory.get(rData); .controllerType); ) "addRoute": function(path, handler) ( router.register(path, handler); ) ) var AboutCtrl = Framework.createController(( "tip": "despre" )); Framework.addRoute("/about", AboutCtrl.handler);

  Rețineți că routerul nu iese în afară. Nu este vizibil, dar acum putem controla atât crearea controlerului, cât și înregistrarea căii în router. Desigur, opțiunea propusă este potrivită pentru sarcina noastră specifică. Dar poate fi prea complicat, deoarece controlerele trebuie create manual. Când dezvoltăm API-uri, ne ghidăm după principiul responsabilității și raționamentului unic fă un lucru și fă-l bine. Văd tot mai multe cadre care își descentralizează funcționalitatea. Ele descompun tehnicile complexe în părți mai mici. Și acesta este un semn bun, sper că mai multe cadre vor face acest lucru în viitor.

  Testabilitate

  Nu este nevoie să vă convingeți să scrieți teste pentru codul dvs. Ideea este nu numai că trebuie să scrieți teste, ci și că trebuie să scrieți cod care poate fi acoperit cu teste. Uneori, acest lucru este incredibil de dificil și necesită timp. Sunt convins că dacă nu scriem teste pentru ceva, chiar și pentru ceva foarte mic, atunci aici vor începe să apară erori în aplicație. Acest lucru este valabil mai ales pentru JavaScript la nivelul clientului. Mai multe browsere, mai multe sisteme de operare, noi specificații, noi caracteristici și polifillurile lor - există o mulțime de motive pentru a începe să practici dezvoltarea bazată pe teste.

  Mai este ceva ce vom obține din teste. Nu numai că ne asigurăm că cadrul (aplicația) nostru funcționează astăzi. Ne asigurăm că va funcționa mâine și poimâine. Dacă există o caracteristică nouă pe care o introducem în cod, scriem teste pentru aceasta. Și este foarte important să ne asigurăm că aceste teste sunt trecute. Dar este, de asemenea, important ca testele anterioare să fie trecute. Astfel ne asigurăm că nimic nu este spart.

  Mi-ar plăcea să văd mai multe utilități și metode standardizate de testare. Aș dori să folosesc un singur utilitar pentru a testa toate cadrele. De asemenea, ar fi bine dacă testarea ar fi inclusă cumva în procesul de dezvoltare. Ar trebui să acordați mai multă atenție serviciilor precum Travis CI. Ele acționează ca un indicator nu numai pentru programatorul care face modificările, ci și pentru alți contribuitori.

  Încă lucrez cu PHP. Am avut de-a face cu cadre precum WordPress. Și mulți oameni m-au întrebat cum îmi testez aplicațiile: ce cadru folosesc, cum rulez teste, dacă am chiar componente. Adevarul este ca nu testez nimic. Și de aceea nu am componentele. Același lucru este valabil și pentru unele cadre JavaScript. Unele dintre părțile lor sunt dificil de testat, deoarece nu sunt defalcate în componente. Dezvoltatorii ar trebui să gândească și în această direcție. Da, ne oferă un cod inteligent, elegant și funcțional. Dar codul trebuie să fie și testabil.

  Documentare

  Sunt sigur că fără o documentare bună, orice proiect va eșua mai devreme sau mai târziu. O grămadă de cadre și biblioteci sunt lansate în fiecare săptămână. Documentația este primul lucru pe care îl vede un dezvoltator. Nimeni nu vrea să petreacă ore întregi încercând să afle ce face un anumit utilitar și ce capabilități are. Pur și simplu enumerarea funcționalității de bază nu este suficientă. Mai ales pentru un cadru mare.

  Aș împărți documentația bună în trei părți:

  • Ce pot face - documentația ar trebui să învețe utilizatorul și ar trebui să o facă corect. Indiferent cât de cool sau puternic este cadrul nostru, trebuie explicat. Unii preferă să se uite la videoclipuri, alții să citească articole. În orice caz, dezvoltatorul trebuie să arate totul, de la elementele de bază până la părțile complexe ale cadrului.
  • Documentația API este de obicei peste tot. O listă completă a tuturor metodelor API publice, ce parametri au și ce returnează. Poate câteva exemple de utilizare.
  • Cum funcționează - de obicei, această secțiune nu este în documentație. Ei bine, dacă cineva ar putea explica structura cadrului, chiar și o simplă diagramă a funcționalității de bază și a relațiilor sale ar ajuta deja. Acest lucru ar face codul transparent. Acest lucru i-ar ajuta pe acei dezvoltatori care doresc să facă propriile modificări.
  Concluzie

  Viitorul este, desigur, greu de prezis. Dar putem visa la asta! Este important să vorbim despre ceea ce ne așteptăm și ce dorim de la cadrele JavaScript! Dacă aveți comentarii, sugestii sau doriți să vă împărtășiți gândurile, scrieți pe Twitter cu hashtag-ul

  Continuăm comparația dintre principalele cadre Javascript pentru 2011. Am identificat, folosind metode strict științifice, evitând subiectivitatea și expresismul inutil, chiar acești lideri mondiali, ei bine, astăzi îi vom privi direct și îndeaproape - cele șase biblioteci de javascript de top în ordinea descrescătoare a popularității lor.

  locul 1:

  Dimensiune: 155Kb (versiunea minimă - 72Kb), licență: MIT și GNU GPL, ultima versiune: 1.6 (3 mai 2011)

  jQuery este cea mai populară și răspândită bibliotecă JavaScript, concentrându-se pe interacțiunea dintre JavaScript și HTML. jQuery oferă, de asemenea, un API convenabil pentru lucrul cu Ajax. Acest cadru a fost unul dintre primele care au fost implementate cu succes. Un alt secret al popularității acestei biblioteci este implementarea unui echilibru foarte consistent între funcționalitate bună și, în același timp, o încercare de succes de a crea un nucleu universal destul de compact. Dacă adăugăm aici capacitatea de compromis de a extinde foarte simplu funcționalitatea bibliotecii de bază prin includerea de plugin-uri suplimentare (al căror număr depășește acum 1000) - atunci rezultatul este un produs cu adevărat universal, flexibil și rapid.

  Pentru cei care doresc să obțină efecte UI mai avansate (UI, interfață cu utilizatorul), cum ar fi suport pentru scalare, sortare, glisare și plasare și widget-uri standard precum marcaje, glisor, bară de progres etc., se recomandă utilizarea bibliotecii aferente , care este specializată în special în efecte grafice și crearea complexă interfata utilizator.

  În general, jQuery este foarte benefic pentru proiectele de dimensiuni mici și mijlocii, dar în curs de dezvoltare proiecte majore poate fi problematică deoarece duce la deficite de proiectare, deși este foarte productivă datorită conținutului și codului său simplu. Ei bine, popularitatea produsului este evidențiată de faptul că foștii concurenți, de exemplu xajax (xajaxproject.org), ei înșiși trec în cele din urmă la utilizarea jQuery, Microsoft urmează să popularizeze partajarea jQuery cu tehnologiile sale, iar Nokia își anunță intenția de a integra jQuery pentru widget-urile sale mobile.

  Digg, BBC, Dell, IsoHunt, Break.com, TinyPic, eMusic, Box.net, Yandex Maps.

  Cuvinte cheie pentru SEO: meniu jquery, oygukn, exemple jquery ajax, referință javascript, oygukn

  locul 2:

  Dimensiune: 278Kb (versiunea minimă - 56Kb), licență: MIT, ultima versiune: 1.7 (22 noiembrie 2010)

  
  

  Al doilea cadru js cel mai popular, care simplifică foarte mult lucrul cu Ajax și cu alte funcții js avansate. În ciuda disponibilității sale ca bibliotecă de sine stătătoare, este cel mai des folosită de programatori împreună cu Ruby on Rails, Tapestry, script.aculo.us și Rico. Adesea, integrarea strânsă cu larg răspândită Ruby on Rails este cea care se încearcă să explice popularitatea acestuia (deși jQuery deja discutat la nivel de plugin poate interacționa și cu multe platforme populare, de exemplu, cu același Ruby on Rails sau PHP (jquery. hohli.com)).

  Din punct de vedere al designului, cadrul este foarte convenabil pentru proiectele de dimensiuni medii, deoarece oferă o modalitate rudimentară de a emula OOP clasic, pe lângă funcționalitatea sa simplă. Performanța sa este oarecum instabilă, adică În unele operațiuni poate fi rapid, în altele performanța scade simțitor. Prototype este unul dintre puținele cadre care nu includ componente UI sau îmbunătățiri UX - pentru a utiliza astfel de efecte, este recomandat să folosiți biblioteca sa copil - script.aculo.us (sau Scripty2), care adaugă un număr mare de efecte grafice, suport pentru glisare și plasare, glisoare, editori Ajax etc.

  Exemple de site-uri cunoscute bazate pe acest cadru: CNN, The New York Times, Apple, Fox News Channel, Last.fm, Twitter, Hakia.

  Cuvinte cheie pentru SEO: script java, descărcare prototip, javascript js, document js, script js, comparație cadru

  locul 3:

  Dimensiune: 101Kb (versiunea minimă - 60Kb), licență: MIT, ultima versiune: 1.3 (11 octombrie 2011)

  
  

  MooTools este un cadru modular, orientat pe obiecte. Este foarte asemănător în abordarea sa asupra designului de bază cu jQuery și Prototype - nu include controale și widget-uri UI, limitându-se la un set minim de efecte și capabilități.

  Aceasta este o bibliotecă JavaScript foarte bună - agilă, mică, împărțită în multe module mici, bine documentată. În opinia noastră unanimă, codul de aici este mai clar și mai bine organizat în comparație cu liderul - jQuery. Modularitatea este un mare plus separat: este posibil să compilați biblioteca necesară pentru un anumit scop - deși economiile în kiloocteți în comparație cu jQuery sunt practic nimic. Există o opinie stereotipă că începătorilor le este mai bine să folosească jQuery, iar programatorilor cu experiență le este mai bine să utilizeze MooTools, dar credem că MooTools este mai bine pentru ambele.

  În plus, acest cadru conține un plugin foarte interesant MooTools.More.js, care este de fapt ceva mai mult decât un simplu plugin: vă permite să extindeți foarte mult capacitățile bibliotecilor terțe și, în același timp, are suplimente foarte interesante. aplicații pentru manipularea matricelor și a datelor, hashemi, șiruri de caractere etc. Am fost foarte impresionați de capacitatea de a localiza sintaxa engleză a limbajului mootools în sine în orice limbă națională, ceea ce vă permite să programați în ea cât mai confortabil posibil, de exemplu, în rusă.

  Exemple de site-uri cunoscute bazate pe acest cadru: MooTools este folosit în Joomla CMS, deci există o mulțime de astfel de site-uri. Folosit și de (World Wide Web Consortium)

  Cuvinte cheie pentru SEO: mootools joomla, mootools jquery, mootools js

  locul 4:

  
  

  Biblioteca Yahoo! Biblioteca UI (YUI) este un set de utilități și controale scrise în JavaScript și CSS pentru crearea de aplicații web interactive folosind scripting DOM, tehnici DHTML și Ajax. Există două tipuri de componente disponibile în acest cadru: utilități și controale. Utilitățile simplifică dezvoltarea browserului legat de DOM, DHTML și Ajax. Controalele sunt un set de elemente vizuale gata făcute, extrem de interactive, pentru proiectarea paginilor web. Toate aceste elemente sunt create și funcționează numai pe partea clientului și nu necesită o reîmprospătare a paginii pentru a le schimba. Întreaga bibliotecă este distribuită sub o licență BSD și este gratuită pentru toți utilizatorii. YUI a fost creat în comun de ingineri de top Yahoo, precum și de dezvoltatori din întreaga lume. Acum este unul dintre cadrele js de top, complet gata pentru utilizare industrială, unde componentele UI și UX foarte avansate sunt integrate într-un întreg într-o singură livrare, formând un produs complet complet, independent și universal. Dacă adăugăm la aceasta licența sa foarte liberală, atunci popularitatea pe care a câștigat-o pe bună dreptate această bibliotecă este de înțeles, mai ales în evoluțiile comerciale și numeroasele bifurcări unde a fost luată ca bază.

  Exemple de site-uri cunoscute bazate pe acest cadru: Yahoo! Cumpărături, Bebo, ImageShack, LinkedIn, Walmart.com.

  Cuvinte cheie pentru SEO: descărcați yui, nfrschsch

  locul 5:

  Dimensiune: 502Kb (versiunea minimă - 84Kb), licență: GPLv3 și comercial, cea mai recentă versiune: 4.0 (26 aprilie 2011)

  
  

  Proiectul a început ca o încercare de a extinde programul Yahoo! Interfață cu utilizatorul, dar în acest stadiu este deja un proiect complet original, practic fără legătură cu YUI. Forța motrice, fondatorul și liderul permanent al proiectului rămâne Jack Slotsum, un cunoscut specialist în comunitatea de programare JavaScript.

  ExtJS nu este cel mai performant cadru disponibil, ci principalul trăsătură distinctivă prin faptul că oferă cel mai apropiat mediu de programare clasică, implementând mijloace grafice foarte avansate de afișare și interacțiune cu utilizatorul într-un mediu Web 2.0. Începând cu versiunea Ext JS 3.0, biblioteca este împărțită logic în două părți: Ext Core (un set de funcții JavaScript care vă permite să creați pagini web dinamice cu procesare unificată în diferite browsere și distribuite sub o licență MIT) și Ext JS (un set de widget-uri pentru crearea de interfețe de utilizator dublă cu licență GPL v3 sau licență comercială).

  În general, ExtJS face o impresie foarte favorabilă - acest cadru are capacități grafice foarte bune. Aici linia dintre aplicațiile web și desktop devine din ce în ce mai subțire.

  Cuvinte cheie pentru SEO: ext download, ext 4, ext js, ext 3, ext 2, ext yst pfdtltybz

  locul 6:

  Dimensiune: 123Kb (versiunea minimă - 65Kb), licență: BSD și AFL, ultima versiune: 1.6.0 (15 martie 2011)

  
  

  Un alt exemplu din lista de cadre populare, care, pe lângă faptul că repetă în mare măsură avantajele analogilor săi, are și propriile sale caracteristici. Printre cele mai importante, aș dori să menționez o încercare foarte serioasă de a obține o independență completă față de fiecare interpret JS specific, pentru care dezvoltatorii fac pur și simplu o treabă titanică de testare și găsire a celor mai universale și simple soluții. Prin urmare, sfera de aplicare a acestui cadru este cât mai larg posibil: acestea nu sunt doar soluții obișnuite pe partea clientului, ci și pe partea serverului și a computerelor desktop - oriunde este posibil să rulați JavaScript. A doua caracteristică tehnică importantă a Dojo este suportul pentru designul cu mai multe puncte de intrare, ceea ce îi oferă multe avantaje tehnice evidente. Aș dori să menționez, de asemenea, Extensiile Dojo pentru Adobe AIR, concepute pentru a ajuta dezvoltatorii să folosească întregul potențial al platformei AIR în aplicațiile care utilizează setul de instrumente Dojo.

  Exemple de site-uri cunoscute bazate pe acest cadru: Dogo Toolkit este utilizat în mod activ în celebra extensie PHP - Zend Framework, așa că există o mulțime de astfel de site-uri.

  Cuvinte cheie pentru SEO: descărcați ghid detaliat dojo, setul de instrumente dojo zend dojo, exemple de dojo

  În ultima parte a acestui opus, nu mă voi mai uita la lideri, ci pur și simplu la cadre foarte promițătoare. Ca întotdeauna în articolele mele, încerc să mă uit nu numai la picioarele mele, în timp ce afirm uneori fapte banale, ci și puțin înainte - privind, dacă este posibil, în viitor. Din acest punct de vedere, este dată concluzia mea filosofică suplimentară Top 3 + pe această temă (în special pentru programatorii tineri js).

  Dacă dezvoltați aplicații web în JavaScript, atunci utilizați deja cadre pentru aceasta. Când utilizați cadre, nu trebuie să vă amintiți bucăți mari de cod, dar puteți utiliza biblioteci, vă puteți conecta componentele necesareși folosiți modele. Mulți oameni cred că jQuery este un cadru JavaScript. Dar jQuery nu este un cadru cu drepturi depline, este o bibliotecă, deși cea mai veche și cea mai populară. Astăzi nu vom vorbi despre jQuery.

  În articolul de astăzi, ne vom uita la o listă a celor mai populare 10 cadre JS care sunt utilizate în dezvoltarea aplicațiilor web.

  AngularJS

  AngularJS este o platformă de dezvoltare de aplicații web open source care a fost introdusă de Google în 2009.

  AngularJS este conceput pentru aplicații web dinamice, cu folosind HTML pentru pagini web statice. Practic, extinde HMTL și implementează caracteristici precum legarea profundă, depanarea, manipularea automată a DOM și validarea formularului pe partea client fără a utiliza cod JavaScript suplimentar.

  Cu acest cadru, puteți crea elemente HTML noi, puteți utiliza „componente” pentru a crea și puteți salva fragmente de cod pentru utilizare ulterioară. De asemenea, are o mulțime de instrumente pentru tot felul de teste.

  Deși pentru un începător poate fi dificil să stăpânească această platformă din cauza tot felul de directive, componente, injecții etc.

  ReactJS este un cadru JavaScript excelent lansat în 2013 de Instagram și Facebook. Facilitează crearea de aplicații dinamice complexe și la scară largă. Vorbim aici despre redarea de top a interfețelor de înaltă performanță (și complexe). Vă amintiți cum JavaScript a devenit rapid un limbaj pe partea serverului cu node.js? Și cu React, puteți dezvolta aplicații atât pentru partea client, cât și pentru server.

  React crește rapid în popularitate, chiar dacă este relativ nou.

  Ember.js

  Acesta este unul dintre cele mai populare cadre JavaScript MVC. A apărut în 2011 ca sursă deschisă. Poate fi folosit pentru a crea aplicații web scalabile cu o singură pagină destul de ușor.

  În domeniul legării de date în două sensuri, Ember este similar cu Angular. De asemenea, face lucrări de randare DOM de top pe partea de server. Deși, în general, este mai ușor de utilizat în comparație cu Angular.

  BackboneJS

  BackboneJS este folosit de Walmart, Pinterest, Twitter, Hulu etc.

  Acesta este un cadru foarte ușor. Eliminați funcționalitățile inutile din cadrele JS populare și obțineți Backbone. Acesta este unul dintre cele mai bune cadre pentru aplicații web cu o singură pagină. Deși pentru a extinde funcționalitatea va trebui să adăugați alte biblioteci ca dependențe.

  Backbone seamănă mult cu jQuery cu numărul său mare de plugin-uri și extensii. Este grozav pentru începători pentru aplicații simple.

  KnockoutJS

  KnockoutJS este un alt cadru JavaScript open source excelent care funcționează cu modelul MVVM (Model-View-ViewModel). Este dezvoltat în JavaScript simplu, fără dependențe externe.

  Este deosebit de bun la legarea datelor. Este ușor de utilizat și facilitează chiar și pentru începători să înceapă un proiect.

  Acest cadru este potrivit pentru aplicații cu o singură pagină, în special ca bibliotecă. Deși nu are o comunitate la fel de mare ca oricare dintre platformele de mai sus.

  Dacă prețuiești simplitatea și nu vrei scripturi pe server din partea ta, alege Knockout.

  Meteor.js

  MeteorJS are toate caracteristicile de care are nevoie orice dezvoltator pentru redarea front-end, dezvoltarea back-end și gestionarea bazelor de date.

  Vă oferă flexibilitatea și instrumentele necesare pentru a crea aplicații bogate.

  Pachetele din partea serverului rulează în node.js, așa că aveți nevoie doar de pachete MeteorJS pentru a deschide baza de date. Modificările la baza de date sunt simulate înapoi în interfața cu utilizatorul fără confuzie între diferite limbi.

  Aurelia.js

  AureliaJS este un cadru JS de generație următoare pentru aplicații mobile și web.

  Cel mai bun lucru despre Aurelia este că este foarte modulară și conține destul de multe biblioteci mici independente. Tu, ca dezvoltator, poți alege dintre aceste biblioteci pentru a-ți crea propriul cadru.

  Polymer.js

  PolymerJS a fost lansat în 2013 de Google.

  Folosește conceptul de componente web pentru a extinde capacitățile HTML. Dacă asta îți amintește de Angular, asta este pentru că este. PolymerJS oferă superputere și structură elementelor HTML personalizate.

  Skel este un cadru JavaScript pur.

  Este ideal pentru crearea de aplicații web și site-uri web responsive. Vine cu grilă CSS, puncte de întrerupere, API și caracteristici de normalizare a stilului browserului.

  Vue.js este un cadru destul de nou. Deși câștigă rapid popularitate în rândul dezvoltatorilor web.

  Acest cadru funcționează cu paradigma de proiectare MVVM și este conceput pentru a crea interfețe cu utilizatorul în paradigma de programare reactivă cu un API simplu și compatibil.

  Scurtă concluzie

  În acest articol, nu nominalizăm niciun cadru JavaScript pentru campionat. Depinde de tine să decizi în funcție de obiectivele tale și de ceea ce ai nevoie.

  Această colecție acoperă 15 cadre convenabile pentru front-end. Pe lângă cele mai populare platforme, există mai multe platforme mai puțin cunoscute pe listă - sperăm că toată lumea poate găsi o soluție potrivită pentru proiectul său.

  unghiular

  O bijuterie de programare web: chiar și unii adepți înfocați Angular au optat pentru React. React a fost capabil să facă ceea ce Angular nu a putut face - vă permite să dezvoltați un front-end fără a vă plonja în junglă și complexitatea cadrului. React este o bibliotecă JavaScript creată de Facebook și scopul ei principal este de a oferi lucru confortabil cu Shadow DOM. În acest scop se folosește DOM-ul Virtual, un model care, la fiecare modificare, generează o listă de operațiuni care trebuie efectuate asupra DOM-ului pentru a-l aduce într-o stare nouă.

  Dacă ești interesat de acest cadru și decizi să începi să-l studiezi, ți-am pregătit o traducere pe această temă. În aprilie 2017, Facebook a relansat biblioteca, noul proiect se va numi React Fiber.

  Priză

  Dacă nu acordați suficientă atenție structurii codului, chiar și atunci când dezvoltați o singură pagină sau o aplicație cu o singură pagină, codul dvs. se poate transforma într-o adevărată farfurie de spaghete. Backbone este construit pe ideea că toate lucrările de pe partea serverului ar trebui să fie efectuate printr-un API, minimizând cantitatea de cod necesară pentru a obține aceeași funcționalitate bogată ca și cadrele web complexe.

  Backbone este unul dintre cele mai populare cadre pentru dezvoltarea web, în ​​principal din două motive: principiul utilizării modulelor este foarte ușor de înțeles, ceea ce înseamnă că învățarea utilizării cadrului în sine este simplă.

  Vue

  O bibliotecă pentru crearea de aplicații mobile și web încrucișate, care conține un set mare de componente de interfață utilizator gata de utilizare, care pot fi combinate sau utilizate individual. Widgeturile sunt compatibile cu orice tehnologia serverului: PHP, Java, ASP.NET, Ruby, Grails, ColdFusion, Python etc. ÎN noua versiune 5.1 a adăugat suport pentru TypeScript, JSON și API-ul Promise.

  PureMVC