ASP MVC SignalR

ASP.NET MVC

Rodolfo Finochietti
MVP ASP.NET/IIS
Lagash Systems

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

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?

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

Arquitectura de ASP.NET
ASP.NET APIs de Servicios para Aplicaciones

Membership Role Manager Personalization

Site Navigation Database Caching Health Monitoring


ASP.NET “Page Framework”

Master Pages Themes/Skins Localization Client Scripting





ASP.NET MVC

Model Binders View Engines Ajax Support Mobile Render




Modelo-Vista-Controlador

Model

View Controller

Xerox PARC 1978
http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html

¿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

¿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

Rutas

www.sitio.com/products/report/1/06/2008

URLs amigables
• Legibles
– www.sitio.com/products.aspx?module=reports&productId
=1&&month=6year=2008 
– www.sitio.com/products/report/1/6/2008 

• Predecibles
– http://es.wikipedia.org/wiki/Lagash

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);
}
}

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 .

¿Un View… que?
• Encargado de Renderizar vistas
– HTML
– Javascript

• Alternativa a “<% %>”

Objetivos de Razor
• Compacto
• Sencillo
• “Amigo del HTML”
• ¡Ya conocemos el lenguaje!

Nuevas carácterísticas de ASP.NET 3

21

Global Filters
• Antes

• Ahora

Dynamic ViewModel
• Antes

• Ahora

jQuery

Plugins Selectors

Animations

jQuery Selectors

$(“#userName”)

$(“input:text”)

$(“.required”)

$(“#grid tr:even”)

jQuery Animations
$(…).show() $(…).hide()

$(…).slideDown() $(…).slideUp()

$(…).fadeIn() $(…).fadeOut()

jQuery Plugins
http://plugins.jquery.com/

•Ajax (182) •Integration (88) •Tables (64)

•Animation and Effects (253) •JavaScript (130) •User Interface (571)

•Browser Tweaks (67) •jQuery Extensions (198) •Utilities (291)

•Data (122) •Layout (162) •Widgets (211)

•DOM (123) •Media (108) •Windows and Overlays (89)

•Drag-and-Drop (30) •Menus (80)

•Events (119) •Metaplugin (24)

•Forms (317) •Navigation (131)

Ejemplo 3

jQuery, AJAX y Edicion de Entidades

Aplicaciones Web Real Time Con
SignalR

34

¡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

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

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

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 

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 

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!

En definitiva:
¡Muchas opciones!
• Forever Frame
• Periodic polling
• Long polling
• HTML5 WebSockets

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

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

¿Como lo instalo?
*

¡NuGet!

¿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)

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

Ejemplo 5

Knockout.js & SignalR

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

Clientes
En el servidor
Se puede hostear en cualquier aplicacion ASP.NET
(SignalR.Server)

En el cliente
JavaScript (SignalR.JS)

Pero hay mas…

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

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

Ejemplo 7

Expense Application

Contacto
• Mail:
– rodolfof@lagash.com
• Blogs:
– http://shockbyte.net
• Twitter:
– @rodolfof

ASP MVC SignalR

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a ASP MVC SignalR

Semelhante a ASP MVC SignalR (20)

Mais de Rodolfo Finochietti

Mais de Rodolfo Finochietti (20)

Último

Último (15)

ASP MVC SignalR

Notas do Editor