Conţinut
- 01. Unghiular
- 02. Reacționează
- 03. Vue
- Cum se compară sintaxa cadrelor?
- Popularitate și piață
- Dezvoltarea aplicațiilor mobile
- Alte cadre care trebuie avute în vedere în 2020
- Concluzie
În 2020, suntem binecuvântați cu o serie de cadre și biblioteci care să ne ajute cu dezvoltarea web. Dar nu a existat întotdeauna atât de multă varietate. În 2005, un nou limbaj de scripting numit Mocha a fost creat de un tip pe nume Brendan Eich. La câteva luni după ce a fost redenumit în LiveScript, numele a fost schimbat din nou în JavaScript. De atunci, JavaScript a parcurs un drum lung.
În 2010, am văzut introducerea Backbone și Angular ca primele cadre JavaScript și, până în 2016, 92% din toate site-urile web foloseau JavaScript. În acest articol, vom analiza trei dintre principalele cadre JavaScript (Angular, React și Vue) și starea lor în următorul deceniu. Doriți să vă creați propriul site? Încercați această listă de constructori de site-uri web.
Pentru câteva resurse strălucitoare, consultați lista noastră de instrumente de top pentru designul web, rezumatul nostru de servicii de găzduire web și această listă de software excelent de testare a utilizatorilor.
01. Unghiular
AngularJS a fost lansat în 2010, dar până în 2016 a fost complet rescris și lansat ca Angular 2. Angular este un cadru web complet dezvoltat de Google, care este utilizat de Wix, Upwork, The Guardian, HBO și multe altele.
Pro:
- Suport excepțional pentru TypeScript
- MVVM permite dezvoltatorilor să separe lucrările la aceeași secțiune a aplicației folosind același set de date
- Documentație excelentă
Contra:
- Are o curbă de învățare
- Migrarea dintr-o versiune veche poate fi dificilă.
- Actualizările sunt introduse destul de regulat, ceea ce înseamnă că dezvoltatorii trebuie să se adapteze la acestea
Ce urmeaza?
În Angular 9, Ivy este compilatorul implicit. A fost pus în aplicare pentru a rezolva o mulțime de probleme legate de performanță și dimensiunea fișierului. Ar trebui să facă aplicațiile mai mici, mai rapide și mai simple.
Când comparați versiunile anterioare ale Angular cu React și Vue,
dimensiunile finale ale pachetului au fost mult mai mari atunci când se utilizează Angular. De asemenea, Ivy face posibilă hidratarea progresivă, ceea ce echipa Angular a prezentat la I / O 2019. Hidratarea progresivă folosește Ivy pentru a încărca progresiv pe server și client. De exemplu, odată ce un utilizator începe să interacționeze cu o pagină, codul componentelor împreună cu orice runtime este preluat bucată cu bucată.
Ivy pare a fi principalul accent pe viitor pentru Angular și speranța este să o facă disponibilă pentru toate aplicațiile. Va exista o opțiune de renunțare în versiunea 9, până la Angular 10.
02. Reacționează
React a fost lansat inițial în 2013 de Facebook și este utilizat pentru construirea de interfețe web interactive. Este folosit de Netflix, Dropbox, PayPal și Uber pentru a numi câteva.
Pro:
- React folosește DOM-ul virtual, care are un impact pozitiv asupra performanței
- JSX este ușor de scris
- Actualizările nu compromit stabilitatea
Contra:
- Unul dintre principalele obstacole este necesitatea bibliotecilor terțe pentru a crea aplicații mai complexe
- Dezvoltatorii sunt lăsați în întuneric pe cea mai bună modalitate de dezvoltare
Ce urmeaza?
La React Conf 2019, echipa React a abordat o serie de lucruri la care au lucrat. Primul este Hidratarea selectivă, unde React va întrerupe orice funcționează pentru a acorda prioritate componentelor cu care utilizatorul interacționează. Pe măsură ce utilizatorul va interacționa cu o anumită secțiune, acea zonă va fi hidratată. Echipa a lucrat și la Suspense, care este sistemul React pentru orchestrarea încărcării codului, datelor și imaginilor. Aceasta permite componentelor să aștepte ceva înainte de a reda.
Atât hidratarea selectivă, cât și suspansul sunt posibile prin modul concurent, care permite aplicațiilor să fie mai receptive, oferindu-i lui React capacitatea de a intra în blocuri mari de lucru cu prioritate mai mică, pentru a se concentra pe ceva care este o prioritate mai mare, cum ar fi răspunsul la introducerea utilizatorului. Echipa a menționat, de asemenea, accesibilitatea ca un alt domeniu pe care l-au analizat, concentrându-se pe două subiecte particulare - gestionarea focalizării și a interfețelor de intrare.
03. Vue
Vue a fost dezvoltat în 2014 de Evan You, fost angajat Google. Este folosit de Xiaomi, Alibaba și GitLab. Vue a reușit să câștige popularitate și sprijin din partea dezvoltatorilor într-un spațiu scurt de timp și fără sprijinul unui brand important.
Pro:
- Dimensiuni foarte ușoare
- Prieten pentru începători - ușor de învățat
- Mare comunitate
Contra:
- Nu este susținut de o companie uriașă, cum ar fi React with Facebook și Angular with Google
- Nicio structură reală
Ce urmeaza?
Vue și-a stabilit ținta de a fi mai rapid, mai mic, mai ușor de întreținut și de a face mai ușor pentru dezvoltatori să vizeze nativ (dacă aveți probleme de întreținere, luați în considerare un serviciu de găzduire web). Următoarea versiune (3.0) urmează să apară în primul trimestru al anului 2020, care include o rescriere DOM virtuală pentru o performanță mai bună, împreună cu suportul TypeScript îmbunătățit. Există, de asemenea, adăugarea API-ului de compoziție, care oferă dezvoltatorilor un nou mod de a crea componente și de a le organiza în funcție de funcție în loc de funcționare.
Cei care dezvoltă Vue au fost, de asemenea, ocupați cu lucrul la Suspense, care vă suspendă redarea componentelor și redă o componentă de rezervă până când este îndeplinită o condiție.
Unul dintre lucrurile minunate cu actualizările Vue este că susțin compatibilitatea cu versiunile anterioare. Nu vor să rupi vechile tale proiecte Vue. Am văzut acest lucru în migrarea de la 1.0 la 2.0, unde 90% din API a fost același.
Cum se compară sintaxa cadrelor?
Toate cele trei cadre au suferit modificări de la lansări, dar un lucru esențial de înțeles este sintaxa și diferența acesteia. Să aruncăm o privire la modul în care se compară sintaxa atunci când vine vorba de legarea simplă a evenimentelor:
Vue: v-on directiva este utilizată pentru a atașa ascultători de evenimente care invocă metode pe instanțe Vue. Directivele sunt prefixate cu v- pentru a indica faptul că sunt atribute speciale furnizate de Vue și aplică un comportament reactiv special DOM-ului redat. Handlerele de evenimente pot fi furnizate fie în linie, fie ca nume al metodei.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export implicit {nume: „HelloWorld”, metode: {clickHandler: function () {console.log („Am fost făcut clic! ”); }}}; / script>
Reacţiona: React pune marcaj și logică în JS și JSX, o extensie de sintaxă pentru JavaScript. Cu JSX, funcția este transmisă ca gestionare a evenimentelor. Gestionarea evenimentelor cu elemente React este foarte similară cu gestionarea evenimentelor pe elemente DOM. Dar există unele diferențe sintactice; de exemplu, evenimentele React sunt denumite folosind camelCase mai degrabă decât cu litere mici.
funcție Buton () {funcție clickHandler (e) {console.log („am fost făcut clic”); } butonul return peClick = {clickHandler}> Click me! / button>; }
Unghiular: Sintaxa legării evenimentului constă dintr-un nume de eveniment țintă între paranteze în stânga unui semn egal și o instrucțiune șablon citată în dreapta. Alternativ, puteți utiliza fișierul pe- prefix, cunoscut sub numele de formă canonică.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) clasa de export ClickMeComponent {onClickMe () {console.log („ Ai făcut clic pe mine! ”); }}
Popularitate și piață
Să începem prin a analiza o imagine de ansamblu a celor trei cadre în ceea ce privește restul web, examinând statistici de la W3Techs. Angular este utilizat în prezent de 0,4% din toate site-urile web, cu o cotă de piață a bibliotecii JavaScript de 0,5%. React este utilizat de 0,3% din toate site-urile web și de o cotă de piață de bibliotecă JavaScript de 0,4%, iar Vue are 0,3% pentru ambele. Acest lucru pare destul de egal și v-ați aștepta să vedeți creșterea numărului.
Trenduri Google: În ultimele 12 luni, React este cel mai popular în termeni de căutare, urmat îndeaproape de Angular. Vue.js este cu mult în urmă; totuși, un lucru de reținut este că Vue este încă tânăr în comparație cu celelalte două.
Căutări de locuri de muncă: La momentul scrierii, React și Angular sunt destul de apropiate în ceea ce privește listele de locuri de muncă pe Indeed cu Vue cu mult în urmă. Cu toate acestea, pe LinkedIn se pare că există o cerere mai mare pentru dezvoltatorii Vue.
Stive Overflow: Dacă vă uitați la rezultatele Stack Overflow Developer Survey pentru 2019, React și Vue.js sunt ambele cadre web cele mai iubite și dorite. Unghiular se așează în poziția a noua pentru cei mai iubiți, dar pe locul trei pentru cei mai iubiți.
GitHub: Vue are cel mai mare număr de stele cu 153k, dar are cel mai mic număr de colaboratori (283). Pe de altă parte, React are 140.000 de stele și 1.341 de colaboratori. Angular are doar 59,6 k stele, dar are cel mai mare număr de contributori din cei trei, cu 1,579.
Tendințe NPM: Imaginea de mai sus prezintă statistici din ultimele 12 luni, unde puteți vedea React are un număr mai mare de descărcări pe lună comparativ cu Angular și Vue.
Dezvoltarea aplicațiilor mobile
Un obiectiv principal pentru cei trei mari este implementarea mobilă. React are React Native, care a devenit o alegere populară pentru construirea aplicațiilor iOS și Android nu doar pentru utilizatorii React, ci și pentru comunitatea mai largă de dezvoltare a aplicațiilor. Dezvoltatorii angulari pot folosi NativeScript pentru aplicații native sau Ionic pentru aplicații mobile hibride, în timp ce dezvoltatorii Vue au posibilitatea de a alege NativeScript sau Vue Native. Datorită popularității aplicațiilor mobile, aceasta rămâne un domeniu cheie al investițiilor.
Alte cadre care trebuie avute în vedere în 2020
Dacă doriți să încercați ceva nou în 2020, consultați aceste cadre JavaScript.
Ember: Un cadru open-source pentru construirea de aplicații web care funcționează pe baza modelului MVVM. Este folosit de mai multe companii mari precum Microsoft, Netflix și LinkedIn.
Meteor: O platformă JavaScript full-stack pentru dezvoltarea aplicațiilor web și mobile moderne. Este ușor de învățat și are o comunitate foarte solidară.
Concluzie
Toate cele trei cadre se îmbunătățesc continuu, ceea ce este un semn încurajator. Toată lumea are propria perspectivă și soluția preferată cu privire la care ar trebui să o folosească, dar se reduce la dimensiunea proiectului și care te face să te simți mai confortabil.
Cel mai important aspect este sprijinul continuu al comunităților lor, așa că, dacă intenționați să începeți un nou proiect și nu ați folosit niciodată vreunul dintre cele trei, atunci cred că sunteți în mâini sigure cu toate. Dacă nu ați avut încă șansa de a învăța vreunul dintre cele trei cadre, atunci vă sugerez să faceți din rezoluția voastră de Anul Nou să începeți să învățați. Viitorul se va învârti în jurul acestor trei.
Acest conținut a apărut inițial în revista net.
