Vamos a ver. Breeze Aplicaciones JavaScript dirigidas por datos con Breeze El ORM de JavaScript. Agenda Día Visual Studio

Transcripción

1 Breeze Aplicaciones JavaScript dirigidas por datos con Breeze El ORM de JavaScript Jorge Bustos Servicios Profesionales Abril 2015 Día Visual Studio Agenda Día Visual Studio Vamos a ver Variantes de arquitecturas de aplicaciones web Comparación de Breeze con Entity Framework Implementación de Breeze en el servidor Implementación del cliente con Breeze y Knockout 1

2 Implementando aplicaciones dirigidas por datos (data-centric apps) Son aplicaciones con poca lógica de negocio y mucha manipulación de datos Se pueden implementar cómodamente con un ORM: Por ej. Entity Framework o NHibernate Aplicaciones dirigidas a datos en el navegador: Breeze es un gestor de datos en lado de cliente, soportado por un ORM en el servidor Arquitecturas Web Navegador: SPA Muestra IU Presentación HTML/CSS (HTML/CSS) ~ GET/POST ~ AJAX Lógica de negocio / Lógica de IU (JavaScript + Knockout) Servidor de aplicaciones (Web Forms / MVC) Cliente servicios datos Presentación (JS/Breeze) (HTML/CSS) Cliente servicios API (JS) Lógica de negocio Servidor (Servicios Web) Servicios de datos (ODATA/Breeze) Acceso a datos Servicios (Web API) BD 2

3 Qué hace el ORM Entity Framework Modelo con metadatos + mapeo a BD LINQ para consultar Change Tracking + SaveChanges Validación (por ej. con Data Annotations) Cacheado Implementado con DbContext Qué hace cliente/servidor Breeze Modelo con metadatos Una especie de LINQ para consultar Change Tracking + SaveChanges Validación cliente + servidor (metadatos) Cacheado, incluso entre sesiones Implementado con EntityManager 3

4 Arqui tec tura cliente/ servidor Breeze Navegador: SPA con JS/Breeze/Knockout Presentación (HTML/CSS) Lógica de negocio / IU (JS + Knockout) EntityManager Breeze Servidor: servicios de datos Controlador Breeze Modelo de EF (o NHibernate) BD Breeze en el servidor Soporta controladores ODATA (por ej. ODATA sobre Web API, o cualquier otro) Pero es mejor usar controladores Breeze Ambos exponen metadatos y funcionalidades para el cliente, pero los controladores Breeze tienen algunas ventajas 4

5 Breeze en el servidor Definir un modelo de datos con EF Crear controlador Breeze [BreezeController] public class PromosController : ApiController Envolver el contexto de EF en el de Breeze _ctxprovider = new EFContextProvider<PromocionesDbContext>() Breeze en el servidor Exponer metadatos, colecciones, guardado de cambios public string Metadata() { return _ctxprovider.metadata(); } public IQueryable<Promocion> Promociones() { return _ctxprovider.context.promociones; } public SaveResult SaveChanges(JObject savebundle) { return _ctxprovider.savechanges(savebundle); } 5

6 Exponiendo modelo de EF por Breeeze Entity Framework BD Breeze Controller (Web API) Cliente Breeze Controlador Breeze Cómo es un controlador Breeze? 6

7 Qué hay en el cliente Lógica de la aplicación, y de la IU, incluyendo el cliente de Breeze: Instancia de EntityManager para consultar datos, cambiarlos y guardar los cambios Algún sistema para ver y modificar los datos en la interfaz, como MVVM: Observables compatibles con KO, AngularJS y Ember.js El cliente de Breeze Incluir la librería breeze.js e Instanciar un entitymanager que apunta al servicio expuesto var em = new breeze.entitymanager('breeze/promos'); Consultar, con una especie de LINQ... var query = breeze.entityquery.from('promociones'); var promos = query.execute(); que puede tener filtros, inclusiones, ordenación, paginación.where('idpromocion', '==', idpromocion).expand('promocionesaclientes.cliente').orderby('nombre') 7

8 El cliente de Breeze Puede hacer más cosas, por ejemplo: Validaciones, de cliente y servidor em.savechanges().fail(function(error) { error.entityerrors.foreach( /*... */ ); }); Exportar importar la caché (o parte de ella) var datos = em.exportentities(); em.importentities(datos); El servicio de datos Breeze Cómo se implementa un cliente Breeze? 8

9 MVVM con Knockout var viewmodel = { nombre: ko.observable( Don ko.observable( Pepe ) José ) }; ko.applybindings(viewmodel); <input type= text data bind= value: nombre /> value= Don value= Pepe José /> /> Don PepeJosé Implementación de la IU Qué pinta tienen los view models y el HTML? Cómo funciona la aplicación? Cómo se cachean los datos? 9

10 Más Información Información ampliada sobre licencias, qué incluye cada edición, y utilidades software en: Información ampliada sobre formación, consultoría y cesión profesionales en: Valor añadido a la comunidad en forma de eventos como este, artículos técnicos o revistas en: +50 vídeos en castellano sobre Visual Studio, SQL Server, TFS y soluciones Microsoft en: shop.danysoft.com /servicios /comunidad /danysoftech Gracias Para más información contacta con Danysoft info@danysoft.com