1. MejoresPrácticasen el Desarrollo de SitiosWeb & ASP.NET Ajax & Nuevas funcionalidades de ASP.NET 4 Gonzalo Pérez C.Web Developer CoroboriMVP ASP/ASP.NEThttp://www.chalalo.clTwitter:chalalochalalo@hotmail.com Juan Carlos OlamendyTurruellas Arquitecto Principal, Exynko Máster en InformáticaEmpresarial Microsoft MVP Oracle ACE johnx_olam@fastmail.fm
2. Agenda de Hoy Optimización Web Networking HTML CSS JavasCript Marshalling ASP.NET AJAX Lo Nuevo de ASP.NET 4.0 Caché extensible Redirección de páginas Compresión del Session State Uso de etiquetasMetas Mejor control del ViewState Enrutamiento en páginas Web Forms Uso de identificadores del cliente Control Chart Expresiones con soporte Html Encoding Mejoras en ASP.NET MVC 2 2
3. Optimización Web «En la mayoría de las páginas web, menos del 10 - 20% del tiempo de carga de una página , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir» - Steve Souders
4. Puntos de Optimización Networking Networking HTML JavaScript Marshalling ASP.NET Ajax CSS
5. Optimizaciones - NetworkingComprimir el tráfico en la red Response Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 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 Accept-Encoding: gzip, deflate Content-Encoding: gzip …Habilitadodesde el WebServer … Revisarque y cuantocomprimir
6. Optimizaciones - NetworkingProveerContenido Cacheable Primer Request GET /images/banner.jpg HTTP/1.1 Host: www.chalalo.cl PrimerResponse 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 Host: www.chalalo.cl No se necesita Response
21. Optimizaciones- HTMLEvitarreferenciar o escribir JavaScript en el Head <html> <head> <title>Test</title> <script src=“myscript.js” … ></script> </head> <body> … </body> </html> <script src=“myscript.js” … ></script>
22. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <script src=“myscript.js” … ></script> Optimizaciones- HTMLReferenciar o escribir JavaScript al final de la página.
23. Optimizaciones - HTMLPerosi lo haces, utiliza el tag defer (Solo IE) <html> <head> <title>Test</title> <script src=“myscript.js” … ></script> </head> <body> … </body> </html> defer="defer">
24. Puntos de Optimización Networking Networking HTML JavaScript Marshalling ASP.NET Ajax CSS
26. Optimizaciones- CSSEvitarreferenciar CSS al final de la página <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <link rel="stylesheet" type="text/css" href=“mystyles.css" />
27. Optimizaciones - CSSReferenciar el archivo de estilos en el head. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <link rel="stylesheet" type="text/css"href="class.css" />
28. Puntos de Optimización Networking Networking HTML JavaScript Marshalling ASP.NET Ajax CSS
29. Optimizaciones - JavascriptMinimizar la resolución de símbolos varfoo obj.foo Costo DOM Global Prototype Chain Intermediate Scopes Instance Local
30. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos function TrabajarConVariableLocal() { variableLocal= 5; return (variableLocal+ 1 ); } variableLocal variableLocal
31. function TrabajarConVariableLocal2() { varvariableLocal= 5; return (variableLocal+ 1 ); } varvariableLocal variableLocal Optimizaciones - JavascriptMinimizar la Resolución de Símbolos
32. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones function IterarSobreColeccionWork() { var length = myCollection.length; for(vari = 0; i < length; i++) { Work(myCollection[i]); } } Work
33. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones function IterarSobreColeccionWork2() { varfuncWork = Work; var length = myCollection.length; for(vari = 0; i < length; i++) { funcWork(myCollection[i]); } } varfuncWork = Work; funcWork
37. Trident (MSHTML) JScript Engine Optimizaciones: MarshallingMinimizar la interacción con el DOM DOM
38. Optimizaciones: MarshallingMinimizar la interacción con el DOM function CalcularSuma() { // ObtenerValores var nume1 = document.body.all.nume1.value; var nume2 = document.body.all.nume2.value; // CalcularResultado document.body.all.resultado.value = nume1 + nume2; } document.body.all document.body.all document.body.all 9 Búsquedas en el DOM
39. Optimizaciones: MarshallingMinimizar la interacción con el DOM function CalcularSuma2() { // Cachear la colección de elementos var elms = document.body.all; // Obtener los valores var nume1 = elms.nume1.value; var nume2 = elms.nume2.value; // CalcularResultado elms.result.value = lSide + rSide; } var elms = document.body.all; elms elms 3 Búsquedas al Dom elms
47. Optimizaciones a nivel de ASP.NET AJAX DEMO Gonzalo Pérez C. MVP ASP/ASP.NET http://www.chalalo.cl Twitter: chalalo chalalo@hotmail.com
48. Resumen Optimización 1)Usar Compresión2)Usar Request3)Condicionales4)Proveer Contenido Cacheable5)MinificarJavascript6)No escalar imágenes7)Usar ImageSprites8)Referenciar JScript al final9)Agregar deferTag10)Referenciar Hojas de Estilo arriba11)Disminuir las búsquedas en el Dom12)Cachear los referencias a funciones13)Remover Script repetidos14)Remover funciones repetidas15)Utilizar CDN16)Utilizar Mejoras de ScriptManager
49. Nuevas funcionalidades de ASP.NET 4 Caché extensible Problema: Si hay mucho tráfico, la necesidad de memoria aumenta, y existe competencia por la memoria que es un recurso limitado. Solución: La caché extensible permite configurar uno o más proveedores de caché ( asociados a mecanismo de almacenamiento). Estrategia de implementación: (Demo)
50. Caché extensible DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
51. Redirección de páginas Problema: Al mover páginas u otros recursos, se usaba Response.Redirectemitiendo una respuesta HTTP 302 (temporary moved) para enviar al cliente a la nueva dirección. Solución: ASP.NET 4 usa el nuevo método eResponse.RedirectPermanent("newlocation/page.aspx")para emitir respuestas HTTP 301 (permanent moved). Response.Redirect Response.RedirectPermanent("newlocation/page.aspx")
52. Comprensión del Estado de Sesión Problema: Se almacena una gran cantidad de objetos en el estado de sesión. Solución: ASP.NET 4 incorpora la opción de compresión del estado de sesión. Los datos se comprimen (descomprimidos) usando la clase System.IO.Compression.GZipStream. Estrategía de implementación: <sessionState mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/> compressionEnabled="true"
53. Uso de etiquetasMetas Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica SearchEngineOptimization (SEO). Solución: ASP.NET 4 incluye las propiedades MetaKeywords y MetaDescription a la clase Page. Además se incluyen los atributos Keywords y Description en la directiva @Page. Estrategia de implementación: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_01WebAppOutputCacheDemo._Default" Keywords="This is the default page" Description="This is the default page" %> Keywords="This is the default page" Description="This is the default page"
54. Mejormanejo del ViewState Problema: Queremos mejor control del ViewState. Solución: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit. Estrategia de implementación: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" %> ViewStateMode="Disabled"
55. Enrutamiento Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra técnica SEO. Solución: Configurar patrones del enrutamiento para asociar URL con las páginas Web Forms físicas. Estrategia de implementación: (Demo)
56. Enrutamiento DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
57. Uso de la propiedadClientID Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo hacía que esto no fuese predecibles. Solución: Alternativa 1. Alternativa 2. La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit. varbtn = document.getElementById("<% =Button1.ClientID %>"); varbtn = $('<% =Button1.ClientID %>');
58. Uso de la propiedadClientID DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
59. Control Chart Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas. Solución: Se introdujo el nuevo control Chart con varias opciones de visualización. En tiempo de ejecución se genera una imagen referenciado por el usuario. Estrategia de implementación: (Demo)
60. Control Chart DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm
61. SoporteHTML Encoding automático Problema: El desarrollo en ASP.NET está lleno de sentencias <%= expression %> para enviar texto a la salida. Si no se utiliza el método HttpUtility.HtmlEncode, se puede inyectar código JavaScript o HTML. Ataque conocido como XSS (Cross Site Scripting). Solución: Se introdujo la sentencia <%: expression %> generando <%= HttpUtility.HtmlEncode(expression) %>. Si el texto está formateado, entonces se utiliza: <%: new HtmlString("<div>This is already encoded< <%: expression %> <%= HttpUtility.HtmlEncode(expression) %> <%: new HtmlString("<div>This is already encoded</div>") %>
62. HTML Helpersfuertementetipiados Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilación y mejor soporte de IntelliSense. Solución: Se introdujeron los HTML Helpers fuertemente tipiados siguiendo la convención Html.HelperNameFor(, pasando como parámetro una expresión lambda. Estrategias de implementación: <%= Html.TextBoxFor(model=>model.ProductName) %> Html.HelperNameFor() <%= Html.TextBoxFor(model=>model.ProductName) %>
63. Mejoras en la validación Problema: La validación de la entrada de los usuarios es un requerimiento de las aplicaciones empresariales. Solución: La infraestructura de validación en ASP.NET MVC 2 está diseñada para tomar ventajas de la validación mediante DataAnnotations, así como integrarse fácilmente con otros marcos de trabajo como CastleValidator o EntLibValidation. Estrategia de implementación: (Demo)
64. Mejoras en la validación DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm