Post on 15-Dec-2014
description
Mejores Prácticas en el Desarrollo de Sitios Web & ASP.NET Ajax
Gonzalo Pérez C.Web Developer CoroboriMVP ASP/ASP.NEThttp://www.chalalo.clTwitter:chalalochalalo@hotmail.com
Nuevas funcionalidades de ASP.NET 4
&
Juan Carlos Olamendy Turruellas
Arquitecto Principal, Exynko
Máster en Informática Empresarial
Microsoft MVP
Oracle ACEjohnx_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 etiquetas Metas• 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
«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
Optimización Web
Puntos de OptimizaciónN
etw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
Optimizaciones - NetworkingComprimir el tráfico en la red
RequestGET / 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
ResponseHTTP/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
…Habilitado desde el WebServer… Revisar que y cuanto comprimir
Optimizaciones - NetworkingProveer Contenido Cacheable
Primer RequestGET /images/banner.jpg HTTP/1.1
Host: www.chalalo.cl
Primer ResponseHTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 19 Sep 2010 00:00:00 GMTExpires: Fri, 19 Sep 2010 00:00:00 GMT
Segundo RequestGET /images/banner.jpg HTTP/1.1
Host: www.chalalo.cl
No se necesita Response
Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT
RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Sun, 22 Jul 2010 21:30:46 GMTIf-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT
Optimizaciones - NetworkingRequest Condicionales
Response
ResponseHTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Sun, 22 Jul 2010 21:30:46 GMT
Optimizaciones - NetworkingMinimizar JavaScript ( no es compresión)
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; }
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(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}')
JavaScript Original JavaScript Minimizado
Optimizaciones - NetworkingNunca redimesionar las imágenes solo en escala.
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensiones 500 x 400 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"500 x 400
Optimizaciones - Networking Nunca redimesionar las imágenes solo en escala.
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensiones: 50 x 40 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"
50 x 40
Optimizaciones - NetworkingCombinar Javascript & CDN
<script src=“miScript1.js” … ></script><script src=“miScript2.js” … ></script><script src=“miScript3.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“miScript4.js” … ></script><script src=“jQuery.js” … ></script>
Optimizaciones - NetworkingCombinar Javascript & CDN
<script src=“miScript1.js” … ></script><script src=“miScript2.js” … ></script><script src=“miScript3.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“miScript4.js” … ></script><script src=“jQuery.js” … ></script>
13
Optimizaciones: NetworkingCombinar Javascript & CDN
<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/jquery-1.4.2.min.js” … ></script>
Optimizaciones - NetworkingUsar Image Sprites
<html><head>
<title>Test</title></head><body>
…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…
</body>
</html>
<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6
Optimizaciones - Networking Usar Image Sprites
Optimizaciones - NetworkingUsar Image Sprites
<head><title>Test</title><style type="text/css">
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }</style>
</head>
<body>…<div class="a"></div> Item 1<div class="b"></div> Item 2…
</body>
<div class="a"></div><div class="b"></div>
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }
Internet Explorer 9 Network ToolsMedir las mejoras de rendimiento a nivel de Networking
- Mitificación de Script :Microsoft Ajax Minifier- Images Script
Gonzalo Pérez C.
MVP ASP/ASP.NET
http://www.chalalo.cl
Twitter: chalalo
chalalo@hotmail.com
DEMO
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
Optimizaciones - HTMLEvitar JavaScript embebido
<html><head>
<title>Test</title><script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // -->
</script></head><body>
…</body>
</html>
<script type="text/javascript"> <!-- function HolaMundo() { alert('Hola Mundo!') ; } // --></script>
Optimizaciones - HTMLEvitar referenciar 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>
<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.
Optimizaciones - HTMLPero si lo haces, utiliza el tag defer (Solo IE)
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
defer="defer">
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
Optimizaciones - CSSEvitar Estilos Embebidos
<html><head>
<title>Test</title></head><body>
<style> <!--
.green { color:#009900;}
.red { color:#660000;} --></style>
… … …
</body>
</html>
<style> <!-- .verde { color:#009900;} .rojo { color:#660000;} --></style>
Optimizaciones - CSSEvitar referenciar 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" />
Optimizaciones - CSS Referenciar 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" />
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
Optimizaciones - JavascriptMinimizar la resolución de símbolos
Global
Local
Intermediate
Scopes
DOM
Instance
PrototypeChainCosto
var foo obj.foo
Optimizaciones - Javascript Minimizar la Resolución de Símbolos
function TrabajarConVariableLocal(){
variableLocal = 5;return (variableLocal + 1 );
}
variableLocalvariableLocal
function TrabajarConVariableLocal2(){
var variableLocal= 5;return (variableLocal+ 1 );
}
variableLocal
var variableLocal
Optimizaciones - Javascript Minimizar la Resolución de Símbolos
Optimizaciones - Javascript Minimizar la Resolución de Símbolos: Funciones
function IterarSobreColeccionWork(){
var length = myCollection.length;
for(var i = 0; i < length; i++){
Work(myCollection[i]);}
}
Work
Optimizaciones - Javascript Minimizar la Resolución de Símbolos: Funciones
function IterarSobreColeccionWork2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
var funcWork = Work;
funcWork
<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>
</body>
</html>
Optimizacion: JavasScriptRemover referencias y códigos repetidos
<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
<html><head>
<title>Test</title></head><body>
……<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
Optimizaciones - JavascriptRemover Script Duplicados…Librerías
<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Puntos de Optimización
Netw
ork
ing
CSS
Trident (MSHTML)
JScript Engine
Optimizaciones: MarshallingMinimizar la interacción con el DOM
DOM
Optimizaciones: Marshalling Minimizar la interacción con el DOM
function CalcularSuma(){
// Obtener Valoresvar nume1 = document.body.all.nume1.value;
var nume2 = document.body.all.nume2.value;
// Calcular Resultadodocument.body.all.resultado.value = nume1 + nume2;
}
document.body.alldocument.body.all
document.body.all 9 Búsquedas en el DOM
Optimizaciones: MarshallingMinimizar la interacción con el DOM
function CalcularSuma2(){
// Cachear la colección de elementosvar elms = document.body.all;
// Obtener los valoresvar nume1 = elms.nume1.value;var nume2 = elms.nume2.value;
// Calcular Resultadoelms.result.value = lSide + rSide;
}
var elms = document.body.all;
elmselms
elms
3 Búsquedas al Dom
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Puntos de Optimización
Netw
ork
ing
CSS
Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager
ScriptReferenceProfiler + CompositeScriptScriptModeEnablePartialRerenderingLoadScriptBeforeUIEnableCDNToolScriptManager
Optimizaciones: ASP.NET AjaxCompresión y Cache a nivel de Web.Config
<system.web.extensions> <scripting> <scriptResourceHandler enableCompression="true" enableCaching="true"/> </scripting> </system.web.extensions>
Optimizaciones a nivel de ASP.NET AJAX
Gonzalo Pérez C.
MVP ASP/ASP.NET
http://www.chalalo.cl
Twitter: chalalo
chalalo@hotmail.com
DEMO
1)Usar Compresión2)Usar Request 3)Condicionales4)Proveer Contenido Cacheable5)Minificar Javascript6)No escalar imágenes7)Usar Image Sprites8)Referenciar JScript al final9)Agregar defer Tag10)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
Resumen Optimización
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)
Nuevas funcionalidades de ASP.NET 4
Caché extensible
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
johnx_olam@fastmail.fm
DEMO
Redirección de páginas
Problema: Al mover páginas u otros recursos, se usaba Response.Redirect emitiendo 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")
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"
Uso de etiquetas Metas
Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica Search Engine Optimization (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"
Mejor manejo 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"
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)
Enrutamiento
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
johnx_olam@fastmail.fm
DEMO
Uso de la propiedad ClientID
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.
var btn = document.getElementById("<% =Button1.ClientID %>");var btn = $('<% =Button1.ClientID %>');
Uso de la propiedad ClientID
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
johnx_olam@fastmail.fm
DEMO
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)
Control Chart
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
johnx_olam@fastmail.fm
DEMO
Soporte HTML 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>") %>
HTML Helpers fuertemente tipiados
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) %>
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 Castle Validator o EntLib Validation.
Estrategia de implementación: (Demo)
Mejoras en la validación
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
johnx_olam@fastmail.fm
DEMO
¿Preguntas?
62
Recursos
• Links Comunidades (Noticias, Eventos, Contenidos, Videos)
www.facebook.com/comunidadesmswww.twitter.com/comunidadesms
www.youtube.com/comunidadesms