Cele mai populare cadre front-end din 2022

Publicat: 2022-02-19
Rezumat » În acest articol, vom aborda tendințele front-end actuale, vom explora cadrele actuale și viitoare și vom cântări argumentele pro și contra pentru cele mai populare. Datele se bazează pe sondajul anual al dezvoltatorilor JavaScript, cunoscut și sub numele de Starea JavaScript. Ca atare, ar trebui să vă așteptați ca informațiile din acest articol să fie actualizate anual pentru a reflecta cadrele cele mai populare în prezent printre dezvoltatorii front-end.

Cuprins
  • Care sunt tendințele actuale de front-end?
    • Arhitectură Micro Frontend
    • Dezvoltare bazată pe componente
    • JAMStack
  • Cele mai bune cadre front-end pentru 2022
  • #1 – Reacționează
  • # 2 – Colțular
  • #3 – Vue
  • #4 – Svelt
  • #5 – Preact
  • #6 – Ember
  • #7 – Lit
  • #8 – Alpin
  • #9 – Solid
  • #10 – Stimul
  • Framework front-end: un rezumat

Sondajul anual privind starea JavaScript s-a încheiat pentru anul 2021. Un pic mai târziu cu sosirea sa, dar mai bine mai târziu decât niciodată. Sacha Grief a explicat-o spunând: „S-au întâmplat multe în 2021. Atât de mult, de fapt, că sondajul a fost amânat până în 2022!” .

nu ma plang. Important este că avem date noi de analizat. Și, în acest ultim sondaj, există o mulțime de bunătăți. Dar, ne vom concentra pe un set de date specific. Și aceasta este popularitatea framework-urilor front-end. Care este stiva actuală pentru dezvoltatori web?

Cele mai populare cadre front-end din 2022
starea js 2021: cadre și biblioteci front-end

Ei bine, aceasta nu este o mare surpriză. Pentru al 5-lea an consecutiv, trio-ul de aur – React, Angular și Vue – continuă să domine cota de piață a framework-ului front-end.

Este demn de remarcat faptul că aceste statistici se bazează pe utilizare . Dacă ne uităm la satisfacție , Angular a pierdut mai mult de 20%, React aproximativ 10% și Vue, de asemenea, aproximativ 10%. Și interesul pentru cei trei mari a scăzut, de asemenea, cu aproximativ 20% în ultimii doi ani.

Dar, asta este de așteptat. Frame-urile front-end au avut întotdeauna o durată de viață fragilă. Interesant este că Svelte și-a luat abur în ultimii 2 ani. Va fi următorul mare lucru? Aș fi atent pentru că consensul este destul de pozitiv.

Care sunt tendințele actuale de front-end?

Cred că a sugera că „acesta este cel mai bun cadru front-end” este puțin ingenios. Sigur, unele cadre se descurcă mai bine decât altele și sunt cele mai bune pentru un anumit caz de utilizare. Dar, în realitate, există un motiv pentru care mai multe cadre front-end pot fi populare în același timp.

Deci, adevărata întrebare este – care sunt tendințele actuale în dezvoltarea front-end?


Arhitectură Micro Frontend

Arhitectura micro-frontend decuplează un proiect de aplicație la scară largă în „microaplicații” gestionabile. Cu alte cuvinte, micro-frontend permite dezvoltatorilor cu diverse medii să lucreze împreună la același proiect. Dacă cineva este mai priceput cu Vue și TypeScript, nu ar trebui să forțeze alți dezvoltatori să utilizeze aceeași tehnologie.

Arhitectură Micro Frontend (2)

Ca atare, micro-frontend-urile pot fi folosite pentru a combina mai multe tehnologii, păstrând în același timp aceeași foaie de parcurs pentru produse. Beneficiile suplimentare includ ritmul de dezvoltare mai rapid, mai puține probleme cu implementarea și versatilitatea în preferința cadrului.

Desigur, există dezavantaje, cum ar fi testarea mai complexă, gestionarea configurației și integrarea standardelor de accesibilitate. Dar, în ciuda provocării, multe echipe front-end adoptă abordarea micro-frontend, deoarece funcționează în practică.

Dezvoltare bazată pe componente

CDD nu este nimic nou; tendința a cunoscut prima sa adoptare în masă în urmă cu câțiva ani. Dar, în ciuda faptului că există de ceva vreme, CDD continuă să domine peisajul front-end.

Dezvoltare bazată pe componente - CDD

Pe scurt, dezvoltarea bazată pe componente este procesul de structurare a unei aplicații în jurul modulelor sau componentelor. Fiecare componentă are un rol specific în proiectarea aplicației. Și, ca atare, componenta în sine poate fi gestionată sau eliminată complet fără a cauza probleme într-un mediu de producție.

React.js este un exemplu excelent de cadru care cuprinde pe deplin componente. Și, nu este o surpriză să vezi că cadrele front-end de top îmbrățișează toate dezvoltarea stilului de componente/șablon.

JAMStack

JAMstack este un concept unic pentru construirea de pagini web statice. În loc să implementeze o soluție back-end pentru generarea de conținut, se folosește în schimb un API. Rezultatul final este că site-ul este atât mai rapid, dar și mai simplu de gestionat din perspectiva dezvoltatorilor.

Definiția pentru JAMstack:

  • J pentru JavaScript – limbajul folosit pentru a scrie funcții front-end.
  • A pentru API – solicitarea de conținut (date) de la servicii terțe.
  • M pentru Markup – structurarea conținutului pe pagina web.

În ceea ce privește stiva, este combinația de instrumente pe care o folosești. JAMstack poate fi folosit cu orice combinație de cadru și servicii, atâta timp cât urmează structura JAM.

Aflați mai multe: Jamstack.org // WTF este Jamstack?

Cele mai bune cadre front-end pentru 2022

Să aruncăm o privire mai atentă asupra cadrelor front-end care domină peisajul. Știm cine sunt jucătorii mari, dar cum rămâne cu noii veniți? Alpine, Lit și Solid arată toate procente de utilizare promițătoare. Și cu siguranță vrem să aflăm mai multe despre Svelte.


#1 – Reacționează

Cadrul front-end ReactJS

React continuă să domine spațiul front-end. Cadrul iese în evidență prin propriul său DOM virtual, asigurând performanță persistentă a aplicației la scară. De asemenea, structura bazată pe componente înseamnă că dezvoltarea este mai accesibilă între echipe.

În timp ce curba de învățare pentru React este moderat îngăduitoare, accesibilitatea instrumentelor face procesul gestionabil. Și anume, create-react-app automatizează procesul de construire pentru o aplicație standard. Și apoi există React DevTools, care oferă o experiență accesibilă de depanare din browser.

Datorită adoptării în masă a React, dezvoltatorii front-end se pot bucura să pună mâna pe multe proiecte open-source. De exemplu, mai mult de o duzină de sisteme de proiectare la scară largă sunt construite pentru React. Numărul de ore pe care acest lucru le rade din procesul de dezvoltare este enormă.

Site-ul GitHub
React.js Pro
Ușor de început, datorită numeroaselor tutoriale online, cursuri etc.
Structura componentelor facilitează definirea unui element și apoi reutilizarea acestuia după cum este necesar.
SEO prietenos pentru proiecte statice și dinamice.
Controlul versiunii oferă notificări despre structura codului învechit.
React.js Cons
Documentația se poate simți puțin lipsită pentru începători. De exemplu, JSX
Folosit numai pentru dezvoltarea UI.
Nu este cea mai bună alegere pentru proiecte mici.
Nepăsător – apelul dvs. pentru a decide structura și ghidul de stil.

# 2 – Colțular

Cadru frontal unghiular

În timp ce Angular păstrează un procent de utilizare destul de mare, interesul pentru cadru este la cel mai scăzut nivel istoric. Cine știe, poate că următorii fideli se datorează faptului că Angular se bazează pe TypeScript? Glumesc, desigur.

Angular oferă destul de multă flexibilitate pentru construirea de aplicații SPA – o singură pagină. Similar cu alte framework-uri front-end proeminente, Angular implementează un flux de lucru de dezvoltare bazat pe componente. Și, adaugă sistemul Templates – care gestionează natura dinamică a componentelor.

Mai presus de toate, Angular poate și este folosit pentru a crea aplicații pentru toate platformele simultan. Codul poate fi reutilizat pentru a fi implementat în aplicații web, proiecte mobile, precum și în aplicații desktop native. În ceea ce privește performanța – este optimizată prin SSR și Web Workers.

Este ușor să începeți cu Angular? Nu chiar. De fapt, dacă ne uităm la datele sondajului – satisfacția față de acest cadru a scăzut foarte mult. Iar motivul principal este curba de învățare, printre preferințele personale.

Site-ul GitHub
Avantaje unghiulare
Arhitectura MVC.
Șablonul modular permite scalarea dinamică a aplicațiilor.
Management de stat încorporat, rutare, servicii etc.
Multiplatformă: PWA, nativ și desktop.
Cons unghiular
Instrumente impresionante, dar o curbă de învățare provocatoare.
Verbos, ceea ce îl face impropriu pentru aplicații la scară mică.
Ineficient pentru SEO din cauza naturii PWA.
Nu la fel de iubit de comunitate. De exemplu, nu de tipul „la modă și la modă”.

#3 – Vue

Cadrul front-end Vue

Vue rămâne o alegere solidă pentru dezvoltarea web cu adevărat modernă. Cadrul progresiv și-a împins recent lansarea Vue 3. Și, datorită noilor funcții și îmbunătățiri, își propune să se cimenteze ca cadru de bază pentru a construi pe stiva modernă.

Noua versiune aduce câteva implementări mult așteptate. Inclusiv un lanț de instrumente de construcție nouă care utilizează Vite. Îmbunătățirea managementului statului prin Pinia. Și o documentație complet renovată, care conține grămezi peste grămezi de tutoriale pentru a începe.

În ceea ce privește popularitatea sa, Vue excelează în a fi flexibil. Cadrul nu impune o rutină strictă, ci mai degrabă vă permite să decideți ce doriți să construiți.

De exemplu, puteți structura componente web care pot fi reutilizate în alte stive de dezvoltare, inclusiv cele mai multe șabloane HTML de bază. În plus, Vue este adesea folosit pentru a lucra la proiecte SPA robuste datorită instrumentelor native, inclusiv – CSR, DevTools, suport pentru TypeScript și instrumente de testare.

Site-ul GitHub
Vue Pro
Vue CLI pentru instrumente și instrumente de dezvoltare bazate pe browser.
Legarea reactivă a datelor pentru aplicații în timp real.
Componentele aplicației sunt ușor de reutilizat.
Prietenos față de începători.
Vue Cons
Multi-platformă poate fi dificil.
Lipsa de strictețe duce la boluri pline cu cod de spaghete.
Nu este cea mai bună alegere pentru întreprindere.
Mai puține plugin-uri, în ciuda popularității.

#4 – Svelt

Cadru frontal svelt

Deci, care e treaba cu Svelte? Cadrul a cunoscut destul de multă adoptare în ultima vreme și chiar a făcut ca Vercel să investească în creatorul său Rich Harris. În principiu, Svelte funcționează la fel ca orice alt cadru bazat pe componente. Creați componente care sunt apoi folosite pentru a structura interfața de utilizare a aplicațiilor dvs.

Principala diferență în comparație cu cadre precum React este că Svelte nu trebuie să fie livrat în browser în întregime. În schimb, aplicațiile Svelte trebuie compilate, care vă vor grupa componentele într-un fișier JavaScript prefabricat.

În timp ce alte framework-uri folosesc Virtual DOM pentru a reda modificări, Svelte compilă aplicații cu nodul DOM preasignat. Această abordare are beneficii de performanță de durată, așa cum a arătat Josh Collinsworth. Și, în sfârșit, Svelte este destul de compatibil cu codul HTML nativ și nu impune o structură strictă.

Ceea ce este ideal pentru dezvoltarea rapidă front-end. Iată un exemplu:

 // Example.svelte <script lang="typescript"> export let name = 'Svelte'; export let textColor = '#000'; function reset() { name = 'Svelte'; textColor = '#000'; } </script> <h1 style="color: {textColor}" on:dblclick={reset}>Hello, {name}!</h1> <style> h1 { margin: auto; font-family: Georgia, system-ui; font-size: 3rem; font-weight: regular; text-align: none; } </style>
Site-ul GitHub
Svelte Pros
Este necesar mai puțin cod pentru a construi o structură de componente.
Un compilator încorporat duce la o performanță mai bună.
Întinderea stilului este legată de fiecare componentă în mod individual.
Tot codul este scris în JS (sau TS), CSS și HTML nativ.
Svelte Cons
Plimbare printre giganți, puțin sprijin din partea principalelor magazine.
Un cadru în creștere, astfel încât sprijinul comunității poate fi rar.
O abordare bazată pe compilator ar putea împiedica scalabilitatea.
Încă nu există o pagină dedicată de securitate a aplicației.

#5 – Preact

Preact framework front-end

Meta cadrele au fost întotdeauna un lucru. Și, în acest caz, Preact își propune să fie alternativa ușoară la React. Dacă ați lucrat cu React în trecut, atunci vă va fi ușor să înțelegeți Preact. De fapt, puteți utiliza confortabil componente între ambele cadre.

Primul lucru de remarcat este dimensiunea pachetului, care este de 4 kb gzipped pentru Preact și 38 kb gzipped pentru React. De asemenea, sistemul de evenimente este gestionat prin addEventListener, astfel încât să puteți utiliza JavaScript vanilla pentru a gestiona evenimente.

Dacă sunteți în căutarea unui studiu de caz detaliat, vă recomand să verificați de ce Etsy a trecut de la React la Preact. Publicația este cât mai aproape de a măsura beneficiile și, de asemenea, avantajele pe termen lung când vine vorba de mentenanță și stabilitatea migrației.

Site-ul GitHub

#6 – Ember

Cadru frontal Ember

Ember este atât de mult timp în urmă încât precede toate cadrele menționate mai sus. Sigur, Ember.js ar putea fi folosit mult mai puțin de-a lungul anilor. Dar, este încă un candidat solid pentru dezvoltarea de aplicații productive folosind modelul MVC. Și, deși cadrul este popular în rândul dezvoltatorilor web, este destul de flexibil și pentru aplicațiile desktop și mobile.

Mai important, Ember rămâne în dezvoltare activă. Iar versiunea Ember 4.0 adaugă noi funcții pentru a ține pasul cu tendințele front-end. Un alt lucru care face ca Ember să fie special este compatibilitatea integrată. În ceea ce privește cadrele, Ember face o treabă excelentă în a se asigura că codul tău nu se rupe cu schimbări majore în cadrul în sine.

Site-ul GitHub

#7 – Lit

Cadru frontal iluminat

Lit (anterior lit-HTML și LitElement) este un cadru de componente web întreținut de Google. Lit este cadrul care a fost folosit în stiva tehnologică pentru Wordle. Popularul joc de ghicire a cuvintelor care atrage milioane de vizitatori zilnic. Deci, pentru a rezuma, Lit este cel mai adesea folosit pentru a construi aplicații web progresive atât cu interfețe simple, cât și complexe.

În tot acest timp, puteți lucra direct cu Componentele Web. Această abordare ajută la crearea componentelor care nu adaugă nicio umflare suplimentară performanței. Și amprenta de rulare a Lit este extrem de mică. Mai simplu spus, un cadru precum React se bazează pe JavaScript, iar Lit implementează doar componente web standardizate.

Site-ul GitHub

#8 – Alpin

Cadru frontal alpin

Alpine.js este un cadru JavaScript front-end pentru personalizarea comportamentului UI. Și, chiar dacă Alpine seamănă cu Vue și Angular, este mult mai puțin solicitant în ceea ce privește utilizarea resurselor. Autorul, Caleb Porzio, îl numește „o atingere pentru a închide gaura dintre jQuery și React” .

Alpine funcționează cel mai bine atunci când doriți să adăugați interacțiuni la designul dvs., fără toate cheltuielile generale. De exemplu, dacă aveți un design de aplicație predefinit și doriți să adăugați meniuri derulante interactive. Utilizarea React pentru funcționalitatea interactivă de bază este exagerată.

Gândiți-vă la Alpine ca la mijlocul de a vă optimiza cadrele web de pe partea de server. De fapt, autorul însuși subliniază că Alpine se inspiră în mare parte din framework-uri precum Laravel, Django etc. De asemenea, este soluția ușoară perfectă pentru a adăuga caracteristici în stil jQuery generatoarelor statice de site: Jekyll, Hugo etc.

Site-ul GitHub

#9 – Solid

Cadru frontal solid

SolidJS a fost în dezvoltare activă din 2019. Dar, în iunie 2021, cadrul a trecut la v1. Și de atunci, a atras o mulțime de urmăritori. În acest moment, Solid are peste 14.000 de stele pe GitHub și există o actualizare majoră la fiecare 3 luni sau cam asa ceva.

Cadrul este declarativ și nu utilizează un DOM virtual. Mai degrabă, Solid este similar cu Svelte prin faptul că compilează componente până la DOM-ul real. Ca atare, actualizarea stării este specifică codului care o folosește.

În cele din urmă, SolidJS este puternic inspirat de React. Și, în multe privințe, există destul de multe asemănări. Inclusiv suport pentru JSX, API pentru Hooks și funcții precum Web Components, SSR. Interesant, este și extrem de rapid.

Un test de referință încheiat de Ryan Carniato arată că Solid este capabil să depășească Svelte, Elm, dar și cadre precum Vue și Redux.

Site-ul GitHub

#10 – Stimul

Cadrul front-end de stimulare

Și în sfârșit, cel puțin pentru anul acesta, avem Stimulus. Un cadru JS minim care este dezvoltat de Basecamp. Unul dintre primele lucruri pe care le veți observa este că are asemănări cu Alpine. Cu alte cuvinte, Stimulus încearcă să fie alternativa modestă la jQuery.

Cadrul este cel mai bine utilizat pentru a îmbunătăți codul HTML pe care îl utilizați deja ca parte a structurii paginii. Stimulus vă permite să vă optimizați elementele HTML prin adăugarea de controlere de date JavaScript. Acestea sunt funcții interactive și dinamice, utile pentru a îmbunătăți trimiterile de formulare, aspectul butoanelor și multe altele.

Site-ul GitHub

Framework front-end: un rezumat

Dacă există o concluzie din tendințele din acest an, este că dezvoltatorii caută să simplifice lucrurile. Acest lucru este destul de evident prin cadre precum Lit și Solid. Deși React are un ecosistem grozav, nu este întotdeauna necesar pentru a construi aplicații SPA și PWA simple.

De asemenea, cred că tendința este destul de evidentă în sine.

Angular a fost odată cel mai bun lucru din toate timpurile, dar ceea ce a ieșit i-a îndepărtat pe dezvoltatori. Deci, nu este o surpriză că Vue, React și Angular își pierd interesul dezvoltatorilor.

Și, alternative mai mici, dar mai complicate, câștigă popularitate. De fapt, anul acesta, au existat numeroase proiecte care au afectat ecosistemul dezvoltatorilor front-end. Și anume, există Bun care își propune să concureze ca runtime JS de facto și Fresh – care subliniază viteza și simplitatea și mă aștept pe deplin ca aceste instrumente să fie în fruntea listei în raportul de anul viitor.