Ember.js es un framework web JavaScript de código abierto que utiliza un patrón de servicio de componentes . Está diseñado con el objetivo de permitir a los desarrolladores crear aplicaciones web de una sola página escalables mediante la incorporación de modismos comunes , mejores prácticas y patrones de otros ecosistemas de aplicaciones de una sola página en el framework. [ 3 ]
Ember se utiliza en sitios web como HashiCorp , DigitalOcean , Apple Music , Square, Inc. , Intercom , Discourse , Groupon , LinkedIn , Live Nation , Ghost , Nordstrom y Twitch . [ 4 ] [ 5 ] [ 6 ] Aunque se considera principalmente un framework para la web, también es posible crear aplicaciones de escritorio y móviles con Ember utilizando un patrón de aplicación híbrida . [ 7 ] [ 8 ] [ 9 ] El ejemplo más notable de una aplicación de escritorio Ember es Apple Music , una función de la aplicación de escritorio iTunes . [ 10 ]
La marca registrada Ember es propiedad de Tilde Inc. [ 11 ]
Historia
En diciembre de 2011, el marco SproutCore 2.0 pasó a llamarse Ember.js para reducir la confusión entre el marco de la aplicación y la biblioteca de widgets de SproutCore 1.0. [ 12 ] [ 13 ] El marco fue creado por Yehuda Katz, quien fue miembro de los equipos principales de jQuery , Ruby on Rails y SproutCore .
Diseño
Según la empresa, Ember fue diseñado en torno a cuatro ideas clave:
- Aplicaciones web
- Ember se propone ofrecer una solución al problema de las aplicaciones del lado del cliente.
- Mayor productividad
- Ember es un componente de un conjunto de herramientas para proporcionar una pila de desarrollo. Ember CLI proporciona una estructura de aplicación y una canalización de compilación con un complemento. [ 14 ] [ 15 ]
- Estabilidad
- Ember tiene como objetivo priorizar la compatibilidad con versiones anteriores y permitir que se mantenga mientras se sigue desarrollando el marco. [ 16 ]
- Estándares web futuros
- Ember fue un pionero en la adopción de estándares relacionados con JavaScript y la web, incluyendo promesas, componentes web y sintaxis ES6. [ 17 ] [ 18 ] Yehuda Katz, uno de los cofundadores de Ember, es miembro de TC39, el comité responsable de las futuras versiones del lenguaje JavaScript. [ 19 ]
Al igual que Ruby on Rails, Ember sigue la convención sobre la configuración (CoC) y el principio de no repetirse (DRY). [ 20 ] Se ha descrito como un framework con opiniones muy marcadas, diseñado para ser muy flexible. [ 21 ]
Conceptos
Según la empresa, Ember consta de cinco conceptos clave: [ 22 ]
- Rutas
- En Ember, el estado de una aplicación se representa mediante 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. [ 23 ] Si bien se puede usar window.fetch 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 construir 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 de texto). [ 24 ]
- Componentes
- Un componente es una etiqueta HTML personalizada. Su comportamiento se implementa mediante JavaScript y su apariencia se define mediante plantillas HTMLBars. Los componentes son dueños de sus datos. También pueden anidarse y comunicarse con sus componentes padres a través de acciones (eventos). Otras bibliotecas de componentes, como Polymer, también pueden utilizarse con Ember. [ 25 ]
- Servicios
- Los servicios son simplemente objetos singleton para almacenar datos de larga duración, como las sesiones de usuario. [ 26 ]
- Ember también proporciona inyección de dependencias , flujo de datos unidireccional declarativo , propiedades rastreadas y plantillas de actualización automática . [ 27 ]
Software Ember / Complementos
Ember.js es un componente de una pila completa de desarrollo front-end creada y respaldada por el equipo principal de Ember.
Ember CLI
Ember-CLI tiene como objetivo priorizar la convención sobre la configuración en las herramientas de compilación. Una utilidad de línea de comandos basada en broccoli , al ejecutar el comando ember new <app-name>genera una nueva aplicación Ember con la pila predeterminada. [ 28 ] Esto proporciona:
- Estructura estándar de archivos y directorios
- Servidor de desarrollo con recarga en vivo
- Marco de pruebas [ 29 ]
- Dependencias gestionadas a través de npm . [ 30 ]
- Compatibilidad con la sintaxis ES6/ES7+ (mediante Babel)
- Gestión de activos (incluida la combinación, la minimización y el control de versiones) [ 31 ]
Otras características incluyen:
- Los planos son generadores de código para crear modelos, controladores, componentes, etc., necesarios en una aplicación. También se pueden crear planos personalizados. [ 32 ]
- Los complementos, que permiten extender las funcionalidades de Ember CLI, [ 33 ] se instalan escribiendo
ember install <addon-name>. Actualmente hay alrededor de dos mil complementos disponibles (a partir de 2018) [ 34 ] incluyendo complementos para CoffeeScript , LESS , Sass , Compass y Mocha . [ 35 ]
Datos de Ember
La mayoría de las aplicaciones Ember utilizan Ember Data, una biblioteca de persistencia de datos que proporciona muchas de las funcionalidades del mapeo objeto-relacional (ORM). [ 36 ] Sin embargo, también es posible usar Ember sin Ember Data. [ 37 ]
Ember Data mapea los 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 JSON RESTful que implementa la especificación de la API JSON, [ 38 ] siempre que se sigan ciertas convenciones. [ 39 ] Sin embargo, también es configurable y puede trabajar con servidores mediante el uso de adaptadores y complementos. [ 40 ] La API JSON tiene implementaciones de bibliotecas de servidor para PHP , Node.js , Ruby , Python , Go , .NET y Java . [ 41 ] También se documenta la conexión a un servidor basado en Java- Spring . [ 42 ]
La primera versión estable de Ember Data (denominada 1.13 para alinearse con Ember) se publicó el 18 de junio de 2015. [ 43 ]
Inspector de brasas
Ember Inspector es una extensión disponible actualmente para los navegadores web Mozilla Firefox y Google Chrome para depurar aplicaciones Ember. [ 44 ] [ 45 ] Entre sus características se incluye la posibilidad de ver qué plantillas, componentes y vistas se están renderizando actualmente, ver las propiedades de cualquier objeto Ember con una interfaz de usuario que calcula enlaces y propiedades calculadas, y acceder a los objetos de la aplicación desde la consola. [ 46 ] Si se utiliza Ember Data, también se pueden ver los registros cargados para cada modelo.
- El Inspector de objetos permite visualizar y editar el contenido en tiempo de ejecución de los objetos y clases de Ember.
- El árbol de vistas muestra visualmente la estructura de la aplicación Ember renderizada.
- La pestaña Rutas permite determinar y seguir el estado del enrutador y las URL utilizadas para representar las rutas.
- La pestaña Datos muestra los modelos de la aplicación y los registros cargados para cada modelo.
- La pestaña Información muestra las versiones de las dependencias.
- La pestaña "Obsoletos" permite visualizar el seguimiento de la pila de advertencias sobre obsolescencia que no generan excepciones.
- La pestaña Promesas permite realizar el seguimiento del código a través de operaciones asíncronas.
- La pestaña Contenedor se utiliza para comprobar qué objetos se han cargado.
- La pestaña Rendimiento de renderizado sirve para determinar qué está ralentizando una aplicación Ember.
Arranque rápido
Fastboot es un complemento de Ember CLI creado por el equipo principal de Ember que permite a los desarrolladores de Ember ejecutar sus aplicaciones en Node.js. Esta función permite a los usuarios finales ver HTML y CSS de inmediato, mientras que JavaScript se descarga en segundo plano y toma el control una vez que se ha cargado por completo. [ 47 ]
Fuego líquido
Liquid Fire proporciona soporte de animación para aplicaciones Ember. [ 48 ] Entre sus características se incluyen transiciones animadas entre rutas y entre modelos dentro de una misma ruta. Proporciona un DSL para consolidar las relaciones espaciales de las rutas, claramente separado de los detalles de implementación de la capa de vista. Un ejemplo sería animar una transición de pantalla para que la nueva pantalla parezca deslizarse desde un borde del navegador. [ 49 ]
Proceso de lanzamiento
Consulta el blog de lanzamientos para ver la lista completa de versiones y el registro detallado de cambios.
Ciclo de lanzamiento
Ember sigue un ciclo de lanzamiento de seis semanas, inspirado en el ciclo de lanzamiento rápido de Google Chrome . [ 50 ]
A partir de Ember 2.0, los proyectos relacionados que cuentan con el apoyo del equipo principal tienen sus lanzamientos coordinados y comparten un número de versión con Ember mismo. [ 51 ]
Actualización y compatibilidad con versiones anteriores
Ember sigue la convención de versionado semántico . [ 52 ] En particular, los cambios incompatibles solo se introducen en números de versión significativos, como 1.0, 2.0, etc. Si bien se pueden agregar nuevas características en versiones puntuales (1.1, 1.2...) y se pueden descontinuar características, no se introducen cambios incompatibles en las API públicas. También se desarrollaron herramientas en 2015 para ayudar a simplificar el proceso de actualización. [ 53 ]
Además de este proceso, se tomaron varias medidas para mitigar los problemas relacionados con la actualización a la versión 2.0:
- Todas las características principales de la versión 2.0 se introdujeron con antelación y se distribuyeron a lo largo de varias versiones para reducir muchos de los problemas causados por las actualizaciones.
- La mayoría de las funciones que se eliminaron siguen estando disponibles a través de complementos.
El proceso sigue el principio fundamental de Ember de Estabilidad sin Estancamiento y contrasta marcadamente con los planes de actualización de proyectos similares como AngularJS . [ 54 ]
Desarrollo futuro
El estado del proyecto se puede consultar en las actas de las reuniones del equipo principal. [ 55 ] Sin embargo, los cambios importantes en Ember se realizan mediante el proceso de Solicitud de Comentarios (RFC). [ 56 ] Esto brinda a la comunidad de Ember la oportunidad de dar su opinión sobre las nuevas propuestas. Algunas RFC destacadas son:
- Motores. Los motores permiten combinar múltiples aplicaciones lógicas en una sola aplicación desde la perspectiva del usuario. Actualmente se distribuye como un complemento experimental. [ 57 ] [ 58 ]
- Mejoras en el ciclo de lanzamiento. Entre otras cosas, propone cambios en Ember CLI para admitir "compilaciones svelte", que eliminarán las características obsoletas y sin usar. [ 59 ]
- Enfoque de salida. Hacer que Ember sea accesible por defecto. Este RFC tiene como objetivo mejorar la experiencia del usuario para las personas que utilizan lectores de pantalla. [ 60 ]
Patrocinio
A diferencia de otros proyectos como AngularJS ( Google ) y React ( Facebook ), que cuentan con el respaldo de una sola empresa principal, Ember.js tiene una variedad de patrocinadores y colaboradores. Entre ellos se incluyen usuarios del framework como Yahoo !, LinkedIn y Bustle . [ 61 ] [ 62 ]
Referencias
- ↑ "Versión 7.1.0" . 22 de junio de 2026. Consultado el 23 de junio de 2026 .
- ↑ "ember.js/LICENSE" . GitHub . Consultado el 27 de abril de 2017 .
- ↑ Aghassipour, Alexander; Chacko, Shajith (30 de noviembre de 2012). "Las aplicaciones empresariales se están pasando al diseño de una sola página" . TechCrunch .
- ↑ "Creando con Ember.js en Groupon" . TalentBuddy . Consultado el 15 de octubre de 2015 .
- ↑ "Discourse-Built with Ember.js" . GitHub . Consultado el 15 de julio de 2015 .
- ↑ "Intercomunicador" .
- ↑ "Ember-Escribe una vez, ejecuta en todas partes" . GitHub . 5 de julio de 2015.
- ↑ "Crea mejores aplicaciones de escritorio con Ember" . SpeakerDeck . 5 de julio de 2015.
- ↑ "Charla de Wicked Good Ember 2015: Cómo crear mejores aplicaciones de escritorio con Ember (vídeo)" . 5 de julio de 2015.
- ↑ "Construido con Ember - Apple Music" . BuiltWithEmber . Archivado del original el 22 de noviembre de 2022. Consultado el 21 de julio de 2016 .
- ↑ "Ember.js: Aspectos legales" . emberjs.com . Consultado el 14 de febrero de 2019 .
- ↑ "SproutCore 2.0 se convierte en Ember.js" . The H. 13 de diciembre de 2011.
- ↑ "Amber.js (anteriormente SproutCore 2.0) ahora es Ember.js" . yehudakatz.com. 12 de diciembre de 2011.
- ↑ "Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Complementos de Ember" . Consultado el 15 de diciembre de 2018 .
- ↑ Asay, Matt (4 de noviembre de 2014). "Innovando rápido y despacio: EmberJS insiste: "No necesitamos romper la web"" . ReadWrite . Archivado del original el 6 de noviembre de 2014 . Consultado el 18 de junio de 2015 .
- ↑ "Promesas de JavaScript" . Mozilla . Consultado el 18 de junio de 2015 .
- ↑ "Componentes web" . WebComponents . Consultado el 18 de junio de 2015 .
- ↑ "TC39: Miembros" . TC39Wiki . Consultado el 18 de junio de 2015 .
- ↑ "Lo que hemos aprendido de Ember.js después de 2 meses desarrollando nuestro nuevo producto" . Solid . 16 de diciembre de 2014. Consultado el 3 de noviembre de 2015 .
- ↑ "Principales razones por las que los expertos de la industria usan Ember.js y cómo puedes adoptarlo tú mismo" . TalentBuddy . Consultado el 14 de octubre de 2015 .
- ↑ Frank Treacy. "5 conceptos esenciales de Ember 2.0 que debes comprender" . EmberIgniter . Archivado del original el 27 de julio de 2016. Consultado el 31 de agosto de 2015 .
- ↑ "Ember.js - Modelos: Introducción" . Emberjs . Consultado el 21 de enero de 2014 .
- ↑ Jackson, Robert. "HTMLBars" . GitHub . Consultado el 18 de febrero de 2015 .
- ↑ "Cómo agregar polímero a tu proyecto Ember" . ProgramWithErik . 27 de marzo de 2015. Consultado el 11 de agosto de 2015 .
- ↑ "Tutorial de Ember Services" . ProgramWithErik . 26 de julio de 2015. Consultado el 27 de julio de 2015 .
- ^ Bango, Rey (14 de marzo de 2013). "Entrar en Ember.js" . Nettuts+.
- ↑ "Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Prueba de brasas" . Consultado el 15 de diciembre de 2018 .
- ↑ "Gestión de dependencias de Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Compilación de recursos de Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Planos de Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Complementos de escritura de Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Directorio de complementos de Ember" . emberobserver.com . Consultado el 15 de diciembre de 2018 .
- ↑ "Descripción general de Ember CLI" . Consultado el 15 de diciembre de 2018 .
- ↑ "Ember Data README" . GitHub . Consultado el 4 de diciembre de 2013 .
- ↑ "Ember sin datos de Ember" . Evil Trout. 23 de marzo de 2013. Consultado el 2 de enero de 2014 .
- ↑ "Especificación de la API JSON" . Consultado el 16 de junio de 2015 .
- ↑ «Modelos Ember.js» . Emberjs . Consultado el 26 de junio de 2015 .
- ↑ "Ember Observer-Data" . EmberObserver . Consultado el 16 de junio de 2015 .
- ↑ "Implementaciones de la API JSON" . API JSON . Consultado el 26 de junio de 2015 .
- ↑ "Integración de Ember.js con el Spring Framework" . SpringEmber . 20 de agosto de 2014. Consultado el 26 de junio de 2015 .
- ↑ "Lanzamiento de Ember Data 1.13" . 18 de junio de 2015. Consultado el 18 de junio de 2015 .
- ↑ "Complementos de Firefox - Ember Inspector" . Mozilla . Consultado el 5 de agosto de 2015 .
- ↑ "Chrome Web Store - Ember Inspector" . Chrome Web Store . Consultado el 18 de febrero de 2014 .
- ↑ "Ember Inspector" . Ember.js . Consultado el 28 de junio de 2015 .
- ↑ "Dentro de Fastboot. Simulando el DOM en Node" . Emberjs . 8 de enero de 2015. Consultado el 19 de junio de 2015 .
- ↑ "Liquid Fire: Animaciones y transiciones para aplicaciones Ember" . GitHub . Consultado el 19 de junio de 2015 .
- ↑ "Animaciones en Ember.js con liquid-fire" . airpair.com. Archivado del original el 8 de noviembre de 2020. Consultado el 10 de julio de 2015 .
- ↑ "Nuevo proceso de lanzamiento de Ember" . 6 de septiembre de 2013. Consultado el 19 de junio de 2015 .
- ↑ "Proyecto Ember en su versión 2.0" . 16 de junio de 2015. Consultado el 19 de junio de 2015 .
- ↑ "Congelación de la API de Ember" . 18 de enero de 2013. Consultado el 19 de junio de 2015 .
- ↑ "Complemento de Ember Watson" . Consultado el 19 de junio de 2015 .
- ↑ "Anuncio de Angular 2.0" . 29 de octubre de 2014. Consultado el 19 de junio de 2015 .
- ↑ "Acta de la reunión del equipo central de Ember" . Emberjs . Consultado el 5 de julio de 2015 .
- ↑ «Proceso RFC de Ascuas» . Emberjs . Consultado el 18 de junio de 2015 .
- ↑ "Motores Ember" . EmberAddons.com . Consultado el 19 de enero de 2016 .
- ↑ «Motores» . Emberjs . Consultado el 3 de febrero de 2015 .
- ↑ "RFC para perfeccionar el proceso de lanzamiento" . Emberjs . Consultado el 26 de enero de 2025 .
- ↑ "Outlet Focusing RFC" . Emberjs . Archivado del original el 24 de septiembre de 2016. Consultado el 18 de junio de 2015 .
- ↑ «Patrocinadores de ascuas» . Emberjs . Consultado el 18 de junio de 2015 .
- ↑ "Entrevista con Mike North, Ingeniero Principal de Software, Yahoo" . Emberweekend . Archivado del original el 4 de marzo de 2016. Consultado el 10 de agosto de 2015 .
Lecturas adicionales
- Builes, Adolfo (2015). Ember-cli 101. Leanpub.Actualizado periódicamente.
- Erdi, Balint (2015). "Rock and Roll con Ember.js" . balinterdi.com .Actualizado periódicamente.
- White, Matthew (2015). Desarrolla aplicaciones web audaces con Ember 2. The Pragmatic Programmers, LLC. ISBN 978-1-68050-078-3.
Enlaces externos
- Bibliotecas de JavaScript
- Ajax (programación)
- Software que utiliza la licencia MIT.
- marcos de trabajo web
- Artículos de JavaScript que necesitan atención