Interpretar los contenidos del PDC sin agobiarse

¡Que nadie se agobie! 🙂

Hace un par de semanas fue el PDC en los Ángeles, el professional developers conference. En este evento, los grupos de producto de Microsoft nos presentan lo que nos están preparando para el futuro. Futuro a un par de años!!! de modo que nada de agobiarse por aprender C# 4.0 o VB10 ahora mismo. Los que lo estamos haciendo es porque a) Estamos intentando ver la mejor manera posible de contarlo luego, crear documentación, demos… b) Son MUY frikis y lo hacen por hobby 🙂

De todos modos, siguiendo con el ejemplo, si cualquiera queréis probar alguna de las nuevas características de los futuros lenguajes, tenéis disponible en internet una máquina virtual con los bits de Visual Studio 2010. Sinceramente, por ahora creo que a la gran mayoría de la gente no os merece la pena bajarlo, a día de hoy y teniendo en cuenta el tiempo que falta, con leeros el post y ver hacia a donde apuntan las cosas es más que suficiente 🙂

Pero por si acaso… aquí esta el enlace

Download details- Visual Studio 2010 and .NET Framework 4.0 CTP

Volvemos al PDC, como os he comentado, es un evento de tendencias, y como tal creo que hemos de tomarlo, se han dicho muchos nombres, pero a mi me gusta ver el conjunto. En definitiva

¿Qué podemos sacar en claro de todo esto?

Por un lado, con los lanzamientos de Azure y de la infraestructura de Azure Services, vemos que en el mundo del desarrollo nos acercamos hacia la nube, ya sea para alojar nuestras aplicaciones (Azure hosting), nuestros datos (SQL Services), gestión de identidades y relaciones de confianza (Genova, .NET Services)… además de ir asumiendo los modelos de desarrollo y de negocio subyacentes, como desarrolladores, si no lo estamos, nos conviene ir familiarizándonos con la programación REST, el consumo de feeds, la gestión de identidades…

Con OSLO, Quadrant y M..vemos la importancia que se le está dando a las herramientas de Modelado, sabes lo que es un modelo? sabes lo que es Model Driven Development? no?  No te preocupes…aun no sale ni en la wikipedia….casi nadie se maneja en estos términos hoy en día… pero dentro de dos años parece que van a pegar fuerte 🙂  2 años…tenemos tiempo para leer un par de artículos y ver si nos interesa, no?

Muchas sesiones y peso en Visual Studio Team Foundation… ¿qué extraemos? Que la calidad en el proceso de desarrollo de software interesa cada día más, y cuál es el Call To Action que debemos tener? Es sencillo, testing, testing, testing, testing… y metodologías, metodologías y metodologías. Si no haces pruebas en tu código ( ya no digo TDD…digo unas pruebas unitarias e tu código) ponte YA las pilas.

Mejoras en los lenguajes, C#4 y VB10. Puede que a más de uno le piten los oídos con lo que voy a decir y con la forma de simplificar los avances en el lenguaje…lo siento si es así, pero es lo que pienso sinceramente O=)  Para mi todo va en una dirección…normas un poco más laxas para centrarnos en los resultados y no en la forma.

Se añade un tipo de datos nuevo llamado dynamic. Será como int, object, string… De modo que podremos declarar una variable para que su comportamiento sea dinámico. Por ejemplo, simplificará el código las operaciones con lenguajes dinámicos (Python, javascript, Ruby…) más detalles en otro post..

Parámetros opcionales en las funciones. Esta es una funcionalidad nueva de C#. Se había pedido desde hace muuuuucho tiempo, por fin lo han incluido 😉

CoVarianza y ContraVarianza. Para simplificar las operaciones con tipos genéricos y que el compilador se comporte como nosotros esperamos en ciertas situaciones. Entraré más en detalle en el futuros posts.

Mejora de la interoperabilidad con COM. ¿Alguien dudaba de que COM seguía por ahí abajo? 🙂 Se agradece que hayan retomado el tema win32 y que se hagan esfuerzos en mejorar la compatibilidad.

Hubo muchas sesiones sobre el nuevo Visual C++ 10. De hecho una de ellas daba a entender una revolución en el mundo de los desarrolladores C++, igual fue simplemente un buen truco de marketing, pero me quedé con muchas ganas de ver «Microsoft Visual C++: 10 is the new 6» Lo tengo en tareas pendientes.

Windows 7 me sorprendió para bien, mejoras en cuanto a la usabilidad y experiencia de usuario en las tareas más habituales, sobre todo reduciendo el número de clicks para hacer lo que queremos hacer, reducir el número de notificaciones que nos aparecen por pantalla, etcétera… Se añaden características muy interesantes para el mundillo profesional, montar vhd’s como discos duros en el storage manager, poder habilitar bitlocker en llaves USB y discos duros externos, trabajar con remote desktop en múltiples pantallas… Pero lo más importante en mi opinión, es que emantiene la compatibilidad con vista (mismos drivers y mismas aplicaciciones) de modo que si te funciona con Vista o con XP… te funcionará con Windows 7 y de hecho, por lo que vimos, te funcionará más rápido 😉

Podríamos seguir poniendo nombres durante muchas páginas, pero creo que estos han sido los lanzamientos más importantes, como he dicho al principio… no os lancéis a aprender estas cosas todavía! leed entre líneas e id alineando vuestro trabajo/aprendizaje con la tendencia, no con el producto en concreto 😉

Si alguno tiene curiosidad por ver alguna sesión, hay muchas muy buenas, personalmente la que más me gustó fue la de Parallel programming for Managed developers de Daniel Moth, espectacular.

http://www.microsoftpdc.com

Happy Videos!

.NET Framework Client profile ó sku="client"

Con la cantidad de características nuevas (y entretenidas) que trae el SP1 de .NET y Visual Studio 2008 no es de extrañar que alguna de ellas nos pase desapercibidas. Seguro que la mayoría de vosotros sabéis que el SP1 trae mejoras en el rendimiento de WPF, que viene Dynamic Data, Data Services (codename astoria), el entity framework, ASP.NETMVC… pero seguro que a alguno el client profile le pilla por sorpresa 🙂

¿En qué consiste?

El .NET Framework Client Profile es una distribución del framework optimizada para aplicaciones cliente. Es sencillo, no trae las librerías orientadas a hacer trabajo en el servidor. Esta reducción hace que ocupe tan solo unos 26Mb y haga la instalación, despliegue, etcétera… más rápido y sencillo.

¿Cómo hago que mi aplicación compile utilizando ese framework?

Fácil, fácil… vamos a probarlo. Crea una nueva aplicación WPF, cuando esté creada, en el explorador de soluciones, abre las propiedades del proyecto recién creado y vete a la pestaña de aplicación

image

 

¿Ves el checkbox de «Client-only framework subset» ? Pues márcalo y listo. Estás utilizando el .NET Framework Client Profile.

¿Implicaciones?

El compilador contrastará los assemblies referenciados con una lista para ver si la aplicación cumple con los requisitos del Client Profile. En caso de encontrar un assembly no presente en el Client Profile nos mostrará un warning. Tanto en el explorador de soluciones…

image

como en la vista de errores…

image

 

Además habrá una modificación en el archivo de configuración de la aplicación, incluirá la sigueinte línea

<startup><supportedRuntime version=»v2.0.50727″ sku=»Client»/></startup>

En el caso de que la máquina cliente NO tenga .net instalado, se le pedirá que instale la parte cliente (más ligera y rápida de instalar para empezar a funcionar. Se actualizará a la full más adelante como actualización de la máquina). En caso de que este instalado .NET framework, ignorará la parte de sku=»client»

Aquí tenéis el enlace a la lista completa de espacios de nombres que están presentes en el Client Profile

http://msdn.microsoft.com/en-us/library/aa187917.aspx

OJO yo puedo referenciar un assembly que NO este disponible en el Client Profile y luego asegurarme que esta en la máquina cliente de uno u otro modo 🙂

Happy Hacking!

 

Algunos Recursos

Client Profile Q&A : http://windowsclient.net/wpf/wpf35/wpf-35sp1-client-profile.aspx

Internet Explorer 8 : A grandes rasgos

Aproximadamente a las 12am pst del 27/8/08 se lanzaba la beta 2 del Internet Explorer 8 🙂 Os enlazo al blog oficial donde lo han anunciado: http://blogs.msdn.com/ie

Iremos viendo diferentes funcionalidades y en qué puede o no interesarnos cada una de ellas, pero en este post voy a intentar aclarar ese halo que acompaña al producto y al hecho (o no) de que algunas webs no se muestren correctamente si navegamos con IE8. Profundizaremos en los modos de compatibilidad más adelante. Este post esta orientado a las personas que han oido algo, pero que todavía no se han puesto con IE8.

El grupo de IE8 ha hecho un gran trabajo a la hora de incorporar estándares dentro del producto (pasan el acid2, CSS 2.1, ARIA, UIA), al navegar con IE8, por defecto estaremos utilizando un modo de navegación que sigue a rajatabla el estándar a la hora de renderizar una página web.

La implicación directa para los desarrolladores web:

Si tu sitio web no esta desarrollado de acuerdo a los estándares puede que los usuarios que naveguen por tu web vean desplazados los bloques, imágenes… porque por defecto su IE8 va a analizar tu página de acuerdo con el estándar.

Esta beta 2 de IE8 es el momento perfecto para empezar a hacer pruebas de cómo se presenta tu sitio web de acuerdo al estándar.

HORROR!!! todos hemos hecho alguna página que se ve ‘mas ó menos’ en ie y en ffx… qué va a ser de nosotros? %dios% haz que un batallón de duendes retoque todo mi markup para que sea acorde al estándar y no me tenga que poner a cambiarlo todo

RELAX, obviamente, los del grupo de IE no iban a permitir que todo el mundo tenga que rehacer frontales, sería una barbaridad. De modo que si tu página no se renderiza igual en ie8 que en ie7, no pasa nada, no saltes todavía por la ventana con la CPU al cuello. Hay mecanismos tanto del lado del servidor como del lado del cliente para emular la presentación ie7 y que el usuario final no perciba ningún efecto. Estos mecanismos son tan complicados como hacer click en un botón ó añadir una línea en el webconfig o en la cabecera del html 🙂

Este tema de la navegación en modo estándar puede ser de lo más comentado, pero no es lo único nuevo que trae IE8, hay numerosas funcionalidades nuevas, interesantes tanto para perfiles de desarrollo, como para perfiles de IT, como para usuarios finales. Por ejemplo:

InPrivacy Browsing… Mecanismos para poder realizar una navegación en modo privado. No se guarda el historial, las cookies…

InPrivacy Blocking… Evita que sitios de terceros puedan perfilarnos en Internet sin nuestro consentimiento.

Accelerators… Selecciona texto en una página web, y a través de un menú de contexto puedes escoger que ese texto sea el parámetro de un serviico web al que invocas. Seleccionas el texto y ‘Buscar en Live’ o ‘buscar en google’ ó ‘definir en wikipedia’ ó ‘posicionar en un mapa’ !! veréis en un post futuro lo fácil que es construir estos aceleradores

y bastantes más: Web Slices, Mejoras en rendimiento de Javascript, Herramientas integradas para desarrolladores, Domain Hjighlighting, SmartScreen, Nuevas clases para potenciar AJAX, soporte de ARIA e UIA

Venga… a bajarlo y a probarlo todos! 🙂  Iré comentando por aqui algunas de esatas funcionalidades y cómo sacarles partido.

happy browsing!

Cazadores de Mitos : Firefox desarrollará un plugin para tumbar IE

Halaaaaaa… vengaaaaa.. quién da mas?

Este tipo de comentarios que se ven últimamente en internet son el efecto bola de nieve en su máxima expressión, en la medida en la que pueda intentaré ir matando alguno de esos mitos, el problema es que lleva muy poco tiempo postear el mito y agrandarlo, pero bastante el buscar las fuentes y contrastarlo :_)

A lo que vamos.

La especificación de HTML 5 propone una serie de nuevos elementos dentro de HTML, entre ellos, el Canvas. Si bien el grupo de IE8 ha hecho grandes avances en cuanto a la adopción de estándares en internet, pasa el ACID2, ha subido 2524 nuevos casos de prueba adicionales para CSS2.1.. etcétera…Por ahora el grupo de IE no ha hecho público ningún comentario sobre la adopción o no de este elemento. Están trabajando en la beta 2 de IE.

Parece ser que hay un proyecto para adaptar la implementación del Canvas de Mozilla y poder ejecutarlo en IE, Vladimir Vukicevic [1] esta trabajando en ello. COmo comentario adicional, dice que aun teniendo la implementación del Canvas, éste es solo una pieza y que puede que algun sitio no funcione porque puede echar de menos otras piezas presentes en el mundo mozilla que no esten en IE.

Para darle un contexto de ejecución controlado al canvas y que no se encuentre «sólo» hace referencia al proyecto «mono gritón» [2] que consiste en integrar un motor de javascript diferente dentro de IE, este motor sería el del proyecto Tamarin [3]. Como véis en los sitios (pq espero que no os estéis creyendo mi post y estéis contrastando fuentes) son proyectos en curso.

Siguiendo con su idea/proyecto del canvas, Vladimir comenta tb que hay que trabajar en la forma de distribución, que la experiencia de que sea un ActiveX con una infobar y que haya que aceptar no le parece adecuada.

Y ahora la parte del bulo.. en un website (arstechnica.com) [0] el autor de la noticia comenta, que si adobe arrimase el hombro al proyecto de Vladimir, todo sería más fácil porque podría ayudar con la distribución… copio textualmente:

«…This is purely speculation, but If Adobe decided to ship Screaming Monkey and the Canvas functionality as part of the next major iteration of the Flash plugin, it would rapidly accelerate adoption and get it onto lots of computers…»

Os habéis fijado en la parte de «this is purely speculation» ? 🙂 si? perfecto entonces. Parece ser que por ahora Firefox y adobe no intentan tumbar a nadie.

Conclusión ( en mi opinión personal e intransferible ):

Me encanta que se desarrolle algo tan genial para IE, cualquiera de los dos proyectos, tanto el de canvas como el de poder meter otros motores de Javascript. Al fin de al cabo, lo que todos queremos como usuarios finales es que las cosas funcionen lo mejor posible,no?

Ahora bien… con lo centrado que esta el equipo de IE8 actualmente en los estándares dudo que no tengan en proyecto la implemenación de los elementos de HTML5.

Algunos recursos:

[0] http://arstechnica.com/news.ars/post/20080819-mozilla-drags-ie-into-the-future-with-canvas-element-plugin.html

[1] http://blog.vlad1.com/2008/07/30/no-browser-left-behind/

[2] https://wiki.mozilla.org/Tamarin:ScreamingMonkey

[3] http://www.mozilla.org/projects/tamarin/

(si… mis cuentas empiezan en 9)

Happy Hunting!

Las dichosas Cross Domain Calls

 

Si desarrollas para la web, seguro que alguna vez te has enfrentadoa  una Cross Domain Call 🙂 En este post vamos a ver en que consisten, por qué existen y si hay algún metodo para evitarlas.

¿Qué es una Cross Domain Call?

Es un mecanismo de seguridad de las comunicaciones en navegadores actuales. Evitan que un script (XMLHttpRequest de AJAX) o una aplicación (Flash, Silverlight) de una página web puedan acceder a un servidor web diferente del que residen.

¿Por qué existe?

Intentan ayudar a evitar dos formas habituales de sabotaje en internet, el (1) Cross Site Request Forgery (XSRF o session riding)  y el (2) Cross Site Scripting (XSS).

(1) Un sitio web malicioso y con mala baba suplanta al usuario que esta navegando y accede a otra aplicación en su nombre. Por ejemplo, yo navego a una página malvada y ésta utiliza las cookies de mi navegador para acceder a mi flickr o banca online (o lo que sea) utilizando mis contexto ( http://migaleria/borrar?photoId=3 ).

(2) Un sitio web malicioso y promíscuo me roba información y la envía a un sitio de terceros. XSS Implica que tiene que haber una inyección de Javascript.  Por ejemplo, abro un mensaje malicioso en la intranet y este lee información de mi contexto y la envía a un tercero.

De XSS sabe bastante PHPNuke, debido a la importancia que adquirió el producto hace algunos años, todos los malotes de internet se dedicaron a intentar explotarlo para acceder a sitios en internet. Por desgracia le encontraron fallos de XSS y muchos sitios fueron comprometidos…. coders del mundo!!! que la seguridad no es un añadido, que es un requisito!!

¿Hay formas de evitarlas?

Bien es cierto que aunque sean un mecanismo de protección para el usuario final, a los desarrolladores nos tocan un poquito las narices, no? Pero como dicen las canas… no nos  preocupemos, que menos la muerte, todo tiene solución 🙂 ( hay mashups por ahi, no? )

Tenemos varias opciones para acceder a ese contenido alojado en otro servidor desde el browser donde se ejecuta nuestra aplicación, veamos las más habituales:

Proxy

Hacemos que el script o la aplicación llamen a un proxy del servicio remoto que hemos puesto en nuestro servidor web. De modo que si yo quiero información de twitter, en lugar de llamar desde Silverlight al servicio de twitter, lo que haré será llamar a un servicio web que esté en mi servidor y desde este servicio web alojado en el backend, llamar al servicio de twitter.

CrossDomain.xml   y ClientAccessPolicy.xml

Son archivos que van a indicar que el servidor ajeno a nuestra aplicación confía en las llamadas. De modo que siguiendo con lo de twitter… si estos archivos están presentes en el sevidor de twitter, y permiten acceso a nuestro dominio, podremos acceder desde las aplicaciones cliente, por ejemplo

twitter.com/crossdomain.xml  – static.flickr.com/crossdomain.xml

Para Silverlight en MSDN How to- Make a Service Available Across Domain Boundaries

En otro post veremos ejemplos específicos a Silverlight y ASP.NET AJAX 🙂

Más información sobre las Cross Domain Calls en MSDN ( Client Side Cross-Domain Security )

http://code.msdn.microsoft.com/xdsecuritywp/Release/ProjectReleases.aspx?ReleaseId=1157

Hapy Hacking!!

  Ds

Olimpiada de cursos online MSDN

 ok, si, de acuerdo, es un título horrible… pero por estas fechas algo hay que decir de los Juegos Olímpicos no? x)  Me encantan y es una verdadera pena que sean cada tanto tiempo, aunque no creo que sea yo solo verdad?  o acaso,  a alguien lo le gusta ver los 100m lisos? o venga, que levante la mano el que no se quede embobado mirando a los de saltos sincronizados o a los gimnastas en las anillas.

Me pego verdaderas jornadas maratonianas viviendo los diferidos con toda la pasión del más puro directo, eso sí.. con la certeza de cómo están las medallas asignadas pero con la curiosidad de cómo se ha llegado a ese resultado ( habéis visto el españa china en blanoncesto??? ese último cuarto y esa prorroga? mira que sabía que ganábamos pero me estaba comiendo los dedos en el diferido ).

Por otro lado, además del interés que nos pueda suscitar una u otra disciplina deportiva, hemos de reconocer que también es una manera de pasar el tiempo, no?  ( las pruebas de ciclismo en ruta, contrarreloj, marcha … anda que no pasamos minutos embobados entre que pasa y no pasa algo)  Este tiempo invertido en los Juegos Olímpicos nos plantea un problema….qué haremos cuando se acaben?

>>>Horror, pánico…. sudor frío… q será de nuestro tiempo libre?

Pues yo os tengo una propuesta O=)  al igual que el año pasado, aprovecho esta temporada que para muchos es más relajada laboralmente hablando, para recordaros la disponibilidad de los cursos online gratuitos de formación en MSDN. Seguro que encontráis alguno que os puede ayudar en vuestro día a día o en vuestro plan de carrera.

Por ejemplo:

    Curso de Expression Web

    Curso de Silverlight

    Curso de Servicios Web

   

Veréis que hay algunos que estan con la versión 2005 de Visual Studio, estamos en proceso de actualizarlos a VS2008 y .net 3.5 Iremos avisando por aquí de la disponibilidad de esos cursos.

Os lo recuerdo… adoramos el feedback, es la única manera que tenemos de mejorar y de intentar ayudaros con lo que necesitéis, a si que hacednos llegar cualquier comentario de los cursos, esta habilitado el contacto en el blog para lo que necesitéis.

Espero que os sirvan de ayuda 😉

Disfrutad de las merecidas vacaciones, de los juegos, de la cerveza con limón y happy hacking!!

Estudiante y viviendo en Madrid ( España ) ???

Al igual que el año pasado, volvemos a la carga para ver si algún estudiante se anima a venirse con nosotros de becari@ de comunidades técnicas  🙂

¿Estudiante de qué?

Preferiblemente estudios Universitarios en carrera técnica. Antes de que lo mencionéis en los comentarios, ya sabemos que no es lo más justo… hay otros estudios igual de válidos, hay personas que sin haber hecho estudios universitarios son muy válidos para el puesto y personas que acaban estudios de informática sin haber tirado una línea o tocado un cable de red, pero las condiciones de la beca son esas y dependen de recursos humanos :_) Lo sentimos.

¿Con quién trabajarías?

El departamento de Desarrollo y Plataforma de Microsoft. Somos unas 20 personas entre ‘evangelistas’, marketing, especialistas de producto y un par de managers 🙂  Algunos nombres que igual has leído por inet o visto en presentaciones por ahi…. David Carmona, Aurelio Porras, Ethel García-Simón, Alfonso Rodriguez, Beatriz Ordoñez, Milagros Moreno, Elisa Garcia, Isabel Gómez…

¿Qué es lo que vas a hacer si te unes al equipo?

Uf… puedes hacer de todo un poco y dependiendo del perfil que tengas… desde tirar líneas, ayudar en una campaña de marketing, trabajar con contenido multimedia, diseñar, trabajar con cosas de sistemas, acompañarnos a eventos / reuniones… todo depende de una combinación de lo que te apetezca hacer y lo que tengamos que hacer por guión. Nuestro departamento es un pequeño Microsoft en sí mismo y hacemos de todo un poco.

¿Hay que ser un semidios de .net para unirse al equipo?

No hace falta ser un guru de tecnología .NET / MS, además de que es un puesto para aprender (ninguno nacemos enseñado) también hay que hacer trabajo en otras áreas: diseño, multimedia, sistemas, desarrollo en otros entornos como php, java, ruby… no solo de programar en C# vive el hombre. Tú cuéntanos que es lo que sabes y que es lo que quieres aprender y vemos como cuadrarlo todo 😉

¿Dónde es la beca?

Es una beca de media jornada en las oficinas de Microsoft en Pozuelo de Alarcón en Madrid.

Si tienesn cualquier otra duda o quieres enviar el CV…

 image

Happy Hacking!

~DS

ASP.NET AJAX UpdatePanel vs ASP.NET PageMethod

He de aclarar antes de empezar que este post no intenta ahuyentar a programadores que estén trabajando o evaluando ASP.NET AJAX, simplemente pretende atraer atención sobre el hecho de que hay que tener cuidado con lo que se hace con los UpdatePanels y no usarlos para todo 😉

Pongamos una simple página ASP.NET AJAX con un botón, al hacer click tendremos una llamada AJAX al servidor para actualizar la hora que se muestra en pantalla.

Ésta es la parte relevante del código

<asp:UpdatePanel ID=»up1″ runat=»server»>
    <ContentTemplate>
        <asp:Label ID=»l1″ runat=»server» /> 
        <asp:Button ID=»b1″ runat=»server» OnClick=»actualizar» Text=»Actualizar»/>
    </ContentTemplate>
</asp:UpdatePanel>       

… el .aspx.cs …

protected void actualizar(object sender, EventArgs ea)
{
    l1.Text = System.DateTime.Now.ToLongTimeString();
}

Cada vez que se pide la información al servidor estamos haciendo una petición de este tipo

ctl02=up1%7Cb1&__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=%2FwEPDwULLTE1NzUzNjc2NjNkZPprXRC88qjwsppC6ijFSkTPpJOl

&__EVENTVALIDATION=%2FwEWAgLmpKatCgK%2B7%2BbtDMzDEjpVzHzhiCikPAfrk6sPE4AT&b1=Actualizar

y recibiendo una respuesta como esta…

129|updatePanel|up1|
            <span id=»l1″>16:43:17</span> 
            <input type=»submit» name=»b1″ value=»Actualizar» id=»b1″ />
        |112|hiddenField|__VIEWSTATE|/wEPDwULLTE1NzUzNjc2NjMPZBYCAgM
PZBYCAgMPZBYCZg9kFgICAQ8PFgIeBFRleHQFCDE2OjQzOjE3ZGRk+JnW9
BNv8dIcJmqvxt10mIGvh4w=|48|hiddenField|__EVENTVALIDATION|/wEW
AgL38IziBAK+7+btDLtfoq6BnTLgLznM9KGlIW/BK1GH|0|asyncPostBackControlIDs||
|0|postBackControlIDs|||4|updatePanelIDs||tup1|0|childUpdatePanelIDs|||3|
panelsToRefreshIDs||up1|2|asyncPostBackTimeout||90|12|formAction||Default.aspx
|27|pageTitle||Update Panel vs PageMethods|

…y teniendo en cuenta que sólo nos importa la parte en negrita… pues… como que es bastante…. El resto de información es:

En la petición… va la información del viewstate de la página, para que desde el aspx.cs podamos acceder a los controles de servidor y tomar decisiones en base a los valores (además de información de parámetros, eventos…)

En la respuesta…va la información para reconstruir gráficamente la parte de la página afectada por la operación

Pero además de la sobrecarga de tráfico generada, cuando el postback causado por la petición AJAX llega al servidor, con la información del viewstate se recrea la clase Page, se ejecutan los eventos de página, etcétera….lo cual es una sobrecarga para el servidor.

Esto no es malo, siempre y cuando vayamos a trabajar con estado nos hace falta regenerar la clase para poder tomar decisiones en base a los controles y el estado en curso. Pero en el caso que nos ocupa (obtener una fecha/dato independiente) todo esto es excesivo 🙂

Vamos a ver una alternativa que consume menos ancho de banda y menos recursos en el servidor

ASP.NET AJAX UpdatePanel vs PageMethods

Pero… que es un PageMethod???

Teniendo en cuenta que un aspx internamente es una clase System.web.Page. Un PageMethod es un método dentro de esa clase Page que cumple dos requisitos… es static y esta decorado con el atributo WebMethod. Lo que nos permiten es que podamos llamar desde javascript a un método específico de una página web aspx.

Si tenemos en cuenta que estamos obteniendo una funcionalidad concreta a través de una llamada desde Javascript, podemos decir que es algo «»»parecido»»» a un webservice.

La diferencia fundamental radica en que el PageMethod vive dentro de la página y ésta es el único cliente que puede consumirlo, mientras que el webservice es una funcionalidad que reside en un servicio accesible desde cualquier cliente, es un concepto mucho más amplio 🙂

En este ejemplo concreto podríamos llamar a un WebService en lugar a un PageMethod, conceptualmente nos da igual.

Vamos al lío….para llamar al pagemethod modificamos un poco el código cliente

Es necesario que habilitemos el trabajo con PageMethods estableciendo el valor de un flag del ScriptManager: <asp:ScriptManager runat=»server» id=»s1″ EnablePageMethods=»true» />

Esto va a crearnos un objeto Javascript que se llama PageMethods y que nos va a dar acceso a los metodos «especiales» de la página:

    <script type=»text/javascript»>
    function actualizar()
    {
        PageMethods.actualizar (actualizarOK, actualizarFAIL);
    }
    function actualizarOK(result)
    {       
        $get(‘l1’).innerHTML = result;           
    }

    function actualizarFAIL(error)
    {
        $get(‘l1’).innerHTML = «Intentelo mas tarde»;
    }
</script>   

Habéis observado que es más incómodo para el desarrollador que el UpdatePanel, dado que ahora somos nosotros los que tenemos que navegar por el DOM para actualizar la parte cliente.

En el lado cliente sólo nos falta modificar los controles ASP.NET para que apunten al Javascript

<asp:Label ID=»l1″ runat=»server» /> 
<input type=»button» id=»b1″ onclick=»actualizar();» value=»Actualizar»/>

y el servidor… configurar el método como PageMethod

using System.Web.Services;

….

[WebMethod]
public static string actualizar()
{
    return System.DateTime.Now.ToLongTimeString();
}

Lo ejecutamos…..y…vemos que se envía menos información

( De hecho en el cuerpo no va nada… vemos que la petición al servidor es un post a http://server/website/default.aspx/actualizar para invocar al servicio )

y definitivamente vuelve menos información

{«d»:»15:56:53″}

 

Porqué un PageMethod y no un WebService?

A ojo de buen cubero…si dudáis… encapsulad esa información en un webservice, así estará accesible desde más puntos..obviamente habría que ver el caso concreto para ver si realmente no merece la pena tener un webservice, esto sería si la funcionalidad va a ser específica a esa página, en ese caso tiraríamos por un PageMethod

 

Lo dicho al principio

Este post no es para desanimar a nadie en el trabajo con UpdatePanels y AJAX, es para que penséis un segundo antes de liaros la manta a la cabeza y poner updatepanels por todas partes. Funcionar….funcionará, pero… a qué coste? 🙂 

Happy hacking!

 

David Salgado

RIA y páginas con estado

Como usuarios de internet tenemos patrones de comportamiento adquiridos… imagina que estas navegando por un sitio y has llegado a un punto que no te convence. Llegados a este punto tienes básicamente 3 opciones:

1 – Hacer click en el menú de navegación e ir al paso anterior

2 – Hacer click en el típico logo para volver hasta el principio y empezar de nuevo

3 – Hacer click en el botón de atrás del navegador

Las dos primeras opciones están más trabajadas desde un punto de vista de desarrollo, pero desde un punto de vista de usabilidad, depende de cómo hayas hecho esos enlaces y dónde los hayas puesto para que el usuario los perciba o no. De accesibilidad hablaremos en otro post. La opción 3 estamos acostumbrados a que nunca falle… nos lleva a la página anterior, que conlleva tradicionalmente el estado anterior y listo!

Claro… que si estamos trabajando con aplicaciones p.ej AJAX… no esta tan claro que cada página se corresponda con un estado en la navegación por el sitio web. Al trabajar con Javascript, la parte cliente puede variar tanto como para poder considerar que ha pasado pro diferentes estados.

Esto nos puede afectar tanto a nivel de navegación, como a nivel de guardar un determinado estado en favoritos del navegador.

Imaginemos que tenemos una galería de fotos en Javascript, al hacer click en una foto la mostramos mas grande. Podríamos considerar que tenemos 2 estados diferentes, la galería y la vista detalle; pero al haber estado trabajando con Javascript, las acciones se han realizado en la misma página, de modo que cuando estamos viendo la foto en detalle, no podemos dar atrás en el navegador para ver la vista galería ni guardar la foto en favoritos. No hay un estado que podamos almacenar.

¿ Entonces ?

Bien, entonces lo que nos toca es ser capaces de serializar el estado de una página y almacenarlo de alguna forma que podamos acceder a ella. Y teniendo en cuenta las diferencias que tenemos entre navegadores… fácil, no?  x)

Para ilustrar el post he creado una pequeña aplicación de ejemplo que os podéis descargar en este enlace

Creando el estado

El estado pueden ser infinidad de cosas… cómo se esta mostrando la página, que valores tienen los controles… lo primero que debemos tener claro es qué es un estado y qué lo forma.

En el ejemplo que tenemos, el estado va a implicar una u otra foto en primer plano, de modo que lo que hemos de preservar es la dirección de la foto a mostrar.

 Almacenando el estado

Aqui es donde la matan x)  Lo más fácil a día de hoy para programadores .NET es utilizar las asp.net 3.5 extensions preview, el Microsoft.Ajax.js ha sido actualizado con unos prototipos para el manejo del estado. Tiene como ventaja que podemos trabajar con el estado tanto desde el cliente como desde el servidor.

Si os habéis descargado los laboratorios que comentaba en un post anterior, tenéis los siguientes proyectos para practicar y echarle un primer vistazo

NETFramework35Enhancements_TrainingKitLabsAspNetAjaxHistory

Hoy… por ser miércoles… vamos a hacerlo con la parte cliente de la librería.

Lo primero y muy importante …

En el scriptmanager de la página poned la propiedad EnableHistory a true

<asp:ScriptManager ID=»ScriptManager1″ runat=»server» EnableHistory=»true» >

Esto va a añadir un iframe a la página cliente para poder hacer los trucos Javascript que tendríamos que hacer nosotros a mano, si echaís un vistazo al fuente de la página en el cliente…

<iframe id=»__historyFrame» src=»/WebSite1/ScriptResource.axd?d=mfsa1_YluC_H6UGgoZq8xp82Y2Fwlt3V_nmPLNbI8rE1″ style=»display:none;»>

😉

Una vez hemos habilitado el iframe, vamos a trabajar con los nuevos objetos en javascript para manejar el historial. Primero vamos a subscribirnos al evento de navegación, así tendremos control sobre lo que pasa cuando el usuario navega

function pageLoad()
{
    Sys.Application.add_navigate(onNavegar);
}

function onNavegar(sender ,e)
{
    if (userNavigated)
    {
        restaurarEstado(e.get_state());
    }
}

La variable userNavigated nos va a ayudar a discernir entre una navegación provocada por el usuario o una provocada por nosotros desde desarrollo. Tras implementar estas funciones, sabemos que cuando el usuario navegue se va a llamar a nuestra función restaurarEstado

Como hemos dicho antes, en esta aplicación sencilla el estado va a consistir en la dirección de la imagen a mostrar, de modo que para restaurar el estado sólo hay que recuperar la imagen guardada y mostrarla

function restaurarEstado ( estado )
{
    var RutaImagen = estado.RutaImagen;
    if ( RutaImagen == null || RutaImagen == «»)
    {
        RutaImagen = ImagenXDefecto;
    }
    $get(«fotoGrande»).src = RutaImagen;
}

La variable estado la cargamos y la almacenamos nosotros cada vez que queramos almacenar un estado nuevo.

Llegados a este punto ya tenemos una aplicación que es capaz de recuperar un estado grabado y mostrarlo en la página. Lo único que nos falta es saber cómo almacenar el estado. Si miramos el código HTML, vemos que cada vez que se hace click se llama a un método que muestra la foto

<li><img src=»imgs/VisitaBilbao01.JPG» alt=»Vacas» id=»i1″ onclick=»MostrarFoto(1)»/></li>

Dada la naturaleza de la aplicación de ejemplo, esta es la acción que va a implicar que queramos almacenar un nuevo estado, porque así el usuario podrá navegar atrás y adelante por las fotos con los botones del navegador. Vamos a ver la implementación

function MostrarFoto(id)
{
    var img = «imgs/» + fotos[–id];
    $get(«fotoGrande»).src = img;
    almacenarEstado(img);
}

function almacenarEstado( img )
{
    var pageState = { «RutaImagen» : img };
    Sys.Application.addHistoryPoint(pageState,img);
    userNavigated = true;
}

Es muy sencillo, creamos un objeto con el estado de la página (pageState) y se lo pasamos como parámetro a Sys.Application.addHistoryPoint. El segundo parámetro que recibe es el nombre con el que se va a almacenar ese estado en el historial. El echo de añadir un nuevo estado, internamente va a trabajar contra el iframe y va a provocar una navegación, para diferenciar esta navegación de una iniciada por el usuario, marcamos el userNavigated a true.

y listo 🙂

 

Otras opciones

Como comentaba más arriba, podéis utilizar infinidad de frameworks javascript o controles descargados de internet para que os gestionen el estado, de hecho si os animáis podéis programaros el vuestro propio…

<bricomania> mantenéis un hashtable indice/estado, cada vez que haya un nuevo estado, se marca la url con el índice nuevo y se añade el nuevo estado al hashtable. Cuando el indice de la url no se corresponda con el indice actual, recuperáis del hashtable con el índice de la url como base y establecéis el nuevo estado en la página…. </bricomania>

…bien.. no es tan fácil… hay que lidiar con las diferencias entre navegadores, ver cuándo cambia la url y en base a qué, tener en cuenta navegación hacia atrás y hacia adelante… realmente un framework os ahorrará bastante tiempo 🙂

Happy Hacking

Ds

Lectura interesante sobre el tema de almacenar y recuperar estado

http://yuiblog.com/blog/2007/02/21/browser-history-manager/
http://weblogs.asp.net/bleroy/archive/2007/09/07/how-to-build-a-cross-browser-history-management-system.aspx

Un poco de windbg aplicado…

Ayer Rodrigo planteó un problema curioso en su blog, dios que rabia me dio no tener las herramientas instaladas en el portatil que tenía en casa!!!  sólo tenía ie y una tarjeta 3G para navegar por la red, a si que ni si quiera pude bajármelas :_)


Pero esta mañana me he puesto con ello en cuanto he llegado a la oficina 😛


Ahí va la aproximación que yo he seguido para intentar atajar el problema.


(Nota: Por si alguien lo intenta resolver… tened en cuenta que las direcciones de memoria vana  variar siempre y tenéis que buscar las que os apliquen a vosotros)


Empezando con el problema


Como es Rodrigo quien dice que la aplicación pierde memoria, pues me lo creo y listo, así que asumo que una vez la ejecute va a empezar a crecer la memoria. Hay un montón de herramientas para ver cómo crece la memoria, que tipo de memoria es la que crece, etcétera… una de las alternativas es adjuntar un depurador al proceso y pararlo cada X tiempo para ver como esta la memoria del proceso.


Herramientas


Como depurador he utilizado el WinDBG, diponible en las debugging tools for windows


Depurando el proceso


Compilamos y ejecutamos el ejemplo que nos pone Rodrigo.


Arrancamos WinDBG y Vamos a File .. Attach To Process y escogemos el proceso que acabamos de arrancar (buscad el pid adecuado).


image 


En la ventana de command del depurador vemos información del proceso, esta parado esperando a que introduzcamos alguna orden.


image


Por ahora no vamos a hacer nada… vamos a volver a activar el proceso para que siga corriendo un rato y empiece a cargarse la memoria, de modo que en la ventana de comandos, introducimos el comando g y damos a intro


image


Al de un minuto (por ejemplo) pulsamos ctrl + break … asi pararemos el proceso e inspeccionaremos su estado actual. Dado que Rodrigo nos ha dicho que es un problema de memory leak… vamos a tiro hecho y buscamos información sobre objetos que se acumulan en el managed heap (normalmente no es tan fácil y hay que invertir tiempo en determinar a que tipo de problema de memoria te enfrentas)


Obteniendo la información de referencia


Lo primero que vamos a hacer es cargar la SOS.dll. Esta librería es una extensión del depurador que nos va a permitir movernos por estructuras de datos manejadas por el CLR, de modo que nos facilita la depuración de código .net. Para cargarla ejecutamos este comando


.loadby sos mscorwks


Una vez esta cargada la extensión podemos usar sus comandos. Vamos a ver cuales son los objetos que hay en el managed heap


!dumpheap -stat


De la salida del comando nos quedamos con las últimas líneas (mayor número de objetos en memoria) y guardamos los números para poder compararlos en la próxima parada


790fd8c4     5632       345980 System.String
003ec570       18       4064392      Free
7912d8f8     2514      4291592 System.Object[]
79104c38   771803    12348848 System.WeakReference


Una vez apuntado, volvemos a ejecutar el comando g y dejamos que el proceso corra durante otro rato, para ver si varían los números.


…. ( minutos musicales mientras el proceso corre ) …


Volvemos a pararlo de nuevo con ctrl + break y volvemos a mostrar los objetos en el managed heap como antes


790fd8c4     5632       345980 System.String
003ec570       19      8258724      Free
7912d8f8     3678      8516160 System.Object[]
79104c38  1308060     20928960 System.WeakReference

Vemos que los Strings se han conservado, pero las WeakReferences han crecido ( 12348848 vs 20928960 ). Es recomendable hacer este proceso unas cuantas veces para tener mas muestras y poder establecer una tendencia 🙂


Una vez vemos que las weakreferences crecen, hemos de saber porqué…. a si que entramos en modo diagnostico diferencial de house…


house> ¿por qué no se liberan?


chase> será lupus?


cameron> no creo.. puede ser que alguien mantenga una referencia a ellos y por eso no los recoja el GC


house> ok.. analitica completa, TAC, rajadlo y mira las referencias que apuntan a los objetos weakreference


Para mirar las referencias, primero necesitamos saber la dirección en memoria de los objetos. Tomemos la salida del comando !dumpheap -stat, si nos fijamos en la fila relativa a las wekreferences


79104c38  1308060     20928960 System.WeakReference


El primer valor es la MethodTable del tipo, ahora que la conocemos, podemos ejecutar un comando que vuelca todos los objetos de una determinada method table


!dumpheap -mt  79104c38 


(el resultado hara scroll en pantalla varias veces, podéis pararlo con Ctr+break) Ahí tenemos todos los objetos del tipo, vamos a ver quién les esta referenciando y manteniéndolos vivos. La salida del comando tiene el siguiente formato: Dir.Objeto Dir.MethodTable Tamaño


Tomamos unas cuantas direcciones de objeto y ejecutamos el siguiente comando sobre ellas


!GCRoot dir del Objeto


Nos muestra la relación de referencias que mantienen vivo al objeto. Vemos al volcar unas cuantas que hay System.Collections.Generic.List que las referencia


0:003> !GCRoot 02497570
Note: Roots found on stacks may be false positives. Run «!help gcroot» for
more info.
Scan Thread 0 OSTHread 179c
Scan Thread 2 OSTHread 1624
DOMAIN(003E4AC0):HANDLE(Pinned):a13f0:Root:02df3030(System.Object[])->
01df4300(System.Collections.Generic.List`1[[System.WeakReference, mscorlib]])->
035d52e0(System.Object[])->
02497570(System.WeakReference)


Para seguir asegurando…


Volcamos la genericList y vemos su tamaño


!do 01df4300


79102290  40009c8        c         System.Int32  1 instance  1308060 _size


dejamos correr un rato al proceso ( g ) y volvemos a comprobar el tamaño del objeto ( ejecutamos el mismo comando )


79102290  40009c8        c         System.Int32  1 instance  1524568 _size

BINGO!!!  va creciendo woooooohoooooo


Si estuviésemos en un proyecto grande habría que localizar el assembly y volcar el código para ver que pasa…. como estamos en un ejemplo pequeño es fácil… no hay ningun array en nuestro código.. a si que con ayuda de reflector miramos la clase TraceSwitch… que nos lleva a Switch… y al siguiente código (resumido)


   lock (switches)

   {

       switches.Add(new WeakReference(this));

   }

El array switches crece indefinidamente y no se liberan las weakReferences (se liberan los strings a los que apuntan las weakreferences pero no estas en sí)

y ahora qué?

Pues he estado mirando por la web y no puedo decir aun si es un bug o si hay alguna consideración que nos hayamos saltado a la hora de trabajar con el TraceSwitch, en cuanto lo sepa os lo cuento

<update 28/4/08>
Tenemos respuesta del grupo de producto, es un bug corregido para la próxima major relase de .net 🙂
</update 28/4/08>

Happy Hacking!

David Salgado