Accentsconagua
Share
Cuando se trata de elegir el marco de JavaScript correcto, ciertamente es un paisaje salvaje y confuso. Esta guía lo ayudará a usted, un desarrollador de aplicaciones para usuario en ciernes, a navegar por las aguas turbias cuando llegue el momento de elegir el marco adecuado para usted. Cada marco que he elegido mostrar describirá los fundamentos breves, la sintaxis del idioma y también incluirá recursos de aprendizaje útiles..
En nuestro mundo de desarrollo, un "marco" se puede definir como una biblioteca de JavaScript que muestra y presenta interfaces interactivas basadas en datos. Existen para ayudar a representar datos a un usuario cuando se desencadena una interacción. Todas estas bibliotecas difieren ligeramente de una a otra, pero su propósito es el mismo; Mostrar nuevos datos cuando ha tenido lugar una interacción..
Examinemos estos poderosos marcos más profundamente para ayudarnos a examinar mejor el paisaje..
Hay muchas opciones cuando se trata de elegir un marco; lo que sigue es una lista del terreno actual, que incluye Vue, React, Angular y Ember. Cada uno ha sido seleccionado en función del crecimiento y la sostenibilidad de la comunidad, la actividad de GitHub, el tiempo que el proyecto ha estado disponible para los desarrolladores y si el proyecto todavía está en uso por un gran grupo de desarrolladores y empresas de desarrollo..
Primer commit 27 de julio del 2013
Tamaño del archivo: 27.5KB minified
Vue afirma ser un marco progresivo que es accesible, versátil y eficaz. Si tiene un conocimiento fundamental de la pila web de Good Ol '(HTML, CSS, JS), ya está en una excelente posición para usar Vue.
“La biblioteca central está enfocada solo en la capa de vista, y es muy fácil de seleccionar e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de impulsar aplicaciones sofisticadas de una sola página cuando se usa en combinación con herramientas modernas y bibliotecas de soporte ". - Introducción de documentos VueJS
Cuando se trata de la sintaxis, esto es lo que la biblioteca ofrecerá usando su demo "Hello World":
mensaje
var app = new Vue (el: '#app', datos: mensaje: 'Hello Vue!')
La biblioteca también se volverá más expresiva usando "valores de atributo" dentro de su marca. Aquí hay una sintaxis más complicada usando estos atributos:
Pase el mouse sobre mí por unos segundos para ver mi título enlazado dinámicamente!
Dejando de lado la sintaxis, Vue.js permitirá el manejo de la entrada del usuario, la creación de plantillas de componentes, la vinculación de datos a la estructura del DOM con condicionales y bucles, y una "representación declarativa" lograda por una sintaxis directa modelada libremente en los componentes web Especulación.
Recursos de aprendizaje:
Primer commit 29 de mayo del 2013
Tamaño del archivo: 7.3KB minified w / Add-ons: 11.3KB minified
React se define a sí mismo como una biblioteca de JavaScript para construir interfaces que son controladas por datos dinámicos. Fue desarrollado por los empleados de Facebook y también es Open Source en GitHub. Puede que te sientas un poco asqueroso cuando te digo que vas a crear HTML en JavaScript, pero desafortunadamente así es como funciona React.
Veamos un ejemplo de sintaxis directamente de la documentación del tutorial de introducción a React. Este ejemplo crea lo que React llama "subclases de componentes", aunque también tiene algunos tipos diferentes de componentes. La sintaxis de una llamada de componente es similar a XML, como se verá en este código HTML:
La clase ShoppingList extiende React.Component render () return ();Lista de compras para this.props.name
- Oculus
React viene con opciones adicionales, como complementos que se consideran un conjunto útil de módulos de utilidad. Estos complementos incluyen utilidades que ayudan cuando se trata de animaciones y transiciones, herramientas de perfilado de rendimiento, ayudantes de casos de prueba y mucho más. La documentación de React también recomienda usar React con Babel para permitir el uso de ES6 y JSX en su código JavaScript. También hay una útil extensión React Devtools para Chrome y Firefox que te permite inspeccionar un árbol de componentes React en las herramientas de desarrollo de tu navegador..
Recursos de aprendizaje:
Primer commit 18 de septiembre de 2014 (GitHub reportado)
Versión inicial (Según Wikipedia) 20 de octubre de 2010
Tamaño del archivo: Herramienta CLI. Ya no es un archivo JS independiente.
Angular es desarrollado por el equipo de Google. Como HTML nunca fue pensado para ser un lenguaje dinámico, Angular extiende el vocabulario HTML al permitir que los atributos se amplíen en su marca. En última instancia, esto permite "enlaces declarativos" a eventos, con el fin de mostrar datos dinámicos y estados basados en interacciones. Puede cumplir con los grandes requisitos de datos construyendo modelos de datos en RxJS, Immutable.js u otro modelo de inserción. Y puedes extender el lenguaje de la plantilla con tus propios componentes. y utilizar una amplia gama de componentes existentes.
“Aprenda una forma de crear aplicaciones con Angular y reutilice su código y habilidades para crear aplicaciones para cualquier destino de implementación. Para web, web móvil, móvil nativo y escritorio nativo ".
La sintaxis angular no es nueva en términos de atributos HTML y marcadores de posición tipo bigote, con la excepción del espacio de nombre que usa ng- Como verás en el siguiente ejemplo:
Hola yourName!
Angular también se compone principalmente de componentes que son una combinación de plantillas HTML y una clase de componente que controla una parte de la pantalla.
// src / app / app.component.ts importa Componente de '@ angular / core'; @Componente (selector: 'mi aplicación', plantilla: 'Hola nombre
') clase de exportación AppComponent name =' Angular ';
Cargando contenido de AppComponent aquí ...
El archivo con la extensión. .ts Del ejemplo anterior está escrito en TypeScript. Un lenguaje que comienza a partir de la misma sintaxis y semántica de JavaScript. Es un superconjunto de JavaScript que se compila en JavaScript, o lo que usted podría considerar como un "potenciador del lenguaje", es decir, sintaxis de azúcar. Aquí es donde la herramienta CLI le ayudará a la hora de compilar su código.
Recursos de aprendizaje:
Primer commit Abr 30 de 2011
Tamaño del archivo: ?
Ember es una biblioteca muy parecida a las otras que hemos analizado y que también se integra con Handlebars. Para aquellos que no están familiarizados con Handlebars, es un lenguaje de plantilla para crear páginas estáticas, como usted puede estar familiarizado con Jekyll. Los desarrolladores pueden usar los manillares para describir el marcado y usar JavaScript para implementar un comportamiento personalizado para los componentes basados en la interacción.
"Ember es un marco de aplicación de JavaScript para crear aplicaciones web del lado del cliente de una sola página, que utiliza el patrón Model-View-Controller (MVC)".
Ember está construido con Node y utiliza una variedad de módulos Node.js para su funcionamiento. Ember también tiene una herramienta de interfaz de línea de comandos (instalada a través de npm si lo desea) que proporciona una estructura de proyecto estándar y un conjunto de herramientas de desarrollo que incluye un sistema adicional. También viene con un servidor de desarrollo y banderas de entorno de compilación que se pueden pasar a través de la línea de comandos.
La sintaxis de Ember parece no ser nada inusual, confiando en los literales de los objetos y la notación de puntos con la que estamos familiarizados en JavaSript, además de los manillares para las llamadas de plantilla.
Importar Ember desde ember; exportar predeterminado Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Hola, nombre Apellido
El ejemplo anterior es un gusto muy básico de la sintaxis y la estructura de archivos. El código de demostración exportará y extenderá un controlador Ember y compilará los nombres del objeto literal en su marca.
También vale la pena mencionar que las capacidades del enrutador de Ember le permiten dejar de romper la red. Obtiene las URL y un botón de retroceso de forma predeterminada con cada ruta que crea, y la API es fácil de usar (y es familiar para aquellos con experiencia en marcos web de servidor). Ember.js es gratuito, de código abierto y siempre será como se indica en su sitio..
Recursos de aprendizaje:
La elección del marco siempre se reduce a la preferencia de codificación personal y la confianza en el proyecto a largo plazo. Si desea profundizar en una X contra Y para ayudar a tomar la decisión, Vue tiene una explicación y comparación decentes en su sitio que también incluye información sobre otras bibliotecas como Knockout, Polymer y Riot. Es posible que también desee realizar nuestro cuestionario, que debería ayudarlo a reducir sus opciones.!
