Professional Documents
Culture Documents
NET Ajax
&
Nuevas funcionalidades de ASP.NET 4
Gonzalo Prez C. Web Developer Corobori MVP ASP/ASP.NET http://www.chalalo.cl Twitter:chalalo chalalo@hotmail.com Juan Carlos Olamendy Turruellas Arquitecto Principal, Exynko Mster en Informtica Empresarial Microsoft MVP Oracle ACE
johnx_olam@fastmail.fm
Agenda de Hoy
Optimizacin Web
Networking HTML CSS JavasCript Marshalling ASP.NET AJAX
Optimizacin Web
En la mayora de las pginas web, menos del 10 - 20% del tiempo de carga de una pgina , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir
- Steve Souders
Networking
HTML
CSS
Puntos de Optimizacin
JavaScript
Marshalling
ASP.NET Ajax
Optimizaciones - Networking
Response
Request
GET / HTTP/1.1
Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible) Host: www.live.com
Response
HTTP/1.1 200 OK
Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip Content-Encoding: gzip
Optimizaciones - Networking
Primer Request
GET /images/banner.jpg HTTP/1.1 Host: www.chalalo.cl
Primer Response
HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 19 Sep 2010 00:00:00 GMT Expires: Fri, 19 Sep 2010 00:00:00 GMT
Segundo Request
GET /images/banner.jpg HTTP/1.1
No se necesita Response
Host: www.chalalo.cl
Optimizaciones - Networking
Response
Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com If-Modified-Since: If-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT Sun, 22 Jul 2010 21:30:46 GMT
Response
HTTP/1.1 304 Not Modified
Content-Type: image/jpeg Last-Modified: Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT Sun, 22 Jul 2010 21:30:46 GMT
Optimizaciones - Networking
JavaScript Original
function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { var img = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length;
JavaScript Minimizado
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromChar Code(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c-){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('y v(){a=[];b.e=\'\';9 c=1;9 i=D/2.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(\'0\');0.o("n","p");0.q.s=\'r\';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')
Optimizaciones - Networking
<html> <head> <title>Test</title> </head> <body> x 400 <!-- logo.gif dimensiones 500 x 400 --> <img src=logo.gif" width="50" height="40" /> width="50" height="40" </body> </html>
Optimizaciones - Networking
<html> <head> <title>Test</title> </head> <body> <!-- logo.gif dimensiones:50 x x40 --> 50 40 <img src=logo.gif" width="50" height="40" /> width="50" height="40" </body> </html>
Optimizaciones - Networking
src=miScript1.js ></script> src=miScript2.js ></script> src=miScript3.js ></script> src=animater.js ></script> src=extjs.js ></script> src=yahooui.js ></script> src=miScript4.js ></script> src=jQuery.js ></script>
Optimizaciones - Networking
src=miScript1.js ></script> src=miScript2.js ></script> src=miScript3.js ></script> src=animater.js ></script> src=extjs.js ></script> src=yahooui.js ></script> src=miScript4.js ></script> src=jQuery.js ></script>
Optimizaciones: Networking
<script src=miScript.js ></script> <script src=animater.js ></script> <script src=extjs.js ></script> <script src=yahooui.js ></script> <script src=http://ajax.microsoft.com/ajax/jquery/jquery1.4.2.min.js ></script>
13
Optimizaciones - Networking
<html> <head> <title>Test</title> </head> <body> <img src="a.gif" />/>Item 1 <img src="a.gif" Item <img src="b.gif" />/>Item 2 <img src="b.gif" Item <img src=c.gif" />/>Item 3 <img src=c.gif" Item <img src=d.gif" />/>Item 4 <img src=d.gif" Item <img src=e.gif" />/>Item 5 <img src=e.gif" Item <img src=f.gif" />/>Item 6 <img src=f.gif" Item </body> </html>
1 2 3 4 5 6
Optimizaciones - Networking
Optimizaciones - Networking
<head> <title>Test</title> <style type="text/css"> .a, .b { width: 10; height: 10 } .a, .a, { width: 10; height: 10 "abc.gif" } .b .b { background-image: } .a, .a {{ background-position: 0 .b background-image: "abc.gif" } 0 } .a { background-position: 0 0 } .b { background-position: 0 } .b { background-position: 0 -10 -10 } </style> </head> <body> <div class="a"></div> <div class="a"></div> <div class="b"></div> <div class="b"></div> </body>
Item 1 Item 2
Networking
HTML
Puntos de Optimizacin
CSS
JavaScript
Marshalling
ASP.NET Ajax
Optimizaciones - HTML
<html> <head> <title>Test</title> <script type="text/javascript"> <script type="text/javascript"> <!-<!-function HolaMundo() { { function helloWorld() alert('Hola Mundo!') ; ; alert('Hello World!') }} // --> // --> </script> </script> </head> <body> </body> </html>
Optimizaciones - HTML
<html> <head> <title>Test</title> <script src=myscript.js ></script> <script src=myscript.js ></script> </head> <body> </body> </html>
Optimizaciones - HTML
<html> <head> <title>Test</title> </head> <body> <script src=myscript.js ></script> </body> </html>
Optimizaciones - HTML
<html> <head> <title>Test</title> <script src=myscript.js ></script> defer="defer"> </head> <body> </body> </html>
Networking
HTML
Puntos de Optimizacin
CSS
JavaScript
Marshalling
ASP.NET Ajax
Optimizaciones - CSS
<html> <head> <title>Test</title> </head> <body> <style> <!-.green { color:#009900;} .verde { color:#009900;} .red { { color:#660000;} .rojo color:#660000;} --> </style> </body> </html>
Optimizaciones - CSS
</html>
Optimizaciones - CSS
<html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.cs </head> <body> </body> </html>
Networking
HTML
Puntos de Optimizacin
CSS
JavaScript
Marshalling
ASP.NET Ajax
Optimizaciones - Javascript
var foo
Global
obj.foo
DOM Prototype Chain Instance
Intermediate Scopes
Local
Costo
Optimizaciones - Javascript
Optimizaciones - Javascript
Optimizaciones - Javascript
function IterarSobreColeccionWork() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work(myCollection[i]); Work } }
Optimizaciones - Javascript
function IterarSobreColeccionWork2() { var funcWork = Work; var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); funcWork } }
Optimizacion: JavasScript
<html> <head> <title>Test</title> </head> <body> <script src=myscript.js ></script> <script src=navigation.js ></script> <script src=jquery.js ></script> <script src=jquery.js ></script> <script src=jquery.js ></script> <script src=jquery.js ></script> </body> </html>
Optimizaciones - Javascript
<html> <head> <title>Test</title> </head> <body> <script src=jquery.js ></script> <script src=jquery.js ></script> <script src=prototype.js ></script> <script src=prototype.js ></script> <script src=dojo.js ></script> <script src=dojo.js ></script> <script src=animater.js ></script> <script src=animater.js ></script> <script src=extjs.js ></script> <script src=extjs.js ></script> <script src=yahooui.js ></script> <script src=yahooui.js ></script> <script src=mochikit.js ></script> <script src=mochikit.js ></script> <script src=lightbox.js ></script> <script src=lightbox.js ></script> <script src=jslibs.js ></script> <script src=jslibs.js ></script>
Networking
HTML
Puntos de Optimizacin
CSS
JavaScript
Marshalling
ASP.NET Ajax
Optimizaciones: Marshalling
Trident (MSHTML)
DOM
JScript Engine
Optimizaciones: Marshalling
function CalcularSuma() { // Obtener Valores document.body.all var nume1 = document.body.all.nume1.value; var nume2 = document.body.all.nume2.value; document.body.all
Optimizaciones: Marshalling
function CalcularSuma2() { // Cachear la coleccin de elementos var elms = document.body.all; var elms = document.body.all; // Obtener los valores var nume1 = elms elms.nume1.value; var nume2 = elms elms.nume2.value; // Calcular Resultado elms.result.value = lSide + rSide; elms }
Networking
HTML
Puntos de Optimizacin
CSS
JavaScript
Marshalling
ASP.NET Ajax
Resumen Optimizacin
1)Usar Compresin 2)Usar Request 3)Condicionales 4)Proveer Contenido Cacheable 5)Minificar Javascript 6)No escalar imgenes 7)Usar Image Sprites 8)Referenciar JScript al final 9)Agregar defer Tag 10)Referenciar Hojas de Estilo arriba 11)Disminuir las bsquedas en el Dom 12)Cachear los referencias a funciones 13)Remover Script repetidos 14)Remover funciones repetidas 15)Utilizar CDN 16)Utilizar Mejoras de ScriptManager
Cach extensible
Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
Redireccin de pginas
Problema: Al mover pginas u otros recursos, se usaba Response.Redirect emitiendo una respuesta HTTP 302 Response.Redirect (temporary moved) para enviar al cliente a la nueva direccin. Solucin: ASP.NET 4 usa el nuevo mtodo eResponse.RedirectPermanent("newlocation/page.aspx") Response.RedirectPermanent("newlocation/page.aspx") para emitir respuestas HTTP 301 (permanent moved).
Problema: Queremos mejor control del ViewState. Solucin: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit. Estrategia de implementacin: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" ViewStateMode="Disabled" %>
Enrutamiento
Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra tcnica SEO. Solucin: Configurar patrones del enrutamiento para asociar URL con las pginas Web Forms fsicas. Estrategia de implementacin: (Demo)
Enrutamiento
Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo haca que esto no fuese predecibles. Solucin: Alternativa 1.
var btn = document.getElementById("<% =Button1.ClientID %>"); var btn = $('<% =Button1.ClientID %>');
Alternativa 2. La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit.
Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
Control Chart
Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas. Solucin: Se introdujo el nuevo control Chart con varias opciones de visualizacin. En tiempo de ejecucin se genera una imagen referenciado por el usuario. Estrategia de implementacin: (Demo)
Control Chart
Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
Problema: El desarrollo en ASP.NET est lleno de sentencias <%= expression %> para enviar texto a la salida. Si no se utiliza el mtodo HttpUtility.HtmlEncode, se puede inyectar cdigo JavaScript o HTML. Ataque conocido como XSS (Cross Site Scripting).
<%: expression Solucin: Se introdujo la sentencia <%: expression %> %> generando <%= HttpUtility.HtmlEncode(expression) %>. <%= HttpUtility.HtmlEncode(expression) %> Si el texto est formateado, entonces se utiliza:
<%: new HtmlString("<div>This is already encoded< <%: new HtmlString("<div>This is already encoded</div>") %>
Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilacin y mejor soporte de IntelliSense. Solucin: Se introdujeron los HTML Helpers fuertemente Html.HelperNameFor() tipiados siguiendo la convencin Html.HelperNameFor(, pasando como parmetro una expresin lambda.
Mejoras en la validacin
Problema: La validacin de la entrada de los usuarios es un requerimiento de las aplicaciones empresariales. Solucin: La infraestructura de validacin en ASP.NET MVC 2 est diseada para tomar ventajas de la validacin mediante DataAnnotations, as como integrarse fcilmente con otros marcos de trabajo como Castle Validator o EntLib Validation. Estrategia de implementacin: (Demo)
Mejoras en la validacin
Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
Recursos
Links Comunidades (Noticias, Eventos, Contenidos, Videos) www.facebook.com/comunidadesms www.twitter.com/comunidadesms www.youtube.com/comunidadesms
62