„Sunetul muzicii” poate predica: „Să începem cu începutul, un loc foarte bun pentru a începe”. Dar aproape fiecare dezvoltator știe că este un plan prostesc. Locul potrivit pentru a începe este cu o fundație solidă construită de o echipă excelentă de dezvoltatori open source. Clonați munca lor asiduă și apoi adăugați doar suficient cod pentru a o face proprie. Nu este nevoie să repetați ceea ce toată lumea a făcut înainte.
Este un plan ușor – odată ce ați ales. Din păcate, alegerea acelei fundații poate fi aproape la fel de dificilă ca și cum ai începe chiar de la început. Lumea cadrelor web este un domeniu de dezvoltare foarte activ și pot exista zeci de proiecte open source bune care ar fi un start excelent pentru proiectul dumneavoastră.
Pentru a înrăutăți lucrurile, diferitele echipe care au creat aceste proiecte diferite au pornit pe o cale diferită pentru că au avut diferențe filosofice serioase față de celelalte opțiuni. S-au uitat la celelalte cadre și au decis că pot face mai bine. Cu alte cuvinte, au făcut-o cu un motiv și este posibil să fiți sau nu de acord cu decizia lor.
Lista de locuri bune pentru a începe de mai jos omite în mod intenționat liderii de piață React, Angular și Vue doar pentru a face lucrurile un pic mai simple. Asta nu înseamnă că cei trei mari sunt răi. Ele ar putea fi în continuare ceea ce vi se potrivește. Doar că se vorbește în mod constant despre ele, iar aceste discuții lasă pe dinafară alte opțiuni destul de bune.
Există o mulțime de motive bune pentru a alege cele mai populare. Mulți oameni în locul tău s-au uitat în jur și mulți dintre ei au ales React, Angular sau Vue pentru un motiv bun. Dar asta a fost atunci. Între timp, unii oameni inteligenți au creat cadre mai noi care sunt mai rapide, mai simple, mai puternice sau oricare dintr-un mare set de superlative.
În majoritatea cazurilor de mai jos, echipele au creat ceva intrigant și puternic prin reimaginarea naturii cadrului. Acesta este un mod sofisticat de a spune că au ajuns să elimine o caracteristică, făcând astfel cadrul mai eficient și reducând astfel cantitatea de memorie de care are nevoie, accelerând timpul de pornire sau, în general, făcându-l mai agil. Sau, în câteva cazuri, au adăugat idei noi care ar putea deveni standard în viitor.
Dacă aveți timp să investiți, iată o listă cu alte câteva dintre alegerile interesante. Nu sunt neapărat potrivite pentru unii oameni și cu siguranță nu sunt cea mai bună alegere pentru toți, dar s-ar putea să fie o alegere mai bună pentru dumneavoastră. Sarcina ta, dacă alegi să o accepți, este să creezi o descriere solidă a aplicației tale web, să scrii o descriere relativ fermă a diferitelor cazuri de utilizare și apoi să evaluezi aceste instrumente ținând cont de acest lucru.
Poate că îți place o anumită abordare a proiectării codului. Poate că aplicația dvs. nu are nevoie de unele dintre caracteristicile din cadrele mai grase și mai populare. Există zeci de motive pentru a investi într-una dintre aceste alte căi. S-ar putea să descoperiți că una dintre ele face minuni pentru aplicația dumneavoastră.
Petit DOM
Dacă vă place ideea unui DOM virtual, dar nu doriți toate constrângerile care vin odată cu adoptarea mentalității celor de la React, Vue sau a celuilalt framework cu nume mare, atunci Petit DOM este calea de urmat. Veți obține o cantitate mică de cod care vă va permite să manipulați o colecție virtuală de etichete și apoi să le migrați în DOM-ul real. Orice altceva în ceea ce privește structura componentelor și redarea depinde de dumneavoastră. Dacă componentele dvs. sunt simple sau dacă aveți de gând să creați o ierarhie de redare super-complexă care va fi doar a dvs., aceasta ar putea fi baza dvs. deoarece tot ceea ce oferă este un instrument de virtualizare a DOM.
Surplus
DOM-ul virtual s-ar putea să nu fie pentru toată lumea. Ocupă spațiu, așa că, dacă manipulările dvs. nu sunt prea complexe, ați putea la fel de bine să vă canalizați instrucțiunile direct în DOM-ul oficial. Biblioteca Surplus face exact acest lucru. Aceasta ia JSX-ul de marcare preferat de toată lumea și îl compilează într-un cod care va manipula DOM-ul real. Așa cum se spune în domeniul publicității, elimină intermediarul. Fără diferențe. Nici un strat secret suplimentar. Doar manipulare pură a DOM-ului real. Dacă codul dvs. este suficient de simplu și direct pentru a face doar câteva lucruri în DOM, de ce să vă deranjați cu distragerea virtuală?
RE:DOM
O altă opțiune pentru cei care nu vor să investească memorie într-un DOM virtual este o bibliotecă minusculă (2KB) numită RE:DOM. RE:DOM conține câteva rutine de bază care vă permit să creați toate etichetele și componentele dvs. cu câteva apeluri simple de JavaScript. Sintaxa este mult mai apropiată de CSS, astfel încât puteți specifica tag-uri destul de elaborate cu ID-uri și clase cu doar câteva apăsări de taste. Tastele „less than” (<) și „greater than” (>) vă vor mulțumi.
Mithril
Nu toate alternativele sunt mici și minimaliste. Mithril ar putea fi numit un cadru „de dimensiuni medii” în acest context, deși cântărește doar aproximativ 8KB. Tot acest cod construiește un DOM virtual cu un mecanism eficient de actualizare ca și celelalte, dar vine și cu un set standardizat de instrumente pentru a face față multor provocări standard, cum ar fi rutarea și apelurile XMLHttpRequest. Proiectanții doresc ca proiectele Mithril să fie relativ standardizate și consideră că adăugarea acestui cod la biblioteca principală sporește standardizarea. Dacă acest lucru nu este suficient, ei promovează, de asemenea, unele formate standard și structuri idiomatice.
Bobril
Dacă vă place DOM-ul virtual și componentele cu stare ale React și vă place să programați în TypeScript, atunci Bobril sau vărul său ngBobril, prietenos cu Angular, poate fi exact ceea ce vă trebuie. Cadrul este în mod constant mult mai rapid decât React sau Angular în unele dintre testele de referință, poate din cauza algoritmilor diff mai rapizi și a lipsei de suport pentru JavaScript izomorfic. Există, de asemenea, funcții de prescurtare pentru manipularea CSS și un strat complet de gestionare a stării, BobX, dacă aveți nevoie de el.
Marko
Dacă ați petrecut ceva timp licitând pe distribuitoare Pez sau alte obiecte de colecție, ați experimentat puterea lui Marko, un cadru subțire și rapid pe care eBay îl împărtășește prin intermediul unei licențe open source. Cea mai frumoasă parte poate fi o sintaxă de modelare foarte ușoară care elimină în mod inteligent cea mai mare parte a grăsimii în exces din HTML, astfel încât structura este definită de indentare și nu de multe altele. Iar motorul de randare este foarte rapid, capabil să conducă constelații elaborate de DIV-uri dansatoare care se actualizează mai repede de 60fps.
Svelte
Cadrul web standard vine cu un compilator și o bibliotecă descărcată care gestionează la execuție ceea ce produce compilatorul. Procesul în doi pași permite un cod foarte elaborat cu prețul de a aștepta ca biblioteca de execuție să fie descărcată și analizată de fiecare dată când pagina este deschisă. Compilatorul Svelte scapă de această complexitate scuipând un JavaScript aproape pur care este aproape gata să ruleze de unul singur, deși numai în unele dintre cele mai noi browsere (de exemplu, Chrome, Firefox, Opera și IE10). Este o strategie arhitecturală inteligentă care produce site-uri web foarte ușoare care ocupă puțină memorie.
Inferno
Inferno este un alt cadru creat pentru a face o mare parte din ceea ce face React, dar cu o descărcare mai mică și un timp de execuție mai rapid. Realizează o mare parte din acest lucru aruncând mecanismul elaborat de evenimente sintetice și concentrându-se doar pe cele mai esențiale, cum ar fi onClick. Multe alte părți ale API-ului sunt similare, dacă nu identice, ceea ce face relativ simplă mutarea codului dvs. peste, dacă nu are nevoie de stratul de optimizare a evenimentelor.
Preact
Unul dintre cei mai mici descendenți ai React este Preact, un omagiu care oferă cele mai multe dintre cele mai valoroase caracteristici, cum ar fi un DOM virtual și componente sofisticate, dar elimină gestionarii de evenimente sintetice și o parte din moștenirea accesoriilor. În timp ce Inferno încearcă să implementeze doar cele mai importante evenimente precum onClick, Preact nu se obosește să încerce să facă nimic cu evenimentele, lăsându-vă să vă bazați pe addEventListener nativ al browserului. Lăsând la o parte caracteristicile care nu adaugă prea mult (în opinia lor) este modul în care își fac descărcarea și mai mică. Acesta este un pic de compromis, deoarece testele de referință arată că Preact este un pic mai lent decât Inferno. Desigur, aplicația dvs. poate fi diferită și kilometrajul dvs. poate varia. Dacă aveți cu adevărat nevoie de compatibilitate pură cu React, există chiar și o bibliotecă (preact-compat) care rezolvă majoritatea problemelor în timpul compilării.
Hapi
Mai multe framework-uri sosesc într-o singură bucată. Hapi este mai degrabă o colecție de plug-in-uri, o constelație de zeci de bucăți de cod pe care le puteți amesteca în stiva dvs. după cum credeți de cuviință. Autentificarea, autorizarea și logarea sunt sarcini care pot fi rezolvate cu orice număr de opțiuni. Dacă construiți o arhitectură de microservicii plină de API-uri, plug-in-ul standardizat Swagger va genera automat documentația Swagger din codul dvs. de bază.
Koa
Câteodată aveți nevoie de o colecție destul de complexă de rutine care să jongleze cu cererile primite și să le traducă în mai multe modificări, unele dintre ele elaborate. Koa este conceput pentru a face organizarea tuturor acestor lucrări un pic mai simplă. Secretul său constă în faptul că transformă funcțiile de callback care domină în mod normal JavaScript într-un set de funcții asincrone care se declanșează atunci când este momentul potrivit. Stivele de callback spaghete imbricate sunt transformate în ceva un pic mai curat.
Nest
O altă opțiune pentru a îmblânzi complexitatea serverului vine de la echipa Nest, care oferă o arhitectură plină de controlori, țevi și furnizori cu câteva gărzi, interceptoare și filtre de excepție aruncate pentru a menține ordinea. Cadrul este modern și pregătit să gestioneze GraphQL și cereri de microservicii încă de la început.
Drupal, WordPress și Rails
Cadrele care sunt construite în JavaScript și care rulează peste Node.js umplu centrul psihologic al lumii dezvoltării web în aceste zile. Dar poate fi o greșeală să ignorăm generația anterioară construită pe PHP, o fundație care este mai rapidă ca niciodată acum că are și un compilator just-in-time ca JavaScript. Iar Ruby și cadrul său Rails continuă să servească drept pietre de temelie ale unor site-uri web solide ca piatra.
Ultima generație este marcată de luptă și bine testată de mai mult de un deceniu de dezvoltare și muncă continuă. Există designeri sofisticați care pot realiza teme și skin-uri pentru aplicații. Sunt șanse mari ca cineva să fi construit deja modulele cu funcționalitatea de care aveți nevoie. Așadar, înainte de a explora un framework Node.js inteligent, gândiți-vă dacă unul dintre cele mai vechi poate face deja o mare parte, dacă nu chiar tot ceea ce aveți nevoie.
Vanilla JS
Ați putea să o vedeți ca pe o digă răutăcioasă sau poate ca pe o satiră la nivelul lui „The Emperor’s New Clothes”, dar este greu de contestat succesul său. Vanilla JS este un site web care se laudă că framework-ul său este folosit pe mai multe site-uri web decât „jQuery, Prototype JS, MooTools, YUI și Google Web Toolkit – la un loc”. Acest lucru poate fi sau nu adevărat, având în vedere proliferarea jQuery, dar haideți să râdem de arșiță. Site-ul vine, de asemenea, cu un selector drăguț care vă permite să grupați o arhivă personalizată de diferite componente, cum ar fi Math, DOM, closures sau expresii regulate. Indiferent de ceea ce alegeți, rezultatul are o lungime uluitoare de zero octeți. Încercați să o întreceți pe asta!
Principiul glumei este că uneori are sens să folosiți doar câteva dintre elementele standard din JavaScript și să săriți peste cele suplimentare. Bibliotecile și cadrele de lucru precum jQuery sau React au început, în parte, din cauza diferențelor enervante dintre browsere. Multe dintre aceste diferențe au dispărut datorită standardizării.
Desigur, susținătorii Vanilla JS nu se confruntă cu faptul că funcțiile prescurtate precum $() nu sunt doar convenabile, ci și că economisesc spațiu în propriul nostru cod. Dar dacă veți folosi document.getElementById doar ocazional, s-ar putea să nu conteze. Dacă aveți de gând să adăugați doar câteva funcții la pagina dvs. web și dacă aceste funcții vor face câteva lucruri de bază, JavaScript simplu poate fi cel mai rapid cadru de lucru pentru dvs.
.