Ember

Ember.js es un marco web de JavaScript de código abierto , basado en el patrón Modelo-vista-

modelo de vista (MVVM). Permite a los desarrolladores crear aplicaciones web escalables de una
sola página [3] mediante la incorporación de expresiones comunes y mejores prácticas en el
marco.

Ember se utiliza en muchos sitios web populares, como Discourse , Groupon , LinkedIn , Vine , Live
Nation , Nordstrom , Twitch.tv y Chipotle . Aunque se considera principalmente un marco para la
web, también es posible crear aplicaciones de escritorio y móviles en Ember. El ejemplo más
notable de una aplicación de escritorio Ember es Apple Music , una característica de la aplicación
de escritorio iTunes. La marca registrada Ember es propiedad de Tilde Inc.

La filosofía y el diseño

Desde el principio, Ember se diseñó en torno a varias ideas clave:

Centrarse en aplicaciones web ambiciosas.

Ember se propone ofrecer una solución completa para el problema de la aplicación del lado del
cliente. Esto contrasta con muchos de los marcos de JavaScript que comienzan proporcionando
una solución a la V en MVC ( Modelo – Vista – Controlador ), e intentan crecer desde allí.

Más productivo fuera de la caja

Ember es un componente de un conjunto de herramientas que trabajan juntas para proporcionar

una pila de desarrollo completa. El objetivo de estas herramientas es hacer que el desarrollador
sea productivo de inmediato. Por ejemplo, Ember CLI, [12] proporciona una estructura de
aplicación estándar y un canal de compilación. También tiene una arquitectura conectable y más
de 3500 complementos [13] para mejorarla y ampliarla.
Estabilidad sin estancamiento.

Esta es la idea de que la compatibilidad con versiones anteriores es importante y se puede

mantener mientras se sigue innovando y evolucionando el marco. [14]

Futuros estándares web de previsión.

Ember fue uno de los primeros en adoptar y pionero de muchos estándares en relación con
JavaScript y la web, incluidas las promesas, [15] componentes web [16] y la sintaxis de ES6.
Yehuda Katz, uno de los cofundadores de Ember, es miembro de TC39, que es el comité
responsable de las futuras versiones del lenguaje JavaScript. [17]

Al igual que Ruby on Rails , Ember sigue la Convención sobre Configuración (CoC) y el principio de
No repetirse (DRY). [18] Se ha descrito como un marco altamente evaluado construido para ser
muy flexible. [19]

Conceptos básicos

Ember consta de cinco conceptos clave: [20]

Rutas

En Ember, el estado de una aplicación está representado por una URL. Cada URL tiene un objeto
de ruta correspondiente que controla lo que es visible para el usuario.

Modelos

Cada ruta tiene un modelo asociado, que contiene los datos asociados con el estado actual de la
aplicación. [21] Mientras que uno puede usar jQuery para cargar objetos JSON desde un servidor y
usar esos objetos como modelos, la mayoría de las aplicaciones usan una biblioteca de modelos
como Ember Data para manejar esto.

Plantillas

Las plantillas se utilizan para crear el HTML de la aplicación y se escriben con el lenguaje de
plantillas HTMLBars . (HTMLBars es una variación de Handlebars que construye elementos DOM
en lugar de una cadena). [22]

Componentes

Un componente es una etiqueta HTML personalizada. El comportamiento se implementa

utilizando JavaScript y su apariencia se define utilizando plantillas HTMLBars. Componentes
"propios" de sus datos. También pueden estar anidados y pueden comunicarse con sus
componentes principales a través de acciones (eventos). Otras bibliotecas de componentes como
Polymer también pueden usarse con Ember. [23]

Servicios
Los servicios son solo objetos singleton para almacenar datos de larga duración, como las sesiones
de usuario. [24]

Ember también proporciona inyección de dependencia , enlace declarativo de datos bidireccional ,

propiedades computadas y plantillas de actualización automática . [25]

Ember 2.0

Ember 2.0 se lanzó el 13 de agosto de 2015. [26] Los principios rectores para el lanzamiento
fueron la simplificación y la estabilidad sin estancamiento. [27] Los cambios más grandes se
producen en la capa de vista e incluyen:

Flujo de datos unidireccional por defecto. (Conocido como "datos abajo, acciones arriba". [28] )

"Solo actualízalo" cuando algo cambie.

Ganchos de ciclo de vida estándar para componentes.

Otro cambio importante fue la introducción del motor de renderizado Glimmer con el objetivo de
mejorar el rendimiento del re-render. Glimmer adopta una estrategia de diferencia de valor,
utilizando un árbol virtual de las áreas dinámicas del modelo de objeto de documento (DOM),
similar a React . [29] Se han publicado varios puntos de referencia que ilustran la aceleración en el
rendimiento. [30]

Desde la versión 1.8, las nuevas características identificadas para 2.0 se han enviado cuando están
listas en la rama 1.x, mientras se mantiene la compatibilidad con versiones anteriores. Las
características que se eliminarán en 2.0 han quedado en desuso. Esto significa que 1.13 contiene
prácticamente todos los cambios 2.0, siendo 2.0 principalmente sobre la eliminación de
características en desuso de la base de código. [31] En muchos casos, el código eliminado todavía
está disponible en complementos. [32]

Ember software stack

Ember.js es un componente de una pila completa de front-end construida y soportada por el

equipo central de Ember.

Ember CLI

Ember-cli pretende llevar la convención sobre la configuración para construir herramientas. Una
utilidad de línea de comando basada en brócoli , [33] ejecutando el comando ember new <app-
name>genera una nueva aplicación Ember con la pila predeterminada. Esto proporciona:
Un archivo estándar y estructura de directorios.

Servidor de desarrollo con recarga en vivo. Fuera de la caja, esto reconstruirá automáticamente las
aplicaciones de forma incremental cada vez que se cambien los archivos, y luego volverá a cargar
la aplicación en cualquier pestaña abierta del navegador.

Un completo framework de pruebas. [34]

Dependencias gestionadas vía npm . [35]

Compatibilidad con sintaxis ES6 / ES7 + (utilizando Babel ).

Gestión de activos (incluida la combinación, la reducción y el control de versiones). [36]

Otras características incluyen:

Los planos, que son generadores de código para crear modelos, controladores, componentes, etc.,
que se necesitan en una aplicación. También se pueden crear planos personalizados. [37]

Complementos que proporcionan la capacidad de ampliar las funciones de Ember CLI. [38] Los
complementos se pueden instalar escribiendo ember install <addon-name>. Más de dos mil
complementos están actualmente disponibles [39], incluidos los complementos para CoffeeScript ,
LESS , Sass , Compass y Mocha . [40]

Datos de Ember

La mayoría de las aplicaciones Ember utilizan Ember Data, [41] una biblioteca de persistencia de
datos que proporciona muchas de las funciones de un mapeo relacional de objetos (ORM). Sin
embargo, también es posible utilizar Ember sin Ember Data. [42]

Ember Data asigna modelos del lado del cliente a los datos del lado del servidor. Luego puede
cargar y guardar registros y sus relaciones sin ninguna configuración a través de una API RESTful
JSON que implementa la especificación de la API JSON, [43] siempre que se sigan ciertas
convenciones. [44] Sin embargo, también es fácilmente configurable y puede funcionar con
cualquier servidor mediante el uso de adaptadores y complementos. [45] JSON API tiene
implementaciones de biblioteca de servidor para PHP , Node.js , Ruby , Python , Go , .NET y Java .
[46] Conectando a un Java- Springservidor basado también está documentado. [47]

La primera versión estable de Ember Data (etiquetada 1.13 para alinearse con Ember) se lanzó el
18 de junio de 2015. [48]

Ember Inspector

El Ember Inspector es una extensión actualmente disponible para los navegadores web Mozilla
Firefox [49] y Google Chrome [50] que pretenden facilitar la depuración de las aplicaciones Ember.
Las características incluyen la capacidad de ver qué plantillas, componentes y vistas se
representan actualmente, ver las propiedades de cualquier objeto Ember con una interfaz de
usuario que calcula los enlaces y las propiedades computadas, y acceder a los objetos de su
aplicación desde la consola. [51] Si se usan datos de Ember, también se pueden ver los registros
cargados para cada modelo.

El Inspector de objetos le permite ver y editar el contenido de tiempo de ejecución de las clases y
los objetos Ember.

El Árbol de vistas muestra visualmente la estructura de la aplicación Ember representada.

La pestaña Rutas permite determinar y seguir el estado del enrutador y las direcciones URL
utilizadas para representar las rutas.

La pestaña Datos puede mostrarle los modelos en su aplicación y los registros cargados para cada
modelo.

La pestaña Información muestra las versiones de sus dependencias.

La pestaña Depredaciones permite obtener pilas de avisos de depreciación que no activan

excepciones.

La pestaña Promesas permite el rastreo de código a través de operaciones asíncronas.

La pestaña Contenedor es útil para verificar qué objetos se han cargado.

La pestaña Rendimiento de procesamiento es para determinar qué está ralentizando su aplicación

Ember.

Fastboot

Fastboot es un complemento Ember CLI creado por el equipo central Ember Ember que ofrece a
los desarrolladores la capacidad de ejecutar sus aplicaciones en Node.js . Esta característica
permite que los usuarios finales vean HTML y CSS de inmediato, con la descarga de JavaScript en
segundo plano y asumiendo el control una vez que se haya cargado completamente. [52]

Fuego líquido

Liquid Fire proporciona soporte de animación para aplicaciones Ember. [53] Las características
incluyen transiciones animadas entre rutas y entre modelos dentro de una sola ruta. Proporciona
un DSL para establecer relaciones de rutas espaciales, claramente separadas de los detalles de
implementación de la capa de vista. Un ejemplo simple sería animar una transición de pantalla, de
modo que la nueva pantalla parezca deslizarse desde un extremo del navegador. [54]

Proceso de liberación

Ciclo de estreno
Ember sigue un ciclo de lanzamiento de seis semanas, inspirado en el ciclo de lanzamiento rápido
de Google Chrome . [55] Cada seis semanas se publica un nuevo lanzamiento y, al mismo tiempo,
también se publica una versión beta para el próximo lanzamiento. En general, se producen varias
versiones beta antes de que llegue el próximo lanzamiento importante, aproximadamente una
beta por semana.

A partir de Ember 2.0, los proyectos relacionados respaldados por el equipo central tienen sus
lanzamientos coordinados y comparten un número de versión con Ember. [56]

Actualización y compatibilidad con versiones anteriores

Ember sigue la convención de versionamiento semántico . [57] En particular, esto significa que los
cambios de ruptura solo se introducen en los números de versión principales, como 1.0, 2.0, etc.
Mientras que las nuevas características se pueden agregar en versiones puntuales (1.1, 1.2 ...), y
las funciones están obsoletas, no hay cambios de última hora en las API públicas se presentan y la
actualización dentro de una versión principal está diseñada para ser lo más simple posible. Las
herramientas también están en desarrollo para ayudar a simplificar el proceso de actualización.
[58]

Además de este proceso, se tomaron una serie de pasos para mitigar los problemas relacionados
con la actualización a la versión 2.0:

De hecho, todas las características principales de la versión 2.0 se introdujeron temprano y se

distribuyeron en una serie de lanzamientos para reducir muchos de los problemas causados por
las actualizaciones del Big Bang.

La mayoría de las funciones que se eliminaron todavía están disponibles a través de

complementos.

El proceso sigue el principio básico de Ember de Estabilidad sin Estancamiento y está en marcado
contraste con los planes de actualización de proyectos similares como AngularJS . [59]

Desarrollo futuro

El estado del proyecto se puede rastrear a través de las actas de las reuniones del equipo central.
[60] Sin embargo, los cambios importantes en Ember pasan por el proceso de solicitud de
comentarios. [61] Esto le da a la comunidad de Ember la oportunidad de hacer comentarios sobre
nuevas propuestas. RFC notables incluyen:
Los motores [62] Los motores permiten que múltiples aplicaciones lógicas se compongan juntas en
una sola aplicación desde la perspectiva del usuario. Actualmente lanzado como un complemento
experimental. [63]

Mejoras en el ciclo de lanzamiento. [64] Entre otras cosas, propone cambios en la CLI de Ember
para admitir "compilaciones esbeltas", que eliminarán las características obsoletas y no utilizadas.

Enfoque de salida. [65] Haciendo accesible a Ember por defecto. Este RFC tiene como objetivo
mejorar la experiencia del usuario para las personas que utilizan lectores de pantalla.

Historia

En diciembre de 2011, el marco de SproutCore 2.0 fue renombrado a Ember.js , para reducir la
confusión entre el marco de la aplicación y la biblioteca de widgets de SproutCore 1.0. [66] [67] El
marco fue creado por Yehuda Katz, miembro de los equipos principales de jQuery, Ruby on Rails y
SproutCore. Como muchos otros proyectos de Katz, aboga por la convención sobre la
configuración .

Soporte de navegador heredado

El soporte para Internet Explorer 8 está disponible hasta la versión 1.13, pero se eliminará a partir
de la versión 2.0 en adelante. Internet Explorer 9 y versiones posteriores continuarán siendo
compatibles. [68] El equipo central continuará publicando periódicamente lanzamientos de puntos
en la serie 1.13 para corregir errores de seguridad y problemas de compatibilidad del navegador,
incluidos problemas en IE8. [69]

Patrocinio corporativo

A diferencia de otros proyectos como AngularJS ( Google ) y React ( Facebook ) que cuentan con el
respaldo de una empresa principal, Emberjs tiene una variedad de patrocinadores. Estos incluyen
Yahoo! , [70] LinkedIn y Bustle, que son todos los principales usuarios del marco.