Estamos publicando la segunda parte de la traducción del material dedicado a las cinco mejores herramientas de JavaScript para desarrollar partes del lado del cliente de proyectos web. La
primera parte trató con la biblioteca React y el marco angular. Aquí discutimos Vue, Ember y Backbone.
3. Vue
Las ideas detrás de Vue provienen de Angular y React, pero Vue es, en muchos sentidos, mejor que estas dos herramientas de desarrollo front-end. Vue ha sido descargado más de 40 millones de veces este año. Se ha publicado un
informe reciente de Snyk JavaScript Frameworks Security. Su objetivo principal es investigar la seguridad de React y Angular, pero había un lugar para estudiar otros proyectos. Desde Vue, a partir de este informe, puede descubrir lo que se conoce solo sobre 4 de sus
vulnerabilidades inmediatas que se han corregido.
Si no está familiarizado con Vue, aquí hay algunos datos clave sobre este marco.
Cuando se trabaja con Vue, la lógica del componente, su diseño y estilos se almacenan en un archivo. A excepción de los estilos, los materiales del proyecto también se almacenan en React. La interacción de componentes en Vue se proporciona a través de objetos que almacenan las propiedades y el estado de los componentes. Este enfoque, también, antes de aparecer en Vue, se usó en React.
Vue, que lo hace similar a Angular, le permite mezclar marcado HTML y código JavaScript. Para integrar datos de componentes en una plantilla, debe usar las directivas Vue. Tales como
v-bind o
v-if .
Una de las razones por las que Vue debería considerarse una alternativa digna a React es por cómo se organiza el estado de la aplicación aquí. En los proyectos React, cuando se usa el paquete React + Redux, a medida que la aplicación crece en tamaño, los procedimientos necesarios para administrar su estado se vuelven más complicados. Esto puede deberse al hecho de que el programador, en lugar de trabajar en la aplicación en sí, tiene que pasar mucho tiempo configurando los mecanismos de Redux. Vue usa la biblioteca Vuex para administrar el estado. Es similar a Flux y creado específicamente para Vue. Trabajar con él es mucho más conveniente que con Redux.
Si está tratando de elegir entre Vue y Angular, entonces las razones por las que podría preferir Vue pueden reducirse al hecho de que Angular, en comparación con Vue, parece un proyecto a gran escala demasiado complicado, cuya naturaleza es el deseo de limitar al desarrollador. Vue es mucho más simple que Angular y no limita tanto a los programadores.
Otra ventaja de Vue sobre Angular y React es que no tiene que aprender un nuevo idioma para trabajar con este marco.
▍ Elementos del ecosistema Vue
Hagamos una breve descripción del ecosistema en el que cae aquel que elige Vue:
- Para controlar el estado de las aplicaciones Vue, se utiliza la biblioteca Vuex, que se basa en conceptos relacionados con Flux.
- Existen herramientas de desarrollador para Chrome y Firefox que facilitan la creación de proyectos Vue.
- El ecosistema Vue tiene un
vue-loader para webpack, que le permite usar los componentes Vue como componentes de un solo archivo. - Para trabajar con las API del servidor, puede usar el cliente HTTP
vue-resource y la biblioteca Axios. - Vue admite el marco Nuxt.js, que incluye soporte para aplicaciones que se representan en el servidor. Nuxt.js puede considerarse un competidor de Angular Universal.
- Puede usar la biblioteca Weex para desarrollar aplicaciones móviles basadas en Vue.
Vue es un gran marco que supera a otros en términos de usabilidad. Quizás yo mismo me cambie a Vue en el futuro cercano. Este marco no es tan complejo como React y Angular, y también es muy adecuado para desarrollar aplicaciones de varios tamaños.
4. ascua
Ember 3.13 fue lanzado este año. Han aparecido muchas cosas nuevas en esta versión del marco. Ember es similar a Backbone y Angular. También es uno de los marcos de JavaScript más antiguos. Pero, a pesar de esto, en términos de oportunidades, no se queda atrás de sus competidores más jóvenes. Por ejemplo, es compatible con la tecnología de cambio de propiedad rastreable, lo que facilita la supervisión de los cambios en el estado de la aplicación y facilita la visualización de estos cambios.
Ember tiene una arquitectura bastante sofisticada que le permite crear rápidamente grandes aplicaciones de cliente. Implementa ideas típicas de MVC. Las aplicaciones Ember se crean a partir de adaptadores, componentes, controladores, objetos auxiliares, modelos, rutas, servicios, plantillas, utilidades, complementos.
Una de las características más interesantes de Ember son las herramientas de línea de comandos (Ember CLI). Estas herramientas ayudan a los desarrolladores front-end a trabajar productivamente. Con la Ember CLI, puede crear no solo plantillas de proyecto, sino también preajustes para controladores, componentes y otras entidades a partir de las cuales se crean aplicaciones.
▍Elementos del ecosistema de ascuas
El desarrollador front-end que usa Ember tiene a su disposición las siguientes características clave:
- Ember CLI es una herramienta de línea de comandos para la creación rápida de prototipos de aplicaciones y para la gestión de dependencias.
- Servidor de desarrollador de Ember estándar.
- Ember Data: una biblioteca para trabajar con datos.
- Handlebars es un motor de plantillas utilizado en aplicaciones Ember.
- QUnit es un marco para probar proyectos de Ember.
- Ember Inspector - Herramientas de desarrollo para Chrome y Firefox.
- Ember Observer: catálogo de complementos para Ember CLI.
Quizás Ember pueda llamarse un marco infravalorado, pero a pesar de esto, es ideal para crear proyectos web complejos.
5. Backbone.js
Backbone es un marco de JavaScript basado en una arquitectura similar a MVC. Digamos que en MVC se llama un "controlador" en un Backbone se llama una "Vista". Las vistas de red troncal pueden usar varios sistemas de plantillas. Por ejemplo: bigote, manillar, jQuery-tmpl. En proyectos de Backbone, puede usar bibliotecas de terceros. Cabe señalar que la única dependencia de Backbone dura es la biblioteca Underscore.js.
Backbone es un marco fácil de usar que le permite desarrollar rápidamente aplicaciones de una sola página. Entre las herramientas auxiliares utilizadas en conjunto con Backbone.js, podemos mencionar como Chaplin, Marionette, Thorax.
Si necesita desarrollar una aplicación con la que trabajarán los usuarios que pertenecen a diferentes grupos, puede usar las colecciones Backbone (matrices) para separar los modelos. En los modelos Backbone, colecciones, rutas y vistas, puede usar eventos.
▍ Elementos del ecosistema de la columna vertebral
Entre las características del ecosistema Backbone están las siguientes:
- La biblioteca Backbone incluye eventos, modelos, colecciones, vistas y un enrutador.
- La biblioteca Underscore.js, de la que depende Backbone, contiene un conjunto de funciones auxiliares que lo ayudan a escribir código JS entre navegadores.
- Al desarrollar aplicaciones Backbone, puede usar varios sistemas de plantillas.
- La herramienta de línea de comandos de Backbone CLI simplifica el desarrollo de aplicaciones.
- Las bibliotecas Marionette, Thorax y Chaplin ayudan a crear aplicaciones con soluciones arquitectónicas específicas.
Quizás Backbone no pueda llamarse un competidor serio para las otras herramientas de desarrollo front-end discutidas en este material. Sin embargo, este marco es muy popular entre los desarrolladores. Por lo tanto, puede resultar que Backbone sea exactamente lo que necesita.
Resumen
Este artículo proporcionó una breve descripción de los marcos web, que fueron reconocidos como los mejores según una encuesta realizada entre desarrolladores de
ValueCoders . Esperamos que esta revisión ayude a tomar la decisión correcta para aquellos que están ocupados eligiendo un marco para su próximo proyecto web.
Estimados lectores! ¿En qué escribes proyectos web front-end?
