Plantilla de Breeze/Knockout

por Mads Kristensen

La plantilla de MVC de Breeze/Knockout la escribió Ward Bell

Descargar la plantilla de MVC de Breeze/Knockout

Ha oído hablar de "aplicación de página única" (SPA) y se pregunta qué es. Aunque puede leer sobre ello, prefiere experimentarlo por sí mismo. ¿Pero quién tiene tiempo para descargar un ejemplo? Si tiene Visual Studio, tendrá una SPA de ejemplo en funcionamiento en menos de 60 segundos con la plantilla "Aplicación de página única de Breeze/Knockout" de ASP.NET MVC 4.

¿Qué es la plantilla de SPA de Breeze/Knockout?

La mayoría de las plantillas de proyecto generan un esqueleto de aplicación. Añade carne a esos huesos agregando el código y, finalmente, entregando una aplicación que funciona. La plantilla de SPA de Breeze/Knockout es diferente. Genera una aplicación de ejemplo para que pueda estudiar. Muestra un diseño de aplicación SPA y muchas de las técnicas para crear una SPA.

La plantilla de Breeze/Knockout es una variación de la plantilla de SPA de KnockoutJS incluida en la actualización de ASP.NET and Web Tools 2012.2. La plantilla de SPA de Breeze genera una aplicación con la misma experiencia de usuario, pero tiene una implementación diferente, ya que usa Breeze para la administración de datos.

La plantilla de SPA de KnockoutJS realiza solicitudes de servicio con jQuery AJAX sin procesar, que es adecuado para una aplicación sencilla. Pero las aplicaciones más sofisticadas tienen requisitos de administración de datos más exigentes. Por ejemplo, la mayoría de las aplicaciones:

• Consultan y vuelven a consultar el servidor durante una sesión de usuario extendida.
• Agregan filtros de consulta, ordenación y paginación.
• Comparten los mismos datos en varias pantallas.
• Acumulan cambios en muchos objetos y los guardan como una sola transacción.
• Validan los cambios en el cliente, por lo que el usuario puede corregir errores antes de confirmar los cambios en la base de datos.

La biblioteca BreezeJS controla estas tareas para usted, lo que le libera para desarrollar la lógica de la aplicación y la experiencia del usuario que más importa.

Breeze es una biblioteca de código abierto para crear aplicaciones de datos enriquecidas en JavaScript y HTML, los tipos de aplicaciones que históricamente se han entregado como aplicaciones de escritorio independientes.

La plantilla de Breeze/Knockout le ayuda a tomar ese primer paso fundamental hacia una infraestructura de administración de datos más sólida. Genera una aplicación Todo de ejemplo que es aparentemente idéntica a la plantilla de SPA de KnockoutJS. En el interior, reemplaza la capa de datos de AJAX por Breeze, de modo que puede comparar los dos enfoques en paralelo. Por supuesto, apenas toca el potencial de una aplicación Breeze. Pero verá cómo funciona Breeze y lo poco que se necesita para hacer esa transición.

Empecemos.

Creación de un proyecto de plantilla de Breeze/Knockout

Descargue e instale la plantilla haciendo clic en el botón Descargar. La plantilla se empaqueta como un archivo de extensión de Visual Studio (VSIX). Es posible que tenga que reiniciar Visual Studio.

En el panel Plantillas, seleccione Plantillas instaladas y expanda el nodo Visual C#. En Visual C#, seleccione Web. En la lista de plantillas de proyecto, seleccione Aplicación web ASP.NET MVC 4. Proporcione un nombre al proyecto y haga clic en Aceptar.

En el asistente Nuevo proyecto, seleccione SPA de Breeze/Knockout.

Presione Ctrl-F5 para compilar y ejecutar la aplicación sin depurar o presione F5 para ejecutarla con depuración.

Cuando la aplicación se ejecuta por primera vez, muestra una pantalla de inicio de sesión. Haga clic en el vínculo "Sign up" y aparece una nueva página a la vista, donde puede escribir un nombre de usuario y una contraseña (las páginas de inicio de sesión y registro se compilan mediante ASP.NET MVC). Al enviar el formulario de registro, el servidor genera un TodoList con dos elementos para su cuenta. Entonces se le presenta en una nota amarilla.

Ahora está en tierra de SPA. Todo lo que ve y experimenta al manipular Todos se representa y administra en el cliente con ayuda de Knockout y Breeze. Explore la aplicación como usuario… pero con el ojo de un desarrollador. Use las herramientas de desarrollo del explorador para capturar el tráfico de red (en Internet Explorer: presione F12, seleccione la pestaña Red y haga clic en Iniciar captura). Ahora pruebe lo siguiente:

• Agregue un nuevo elemento Todo.
• Haga clic en la etiqueta y edite el título del elemento Todo.
• Active una casilla para marcar el elemento hecho. Observe que el cuadro de texto está deshabilitado, por lo que el título ya no se puede editar.
• Haga clic en la "x" a la derecha de la etiqueta. El elemento desaparece y se elimina de la base de datos.
• Elija otro elemento y borre su título. Obtendrá un error de validación que indica que el título es necesario. Después de una breve pausa, se restaura el título anterior.
• Escriba un título ridículamente largo. Obtendrá un error de validación diferente que indica que el título es demasiado largo.
• Haga clic en el botón "Add Todo List" (Agregar lista de tareas pendientes). Aparece una nueva lista a la izquierda de la lista anterior.
• Juegue con el título TodoList, desencadenando sus validaciones obligatorias y de longitud.
• Haga clic en el cuadro de texto de título para borrar el mensaje de error.
• Haga clic en la "x" en el círculo de la esquina superior derecha para eliminar TodoList y sus tareas pendientes.

La lógica de validación se realiza en el lado cliente de Breeze. Los atributos de validación de las clases de modelo de servidor se propagan al cliente y se ejecutan automáticamente antes de que el cliente se ponga en contacto con el servidor.

Revise el tráfico de red. Observe que no había llamadas al servidor cuando Breeze ha detectado un error. Cada cambio válido ha dado lugar a una solicitud POST a "/api/Todo/SaveChanges". Breeze agrupa los cambios y los envía juntos como una única solicitud al método SaveChanges del controlador de Web API. Es diferente de la plantilla de SPA de KnockoutJS, que realiza solicitudes PUT, POST y DELETE para cada elemento individualmente.

Vista del interior

Esta aplicación tiene un lado cliente y un lado servidor. La pila del lado cliente consta de un poco de HTML y una combinación de módulos JavaScript de aplicación (en la carpeta "app"), además de bibliotecas de JavaScript de terceros (en la carpeta "Scripts").

Si ha investigado la plantilla de SPA de KnockoutJS, debería ser muy familiar. Céntrese en los cuadros azules. La arquitectura de la interfaz de usuario es Modelo-Vista-Modelo de vista (MVVM), en la que los widgets HTML de la vista están separados limpiamente del código de presentación auxiliar en el modelo de vista. Un sistema de enlace de datos (Knockout en este caso) coordina la vista y el modelo de vista para que cada uno pueda realizar su trabajo sin tener conocimiento íntimo del otro.

El modelo encapsula los datos Todo. Las entidades del modelo se construyen mediante Breeze con propiedades observables de Knockout, por lo que se pueden enlazar directamente a widgets en la vista. El modelo de vista pide al contexto de datos que adquiera y guarde las entidades del modelo. El contexto de datos delega la mayor parte del trabajo en Breeze.

La pila del lado servidor consta de código de desarrollador y tres bibliotecas principales de .NET: Web API, Entity Framework y Breeze.NET.

La arquitectura básica es la misma que la plantilla de SPA de KnockoutJS. Sin embargo, la implementación es mucho más sencilla: se han eliminado los objetos de transferencia de datos (DTO), y la mayoría de los detalles de Entity Framework se han delegado a Breeze.NET.

Pasos siguientes

Le sugerimos que explore el código, guiado por la amplia explicación de las pilas de cliente y servidor en el sitio web de Breeze.

Puede intentar jugar con la consulta del lado cliente de Breeze; agregue algunos filtros y ordenaciones. Puede agregar más propiedades de modelo y entidades a fin de tener una mejor sensación para el desarrollo de SPA de un extremo a otro. Cuando esté seguro del diseño, puede quitar las características Todo y reemplazarlas por las suyas propias.

Pronto estará a punto para el siguiente paso importante: agregar pantallas del lado cliente y navegar por ellas. Dejará atrás esta plantilla de SPA y volverá a una pila de SPA más completa, como John Papa's Hot Towel, que agrega Durandal a la combinación Breeze y Knockout.