Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Adentrandose en Ember.js

by
Difficulty:IntermediateLength:LongLanguages:

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

Hay muchas bibliotecas de JavaScript disponibles, y la mayoría son muy buenas para proporcionar las interacciones tradicionales centradas en DOM que necesitan sus sitios web típicos. Pero cuando llega el momento de construir una base de código manejable para una aplicación de una sola página, ahí es donde entra un conjunto completo de nuevos marcos para suavizar las cosas.

El viejo dicho es cierto: "Use la mejor herramienta para la tarea".

No es que las bibliotecas tradicionales como jQuery no puedan ayudarlo a crear experiencias de escritorio, simplemente no es el caso de uso y le faltan cosas como el enlace de datos, el enrutamiento de eventos y la administración de estado. Claro, probablemente pueda improvisar un montón de complementos para lograr algo de esa funcionalidad, pero, en mi opinión, comenzar con un marco creado específicamente desde cero para abordar estos problemas específicos tiene más sentido. El viejo dicho es cierto: "Use la mejor herramienta para la tarea".

Recientemente hice una entrevista con el equipo de Ember.js; fue motivado por mi deseo de conocer lo que he venido a llamar "la nueva belleza": Ember.js.

Ember cumple con los requisitos para lo que he descrito anteriormente, y lo hace de una manera que recuerda mucho a cómo jQuery permite a los desarrolladores ponerse en marcha rápidamente. El equipo ha tomado medidas a propósito para abstraer muchas de las complejidades inherentes al diseño y construcción de aplicaciones basadas en modelos / vistas / controladores utilizando años de experiencia y conocimiento adquiridos al crear aplicaciones a gran escala.

Lo que me gustaría hacer es ayudarlo a ponerse al día con Ember.js, a través de una serie de artículos de varias partes que lo introducirán gradualmente a los conceptos del marco. Comenzaremos con la introducción habitual (que resulta ser esta publicación), y luego gradualmente iremos construyendo una aplicación completa. ¡La gran parte es que esto también me ayudará a reforzar los conceptos que ya he aprendido, y tal vez aprender algunas técnicas nuevas en el camino! Haré todo lo posible para que el equipo de Ember.js revise este material por precisión y tal vez incluso contribuya con algunas pepitas.

Antes de continuar, un aviso: Ember.js hace mucha magia por ti. Hay momentos en que mirará el código y dirá "¿Eh? ¿Cómo hizo eso? " He estado allí y haré todo lo posible para destilar cosas, pero no voy a sumergirme en las entrañas del código marco de Ember. En cambio, hablaré sobre cómo puede aprovechar sus herramientas y API para construir su aplicación.

Así que empecemos esto.


Conceptos básicos

Ember.js no es un marco para construir sitios web tradicionales.

Lo primero a tener en cuenta es que Ember.js no es un marco para crear sitios web tradicionales. Las bibliotecas como jQuery y MooTools son ideales para eso. Si está considerando Ember.js, entonces se supone que está buscando construir experiencias similares a las de un escritorio, especialmente las escalables. De hecho, el eslogan para el marco es "un marco para desarrollar aplicaciones web ambiciosas" que le dice claramente que no es la biblioteca JavaScript de su papá.

Mencioné anteriormente que Ember aprovecha el patrón MVC para promover la gestión y organización correcta del código. Si nunca ha realizado un desarrollo basado en MVC, definitivamente debería leerlo. Nettuts + tiene un gran artículo sobre el tema aquí. Para aquellos de ustedes que estén familiarizados con los conceptos, deben sentirse como en casa. Lo único que he escuchado consistentemente es que hacer el cambio de Backbone a Ember.js es realmente fácil porque Ember hace mucho trabajo pesado por usted, mientras mantiene los patrones de organización de código a los que esos desarrolladores están acostumbrados.

Ember también se basa en plantillas del lado del cliente ... MUCHO. Utiliza la biblioteca de plantillas Handlebars que proporciona expresiones que le permiten crear plantillas dinámicas basadas en HTML. Un desarrollador de Ember puede vincular datos a estas expresiones integrables y cambiar dinámicamente la visualización de su aplicación sobre la marcha. Por ejemplo, puedo crear una plantilla que pueda recibir una variedad de personas y mostrarlas en una lista desordenada:

Observe la expresión "#each" que funciona como una directiva de bucle, enumerando cada elemento de la matriz "people" y reemplazando la expresión "{{name}}" con un valor real. Es importante tener en cuenta que los corchetes dobles son tokens utilizados por Handlebars para identificar expresiones. Este es un pequeño ejemplo, y profundizaremos en más detalles más adelante.

Handlebars es un motor de plantillas increíblemente potente del lado del cliente y recomendaría revisar no solo las guías de Ember, sino también el sitio web de Handlebars para obtener una comprensión completa de las opciones disponibles. Lo usarás bastante.


Configurando Ember

Ember.js se basa en bibliotecas adicionales, por lo que deberá obtener una copia de jQuery y Handlebars. Pero, espera, ¿no dije que jQuery y Ember juegan en diferentes espacios? Bueno, sí, pero aquí está la cosa: el equipo Ember se trata de no reinventar la rueda. Eligieron jQuery para hacer lo que mejor hace: trabajar con el DOM. Y eso es algo bueno, ya que jQuery es realmente bueno en eso. También es la razón por la que eligieron Handlebars, que es una excelente biblioteca de plantillas escrita por Yehuda Katz, miembro del equipo central de Ember.

La forma más fácil de obtener los archivos que necesita es ir al repositorio Ember.js Github y desplegar el Kit de inicio. Para empezar, es una placa repetitiva. Al momento de escribir esto, contiene:

  • Ember 1.0 RC1
  • Handlerbars 1.0 RC3
  • jQuery 1.9.1

También hay una plantilla html básica que está codificada para incluir todas las bibliotecas asociadas (jQuery, Ember, etc.) y junto con un ejemplo de una plantilla Handlebars y "app.js", que incluye el código para iniciar una aplicación básica de Ember.

Solo tenga en cuenta que app.js no es parte del marco de referencia. Es un simple archivo JavaScript; puedes nombrarlo como quieras. Y, si bien lo usaremos para los fines de esta serie de tutoriales, en el futuro, es probable que termine dividiendo su JavaScript en varios archivos al igual que lo haría para cualquier otro sitio o aplicación. Además, Ember no espera una estructura de directorio específica para sus archivos de marco.

Cuando mira el código del Kit de inicio, puede parecerse al código típico de su sitio web. En algunos aspectos, tienes razón! Sin embargo, una vez que comencemos a organizar las cosas, verá cómo crear una aplicación Ember es diferente.


La Puesta del Mundo Ember

Antes de comenzar a hackear el código, es importante entender cómo funciona Ember.js y asimilar las partes móviles que conforman una aplicación Ember. Echemos un vistazo a esas partes y cómo se relacionan entre sí.


Plantillas

Las plantillas son una parte clave para definir su interfaz de usuario. Como mencioné anteriormente, Handlebars es la biblioteca del lado del cliente utilizada en Ember y las expresiones proporcionadas por la biblioteca se utilizan ampliamente al crear la interfaz de usuario para su aplicación. Aquí hay un ejemplo simple:

Tenga en cuenta que las expresiones se mezclan en su marcado HTML y, a través de Ember, cambiará dinámicamente el contenido que se muestra en la página. En este caso, los marcadores de posición {{firstName}} y {{lastName}} serán reemplazados por los datos recuperados de la aplicación.

Handlebars ofrece mucha potencia, a través de una API flexible. Será importante que comprenda lo que ofrece.


Enrutamiento

El Enrutador de una aplicación ayuda a administrar el estado de la aplicación.

El Enrutador de una aplicación ayuda a administrar el estado de la aplicación y los recursos necesarios a medida que un usuario navega por la aplicación. Esto puede incluir tareas como solicitar datos de un modelo, conectar controladores a vistas o mostrar plantillas.

Para ello, cree una ruta para ubicaciones específicas dentro de su aplicación. Las rutas especifican partes de la aplicación y las URL asociadas a ellas. La URL es el identificador clave que utiliza Ember para comprender qué estado de la aplicación debe presentarse al usuario.

Los comportamientos de una ruta (por ejemplo: solicitar datos de un modelo) se administran a través de instancias del objeto de ruta Ember y se activan cuando un usuario navega a una URL específica. Un ejemplo sería solicitar datos de un modelo, como este:

En este caso, cuando un usuario navega a la sección "/empleados" de la aplicación, la ruta solicita al modelo una lista de todos los empleados.


Modelos

Una representación de objeto de los datos.

Los modelos son una representación de objetos de los datos que usará su aplicación. Podría ser una matriz simple o datos recuperados dinámicamente de una API RESTful JSON, a través de una solicitud Ajax. La biblioteca Ember Data ofrece la API para cargar, asignar y actualizar datos a modelos dentro de su aplicación.


Controladores

Los controladores se usan generalmente para almacenar y representar datos y atributos del modelo. Actúan como un proxy, dándole acceso a los atributos del modelo y permitiendo que las plantillas accedan a ellos para representar dinámicamente la pantalla. Es por eso que una plantilla siempre estará conectada a un controlador.

Lo principal a recordar es que, mientras un modelo recupera datos, un controlador es lo que usará para exponer programáticamente esos datos a diferentes partes de su aplicación. Si bien puede parecer que los modelos y controladores están estrechamente acoplados, de hecho, los modelos, en sí mismos, no tienen conocimiento de los controladores que los usarán más adelante.

También puede almacenar otras propiedades de la aplicación que necesitan persistir pero que no necesitan guardarse en un servidor.


Vistas

Las vistas en Ember.js están destinadas a gestionar eventos relacionados con la interacción del usuario y traducirlos en eventos que tengan significado dentro de su aplicación. Por lo tanto, si un usuario hace clic en un botón para eliminar a un empleado, la vista es responsable de interpretar ese evento de clic del navegador nativo y procesarlo adecuadamente dentro del contexto del estado actual de su aplicación.


Nombrando Convenciones

Una de las formas en que Ember.js ayuda a minimizar la cantidad de código necesario y a manejar las cosas detrás de escena es a través del nombramiento de convenciones. La forma en que define y nombra sus rutas (y recursos) afecta el nombramiento de sus controladores, modelos, vistas y plantillas. Por ejemplo, si creo una ruta, llamada "empleados":

Entonces nombraría mis componentes, así:

  • Objeto de ruta: App.EmployeesRoute
  • Controlador: App.EmployeesController
  • Modelo: App.Employee
  • Vista: App.EmployeesView
  • Plantilla: empleados

El uso de este nombramiento de convenciones tiene un doble propósito. Primero, te da una relación semántica entre componentes similares. En segundo lugar, Ember puede crear automáticamente los objetos necesarios que pueden no existir (por ejemplo, un objeto de ruta o un controlador) y conectarlos para usarlos en su aplicación. Esta es la "magia" que mencioné anteriormente. De hecho, esto es específicamente lo que hace Ember a nivel de aplicación global, cuando crea una instancia del objeto Aplicación:

Applicación var = Ember.Application.create ();

Esa línea única crea las referencias predeterminadas al enrutador, controlador, vista y plantilla de la aplicación.

  • Objeto de ruta: App.ApplicationRoute
  • Controlador: App.ApplicationController
  • Vista: App.ApplicationView
  • Plantilla: aplicación

Volviendo a la ruta de "empleados" que creé anteriormente, lo que sucederá es que, cuando un usuario navega a "/ empleados" en su aplicación, Ember buscará los siguientes objetos:

  • App.EmployeesRoute
  • App.EmployeesController
  • la plantilla de empleados

Si no los encuentra, creará una instancia de cada uno, pero simplemente no representará nada, ya que no ha especificado un modelo para derivar datos o una plantilla para mostrar los datos. Es por eso que la convención de nomenclatura es tan importante. Le permite a Ember saber cómo manejar las tareas asociadas con una ruta específica, sin que tenga que conectar las cosas manualmente.

Observe que, en el primer ejemplo, utilicé el nombre singular "Empleado" para definir el modelo. Eso es a propósito. La naturaleza misma del nombre "Empleados" dicta que puedo estar trabajando con 0 para muchos empleados, por lo que es importante construir un modelo que pueda proporcionar la flexibilidad para devolver un empleado o todos los empleados. El nombramiento de convención singular de este modelo no es un requisito de Ember, ya que los modelos no tienen conocimiento de los controladores que los usarán más adelante. Por lo tanto, tiene flexibilidad para nombrarlos, pero por coherencia, cumplir con esta convención hará que la administración de su código sea mucho más fácil.

Además, elegí usar el método resource() para definir mi ruta, porque en este escenario, lo más probable es que tuviera rutas anidadas para administrar páginas de detalles para información específica de los empleados. Hablaremos sobre anidar más adelante en la serie.

La conclusión clave es que al usar un esquema de nomenclatura consistente, Ember puede administrar fácilmente los ganchos que unen estos componentes sin necesidad de definir explícitamente las relaciones a través de una tonelada de código.

Los detalles completos de los nombramientos de convención de Ember se proporcionan en el sitio del proyecto y es una lectura obligada.


Siguiente: Crear una Aplicación

En la siguiente parte de la serie, profundizaremos en el código para crear la base de nuestra aplicación.

Hemos repasado los conceptos centrales de Ember y discutido los aspectos clave de alto nivel del marco. En la siguiente parte de la serie, profundizaremos en el código para crear la base de nuestra aplicación. Mientras tanto, quiero recomendar nuevamente que comience a mirar la documentación de Manillares para tener una idea de la sintaxis de las expresiones. Además, si realmente estás ansioso por entrar en Ember, ¡mantente atento a Tuts + Premium, que pronto ofrecerá un curso completo que te guiará en la construcción de una aplicación basada en Ember!

Como señalé al comienzo de este artículo, el equipo central de Ember.js lidera a Yehuda Katz y Tom Dale lo revisó para garantizar su precisión y le dio el visto bueno. Aprobado por el equipo de Ember! ¡Te veo en un rato!

Advertisement
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.