¡Alerta!
Todos los ejemplos usados en el tutorial de son una continuación de los ejemplos del capitulo anterior.
Arquitectura MVC Standard
Ember.js tiene una manera muy particular de manejar su data dentro de la arquitectura por eso es muy importante que le echemos un vistazo antes de entrar a programar una app completa dentro del framework.
Antes de ver como esta estructurado exactamente la arquitectura en Ember.js es bueno que veamos como funcionan las aplicaciones normalmente en MVC. Veamos el siguiente diagrama:
Observemos que este tipo de aplicación corre en el servidor y no en el cliente.
¿Cómo funciona?
El explorador envía un request hacia el servidor, el servidor al contener nuestra aplicación procesa ese request a través de un router, el cual determina el correcto comportamiento de es data enviada. Una vez que el router determina que controlador debe levantar para procesar el request, instancia ese controlador, y a su vez ese controlador renderiza una vista o plantilla que es retornada al explorador. El procesamiento de la data del request es generada por los modelos, los cuales están comunicación directa con los controladores.
En pocas palabras, una vez que el explorador realiza un request, el router lo entrega al controlador adecuando, este procesa la información a través del modelo y luego renderiza un vista para el explorador.
Arquitectura Ember.js
Ember.js no trabaja de esa manera. Veamos el siguiente diagrama:
Observemos que este tipo de aplicación corre en el cliente y no en el servidor.
Para comenzar toda la aplicación de Ember.js corre en el explorador, todos los modelos, vistas y controladores son almacenados en el explorador. Todo inicia desde el router el cual mapea la correcta dirección que va a tomar la aplicación al indicarle que controlador va usar. El controlador instancia una vista y a su vez, la vista renderiza un template o plantilla. Hasta ahora todo parece igual a la arquitectura que observamos anteriormente, pero eso esta apunto de cambiar, porque los modelos dentro de Ember.js son manejados de manera diferente.
Ya que esta es una aplicación del lado del cliente es un poco delicado guardar información en el explorador como tal, es por eso que Ember.js introduce un mecanismo para manejar la persistencia de la data dentro de la app, ese mecanismo se denomina “Store”. Simplemente el store es una variable que almacena información en forma de modelos.
Volvamos al diagrama, en ember es el router el que debe saber si la app necesita o no obtener información del store, suponiendo que se necesita, este accede al store, una vez que el store obtenga la data se la pasa al modelo, el modelo procesa la información, este a su vez le pide al controlador (a través de un proxy interno) que levante la vista necesaria y la vista renderiza esa información en un template o plantilla.
En Ember.js uno puede tener múltiples controladores para una sola vista, a diferencia de una app del lado del servidor. Te darás cuenta mas adelante cuando veamos como manejar y crear correctamente controladores en Ember.js.
Veamos un ejemplo de request en Ember.js
Siguiendo el ejemplo que veníamos desarrollando en el capitulo anterior LINK. Veamos el siguiente diagrama:
Supongamos que hacemos el siguiente request en el explorador /marcapaginas, este nos debería devolver todos los marca paginas disponibles en la app. El funcionamiento en sí de la app debería ser, acceder al router de los marca libros para que este defina un controlador (en nuestro caso Controlador Marcapaginas), a su vez si se necesita procesar información este acceda al “Modelo Marcapaginas” para que al final, la vista renderiza el template asociado a Marcapaginas con la información obtenida anteriormente.
No te preocupes si no entendiste en la totalidad como funciona la arquitectura de Ember.js ya que esta la vamos a estar revisando en los siguientes capítulos cuando te explique los controladores, routers, vistas, modelos y store.
Conclusión
En esta lección, vimos todo lo relacionado con la arquitectura que necesitamos saber para desarrollar una aplicación en Ember.js. Si tienes alguna pregunta, yo estaré feliz de responderte en los comentarios, además espero que te unas y le eches un vistazo a todo el resto de este curso.
¡Te espero la próxima semana!
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure