Advertisement
  1. Web Design
  2. Frameworks

La Guía del Principiante para Escoger un Framework de JavaScript

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

Cuando es de escoger el Framework de JavaScript Correcto ciertamente es un paisaje salvaje y confuso. Esta guía te ayudará a ti -un desarrollador front-end en crecimiento- a navegar esas aguar turbias a la hora de elegir un framework que se ajuste a ti. Cada framework que he seleccionado para mostrar va a describir lo fundamental de manera breve, sintaxis del lenguaje y también incluye recursos de aprendizaje muy útiles.

Que es un Framework de JavaScript?

En nuestro mundo de desarrollo un "Framework" puede ser definido como una librería de JavaScript que muestra y presenta, interfaces interactivas dirigidas por datos. Existen para ayudar a presentar los datos a un usuario cuando se activa una interacción. Todas estas librerías difieren ligeramente una de la otra pero el propósito de ellas es el mismo; mostrar nuevos datos cuando una interacción toma lugar.

Vamos a examinar estos poderosos frameworks en profundidad para escudriñar mejor el paisaje.

Los Jugadores de los Frameworks de JavaScript.

Hay muchas opciones cuando se trata de elegir un framework - lo siguiente es una lista de los mas actuales, incluido Vue, React, Angular y Ember. Cada uno ha sido seleccionado basado en en su crecimiento en la comunidad y sostenibilidad, Actividad en GitHub, cuanto tiempo el proyecto ha estado disponible para los desarrolladores, y si el proyecto esta aun es uso por un gran grupo de desarrolladores y compañías de desarrollo.

Vue

Primer Commit  27 de julio de 2013
Tamaño de Archivo: 27.5KB minificado.

Vue afirma ser un framework progresivo que es accesible, versátil y de gran desempeño. Si tienes conocimientos fundamentales del buen viejo conjunto web (HTML, CSS, JS) estas en una gran posición para usar Vue.

"La librería principal esta enfocada solamente en la capa de vista, y es muy fácil de tomar e integrar con otras librerías existentes. Por el otro lado, Vue es también perfectamente capaz de cargar sofisticadas Aplicaciones De una sola pagina cuando se combina con herramientas modernas y librerías de apoyo". - VueJS Documentos de Introducción.

Cuando se trata de Sintaxis esto es lo que la librería nos ofrecerá usando su sencillo ejemplo "Hola Mundo":

La librería también se volverá mas expresiva usando valores de atributos dentro de tu marcado. Aquí esta una sintaxis que involucra mas el uso de estos atributos:

Aparte de la sintaxis, Vue.js va a permitir el manejo de entradas de usuario, plantillas de componentes de construcción, enlazar datos a la estructura del DOM con condicionales y bucles, y una "representación declarativa" lograda por una clara sintaxis libremente modelada sobre las Especificaciones de Componentes Web.

Recursos de Aprendizaje:

React

Primer Commit: 29 de mayo de 2013
Tamaño de Archivo: 7.3KB minificado c/Extensiones: 11.3KB minificado

React se define a si mismo como una librería de JavaScript para construir interfaces que son dirigidas por datos dinámicos. Fue desarrollado por los empleados de Facebook y esta también como Open Source en GitHub. puedes sentirte algo incomodo cuando te digo que vas a escribir HTML en JavaScript, pero desafortunadamente este es el modo como trabaja React.

Veamos la sintaxis de un ejemplo directamente del tutorial de introducción de la documentación de React. Este ejemplo crea lo que React llama "subclases de Componente" aunque también tiene algunos diferentes tipos de componentes. La sintaxis para un componente llama su similar de XML como notaras en este código HTML:

React viene con opciones adicionales como extensiones que son consideradas como un conjunto de módulos de utilidades muy conveniente. Estas Extensiones incluyen utilidades que ayudan cuando trabajamos con animaciones y transiciones, herramientas de perfiles de rendimiento, auxiliares de casos de prueba y muchos mas. La documentación de React también recomienda usar React con Babel para permitir el uso de ES6 y JSX en tu código de JavaScript. También esta React Devtools una útil extensión para Chrome y Firefox que te permite inspeccionar un árbol de componente de React en las Herramientas de Desarrollo de tu navegador.

Recursos de Aprendizaje:

Angular

Primer Commit 18 de septiembre de 2014 (reportado en GitHub)
Lanzamiento Inicial (De acuerdo con Wikipedia) 20 de octubre de 2010
Tamaño de Archivo: Herramienta de CLI. Ya no es mas un solo archivo de JS.

Angular es desarrollado por un equipo en Google. Ya que HTML nunca fue concebido para ser un lenguaje dinámico Angular extiende el vocabulario de HTML para permitir extender los atributos en tu marcado. Este básicamente permite "declarar enlaces" a los eventos, para mostrar datos dinámicos y estados basados en interacciones. Puedes encontrar grandes requerimientos de datos al construir modelos de datos en RxJS, Immutable.js u otro modelo-push. Y puedes extender la plantilla del lenguaje con tus propios componentes y usar ua amplia gama de componentes existentes

"Aprende un modo de construir aplicaciones con Angular y reutiliza tu código u habilidades para construir aplicaciones para cualquier objetivo de despliegue. Para web, web móvil, móvil nativo y escritorio nativo."

La sintaxis de Angular no es nada nuevo en términos de atributos de HTML y marcadores de posición estilo Mustache, con excepción del espacio de nombres usando ng- como vas a ver en el siguiente ejemplo:

Angular también esta echo principalmente de componentes que son una combinación de plantillas HTML y clases de componentes que controlan una porción de la pantalla.

El archivo con extensión .ts del ejemplo anterior esta escrito en TypeScript. Un lenguaje que parte de la misma sintaxis y semántica de JavaScript. Es un superconjunto de JavaScript que compila en JavaScript, o lo que podrías pensar como un "mejorador del lenguaje" ej. Azúcar sintáctico. Esto es donde la herramienta de CLI puede ayudar cuando se trata de compilar el código.

Recursos de Aprendizaje:

Ember

Primer Commit 30 de abril de 2011
Tamaño de Archivo: ?

Ember es una librería muy similar a las otras que hemos discutido y que también se integra con Handlebars. Para los que no estén familiarizados con Handlebars es un lenguaje de plantillas para construir paginas estáticas, muy parecido a Jekyll que puede serte familiar. Los desarrolladores pueden usar Handlebars para esquematizar el marcado y usar JavaScript para implementar un comportamiento personalizado para los componentes basados en las interacciones.

"Ember es un framework de aplicaciones de JavaScript para crear aplicaciones web de pagina-única del lado del cliente, para lo cual usa el patrón Modelo-Vista-Controlador (MVC)."

Ember esta construido con Node y para funcionar usa una variedad de módulos de Node.js. Ember también tiene una herramienta de interfaz de linea de comando (que se instala vía npm si así lo deseas) la cual provee a un proyecto común estructura y un conjunto de herramientas de desarrollo que incluye un sistema de extensiones. además viene empaquetado con un servidor de desarrollo y variables de entorno de desarrollo que pueden ser pasadas vía la linea de comandos. 

La sintaxis para Ember no parece ser nada inusual, dependiendo de objetos literales y la notación de punto a la que estamos muy familiarizados en JavaScript, Más Handlebars para llamadas a las plantillas.

El ejemplo de arriba eses una prueba bastante básica de la sintaxis y estructura de archivos. El código de ejemplo va a exportar y extender un controlador de Ember y compilar los nombres del objeto literal en tu marcado. 

Además vale la pena mencionar que las capacidades de enrutamiento de Ember permiten dejar de romper la web. Ya que tienes las URLs y un botón de regreso funcional de forma predeterminada con cada ruta que creas, y la API es fácil de usar (y familiar para aquellos con experiencia en frameworks web del lado del servidor). Ember.js es gratuito, de código abierto y siempre lo será asi lo dicen ellos en su sitio.

Recursos de Aprendizaje:

Conclusión

La elección de un framework siempre se reduce a las preferencia personales de codificación y la seguridad en el proyecto a largo plazo. Si quisieras profundizar en una comparación de X vs. Y para ayudar a hacer la elección Vue tiene una decente explicación y comparación en su sitio que también incluye información acerca de otras librerías como Knockout, Polymer y Riot. Además puedes tomar prueba, la cual te puede ayudar a limitar tus opciones.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.