Contenido
- 01. Angular
- 02. Reaccionar
- 03. Vue
- ¿Cómo se compara la sintaxis de los marcos?
- Popularidad y mercado
- Desarrollo de aplicaciones móviles
- Otros marcos a tener en cuenta en 2020
- Conclusión
En 2020, tenemos la suerte de contar con una serie de marcos y bibliotecas que nos ayudarán con el desarrollo web. Pero no siempre hubo tanta variedad. En 2005, un tipo llamado Brendan Eich creó un nuevo lenguaje de secuencias de comandos llamado Mocha. Meses después de cambiar el nombre a LiveScript, el nombre se cambió nuevamente a JavaScript. Desde entonces, JavaScript ha recorrido un largo camino.
En 2010, vimos la introducción de Backbone y Angular como los primeros marcos de JavaScript y, para 2016, el 92 por ciento de todos los sitios web usaban JavaScript. En este artículo, vamos a echar un vistazo a tres de los principales frameworks de JavaScript (Angular, React y Vue) y su estado de cara a la próxima década. ¿Quieres crear tu propio sitio? Pruebe esta lista de creadores de sitios web.
Para obtener algunos recursos brillantes, consulte nuestra lista de las mejores herramientas de diseño web, nuestro resumen de servicios de alojamiento web y también esta lista de excelente software de prueba de usuarios.
01. Angular
AngularJS se lanzó en 2010, pero para 2016 se reescribió por completo y se lanzó como Angular 2. Angular es un marco web desarrollado por Google, que es utilizado por Wix, Upwork, The Guardian, HBO y más.
Pros:
- Soporte excepcional para TypeScript
- MVVM permite a los desarrolladores separar el trabajo en la misma sección de la aplicación utilizando el mismo conjunto de datos
- Excelente documentación
Contras:
- Tiene un poco de curva de aprendizaje
- La migración desde una versión anterior puede resultar difícil.
- Las actualizaciones se introducen con bastante regularidad, lo que significa que los desarrolladores deben adaptarse a ellas.
¿Que sigue?
En Angular 9, Ivy es el compilador predeterminado. Se ha implementado para resolver muchos de los problemas relacionados con el rendimiento y el tamaño del archivo. Debería hacer que las aplicaciones sean más pequeñas, rápidas y sencillas.
Cuando compara versiones anteriores de Angular con React y Vue, el
Los tamaños finales de los paquetes eran mucho más grandes cuando se usaba Angular. Ivy también hace posible la hidratación progresiva, que es algo que el equipo de Angular mostró en I / O 2019. La hidratación progresiva utiliza Ivy para cargar progresivamente en el servidor y el cliente. Por ejemplo, una vez que un usuario comienza a interactuar con una página, el código de los componentes junto con cualquier tiempo de ejecución se obtiene pieza por pieza.
Ivy parece ser el gran enfoque en el futuro para Angular y la esperanza es que esté disponible para todas las aplicaciones. Habrá una opción de exclusión voluntaria en la versión 9, hasta Angular 10.
02. Reaccionar
React fue lanzado inicialmente en 2013 por Facebook y se utiliza para crear interfaces web interactivas. Es utilizado por Netflix, Dropbox, PayPal y Uber, por nombrar algunos.
Pros:
- React utiliza el DOM virtual, que tiene un impacto positivo en el rendimiento.
- JSX es fácil de escribir
- Las actualizaciones no comprometen la estabilidad
Contras:
- Uno de los principales contratiempos es la necesidad de bibliotecas de terceros para crear aplicaciones más complejas.
- Los desarrolladores no saben cuál es la mejor forma de desarrollar
¿Que sigue?
En React Conf 2019, el equipo de React abordó una serie de cosas en las que han estado trabajando. La primera es la hidratación selectiva, que es donde React detendrá cualquier cosa en la que esté trabajando para priorizar los componentes con los que el usuario está interactuando. A medida que el usuario vaya a interactuar con una sección en particular, esa área se hidratará. El equipo también ha estado trabajando en Suspense, que es el sistema de React para orquestar la carga de código, datos e imágenes. Esto permite que los componentes esperen algo antes de renderizarse.
Tanto la hidratación selectiva como la suspensión son posibles gracias al modo concurrente, que permite que las aplicaciones respondan mejor al brindar a React la capacidad de ingresar grandes bloques de trabajo de menor prioridad para enfocarse en algo que es de mayor prioridad, como responder a la entrada del usuario. El equipo también mencionó la accesibilidad como otra área que han estado analizando, centrándose en dos temas particulares: el enfoque de gestión y las interfaces de entrada.
03. Vue
Vue fue desarrollado en 2014 por Evan You, un ex empleado de Google. Es utilizado por Xiaomi, Alibaba y GitLab. Vue logró ganar popularidad y el apoyo de los desarrolladores en un corto espacio de tiempo y sin el respaldo de una marca importante.
Pros:
- De tamaño muy ligero
- Apto para principiantes, fácil de aprender
- Gran comunidad
Contras:
- No respaldado por una gran empresa, como React with Facebook y Angular with Google
- Sin estructura real
¿Que sigue?
Vue se ha fijado el objetivo de ser más rápido, más pequeño, más fácil de mantener y facilitar a los desarrolladores la orientación nativa (si tiene problemas para mantener, considere un servicio de alojamiento web). La próxima versión (3.0) vence en el primer trimestre de 2020, que incluye una reescritura de DOM virtual para un mejor rendimiento junto con una compatibilidad mejorada con TypeScript. También está la adición de la API de composición, que proporciona a los desarrolladores una nueva forma de crear componentes y organizarlos por función en lugar de operación.
Aquellos que desarrollan Vue también han estado ocupados trabajando en Suspense, que suspende la renderización de su componente y renderiza un componente de reserva hasta que se cumpla una condición.
Una de las mejores cosas de las actualizaciones de Vue es que mantienen la compatibilidad con versiones anteriores. No quieren que rompas tus viejos proyectos de Vue. Vimos esto en la migración de 1.0 a 2.0, donde el 90 por ciento de la API era la misma.
¿Cómo se compara la sintaxis de los marcos?
Los tres marcos han sufrido cambios desde sus lanzamientos, pero una cosa que es fundamental comprender es la sintaxis y sus diferencias. Veamos cómo se compara la sintaxis cuando se trata de un enlace de eventos simple:
Vue: La v-en La directiva se usa para adjuntar detectores de eventos que invocan métodos en instancias de Vue. Las directivas tienen el prefijo v- para indicar que son atributos especiales proporcionados por Vue y aplican un comportamiento reactivo especial al DOM renderizado. Los controladores de eventos se pueden proporcionar en línea o como el nombre del método.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {nombre: “HelloWorld”, métodos: {clickHandler: function () {console.log (“¡Me hicieron clic! ”); }}}; / script>
Reaccionar: React coloca marcado y lógica en JS y JSX, una extensión de sintaxis de JavaScript. Con JSX, la función se pasa como controlador de eventos. Manejar eventos con elementos React es muy similar a manejar eventos en elementos DOM. Pero existen algunas diferencias sintácticas; por ejemplo, los eventos React se nombran usando camelCase en lugar de minúsculas.
function Button () {function clickHandler (e) {console.log ("Me hicieron clic"); } botón de retorno onClick = {clickHandler}> ¡Haz clic en mí! / button>; }
Angular: La sintaxis de enlace de eventos consta de un nombre de evento de destino entre paréntesis a la izquierda de un signo igual y una declaración de plantilla entre comillas a la derecha. Alternativamente, puede utilizar el en- prefijo, conocido como la forma canónica.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click Me! / Button>`}) export class ClickMeComponent {onClickMe () {console.log (“ ¡Me hiciste clic! ”); }}
Popularidad y mercado
Comencemos por mirar una imagen general de los tres marcos en lo que respecta al resto de la web examinando las estadísticas de W3Techs. Angular es utilizado actualmente por el 0,4 por ciento de todos los sitios web, con una cuota de mercado de bibliotecas de JavaScript del 0,5 por ciento. React es utilizado por el 0.3 por ciento de todos los sitios web y una participación de mercado de bibliotecas de JavaScript del 0.4 por ciento y Vue tiene 0.3 por ciento para ambos. Esto parece bastante uniforme y es de esperar que los números aumenten.
Tendencias de Google: Durante los últimos 12 meses, React es el más popular en términos de búsqueda, seguido de cerca por Angular. Vue.js está bastante por detrás; sin embargo, una cosa para recordar es que Vue todavía es joven en comparación con los otros dos.
Búsquedas de trabajo: En el momento de escribir este artículo, React y Angular están bastante igualados en términos de ofertas de trabajo en Indeed con Vue muy por detrás. En LinkedIn, sin embargo, parece haber más demanda de desarrolladores de Vue.
Desbordamiento de pila: Si observa los resultados de la Encuesta para desarrolladores de Stack Overflow para 2019, React y Vue.js son los frameworks web más queridos y buscados. Angular se sienta en la novena posición para los más amados pero el tercero más buscado.
GitHub: Vue tiene la mayor cantidad de estrellas con 153k, pero tiene la menor cantidad de contribuyentes (283). React, por otro lado, tiene 140.000 estrellas y 1.341 colaboradores. Angular solo tiene 59.6k estrellas, pero tiene el mayor número de contribuyentes de los tres con 1.579.
Tendencias de la NPM: La imagen de arriba muestra estadísticas de los últimos 12 meses, donde puede ver que React tiene una mayor cantidad de descargas por mes en comparación con Angular y Vue.
Desarrollo de aplicaciones móviles
Un enfoque principal para los tres grandes es la implementación móvil. React tiene React Native, que se ha convertido en una opción popular para crear aplicaciones de iOS y Android no solo para los usuarios de React, sino también para la comunidad de desarrollo de aplicaciones en general. Los desarrolladores de Angular pueden usar NativeScript para aplicaciones nativas o Ionic para aplicaciones móviles híbridas, mientras que los desarrolladores de Vue pueden elegir entre NativeScript o Vue Native. Debido a la popularidad de las aplicaciones móviles, esta sigue siendo un área clave de inversión.
Otros marcos a tener en cuenta en 2020
Si desea probar algo nuevo en 2020, consulte estos marcos de JavaScript.
Ascua: Un marco de código abierto para crear aplicaciones web que funciona según el patrón MVVM. Es utilizado por varias grandes empresas como Microsoft, Netflix y LinkedIn.
Meteorito: Una plataforma JavaScript de pila completa para desarrollar aplicaciones móviles y web modernas. Es fácil de aprender y cuenta con una comunidad muy comprensiva.
Conclusión
Los tres marcos mejoran continuamente, lo que es un signo alentador. Todos tienen su propia perspectiva y la solución preferida sobre cuál deben usar, pero realmente se reduce al tamaño del proyecto y cuál te hace sentir más cómodo.
El aspecto más importante es el apoyo continuo de sus comunidades, por lo que si está planeando comenzar un nuevo proyecto y nunca ha usado ninguno de los tres antes, creo que está en buenas manos con todos ellos. Si aún no ha tenido la oportunidad de aprender ninguno de los tres marcos, le sugiero que se convierta en su resolución de Año Nuevo para comenzar a aprender. El futuro girará en torno a estos tres.
Este contenido apareció originalmente en la revista net.
