ASP.NET MVC Workshop Día 3
62
Workshop ASP.NET MVC Día 3 Rodolfo Finochietti MVP ASP.NET/IIS Lagash Systems [email protected] @rodolfof
-
Upload
rodolfo-finochietti -
Category
Technology
-
view
4.376 -
download
0
description
Introducción a ASP.NET y otras tecnologías asociadas
Transcript of ASP.NET MVC Workshop Día 3
Agenda
• jQuery• AJAX• Bundling y Minification• Script CDN• Web API• Soporte Asincrónico• SignalR
jQuery
jQuery
Selectors
Animations
Plugins
jQuery Selectors
$(“#userName”)
$(“input:text”)
$(“.required”)
$(“#grid tr:even”)
jQuery Animations
$(…).show() $(…).hide()
$(…).slideDown() $(…).slideUp()
$(…).fadeIn() $(…).fadeOut()
jQuery Pluginshttp://plugins.jquery.com/
•Ajax (182)
•Animation and Effects (253)
•Browser Tweaks (67)
•Data (122)
•DOM (123)
•Drag-and-Drop (30)
•Events (119)
•Forms (317)
•Integration (88)
•JavaScript (130)
•jQuery Extensions (198)
•Layout (162)
•Media (108)
•Menus (80)
•Metaplugin (24)
•Navigation (131)
•Tables (64)
•User Interface (571)
•Utilities (291)
•Widgets (211)
•Windows and Overlays (89)
AJAX
Que es AJAX
AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo Web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes.
Que es AJAX• JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los
datos recibidos.
• HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor
• CSS - Define el aspecto de cada elemento y dato de la aplicación
• XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados.
• Lenguaje de servidor - Genera la información útil en XML y la envía al navegador.
Funcionamiento • El usuario accede a la aplicación que es enviada por el servidor en formato HTML,
JavaScript y CSS.
• Luego el código JavaScript de la aplicación pide al servidor los datos que quiere mostrar y este, ejecuta un código de lado de servidor que envía al navegador los datos en formato XML.
• Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa
javascript, repite la acción anterior de manera invisible al usuario y muestra los datos deseados.
Funcionamiento
Bundling y Minification
Minificar los scripts
• Remover los elementos innecesarios como espacios en blanco, nombres de función, comentarios de código, e instrucciones de trace y debug
• Para esto se puede usar la herramienta Microsoft Ajax Minifier– http://ajaxmin.codeplex.com/
14
Bundling y Minificationen ASP.NET
• Mejora los tiempo de carga de los archives de JavaScript y CSS– Reduce el numero y el tamaño de los request
HTTP• Funciona por convención (no se requiere
configuración)• Completamente extensible y configurable
Bundling y Minificationen ASP.NET
• Se declaran los bungles en el evento Application_Start del Globlal.asax
• Y se usa en la pagina o vista
Script CDN
Content Delivery Network (CDN)
18
EdgeCast
Akamai
Limelight
Cachefly
Microsoft Ajax CDN
• Microsoft Ajax CDN es un host de las mas populares librerías JavaScript– El contenido esta cacheado en servidores
distribuidos geográficamente por todo el mundo– Soporta SSL– Están disponibles las versiones mimificadas y
debug
Microsoft Ajax CDN
• Librerías:– jQuery (www.jquery.com)– jQuery UI (www.jqueryui.com)– jQuery Mobile (www.jquerymobile.com)– jQuery Validation (www.jquery.com)– jQuery Cycle (www.malsup.com/jquery/cycle)– jQuery DataTables (http://datatables.net)– Ajax Control Toolkit (www.outercurve.org)– ASP.NET Ajax– ASP.NET MVC JavaScript Files– ASP.NET SignalR JavaScript Files– Nuevas se agregan todo el tiempo
Microsoft Ajax CDN
• Simple de usar– Solamente hay que referencia la librería que se
desea desde: http:///ajax.aspnetcdn.com<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
– Soporta ScriptManager<asp:ScriptManager ID="ScriptManager1“ EnableCdn="true“ Runat="Server" />
Microsoft Ajax CDN
• Fallback si el CDN no esta disponible
<script> // Fallback to loading jQuery from a local path if the CDN is unavailable (window.jQuery || document.write('<script src="/scripts/jquery-1.9.0.min.js"><\/script>')); </script>
Demo
jQueryAjax
Bundling y MinificationScript CDN
Work Time
Web API
Social Software Development
Web API Growth
Source: www.programmableweb.com – current APIs: 4535
+ 100% + 50% + 3400% + 235% + 71% + 86% + 46% + 63%
GET /en/html/dummy.php?name=MyName&married=not+single &male=yes HTTP/1.1Host: www.explainth.atUser-Agent: Mozilla/5.0 (Windows;en-GB; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11Accept: text/xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5Accept-Language: en-gb,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.explainth.at/en/misc/httpreq.shtml
Embrace HTTP¿Por que no WS-*?
Métodos HTTP
Para implementar Web API . . .
• Derivar ApiController• Implementar las acciones– Las acciones mapean a métodos HTTP– Prefijar los nombres de los métodos como el verbo HTTP deseado –
PostComment
– Usar [Get/Post/Put/Delete] si se prefiere un nombre diferente
Ruta default en Web API
• routes.MapHttpRoute(– name: "DefaultApi",– routeTemplate: "api/{controller}/{id}",– defaults: new { id = RouteParameter.Optional }– );
Demo
Web API
Asynchronous Support
Haciendo llamadas asincrónicas fácilmente
• Mejorar la respuesta y escalabilidad de las aplicaciones• Nuevas palabras clave “async” y “await”• Se puede usar await en casi cualquier código• Permite escribir código asincrónico que se lee como código sincrónico
Task<string> Op123Async(string s) { var tcs = new TaskCompletionSource<string>(); var state = 0; Action resume = delegate { switch (state) { case 0: Task<string> t1 = Op1Async(s); state = 1; t1.ContinueWith(resume); break; case 1: Task<string> t2 = Op2Async(t1.Result);...}
async Task<string> Op123Async(string s) { string s1 = await Op1Async(s); string s2 = await Op2Async(s1); string s3 = await Op3Async(s2); return s3;}
Asynchronous Support• Porque async en el server?
– Porque nos permite usar de manera mas eficiente los recurso del Server
• Y como funciona?– Al momento de invocar a un resource remoto, el controller le cede el
control permitiendole reutilizar el thread mientras espera la respuesta.– Cuando la llamada remota se completa, el controller es re-scheduleado
para completar su ejecución.– Menor # de threads corriendo -> aumenta la escalabilidad
• El uso de async en el servicio no se expone a browsers/clientes– http://myserver.com/products -> la misma URL puede ser
implementada en ASP.NET usando un controller sincrónico o asincronico.
Async tradicional en MVC
public class Products : AsyncController {
public void IndexAsync() {
WebClient wc1 = new WebClient();
AsyncManager.OutstandingOperations.Increment();
wc1.DownloadStringCompleted += (sender, e) => { AsyncManager.Parameters[“result"] = e.Result; AsyncManager.OutstandingOperations.Decrement(); };
wc1.DownloadStringAsync(new Uri("http://www.bing.com/")); } public ActionResult IndexCompleted(string result) { return View(); }}
Async en MVC con .NET 4.5
public class Products : Controller {
public async Task<ActionResult> IndexAsync() {
WebClient web = new WebClient();
string result = await web.DownloadStringTaskAsync("www.bing.com/"); return View(); }}
Demo
Soporte Asincrónico
Work Time
SignalR
¿Por que necesitamos aplicaciones real-time?
¡Los usuarios quieren la ultima informacion AHORA!
Twitter – live searches/updates Stock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics…
6
¿Que tecnologias tenemos hoy?
HTTP no esta preparado…Nunca se diseño para comunicaciones real-timeLa web es request-responseLa web es stateless
Para solucionar esto se invento HTML5 WebSockets
HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked
Forever Frame
– 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
Client
<script>eval("... ")</script>\0<script>eval("... ")</script>\0
Server
Periodic polling
– 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
Polling intervalClient
Server
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
Client
Server
HTML5 WebsocketsExtension 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
DEMO
Hello SignalR
¿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 conexionPersistentConnectionComunica 1..N clientesEs un IHttpHandlerRequiere que se defina una rutaLimitado a enviar mensajesEl usuario define el “protocolo”
HubsComunica 1..N clientesAbstraccion sobre PersistentConnectionLas rutas se mapean automaticamente (/signalr/hubs)Se pueden enviar mensajes y llamar a metodosSignalR define el protocolo
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 a clientes individuales– Se pueden llamar todos clientes– Se pueden llamar a grupos de clientes
Demo
Hubs
Clients
Clientes
En el servidorSe puede hostear en cualquier aplicacion ASP.NET
En el clienteJavaScript
Pero hay mas…
Clientes
En el servidor“SelfHost”Windows Azure
En el clienteJavaScriptCualquier aplicacion .NETCualquier dispositivo Windows PhoneiOSAndroid
¡Gracias!
