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