Content
- 01. Angular
- 02. Reacciona
- 03. Vue
- Com es compara la sintaxi dels frameworks?
- Popularitat i mercat
- Desenvolupament d'aplicacions mòbils
- Altres marcs a tenir en compte el 2020
- Conclusió
El 2020, tenim una gran quantitat de marcs i biblioteques per ajudar-nos en el desenvolupament web. Però no sempre hi havia tanta varietat. El 2005, un nou llenguatge de seqüències anomenat Mocha va ser creat per un noi anomenat Brendan Eich. Mesos després de canviar el nom a LiveScript, el nom es va canviar de nou a JavaScript. Des de llavors, JavaScript ha recorregut un llarg camí.
El 2010, vam veure la introducció de Backbone i Angular com els primers marcs JavaScript i, el 2016, el 92% de tots els llocs web utilitzaven JavaScript. En aquest article, analitzarem tres dels principals marcs JavaScript (Angular, React i Vue) i el seu estat cap a la propera dècada. Voleu crear el vostre propi lloc? Proveu aquesta llista de creadors de llocs web.
Per obtenir recursos fantàstics, consulteu la nostra llista de les millors eines de disseny web, el nostre resum de serveis d’allotjament web i aquesta llista d’excel·lents programes de proves d’usuaris.
01. Angular
AngularJS es va publicar el 2010, però el 2016 es va reescriure completament i es va publicar com a Angular 2. Angular és un marc web complet desenvolupat per Google, que és utilitzat per Wix, Upwork, The Guardian, HBO i molt més.
Pros:
- Suport excepcional per a TypeScript
- MVVM permet als desenvolupadors separar el treball a la mateixa secció d'aplicacions mitjançant el mateix conjunt de dades
- Excel·lent documentació
Contres:
- Té una mica de corba d’aprenentatge
- La migració des d’una versió antiga pot ser difícil.
- Les actualitzacions s’introdueixen amb regularitat, cosa que significa que els desenvolupadors s’han d’adaptar a elles
Que segueix?
A Angular 9, Ivy és el compilador per defecte. S'ha creat per resoldre molts problemes relacionats amb el rendiment i la mida del fitxer. Hauria de fer que les aplicacions siguin més petites, ràpides i senzilles.
Quan compareu versions anteriors d 'Angular amb React i Vue, el fitxer
les mides finals del paquet eren molt més grans en utilitzar Angular. Ivy també fa possible la progressiva hidratació, cosa que l’equip d’Angular va mostrar a E / S 2019. La progressiva hidratació utilitza Ivy per carregar-se progressivament al servidor i al client. Per exemple, un cop un usuari comença a interactuar amb una pàgina, el codi dels components juntament amb qualsevol temps d'execució s'obté peça per peça.
Ivy sembla ser el principal focus d’avanç per a Angular i l’esperança és que estigui disponible per a totes les aplicacions. Hi haurà una opció de desactivació a la versió 9, fins a Angular 10.
02. Reacciona
React va ser llançat inicialment el 2013 per Facebook i s’utilitza per crear interfícies web interactives. L’utilitzen Netflix, Dropbox, PayPal i Uber per nomenar-ne alguns.
Pros:
- React utilitza el DOM virtual, que té un impacte positiu en el rendiment
- JSX és fàcil d'escriure
- Les actualitzacions no comprometen l'estabilitat
Contres:
- Un dels principals inconvenients és que necessiten biblioteques de tercers per crear aplicacions més complexes
- Els desenvolupadors es queden a les fosques sobre la millor manera de desenvolupar-se
Que segueix?
A React Conf 2019, l’equip de React va abordar diverses coses en què han estat treballant. El primer és la hidratació selectiva, que és on React posarà en pausa tot allò que està treballant per tal de prioritzar els components amb els quals l’usuari interactua. A mesura que l'usuari interaccioni amb una secció concreta, aquesta zona s'hidratarà. L’equip també ha estat treballant en el suspens, que és el sistema de React per orquestrar la càrrega de codi, dades i imatges. Això permet als components esperar alguna cosa abans de renderitzar-los.
Tant la hidratació selectiva com el suspens són possibles gràcies al mode simultani, que permet que les aplicacions siguin més sensibles donant a React la possibilitat d’introduir grans blocs de treball de menor prioritat per centrar-se en alguna cosa que tingui una prioritat més elevada, com respondre a l’entrada de l’usuari. L’equip també va esmentar l’accessibilitat com una altra àrea que han estat estudiant, centrant-se en dos temes particulars: la gestió de les interfícies d’enfocament i d’entrada.
03. Vue
Vue va ser desenvolupat el 2014 per Evan You, ex empleat de Google. L’utilitzen Xiaomi, Alibaba i GitLab. Vue va aconseguir guanyar popularitat i suport dels desenvolupadors en poc temps i sense el suport d’una marca important.
Pros:
- Mida molt lleugera
- Per a principiants: fàcil d'aprendre
- Gran comunitat
Contres:
- No està recolzat per una empresa enorme, com React amb Facebook i Angular amb Google
- Cap estructura real
Que segueix?
Vue s’ha fixat com a objectiu ser més ràpid, més petit, més mantenible i facilitar als desenvolupadors orientar-se als nadius (si teniu problemes per mantenir-lo, considereu un servei d’allotjament web). La propera versió (3.0) s’haurà de publicar el primer trimestre del 2020, que inclou una reescriptura virtual de DOM per obtenir un millor rendiment juntament amb un suport TypeScript millorat. També s’afegeix l’API de composició, que proporciona als desenvolupadors una nova manera de crear components i organitzar-los per funció en lloc de funcionar.
Els que desenvolupen Vue també s’han ocupat treballant a Suspens, que suspèn la representació del vostre component i fa un component alternatiu fins que es compleixi una condició.
Una de les coses més bones de les actualitzacions de Vue és que mantenen la compatibilitat amb versions anteriors. No volen que trenqueu els vostres antics projectes Vue. Ho vam veure en la migració de l'1.0 a la 2.0, on el 90% de l'API era el mateix.
Com es compara la sintaxi dels frameworks?
Els tres marcs han sofert canvis des de les seves versions, però una cosa que és fonamental per entendre és la sintaxi i la seva diferència. Vegem com es compara la sintaxi quan es tracta d’un enllaç simple d’esdeveniments:
Vista: El v-on La directiva s’utilitza per connectar oients d’esdeveniments que invocen mètodes en instàncies Vue. Les directives es prefixen amb v- per tal d’indicar que són atributs especials proporcionats per Vue i aplicar un comportament reactiu especial al DOM renderitzat. Els controladors d'esdeveniments es poden proporcionar en línia o com a nom del mètode.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, methods: {clickHandler: function () {console.log (“I was clicked! ”); }}}; / script>
Reacciona: React posa marca i lògica a JS i JSX, una extensió de sintaxi a JavaScript. Amb JSX, la funció es passa com a gestor d'esdeveniments. La gestió d'esdeveniments amb elements React és molt similar a la gestió d'esdeveniments en elements DOM. Però hi ha algunes diferències sintàctiques; per exemple, els esdeveniments React es denominen utilitzant camelCase en lloc de minúscules.
function Button () {function clickHandler (e) {console.log ("Em van fer clic"); } botó de retorn onClick = {clickHandler}> Click me! / button>; }
Angular: La sintaxi d'enllaç d'esdeveniments consisteix en un nom d'esdeveniment de destinació entre parèntesis a l'esquerra d'un signe igual i una sentència de plantilla entre cometes a la dreta. Com a alternativa, podeu utilitzar el fitxer en- prefix, conegut com a forma canònica.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) classe d’exportació ClickMeComponent {onClickMe () {console.log (“ M’has fet clic! ”); }}
Popularitat i mercat
Comencem mirant una imatge general dels tres marcs respecte a la resta del web examinant les estadístiques de W3Techs. Actualment, Angular és utilitzat pel 0,4% de tots els llocs web, amb una quota de mercat de la biblioteca JavaScript del 0,5%. React l’utilitza el 0,3% de tots els llocs web i un 0,4% de la quota de mercat de les biblioteques JavaScript i Vue té un 0,3% per a tots dos. Sembla força igualat i esperaria veure augmentar les xifres.
Tendències de Google: Durant els darrers dotze mesos, React és el més popular en termes de cerca, seguit de prop per Angular. Vue.js queda molt enrere; no obstant això, una cosa que cal recordar és que Vue encara és jove en comparació amb les altres dues.
Cerques de feina: En el moment de l’escriptura, React i Angular s’assemblen força en termes de llistats de feina a Indeed amb Vue molt enrere. Tanmateix, a LinkedIn sembla que hi ha més demanda de desenvolupadors de Vue.
Desbordament de pila: Si mireu els resultats de l’Enquesta de desenvolupadors de desbordament de pila per al 2019, React i Vue.js són els marcs web més estimats i desitjats. Angular se situa en la novena posició de la persona més estimada però la tercera més buscada.
GitHub: Vue és el que té el major nombre d’estrelles amb 153 k, però té el menor nombre de col·laboradors (283). D'altra banda, React té 140.000 estrelles i 1.341 col·laboradors. Angular només té 59,6 mil estrelles, però té el nombre més gran de col·laboradors dels tres, amb 1.579.
Tendències de NPM: La imatge superior mostra les estadístiques dels darrers dotze mesos, on podeu veure que React té un nombre més baix de descàrregues al mes en comparació amb Angular i Vue.
Desenvolupament d'aplicacions mòbils
Un dels focus principals dels tres grans és el desplegament mòbil. React té React Native, que s’ha convertit en una opció popular per construir aplicacions per a iOS i Android no només per als usuaris de React, sinó també per a la comunitat de desenvolupament d’aplicacions més àmplia. Els desenvolupadors angulars poden utilitzar NativeScript per a aplicacions natives o Ionic per a aplicacions mòbils híbrides, mentre que els desenvolupadors de Vue poden triar entre NativeScript o Vue Native. A causa de la popularitat de les aplicacions mòbils, aquesta segueix sent una àrea clau d’inversió.
Altres marcs a tenir en compte el 2020
Si voleu provar alguna cosa nova el 2020, consulteu aquests marcs JavaScript.
Ember: Un marc de codi obert per crear aplicacions web que funciona basat en el patró MVVM. L’utilitzen diverses empreses importants com Microsoft, Netflix i LinkedIn.
Meteor: Una plataforma JavaScript de pila completa per desenvolupar aplicacions web i mòbils modernes. És fàcil d’aprendre i té una comunitat molt solidària.
Conclusió
Els tres marcs milloren contínuament, cosa que és un signe encoratjador. Tothom té la seva pròpia perspectiva i la seva solució preferida sobre quina hauria d’utilitzar, però es redueix realment a la mida del projecte i fa que us sentiu més còmode.
L’aspecte més important és el suport continuat de les seves comunitats, de manera que si teniu previst iniciar un nou projecte i no heu utilitzat mai cap dels tres, crec que esteu en mans segures amb totes elles. Si encara no heu tingut l’oportunitat d’aprendre cap dels tres marcs, us proposo que sigui la vostra resolució de Cap d’Any per començar a aprendre. El futur girarà al voltant d’aquests tres.
Aquest contingut va aparèixer originalment a la revista net.
