Introducción a ASP.NET y otras tecnologías asociadas

1. Workshop
ASP.NET MVC
Día 3
Rodolfo Finochietti
MVP ASP.NET/IIS
Lagash Systems
rodolfof@lagash.com
@rodolfof

2. Agenda
• jQuery
• AJAX
• Bundling y Minification
• Script CDN
• Web API
• Soporte Asincrónico
• SignalR

3. jQuery

4. jQuery
Selectors
Animations
Plugins

5. jQuery Selectors
$(“#userName”)
$(“input:text”)
$(“.required”)
$(“#grid tr:even”)

6. jQuery Animations
$(…).show() $(…).hide()
$(…).slideDown() $(…).slideUp()
$(…).fadeIn() $(…).fadeOut()

7. jQuery Plugins
http://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)

8. AJAX

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

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

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

12. Funcionamiento

13. Bundling y Minification

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

15. Bundling y Minification
en 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

16. Bundling y Minification
en ASP.NET
• Se declaran los bungles en el evento
Application_Start del Globlal.asax
• Y se usa en la pagina o vista

17. Script CDN

18. Content Delivery Network (CDN)
18
EdgeCast
Akamai
Limelight
Cachefly

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

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

21. 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" />

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

23. Demo
jQuery
Ajax
Bundling y Minification
Script CDN

24. Work Time

25. Web API

26. Social Software Development

27. Web API Growth
Source: www.programmableweb.com – current APIs: 4535
+ 100% + 50% + 3400% + 235% + 71% + 86% + 46% + 63%

28. Embrace HTTP
¿Por que no WS-*?

29. Métodos HTTP

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

31. Ruta default en Web API
• routes.MapHttpRoute(
– name: "DefaultApi",
– routeTemplate: "api/{controller}/{id}",
– defaults: new { id = RouteParameter.Optional }
– );

32. Demo
Web API

34. Haciendo llamadas asincrónicas fácilmente
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;
}

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

36. 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();
}
}

37. 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();
}
}

38. Demo
Soporte Asincrónico

39. Work Time

40. SignalR

41. ¿Por que necesitamos aplicaciones
real-time?

44. ¡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

45. ¿Que tecnologias tenemos hoy?

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

47. HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-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
<script>eval("... ")</script>0
<script>eval("... ")</script>0

48. 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 interval

49. 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 

50. HTML5 Websockets
ExtensiondeHTTP
ProveesocketssobreHTTP
Full-duplex
Funcionaatravezdeproxies
Todaviaesundraft…
Notodoslosproxyserverslosoportan
Notodosloswebserverlosoportan
Notodoslosbrowserslosoportan
¡Sonsockets!

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

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

53. DEMO
Hello SignalR

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

55. Dos modelos de conexion
PersistentConnection
Comunica 1..N clientes
Es un IHttpHandler
Requiere que se defina una ruta
Limitado a enviar mensajes
El usuario define el “protocolo”
Hubs
Comunica 1..N clientes
Abstraccion sobre
PersistentConnection
Las rutas se mapean
automaticamente (/signalr/hubs)
Se pueden enviar mensajes y llamar a
metodos
SignalR define el protocolo

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

57. Demo
Hubs

58. Clients

59. Clientes
En el servidor
Se puede hostear en cualquier aplicacion ASP.NET
En el cliente
JavaScript
Pero hay mas…

60. Clientes
En el servidor
“SelfHost”
Windows Azure
En el cliente
JavaScript
Cualquier aplicacion .NET
Cualquier dispositivo Windows Phone
iOS
Android

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

62. ¡Gracias!