AngularJS y Ember.js
MVC frameworks en el lado del cliente
MVC en el lado del cliente
Mientras Model-View-Controller (MVC) ha adquirido diferentes matices de significado a través de los años desde que apareció por primera vez, estos frameworks incorporan los principios básicos del patrón MVC original a su manera de construir aplicaciones web actuales.
El patrón MVC resumido usado por ambos es:
* Separar las aplicaciones en componentes distintos de presentación, datos y lógica.
* Fomentar el bajo acoplamiento entre estos componentes.
* Agregar una capa inferior administrando la comunicación con el servidor
Qué es ember.js?
Clientside MVC framework
Es un framework que nos permite usar la metodología MVC en la realización de interfaces web complejas como las usadas en la mayoría de aplicaciones web actuales donde casi toda la interacción ocurre en el lado del cliente.
Qué es AngularJS?
Clientside MVC framework
AngularJS es un framework estructural para aplicaciones web dinámicas. AngularJS te permite utilizar HTML como un lenguaje de plantillas, a la vez que permite extender la sintaxis de HTML para expresar los componentes de las aplicaciones de forma clara y consisa. De entrada, elimina la necesidad de escribir gran parte del código que estamos acostumbrados a escribir mediante la utilización binding de datos e inyección de dependencias. Y todo ocurre en JavaScript en el navegador, lo que lo hace un socio ideal de cualquier tecnología de servidor. Angular es lo que habría sido HTML si hubiera sido diseñado para aplicaciones. HTML es un gran lenguaje declarativo para documentos estáticos. No contiene mucho de lo necesario para la creación de aplicaciones, y como consecuencia crear aplicaciones web es un ejercicio en el que se tiene que engañar al navegador para uqe haga lo que quiero.
Cómo funciona ember.js?
Arquitectura en ember.js
cómo funciona angularjs?
Arquitectura en angularjs
El router en ember.js
EL router es un componente que permite tener al aplicativo diferentes estados, este concepto en Ember esta ligado a la url, a medida que el usuario cambia a otro estado la url también cambia y dispara el controlador definido para dicha ruta.
ejemplo de routing en ember.js
App.Router.map(function() {
this.route("about");
this.route("favorites", { path: "/favs" });
});
El router en angularjs
Se utiliza para la vinculación directa de URLs a controladores y vistas (parciales como HTML). Este observa $location.url() e intenta mapear la ruta a una de ruta definición existente. Se pueden definir rutas a través de la API de $routeProvider. El servicio $route se utiliza normalmente junto con la directiva ngView y el servicio de $routeParams.
ejemplo de routing en angularjs
angular.module('meetup', []).
config(function($routeProvider) {
$routeProvider.
when('/people/:idperson', {
controller: PersonCtrl,
templateUrl: 'partials/person.html'
}).
otherwise({redirectTo: '/'});
});
El controlador en ember.js
El controlador es ejecutado por el router del aplicativo y es el encargado de interactuar con los modelos obteniendo la información requerida e inyectarla a la vista
ejemplo de controlador en ember.js
App.SongController = Ember.ObjectController.extend({
duration: function() {
var duration = this.get('model.duration'),
minutes = Math.floor(duration / 60),
seconds = duration % 60;
return [minutes, seconds].join(':');
}.property('model.duration')
});
el controlador en angularjs
Los controladores son el comportamiento detrás de los elementos DOM. AngularJS permite expresar el comportamiento de manera limpia y legible sin el habitual trabajo de actualización del DOM, registro de callbacks u observar los cambios del modelo. En general, un controlador no debería tratar de hacer demasiado. Debería contener sólo la lógica de negocio necesaria para una única vista.
ejemplo de controlador en angularjs
function VerEventoCtrl($scope, $routeParams, $http, People) {
$scope.users = [];
$scope.people = People;
}
La vista en ember.js
Para la vista ember usa plantillas de Handlebars, este es un framework muy conocido y usado por otros frameworks
ejemplo de plantilla en handlebars
<ul>
{{#each person in people}}
<li>Hello, {{person.name}}!</li>
{{/each}}
</ul>
la vista en angularjs
En Angular, la vista es el DOM cargado y renderizado en el navegador, después de que Angular ha transformado el DOM basado en la información en el template, el controlador y el modelo.
En la implementación MVC de Angular, la vista tiene conocimiento del modelo y el controlador. La vista conoce el modelo donde se produce el enlace de datos bidireccional. La vista tiene conocimiento del controlador a través de directivas Angular, como ngController y ngView y a través de bindings de la siguiente forma: {{someControllerFunction()}}. De esta forma, la vista puede llamar a funciones en un controlador asociado.
ejemplo de vista en angular
<ul>
<li ng-repeat="person in people">Hello, {{person.name}}</li>
</ul>
el modelo en ember.js
Actualmente Ember esta trabajando activamente en esta parte mediante si herramienta Ember-data, es una librería para ember que permite conectarse fácilmente a cualquier RESTful JSON API con una flexibilidad tal que permite implementar los modelos más extraños, por lo general a los ojos de Ember un modelo es un objeto que contiene propiedades y métodos
Ejemplo de un modelo en ember-data
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
birthday: DS.attr('date'),
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
el modelo en angularjs
Dependiendo del contexto de la discusión en Angular, el término modelo puede referirse a un objeto que representa una entidad (por ejemplo, un modelo llamado "phones" con su valor siendo una array de phones) o el modelo de todos los datos de la aplicación (todas las entidades). En Angular, un modelo es cualquier dato que es accesible como una propiedad de un objeto de ámbito Angular. El nombre de la propiedad es el identificador del modelo y el valor es cualquier objeto JavaScript (incluyendo primitivas y arrays). El único requisito para que un objeto JavaScript sea un modelo en Angular es que el objeto debe ser referenciado por un ámbito Angular como una propiedad de ese objeto de ámbito. Esta referencia de la propiedad puede crearse explícitamente o implícitamente.
ejemplo de modelo en angularjs
angular.module('modelDemo').service("authorListModel", function() {
var fowler = {
name: "Fowler",
quote: "Any fool can write code that a computer can.."
},
twain = {
name: "Twain",
quote: "Why, I have known clergymen, good men.."
},
poe = {
name: "Poe",
quote: "Deep into that darkness peering, long .."
};
this.list = [fowler, twain, poe];
})
y ahora...
Vamos al código:
Ejemplo en Ember.js:
https://github.com/edsadr/MedellinEmberJS
Ejemplo en AngularJS:
https://github.com/edsadr/MedellinAngularJS
Agradecimientos
Adrián Estrada
edsadr@gmail.com
@edsadr
Ember.js
Alvaro Agámez
alvaroagamez@gmail.com
@CodeMaxter
AngularJS
AngularJS y Ember.js - MVC framworks en el lado del cliente
By Adrián Estrada
