El documento habla sobre ASP.NET MVC, un framework para desarrollo web que ofrece separación de preocupaciones, URLs limpias y un modelo de programación más performante. Explica conceptos como modelos, vistas y controladores, y características como Razor, rutas, y jQuery. También cubre SignalR, una biblioteca que permite comunicaciones en tiempo real entre el servidor y el cliente.
2. Agenda
• ASP.NET MVC
– Introducción
– Modelos
– Vistas
– Razor
• Nuevas características de ASP.NET MVC 3
• AJAX y jQuery
• Aplicaciones Real Time con SignalR
4. Por que ASP.NET MVC
• ¿Por qué Microsoft lanza ASP.NET MVC?
• ¿Web Form y el modelo de programación por
eventos no era la solución al desarrollo Web?
• ¿Necesito aprender otro View Engine?
• ¿Por qué necesitamos mas herramientas de
desarrollo Web?
5. ASP.NET MVC
• Un framework para Web Development
• Más control sobre el HTML
– Más Web-Frendly
• Más testeable
• No es una nueva versión de ASP.NET Web
Forms
• Esta construido sobre en ASP.NET
6. Arquitectura de ASP.NET
ASP.NET APIs de Servicios para Aplicaciones
Membership Role Manager Personalization
Site Navigation Database Caching Health Monitoring
7. Arquitectura de ASP.NET
ASP.NET “Page Framework”
Master Pages Themes/Skins Localization Client Scripting
ASP.NET APIs de Servicios para Aplicaciones
Membership Role Manager Personalization
Site Navigation Database Caching Health Monitoring
8. Arquitectura de ASP.NET
ASP.NET MVC
Model Binders View Engines Ajax Support Mobile Render
ASP.NET APIs de Servicios para Aplicaciones
Membership Role Manager Personalization
Site Navigation Database Caching Health Monitoring
9. Modelo-Vista-Controlador
Model
View Controller
Xerox PARC 1978
http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
10. ¿Que ofrece?
• SoC (Separation of Concerns)
– TDD por default
– Mantenibilidad
• Url y HTML mas limpio
– SEO y REST friendly
• /Usuarios/Buscar/Rodolfo
– CSS Friendly
• <html> <div> <label> <span>
• Modelo de programación mas performante
– No hay ViewState
– No hay modelo de eventos
11. ¿Como trabaja?
Se determina la
Navego a http://.../Productos/Listar
ruta
Se ejecuta la Un método Listar El controller
logica del del controller es Productos es
controller invocado creado
Se dibujan Urls
Se dibuja la vista
que apuntan a
pasándole la
otras acciones de
ViewData
otros controllers
14. Controlador – Uso Básico
• Escenarios, Objetivos y Diseño
– Las URLs indican “acciones” del Controlador, no páginas
– Las acciones deben declarase en el Controlador.
– El controlador ejecuta lógica y elige la vista.
public ActionResult ShowPost(int id) {
Post p = PostRepository.GetPostById(id);
if (p != null) {
View(p);
} else {
View("nosuchpost", id);
}
}
15. Vistas – Uso Básico
• Escenarios, Objetivos y Diseño:
– Generan HTML u otro tipo de contenido.
• Helpers pre-definidos.
– Pueden ser .ASPX, .ASCX, .MASTER, etc.
– Pueden reemplazarse con otras tecnologías:
• Template engines (NVelocity, Spark, …).
• Formatos de salida (images, RSS, JSON, …).
• Pueden definirse vistas Mock para testing.
– El controlador ofrece datos a la Vista
• Datos Loosely typed o Strongly Typed .
35. ¡Los usuarios quieren la ultima
informacion AHORA!
Twitter – live searches/updates
Stock streamers
Auctions
Live scores
Real-time notifications
Interactive games
Collaborative apps
Live user analytics
…
6
36. HTTP no esta preparado…
Nunca se diseño para comunicaciones real-time
La web es request-response
La web es stateless
Para solucionar esto se invento
HTML5 WebSockets
37. Forever Frame
HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked
<script>eval("... ")</script>0
<script>eval("... ")</script>0
– El server le dice al cliente que el response es chuncked
– El cliente mantiene la coneccion abierta hasta que el
servidor la cierra
– El servidor envia los datos al cliente seguido de un 0
– Este proceso consume threads del servidor
38. Periodic polling
Polling interval
– Cada cierto tiempo el cliente pregunta si hay nuevos datos
al servidor utilizando Ajax
– El tiempo de latencia minimo esta determiando por el
“polling interval”
– Desperdicia ancho de banda y latencia
39. Long polling
– El cliente pregunta pero el servidor no responde hasta que
tenga datos nuevos para enviar
– El cliente pregunta de nuevo cuando los datos son recibidos
o despues de que hay una time out en al coneccion
– Consume threads y conexiones del servidor
40. HTML5 Websockets
Extension de HTTP
Provee sockets sobre HTTP
Full-duplex
Funciona a travez de proxies
Todavia es un draft…
No todos los proxy servers lo soportan
No todos los webserver lo soportan
No todos los browsers lo soportan
¡Son sockets!
41. En definitiva:
¡Muchas opciones!
• Forever Frame
• Periodic polling
• Long polling
• HTML5 WebSockets
42. SignalR
¡3 en uno!
• Conexiones “persistentes” entre cliente y
servidor sobre el mejor transporte
• Abstrae el modelo de poolling subyasente
• Provee un solo modelo de programacion
43. SignalR
• Creado por David Fowler y Damian Edwards
(ASP.NET team)
• No es un proyecto oficial de Microsoft
• Proyecto OSS hosteado en Github, licencia MIT
– http://github.com/signalr/signalr
• Instalacion muy simple
• Utiliza: C#, .NET 4+ y jQuery
46. ¿Que paso?
• El servidor hizo broadcasting del mensaje cada
pocos segundos
• El cliente recibio los mensajes
• ¡El codigo para todo esto es facil!
• No hay polling (por lo menos no en el codigo)
48. Dos modelos de conexion
PersistentConnection Hubs
Comunica 1..N clientes Comunica 1..N clientes
Abstraccion sobre
Es un IHttpHandler PersistentConnection
Requiere que se defina una ruta Las rutas se mapean
automaticamente (/signalr/hubs)
Limitado a enviar mensajes Se pueden enviar mensajes y llamar a
El usuario define el “protocolo” metodos
SignalR define el protocolo
51. Hubs
• Los metodos de un Hub se pueden llamar
desde el cliente
• Los metodos de un cliente se pueden llamar
desde el servidor
– Se pueden llamar cliente individuales
– Se pueden llamar todos clientes
– Se pueden llamar grupos de clientes
53. Clientes
En el servidor
Se puede hostear en cualquier aplicacion ASP.NET
(SignalR.Server)
En el cliente
JavaScript (SignalR.JS)
Pero hay mas…
54. Clientes
En el servidor
“SelfHost” (https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost)
Windows Azure
On the client side
JavaScript (SignalR.JS)
Cualquier aplicacion .NET (SignalR.Client)
Cualquier dispositivo WP7 (SignalR.Client.WP7)
iOS
Android
55. Resumen
• ¡3 en uno!
– Conexiones “persistentes” entre cliente y
servidor sobre el mejor transporte
– Abtrae el modelo de poolling subyasente
– Provee un solo modelo de programacion
• Connections & Hubs
• Conect varios clientes
ViewEngine:- Componente de ASP.NET que se encarga de renderizar vistasActualmente, la gran mayoría de la gente utiliza el motor clasico de ASP.NET con “<% %>”Esta es una alternativa a ese motor
Objetivo principal de Razor: ahorrar teclas. Que sea mas fácil y rápido armar sitios con ASP.NET MVCPara eso es:CompactoSencilloPoco intrusivo, “amigo del HTML”No hay que aprender un lenguaje nuevo! Se programa con C# o VB.NET
How do youimplement these today?
DEMO: Fiddler con hootsuit.com
DEMO: Fiddler con facebook.com
That’s a lot of options, a lot of things to account for and a lot of different programming models. Are you going to do this?Are you still writing separate getDocumentById and AttachEvent methods to work with the DOM? What about jQuery?
Open the previously created sampleInstall-Package jQuery.UI.Combined Add a class: [HubName("worker")] public class WorkerHub : Hub { public void startProcessing(Event e) { Caller.notify("We've started processing " + e.EventName); Clients.setProgress(10); for (int i = 0; i <= 100; i++) { SignalR.Hubs.Hub.GetClients<WorkerHub>().setProgress(i); Thread.Sleep(100); } } }Add some HTML:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" /> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { var workerHub = $.connection.worker; $('#progressbar').progressbar({ value: 0 }); $('#startWorkTrigger').bind('click', function () { workerHub.startProcessing({ eventName: 'UAN12' }) .fail(function (e) { alert("An error occured: " + e); }); }); workerHub.notify = function (message) { $('#notifications').html(message); }; workerHub.setProgress = function (progress) { $('#progressbar').progressbar({ value: progress }); }; $.connection.hub.start(); }); </script></head><body> <div id="progressbar" style="width: 200px;"></div> <div id="notifications" style="width: 200px;"></div> <button id="startWorkTrigger">Start work</button></body></html>