Your SlideShare is downloading. ×
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ASP.NET MVC Workshop Día 3

4,352

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,352
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Use HTTP as an Application Protocol – not a Transport Protocol
  • 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>
  • Transcript

    • 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
    • 33. 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; }
    • 34. 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.
    • 35. 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(); } }
    • 36. 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(); } }
    • 37. Demo Soporte Asincrónico
    • 38. Work Time
    • 39. SignalR
    • 40. ¿Por que necesitamos aplicaciones real-time?
    • 41. ¡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
    • 42. ¿Que tecnologias tenemos hoy?
    • 43. 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
    • 44. 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
    • 45. 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
    • 46. 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 
    • 47. HTML5 Websockets ExtensiondeHTTP ProveesocketssobreHTTP Full-duplex Funcionaatravezdeproxies Todaviaesundraft… Notodoslosproxyserverslosoportan Notodosloswebserverlosoportan Notodoslosbrowserslosoportan ¡Sonsockets!
    • 48. En definitiva: ¡Muchas opciones! • Forever Frame • Periodic polling • Long polling • HTML5 WebSockets
    • 49. 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
    • 50. DEMO Hello SignalR
    • 51. ¿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)
    • 52. 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
    • 53. 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
    • 54. Demo Hubs
    • 55. Clients
    • 56. Clientes En el servidor Se puede hostear en cualquier aplicacion ASP.NET En el cliente JavaScript Pero hay mas…
    • 57. Clientes En el servidor “SelfHost” Windows Azure En el cliente JavaScript Cualquier aplicacion .NET Cualquier dispositivo Windows Phone iOS Android
    • 58. Contacto • Mail: – rodolfof@lagash.com • Blogs: – http://shockbyte.net • Twitter: – @rodolfof
    • 59. ¡Gracias!

    ×