Variable not found

[Auges] Vídeo y materiales del webcast sobre SignalR. ¡uau!

2012-05-28T16:30:00.000+02:00

Como sabéis, el pasado jueves tuve el placer de hablar sobre SignalR en un Webcast organizado por Auges, el grupo de usuarios de ASP.NET de España.

Ante todo, agradeceros a los asistentes que decidierais pasar esa tarde con nosotros. Una audiencia bastante numerosa para estos tiempos que corren, y un gran número de amigos que os quedasteis hasta el final las dos horas que estuvimos hablando sobre esta pequeña maravilla. Incluso hubo quien comentó que se le habían hecho cortas ;-) Muchas gracias a todos.

La charla la empezamos hablando sobre HTTP, y las limitaciones de éste en escenarios en los que el tiempo real era un requisito imprescindible. Sobrevolamos soluciones tradicionales como el polling, presentamos el concepto Push, revisamos los estándares que están en la cocina por parte de IETF y W3C, y explicamos técnicas que podemos usar hoy en día para implementar aplicaciones en las que el servidor debe tomar la iniciativa en la comunicación con el cliente.

Seguidamente, tras una breve presentación de SignalR, entramos de lleno en terreno práctico, implementamos desde cero varias demostraciones de las capacidades del framework y revisamos otro buen número de ellas, mediante las cuales intenté mostrar las bases de la programación con esta joya: conexiones persistentes, hubs, acceso a clientes desde procesos externos, e incluso llegamos a implementar un cliente con Windows Forms.

Un total de ocho demos que espero que hayan conseguido transmitir mi entusiasmo por este framework, y las posibilidades que brinda a la hora de dotar a nuestros sistemas de la espectacularidad que sólo los sistemas colaborativos, multiusuarios y en tiempo real son capaces de proporcionar.

Bueno, a lo que iba en el post… el caso es que ya está disponible el vídeo y los materiales de la charla:

Ver/descargar grabación de la charla (en el mismo sitio de registro del evento)
Descargar material (PPTs, Solución para Visual Studio). Encontraréis también los cupones descuento que CampusMVP y Manning han ofrecido a los asistentes.

¡Hasta la próxima!

Publicado en Variable not found.

Enlaces interesantes 84

2012-05-28T09:12:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 21 al 27 de mayo de 2012. Espero que os resulten interesantes :-)

Otros

La experiencia es un peine
José Manuel Alarcón
Code Reviews
Boris Lipschitz

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

AllowAnonymous en ASP.NET MVC 4

2012-05-22T09:45:00.000+02:00

Desde el principio de los tiempos, ASP.NET MVC dispone de un mecanismo muy sencillo para controlar el acceso a acciones, basado en los sistemas de autenticación por formulario estándar de ASP.NET.

A grandes rasgos, el asunto consiste en decorar acciones, o incluso los controladores completos, con el atributo [Authorize], de forma que si el usuario no ha superado el procedimiento de autenticación, no se podrá acceder a ellas. Además, gracias a los parámetros admitidos por este filtro, es posible indicar qué usuarios concretos pueden ejecutar la acción, o qué roles son los permitidos:

public class CustomersController : Controller
{
    [Authorize(Roles = "manager")]
    public ActionResult Delete(int id)
    {
        // TODO: Delete a customer
    }

    //...
}

Sin embargo, había algunos escenarios que eran algo molestos de implementar usando esta técnica. Imaginad que estáis desarrollando una web totalmente privada, en la que es necesario incluir el atributo [Authorize] a todos los controladores: el ideal sería utilizar filtros globales, ¿no? En vez de modificar cada uno de los controladores, haríamos lo siguiente en el global.asax.cs:

    public static void RegisterGlobalFilters(GlobalFilterCollection filters)
    {
        filters.Add(new HandleErrorAttribute());
        filters.Add(new AuthorizeAttribute());
    }

Y como casi todo en la vida, no es tan sencillo. Este atributo afectaría a las acciones que retornan las vistas del propio formulario de login, por lo que simplemente no sería posible acceder a la aplicación. Lógicamente hay varias soluciones para este problema; por ejemplo, podríamos introducir a mano el filtro en los controladores, o incluso mejor aún, crear un controlador base con el atributo y heredar de él todos los controladores menos los destinados a facilitar la identificación del usuario.

ASP.NET MVC 4 introduce un nuevo filtro, denominado [AllowAnonymous] cuya utilidad seguro que podéis deducir en este momento: aplicado a un controlador o acción, hace que se ignore en éste cualquier posible atributo [Authorize] que pudiera haberse aplicado al mismo. De hecho, en la misma plantilla de proyectos MVC 4 ya vemos que se utiliza bastante en el controlador AccountController , tradicionalmente destinado a realizar las tareas de conexión, registro y desconexión de usuarios:

    [Authorize]
    public class AccountController : Controller
    {

        //
        // GET: /Account/Login

        [AllowAnonymous]
        public ActionResult Login()
        {
            // ... 
        }
    }

Y este post podría acabar aquí, pero hay una curiosidad que quería comentar sobre la forma en que está implementado este filtro. Si observamos su código fuente, vemos que es, poco más o menos, así:

namespace System.Web.Mvc 
{  
   [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, 
                   AllowMultiple = false, Inherited = true)] 

   public sealed class AllowAnonymousAttribute : Attribute 
   { 

   } 
}

Salvo la metainformación contenida en el AttributeUsage, el resto es una clase vacía (!). Aunque al principio puede parecer raro, es muy lógico: la magia la pone el atributo [Authorize] en cuya implementación encontramos la lógica que posibilitará la ejecución de una acción si se encuentra decorada (ella o su controlador) con [AllowAnonymous], saltándose todas las comprobaciones de autorización:

bool skipAuthorization = 
    context.ActionDescriptor.IsDefined(typeof(AllowAnonymousAttribute), inherit: true)
    || context.ActionDescriptor.ControllerDescriptor.IsDefined(
                typeof(AllowAnonymousAttribute), inherit: true);

if (skipAuthorization)
{
    return; 
}

Publicado en Variable not found.

Enlaces interesantes 83

2012-05-21T10:39:00.001+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 14 al 20 de mayo de 2012. Espero que os resulten interesantes :-)

.Net

Introducing “dotPeek” - A free .NET Decompiler by JetBrains
Kunal Chowdhury
C#/.NET Little Wonders: Select() and Where() with Indexes
James Michael Hare
Post-increment Operator and Precedence
Chris Eargle
Var en c# si, o var no y Var (II).Los hermanos de Simba
Pedro Hurtado
.NET 4.5 Improvements for Cloud and Server Applications
S. Somasegar
Creating Type Aliases in C#
Richard Carr
Six important .NET concepts: Stack, heap, value types, reference types, boxing, and unboxing
Shivprasad koirala
El misterioso caso de la ListBox con un solo elemento
Eduard Tomás
[Pregunta] Sobre métodos extensores
Luis Ruiz Pavón

Asp.net

Generación de clases POCO
Juan Manuel Fenoll
ASP.NET Web API – Aplicando Validaciones
Sebastián Henzenn
Additional Considerations When Using ASP.Net MVC Cross-site Request Forgery Prevention
Ed Hintz
ASP.NET Web API Updates – May 14
Henrik F. Nielsen

Data access

Introduction to Redis on Windows & Redis usage with .NET
Code Inside Team
EF5 Release Candidate Available on NuGet
Entity Framework Team

Html/Css/Javascript

Múltiples Backgrounds con CSS 3
Gisela Torres
SASS vs. LESS
Chris Coyier
jQuery/JavaScript Tools and Plugins Worth Checking Out
Louis Lazaris
Quick Tip: Telling Knockout to Skip Binding Part of a Page
Ryan Niemeyer
CSS Media Queries (Responsive Web Design)
Gisela Torres
Mejorando el rendimiento con el API DOM desde Javascript
Carlos Benítez
Multiple var statements in JavaScript, not superfluous
Ben Alman

Visual Studio/Complementos/Herramientas

Introducing Testing Domain - localtest.me
Scott Forsyth
My Favorite Features: Improved Tooling in Visual Studio 11 for JavaScript Developers
Jason Zanders

Otros

Drosophila, ajedrez e innovación en la empresa tecnológica
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

[Auges] Webcast sobre SignalR: ¡uau!

2012-05-16T13:53:00.000+02:00

Simplemente informaros de que el próximo jueves 24 de mayo a las 19:00h (hora peninsular española), participaré en una charla con AUGES sobre SignalR, esa pequeña maravilla de la que ya os he hablado por aquí en varias ocasiones, una ayuda imprescindible a la hora de crear sistemas interactivos, multiusuario y en tiempo real para la web.

El “cartel” oficial del evento es el siguiente:

SIGNALR: APLICACIONES MULTIUSUARIO, ASÍNCRONAS, Y EN TIEMPO REAL. ¡UAU!

¿Te has preguntado alguna vez cómo es posible que en una aplicación web como Google Docs varios usuarios puedan interactuar de forma simultánea? ¿Te interesa la tecnología que usan los grandes como Facebook o Twitter para informarte en tiempo real de que algo ha ocurrido? ¿Piensas que crear un chat basado puramente en ASP.NET no es tarea sencilla? ¿Te gustaría que el servidor pudiera enviar información a los clientes en cualquier momento, sin esperar a que éstos soliciten una página o recurso?

Si has respondido que sí a alguna de estas preguntas, SignalR te entusiasmará. Es un marco de trabajo open source que permite saltarse las barreras impuestas por HTTP y su clásico modelo de petición/respuesta para conseguir aplicaciones más interactivas, dinámicas y colaborativas, en las que el servidor toma la iniciativa.

No te pierdas este evento y aprende a poner un factor “¡uau!” en tus desarrollos.

Os recuerdo que se trata de un Webcast, o sea, que podéis asistir a este evento desde vuestro sillón favorito, acompañados de una buena cerveza y un saco de palomitas. Y por supuesto, es totalmente gratuito.

Lo único que debéis hacer para poder asistir es registraros:

Día: jueves 24 de mayo, 19:00h (hora peninsular española)
URL del registro: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032512978&Culture=es-ES

No me faltéis, que paso lista ;-)

Enlaces interesantes 82

2012-05-14T09:15:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 7 al 13 de mayo de 2012. Espero que os resulten interesantes :-)

.Net

What JavaScript taught me about C# – Understanding ‘Access to modified closure’
Sean Blakemore
Cargar información de reflection sin cargar el assembly
Eduard Tomás
Hebras, lambdas… y bugs
Juan María Hernández
Creating an FTP Server in C#
Rick Bassham

Asp.net

Output caching in ASP.NET Web API
Filip W.
How to Include Views in ASP.NET MVC & WebMatrix Razor
Chris Love
WebAPI Parameter binding under the hood
Mike Stall
Another early look at jQuery UI Grid in ASP.NET MVC – Data Types, Dataview, Pager, Sorting and Filtering
Tomasz Pęczek
Download Files in ASP.NET MVC 3 using Controller Action
Mahesh Sabnis
Passing multiple POST parameters to Web API Controller Methods
Rick Strahl
Knockout 2.1 Is Out
Ryan Niemeyer
El scroll infinito
Pedro Hurtado
A XAML Guy digs into ASP.NET MVC4 (Part 2 of ?)
Michael Crump
In memory client, host and integration testing of your Web API service
Kiran Challa
There’s a Tool for That: 13 Essential Tools for the Ninja Web Developer
Joshua Holt
Implementing WebSockets in WCF 4.5
Peter Vogel
ASP.NET Web API paso a paso
Sebastián Henzenn
ASP.NET MVC Authentication - Customizing Authentication and Authorization The Right Way
Jon Galloway
Extending ASP.NET MVC Account Registration with Workflow (WF4)
Ron Jacobs
API Improvements made in SignalR 0.5
David Fowler

Azure / Cloud

Microsoft Renames Azure Services
Martin Brinkmann

Conceptos

GUID guide, part three
Eric Lippert

Data access

OrmHate
Martin Fowler
EF5 Sample Provider Published
Pawel Kadluczka

Html/Css/Javascript

Cross-Browser Debugging CSS
Nicole Sullivan
Prototypes in JavaScript
Leigh Kaszick
Working with files in JavaScript, Part 1
Nicholas C. Zakas
HTML5 Audio — The State of Play
Mark Boas
Native HTML5 push notifications with ASP.NET Web API and Knockout.js
Filip W.
14 Reasons Why Nobody Used Your jQuery Plugin
Jonathan Cutrell

Visual Studio/Complementos/Herramientas

dotPeek 1.0 is Released
Jura Gorohovsky (vía @hhariri)
Etiquetando,haciendo crecer nuestro árbol del repositorio de código y Branching, haciendo crecer nuestro árbol del repositorio de código
Juan Quijano
Visual Studio 11 User Interface Updates Coming in RC
Monty Hammontree

Otros

The Floppy Disk means Save, and 14 other old people Icons that don't make sense anymore
Scott Hanselman

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

6 años 6. Y de la variable, ni rastro…

2012-05-09T12:33:00.000+02:00

“De hoy no pasa”. Era 8 de mayo de 2006; aunque no puedo recordarlo, seguro que estuve toda la jornada trabajando con mi flamante Visual Studio 2005 en algún proyecto basado en un primitivo ASP.NET.

Lo que sí sé es que al llegar a casa inicié Windows XP, abrí Internet Explorer 6 y navegué hacia blogger.com con la intención de crear un blog. No tenía grandes aspiraciones, pero estaba seguro de que la travesía iba a ser larga.

Desde entonces, a veces con más acierto y otras con menos, he intentado ir dejando plasmado por aquí todo aquello que me ha parecido que podía interesar a alguien, o incluso serme útil en el futuro: novedades, trucos, tecnologías, herramientas, artículos… Y seis años después, tras más de quinientos post, más de mil comentarios, más de medio millón de consultas, no puedo hacer otra cosa que agradeceros el apoyo que siempre habéis dado los protagonistas más importantes en este proyecto: vosotros.

Y ahora, como viene siendo costumbre, vamos a hacer un breve análisis retrospectivo de estos años, en los que hemos pasado por distintas etapas.

Año 1: la travesía del desierto (mayo 2006 - mayo 2007), en el que sólo yo visitaba el blog. Triste pero cierto. Los que habéis empezado una bitácora en solitario reconoceréis este patrón de visitas, donde los picos que superan las cinco páginas vistas al día se deben, con toda seguridad, a pruebas propias.

Dicen que muchos blogs mueren en este primer año de vida precisamente por el escaso retorno que tiene la inversión de tiempo que requiere su puesta en marcha, pero según he comprobado, sólo es cuestión de paciencia: si le pones empeño, entusiasmo y cariño, es posible cambiar las cosas.
Año 2: el despegue (mayo 2007 - mayo 2008), me lo tomé algo más en serio y comencé a difundir los posts por RSS (hasta entonces no lo hacía!), a utilizar el dominio variablenotfound.com, di al sitio un diseño más atractivo y alejado de las plantillas estándar de Blogger, lo incluí en directorios y agregadores, y comencé a hacer crossposting en geeks.ms. Todas estas acciones se tradujeron en un incremento del 2.500% del número de visitas, y acabamos el año con 380 suscriptores al feed. Impresionante.
Año 3: la consolidación (mayo 2008 – mayo 2009), en el que no realicé cambios de calado, pero ya empezó a notarse la antigüedad del blog y su aumento de posición en buscadores. Ese año crecimos en número de visitas un 75% y más del 100% en suscriptores a los feeds.
Año 4: la variable social (mayo 2009 – mayo 2010), donde comencé a utilizar Facebook y Twitter como canales adicionales de difusión. Mientras, continuaba creciendo el número de amigos del blog, rozando ya los 100.000 usuarios únicos absolutos al año (sumando las visitas de variablenotfound.com y su eco en geeks.ms).
Año 5: la variable física (mayo 2010 – mayo 2011). En este periodo lo más destacable fue, sin duda, el haber “salido de la cueva” y comenzar a participar en eventos de la comunidad como el TTT/Open Day, en la gira Make Web Not War de Microsoft, o a relacionarme con grupos locales y, sobre todo, a conocer en persona a gente estupenda a los que seguía desde mucho tiempo atrás. Y ya en el terreno más virtual, más de 10.000 visitas/mes al blog y de mil suscriptores a los RSS seguían haciendo crecer este proyecto.

Año 6 (mayo 2011-mayo 2012): Variable premiada

Siempre he pensado que no hay mejor premio que el hecho de poder escribir sobre lo que me gusta, y que estéis siempre ahí… pero eso no quita que puedan alegrarte otro tipo de reconocimientos, y es uno de los principales hitos de este año que ahora cerramos :-)

El nombramiento como Microsoft MVP el pasado mes de julio fue un inesperado alegrón de esos que dejan marca, y que sirven como aliciente para seguir trabajando duro. Como diría su majestad, es para mí un orgullo y una satisfacción el poder entrar a formar parte de esta familia, y un privilegio poder compartir buenos ratos con gente a los que considero auténticos números uno en todos los sentidos. Y bueno, por no hablar de la oportunidad de asistir al MVP Summit y conocer la sede de Microsoft, que ha sido la experiencia del año.

Respecto al blog, seguimos creciendo de forma considerable. Según Google Analytics este año hemos registrado un incremento del 40% respecto al año pasado. En estos momentos, se consultan más de 200.000 páginas al año en variablenotfound.com; si sumamos las consultas a los mismos artículos realizadas desde geeks.ms llegaríamos a los 300.000.

También siguen en ascenso las otras fórmulas para relacionarse con la comunidad de la variable. El número de amigos que prefieren acceder a los contenidos a través de RSS, han crecido más del 20%, superando ya los 1.350 suscriptores. En Twitter rondamos los 500 followers, lo que supone un incremento mayor del 100%, y la página de Variable not found en Facebook supera los 350 amigos (+80% respecto al año pasado).

En general, Variable not found sigue siendo un blog humilde y de poca monta en términos generales, pero, teniendo en cuenta su gran verticalidad temática, estas cifras son bastante buenas según entendidos en la materia. Y para un servidor, sencillamente espectaculares: jamás pensé que estas pequeñas aportaciones pudieran llegar a mover alrededor tal cantidad de personas :-)

Por citar algunas curiosidades, la “marca” de navegador más utilizada, independientemente de sus versiones, para acceder al blog ha sido Chrome, seguida muy de cerca por Firefox, y bastante más rezagado, Interner Explorer. Este trío sigue concentrando el 95% de las visitas. También entran este año en escena otros dispositivos, entre los que destaca de forma especial el iPad de Apple, abarcando el 90% de la navegación móvil.

El 90% de los lectores usan Windows, algo bastante lógico, pero aún el 31% de ellos continúan con la versión XP. Afortunadamente, Windows 7 ya es el más utilizado (¡hasta ahora no era así!), con un 60% del total.

Google sigue siendo la principal fuente de tráfico, aunque este año han aparecido con fuerza meneame.net, desarrolloweb.com, y genbetadev.com, en gran parte artífices del aumento de visitas registrado, y los lectores proceden principalmente de España, México, Argentina, Colombia y Perú. Tenemos amigos en todo el mundo :-)

“¿Y qué sacas tú de esto?“, me preguntan algunos. Y la respuesta sigue siendo la misma que hace seis años: el aprendizaje continuo, el disfrute de escribir sobre temas que me apasionan, la satisfacción de saber que hay artículos que ayudan a alguien, los comentarios, mails y feedback que recibo y la gente que he podido conocer gracias a ello. Ya, intangible, pero seguro más enriquecedor y valioso que otras cosas palpables a las que a menudo prestamos tanta atención.

Un millón de gracias a todos los que lo hacéis posible, y espero veros por aquí un año más, ayudándome a buscar la variable.

Login único para subdominios en ASP.NET

2012-05-08T09:15:00.000+02:00

Imaginad que tenemos un sistema web de cierto volumen y decidimos estructurarlo en aplicaciones independientes, cada una publicada en un subdominio propio:

www.acme.org, que sería el sitio principal.
crm.acme.org, con el sistema CRM de la empresa.
erp.acme.org, con un sistema de gestión empresarial.
administration.acme.org con las herramientas de administración del sistema.
etc.

Desde un punto de vista operativo, es probable que nos interese suministrar un mecanismo de autenticación de usuarios compartido entre todas estas aplicaciones, de forma que el usuario, una vez identificado, pueda pasar de una a otra sin necesidad de introducir de nuevo sus credenciales.

No es una tarea complicada en ASP.NET, aunque hay que hacer algunos ajustillos para que todo funcione correctamente. Veámoslos.

Primero: ampliar el alcance de la cookie

Como sabemos, el procedimiento estándar de autenticación consiste en comprobar que las credenciales suministradas por un usuario son correctas (con membership o cualquier otro mecanismo), y en caso afirmativo, generar una cookie con información encriptada sobre el mismo. Esta cookie, llamada por defecto “.ASPXAUTH”, viaja en las sucesivas peticiones hacia el servidor, de forma que éste puede comprobar que el usuario ha sido autenticado satisfactoriamente con anterioridad.

El problema es que por defecto esta cookie es específica para cada host, por lo que sólo estará disponible para el dominio desde el que ha sido generada, con todos sus subdirectorios. Así, cuando se supera el procedimiento de autenticación y se crea la cookie (por ejemplo llamando a FormsAuthentication.SetAuthCookie()), lo que se enviará al servidor en los encabezados de la respuesta es lo siguiente:

Set-Cookie: .ASPXAUTH=F1E37685DF9CBED74094D02958BA239B4AEAA0BDEF2FF379A2E2C5A    

                      4B7F9AC271B7F14BCFFE3E18799434EE8886CF4A0227E6BE92BC91E     

                      34601D0FCC18D3F1786D5060329DB578DF2BB5148F6AB2972D72C3D     

                      B17A437CE977660E552B92A6E5F981F3E6CE6037065244E1F0AB0BD     

                      A570D61DEB02; path=/; HttpOnly

Pues bien, para conseguir nuestros objetivos, lo primero que nos interesa es asegurar que esta cookie estará disponible en los subdominios del dominio desde la cual se ha generado.

Afortunadamente podemos configurar bastantes aspectos del sistema de autenticación basado en formularios simplemente tocando un poco el web.config, y en este caso simplemente debemos indicar el dominio (de segundo nivel) para el cual queremos que la cookie sea válida, incluyendo sus subdominios. en el parámetro domain:

  <authentication mode="Forms">
    <forms loginUrl="~/Account/LogOn" timeout="2880" domain="acme.org" />      
  </authentication>

El valor de este parámetro será el nombre del dominio raíz del que colgarán todos los subdominios a los que haremos la cookie visible. Una vez introducido este valor en el web.config, la cookie de autorización será la siguiente:

Set-Cookie: .ASPXAUTH=4A67B460978D78217D52248318EB68717E857D7C08012057D0B6731

                      896E0E4EB9023AD2C02024CFB7D190617CCCD97FBA1E6ED484CE3FF

                      3581E7C8BE31FA204508F5ABB0DF994ADD698369132A5AF932AFF40

                      A267422C9ABCA86E620B9041ABB2E97C516880960F3D8193B209616

                      5978108AB500; domain=acme.org; path=/; HttpOnly

Este cambio tendremos que hacerlo únicamente en la aplicación que genere la cookie, es decir, aquella que incluya la implementación del procedimiento de autenticación del usuario. En nuestro caso, por ejemplo, podría ser la aplicación “raíz”, www.acme.org.

Segundo: encriptar la cookie usando una clave común

Esa secuencia de letras y números que veis en la cookie no es más que el resultado de encriptar la información que necesita ASP.NET para mantener información sobre el usuario autenticado. Esta encriptación se realiza utilizando un algoritmo y unas claves específicas para cada sitio web, que por defecto son generadas de forma automática.

Así, si queremos que distintos sitios web puedan desencriptar la cookie y acceder a su contenido, lo cual es fundamental para mantener el usuario conectado, debemos hacer que todos ellos compartan el algoritmo y clave de encriptación. Esto se hace desde el web.config estableciendo estos aspectos en la entrada <machineKey>:

... 

<system.web>       

    <machineKey        <!-- ¡Ojo no copiar y pegar! -->

         validationKey="6171035B16CD1EE0E401BA3E7348DE49FA9FB9C043B3CDE3BA4FF

                        EDDC84B167C68B83916FAD8AEE4CFEE001AD5CEA8A4B3E28D51F9

                        D5EA55CD5F276E67B71FC6"

         decryptionKey="3F12339F897F687F4456FEC2446167C621BDE5F664178CBEF9AF0

                        40DB82EC806"

         validation="SHA1"

         decryption="AES"

    />

    ... 

</system.web>

Puedes generar este elemento usando el generador de MachineKey online, copiar el código y pegarlo en la sección <system.web> del web.config de todos los sitios web, raíz y subdominios, de la aplicación.

A partir de este momento ya podemos probar el sistema completo en funcionamiento. Si el mecanismo de autenticación se encuentra en www.acme.org, la autorización viajará al navegar por todos sus subdominios (crm.acme.org, erp.acme.org…), éstos serán capaces de desencriptar las credenciales y, por tanto, el usuario permanecerá logado en el sistema.

Tercero: ajustar Redirecciones

Dado que hemos considerado que todas las aplicaciones son privadas, con toda seguridad estarán protegidas contra accesos de usuarios no autenticados.Por ejemplo, en ASP.NET MVC probablemente tengamos todas las acciones protegidas con un filtro [Authorize], o en WebForms tendremos secciones <authorization> en el web.config para denegar el acceso a todas sus funcionalidades.

En cualquier caso, nos interesa que los usuarios no autenticados sean redirigidos a la aplicación desde la cual pueda autenticarse, por lo que podemos debemos indicar la URL de la página de login en el parámetro loginUrl como sigue:

    <authentication mode="Forms">
      <forms loginUrl="http://www.acme.org/account/logon" timeout="2880">
      </forms>
    </authentication>

Este cambio sería necesario hacerlo en todas las aplicaciones a las que no vamos a permitir el acceso anónimo (crm.acme.org, erp.acme.org, …), con lo que aseguramos que cualquier intento de entrada de usuarios no autenticados será redirigida al sitio principal, desde el cual podrá identificarse.

Cuarto: retocar la URL de retorno y procesarla tras la autenticación

Casi hemos acabado, pero aún hay un detalle cuya solución no es tan inmediata como los puntos anteriores.

Cuando se produce la redirección hacia la página de login, automáticamente se añade a la petición un parámetro llamado ReturnUrl donde se almacena la URL a la que estaba intentado acceder el usuario. Esto permite devolverlo a ella una vez se haya autenticado en el sistema.

El problema es que este parámetro no incluye el host, por lo que en una aplicación distribuida en distintos dominios esta información se perderá. Es decir, si un usuario intenta acceder directamente a erp.acme.org/customers/index, será redirigido a la URL http://www.acme.org/account/logon?ReturnUrl=customers/index para ser autenticado, y cuando esto ocurra, el sistema no tiene información suficiente como para devolverlo a la página a la que deseaba ir en un principio (en erp.acme.org).

Lamentablemente no podemos “influir” en la forma en que ASP.NET genera el contenido para este parámetro al redirigir al usuario, por lo que o bien hacemos nosotros la redirección de forma manual al detectad que el usuario no se ha autenticado, o bien nos introducimos en algún punto avanzado del ciclo de ejecución de la petición para modificar el valor original del parámetro.

Un primer acercamiento de la implementación de esta última opción podría ser la siguiente, implementando el evento Application_EndRequest (en el global.asax.cs, válido tanto en MVC como en Webforms):

protected void Application_EndRequest(object sender, EventArgs e)
{
    if (Response.StatusCode == (int)HttpStatusCode.Found && !Request.IsAuthenticated)
    {
        string redirectUrl = this.Response.RedirectLocation;
        if (redirectUrl.Contains("ReturnUrl="))
        {
            var host = HttpUtility.UrlEncode(
                            "http://" +
                            this.Request.Url.Host +
                            (Request.Url.IsDefaultPort ? "" : ":" + Request.Url.Port));
            Response.RedirectLocation = redirectUrl.Replace("ReturnUrl=", "ReturnUrl=" + host);
        }
    }
}

Como podéis observar, simplemente intentamos detectar cuándo la respuesta enviada al cliente es una redirección, y si el usuario no está autenticado y existe un parámetro ReturnUrl, lo modificamos para que presente también el host (y puerto). De esta forma, ya llegará a la página de login la dirección completa a la que hay que enviar el usuario cuando supere la autenticación.

Y por último, ya lo único que quedaría sería implementar la redirección a la URL suministrada en el parámetro ReturnUrl una vez confirmada la identidad del usuario, es decir, tras establecer la cookie.

Eso sí, tened un poco de cuidado antes de redirigir y comprobad que la dirección a la que vais a enviarlo forma parte de vuestro sitio (por ejemplo, comprobando que el host de destino pertenece a acme.org) para evitar la vulnerabilidad Open Redirect.

Publicado en Variable not found.

Enlaces interesantes 81

2012-05-07T09:32:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 30 de abril al 6 de mayo de 2012. Espero que os resulten interesantes :-)

.Net

C#/.NET Little Wonders: The Enumerable.Repeat() Static Method
James Michael Hare
More fun with DateTime
Jon Skeet
IDisposable for Dummies #1 – Why? What?
Paul Ballard
[C# Básico] Métodos con parámetros variables
Eduard Tomás
C#/.NET Little Wonders: The Enumerable.Range() Static Method
James Michael Hare

Asp.net

Griffin.MvcContrib – The plugin system
Jonas Gauffin
ASP.NET MVC4 Validando que un campo sea true o checked
Sergio Marrero
SignalR 0.5
David Fowler
ASP.NET MVC 4 NUnit template
Geoff Hudik
Learn MVC (Model view controller) Step by Step in 7 days – Day 1
Shivprasad Koirala
A XAML Guy digs into ASP.NET MVC4 (Part 1 of –)
Michael Crump
GZip/Deflate compression in ASP.NET MVC
Rick Strahl
ASP.NET Web API Updates – April 27
Henrik F Nielsen
Using Razor V2 in ASP.NET MVC 3
Imran Baloch
Using Nightly ASP.NET Web Stack NuGet Packages
Henrik F Nielsen
Nightly signed NuGet packages are available for ASP.NET MVC, WebAPI y WebPages
Brad Wilson

Azure / Cloud

How to Use Twilio for Voice and SMS Capabilities from Windows Azure
Windows Azure

Conceptos

GUID guide, part two
Eric Lippert

Data access

Con esto cerramos los proxis dinámicos de EF
Pedro Hurtado
Entity Framework 4.3.1 Migrations and non English locale
Simone Chiaretta

Html/Css/Javascript

JavaScript Style Guides And Beautifiers
Addy Osmani
CSS: The Good Parts
Louis Lazaris
A Basic jQuery Plugin using the Module Pattern
Sam Deering
Closures: Front to Back
Brian Scaturro
Starter: jumpstart your jQuery plugins Doug Neiner
More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile
Abu Obeida

Visual Studio/Complementos/Herramientas

Develop HTML5 Windows Phone Apps with Apache Cordova
Colin Eberhardt
[Tip] Usar NuGet sin tener que subir los paquetes a nuestro repositorio de código fuente
Luis Ruiz Pavón

Otros

Create Android AngryBirds Game Using WiEngine SDK -Part 1
Xianzhong Zhu
Comportarse como un grillo
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Enlaces interesantes 80

2012-04-30T09:32:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 23 al 29 de abril de 2012. Espero que os resulten interesantes :-)

.Net

Obsoleted Types, Methods and Migration Guide and more for .Net 4.5 (Beta)
Greg Duncan
Si necesitas crear ficheros Excel en tu aplicación .NET, no necesitas tener Excel instalado usa el Open XML SDK
Vía @wasat
CLR 4.5: Multicore Just-in-Time (JIT)
Ahmed Elmalt
Validando sin parar. Uso de DataAnnotations.
Jorge Serrano
[C# Básico] Paso por referencia
Eduard Tomás

Asp.net / WCF

Razor tip: Escaping the "@" character
Mike Pope
Internet Explorer and Cookie Domains
Rick Strahl
Live data - starring the jQuery Grid, WebSockets and KnockoutJS
Damyan Petev
REST vs. RPC in ASP.NET Web API? Who cares; it does both.
Dave Ward
Buscando al culpable
Pedro Hurtado
Moving in and Out of SSL HTTPS in C# MVC ASP .NET
Kory Becker
ASP.NET MVC & jQuery UI autocomplete
Stuart Leeks
Getting a 'base' Domain from a Domain
Rick Strahl
[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (II)
Luis Ruiz Pavón
Patrón Interfaz Marcadora (II)
Jorge Serrano
Generating ASP.NET MVC View Controls According to Xml Configurations
Gil Fink
ASP.NET MVC Postbacks and HtmlHelper Controls ignoring Model Changes
Rick Strahl
ASP.NET Web API Content Negotiation and Accept-Charset
Henrik F Nielsen
RSS & Atom MediaTypeFormatter for ASP.NET WebAPI
Filip W.

Azure / Cloud

Fun with the Service Bus (Part 1)
Jim O’Neil

Conceptos

GUID Guide, part one
Eric Lippert
Patrón Interfaz Marcadora (I)
Jorge Serrano

Data access

SQL Server- enviar automáticamente los resultados de una consulta por email
José Manuel Alarcón
EF Code first, soportando enumeraciones en nuestras entidades
Rafa Hernández

Html/Css/Javascript

Rounding Numbers in JavaScript
Kirupa Chinnathambi
A Pure CSS3 Cycling Slideshow
Alessio Atzeni
JSIL: transform .NET assemblies into javascript
Vía @migueldeicaza
Swiftcore.js: un contenedor IoC para Javascript
Juan María Hernández
Entendiendo los prototipos en JavaScript
Programania.com
5 things they told you not to use in JavaScript
Thomas Fuchs
JavaScript language a- z cheat sheet
Alex Staveley
Fighting the Space Between Inline Block Elements
Chris Coyier
turn.js: transition similar to real pages in a book or magazine for HTML5
Vía @genbetadev
jQuery Documentation Resources to Speed Up Your Development
Dan Wahlin

Visual Studio/Complementos/Herramientas

CodeFluent Entities
Juan Laó
Why VisualStudio is taking a huge time to Load Components while debugging?
Kunal Chowdhury
Replacing Tags and Custom Code Analysis in HTML
Hadi Hariri
LoadStorm: Cloud Load Testing Tool
Vía @luisruizpavon

Otros

Hyperlink Spoofing and the Modern Web
David Ross
Load "Feliz Cumpleaños Spectrum"
Carlos Zahumenszky
Las cinco mentes del futuro
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Más características de Razor con MVC 4 y Web Pages 2

2012-04-24T09:25:00.000+02:00

Hace poco comentamos algunos detalles sobre las novedades que incluirá Razor 2, la versión que será incluida en ASP.NET MVC 4, y siguen apareciendo más novedades destinadas a mejorar la calidad del código y nuestra productividad al crear las vistas MVC o Web Pages.

En este post vamos a ver otros comportamientos de Razor en distintos escenarios.

Cerrado implícito de etiquetas

La versión anterior de Razor daba problemas con un código como el siguiente:

@if(passwordNeeded) 
{
    <input type="password" name="password">
}

La página no compila y genera una excepción en tiempo de ejecución debido a que la etiqueta <input> no se ha cerrado explícitamente usando la sintaxis de autocierre <input … /> o bien mediante el cierre de toda la vida </input>.

En Razor 2 se ha creado un parser mucho más complejo, en el que, entre otras cosas, se tienen en cuenta los llamados void elements por la W3C, que son aquellas etiquetas que en ningún caso pueden tener contenido: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track y wbr.

Cuando Razor se encuentra con alguna de estos elementos, si la etiqueta inmediatamente posterior no es la que lo cierra, asumirá que éste está cerrado de forma automática, por lo que el código mostrado anteriormente será válido.

Rutas con partes variables

Ya vimos que el nuevo Razor será capaz de interpretar el gusanillo (~) directamente, de forma que ya no será necesario utilizar esos verbosos @Url.Content() a la hora de referenciar recursos como scripts, imágenes u hojas de estilo:

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>

Pues bien, el caso es que las rutas especificadas de esta forma no tienen por qué ser una cadena constante, sino que pueden incluir variables, como en el siguiente ejemplo:

@{
    var scriptsFolder = "scripts";
}
<script type="text/javascript" src="~/@scriptsFolder/jquery-1.7.1.js"></script>

Lo que hace Razor en este caso es interpretar y obtener la dirección teniendo en cuenta desde el gusanillo hasta la primera barra, insertar el contenido de la variable, y seguirlo del resto de la cadena constante. El equivalente con la versión anterior (MVC3) de Razor sería algo así:

<script type="text/javascript" src="@Url.Content("~/")@scriptsFolder/jquery-1.7.1.js"></script>

Atributos condicionales con varios valores

También vimos en el post anterior que cuando Razor 2 tenía que generar el contenido de un atributo cuyo valor era null, no generaba ni si quiera el nombre del atributo, lo que al final se traducía en un código más sencillo y compacto:

@{
    string nullValue = null;
    string stringValue = "hello";
}
<span class="@nullValue" id="@stringValue"></span>
 
GENERA:
<span id="hello"></span>

Pues bien, este comportamiento funciona incluso cuando en el atributo aparecen valores procedentes de más de una expresión. Aquellas cuyos valores sean nulos no serán generadas (ni siquiera el espacio en blanco que la separa de las demás), y si todas ellas son nulas el atributo no será generado:

@{
    string nullValue = null;
    string stringValue = "hello";
    string otherNull = null;
}
<span class="@nullValue @stringValue @otherNull"></span>
<span class="@nullValue @otherNull"></span>
 
GENERA:
<span class="hello"></span>
<span></span>

Tratamiento de atributos booleanos

Otro detalle muy interesante lo tenemos al escribir valores para atributos booleanos, como disabled, checked o similares. Lo habitual en la versión 1 de Razor para generar apropiadamente estos atributos era hacer algo así:

@{
    string disabled = "";
    if(condition)
    {
        disabled = "disabled='disabled'";
    }
}
<button @Html.Raw(disabled)>Click!</button>

GENERA (dependiendo del valor de condition):
<button >Click!</button>                
<button disabled="disabled">Click!</button>

La nueva versión de Razor permite ser mucho más directo y explícito en estos casos. Introducimos directamente el booleano como valor del atributo; si es true, el valor del atributo será su mismo nombre, mientras que si es false el atributo no será renderizado:

<button disabled="@condition">Click!</button>

GENERA (dependiendo del valor de condition):
<button>Click!</button>                
<button disabled="disabled">Click!</button>

Y eso es todo de momento. Seguiremos atentos a las novedades e iremos contándolas por aquí, como de costumbre :-)

Publicado en Variable not found.

Enlaces interesantes 79

2012-04-23T09:25:00.001+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 16 al 22 de abril de 2012. Espero que os resulten interesantes :-)

.Net

DirectoryInfo.GetFiles returns too many files
Paw Jershauge
Who knows Enumerable.Range(...)?
Andreas Gieriet
Serie: Task Parallel Library and Servers
Brad Wilson
Reflecting Inherited Member Information
Richard Carr
Extract jpg or png images from a PDF
Jean-Pierre Hellemons
Building Expression Evaluator with Expression Trees in C#
Giorgi Dalakishvili
[C#] Parallel.For
Andrés Pérez

Asp.net / WCF

ASP.NET Web API: Extending content negotiation with new formats
Gunnar Peipman
ASP.NET Web API: How content negotiation works?
Gunnar Peipman
Making MVC 3 Razor IntelliSense work after installing MVC 4 Beta
Sebastian Nilsson
Gestión de excepciones con WCF – REST
Luis Ruíz Pavón
Vídeo: Infraestructura (ASP.NET MVC)
Lucas Ontivero
How WebAPI does Parameter Binding
Mike Stall
Webforms: Forzar postbacks
Eduard Tomás
Cleaning up ASP.NET MVC Controllers
Paul Stovell
Catálogo en ASP.NET MVC3 sin usar BBDD
Eduard Tomás

Azure / Cloud

Announcing Windows Azure Media Services
Scott Guthrie
Hadoop en Windows Azure (V)
Ibón Landa

Conceptos

Vídeo: Un caso contra Null Object Pattern
Lucas Ontivero

Data access

Open DBDiff: open source database schema comparison tool for SQL Server 2005/2008
Esteban Grinberg
EF Data Annotations and Code Fluent
Nadege Deroussen

Html/Css/Javascript

Triangle With Shadow
Chris Coyier
jQuery + CSS3 Media Queries = Dynamic UX
Michael Ceranski
jQuery Tip #7 - Consolidating jQuery Ajax Calls
Dan Wahlin
Saving the Day with Scoped CSS
Arley McBlain
Inyección de dependencias en Javascript (y otros lenguajes dinámicos)
Juan María Hernández
Html5 Offline Cache Integration with ASP.NET MVC Bundle
Kazi Manzur Rashid
Yepnope.js, a conditional loader for your polyfills
Alex Sexton / Ralph Holzmann
All The Cheat Sheets That A Web Developer Needs
Bogdan
Hammer.js añade soporte de gestos táctiles a tu web
desarrolloweb.com
[Tips] Como cambiar el ícono del cursor en una página web
Gonzalo Pérez
jQuery plugin: wrap text around a bezier curve or a line
David Hudson
jQuery 1.7 Event Binding: .on() & .off()
Jack Franklin
10 Cool Premium jQuery Countdown Scripts
jQuery4u
Visual Studio 11 Express for Web for Front End Development - JavaScript/HTML5/CSS3
Scott Hanselman

Visual Studio/Complementos/Herramientas

dotPeek 1.0 Beta Available
JetBrains, vía @hhariri
10 illustrated examples of Visual Studio 11
Troy Hunt
Visual Studio 11 Fakes Part 1 – Stubs
Peter Provost

Otros

PDF: Referencia rápida a patrones de diseño
Vía @kunfu_code
Farseer tutorial for the absolute beginners
Bil Simser
The Real Pain of Software Development [part 2]
Phil Haack

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Las 20 mejores tiras cómicas sobre desarrollo de software

2012-04-18T08:31:00.000+02:00

De vez en cuando surgen en Stackoverflow geniales hilos como este, que te alegran el día en que los descubres. En este caso miles de usuarios proponían, votaban y debatían sobre cuál es la viñeta o tira cómica favorita de los programadores y otros especímenes de nuestra fauna digital.

Y las veinte más votadas, auténticas joyas algunas de ellas, fueron las siguientes...

20. Programadores de verdad

Original: http://xkcd.com/378/

19. La aleatoriedad es así

Original: http://dilbert.com/strips/comic/2001-10-25/

18. Vistamos la mona de seda

Original: desconocido

17. Metodologías ágiles

Original: http://dilbert.com/strips/comic/2007-11-26/

16. El token escurridizo

Original: http://dilbert.com/strips/comic/1996-05-02/

15. Días productivos

Original: http://www.i-marco.nl/weblog/images/breakdown.png

14. Nuevos superhéroes

Original: http://xkcd.com/208/

13. Lo primero es lo primero

Original: http://xkcd.com/386/

12. Software personalizado

Original: http://dilbert.com/strips/comic/2007-02-02/

11. Cuidado con las malas prácticas

Original: http://xkcd.com/292/

10. Ballmer peak

Original: http://xkcd.com/323/

9. Déjame, estoy compilando

Original: http://xkcd.com/303/

8. Gerentes con criterio

Original: http://dilbert.com/strips/comic/1995-11-17/

7. Ingeniería de requisitos

Original: http://dilbert.com/strips/comic/2006-01-29/

6. Constantes aleatorias

Original: http://xkcd.com/221/

5. Métricas avanzadas

Original: http://www.osnews.com/story/19266/WTFs_m

4. Simplifiquemos

Original: http://stuffthathappens.com/blog/2008/03/05/simplicity/

3. Vale, si te pones así…

Original: http://xkcd.com/149/

2. Bueno, más o menos es lo mismo, ¿no?

Original: projectcartoon.com

1. Padres con conciencia social

Original: http://xkcd.com/327/

¡Y esto es todo! Si queréis ver bastantes más, en el hilo de stackoverflow podéis seguir deleitándoos con más genialidades de este tipo.

Publicado en Variable not found.

Knockout (I): pongamos orden en el lado cliente

2012-04-17T09:45:00.000+02:00

La programación web tradicional, basada en el modelo de petición-respuesta de página completa, no requería demasiado código en cliente más allá que el necesario para realizar validaciones y lógica de presentación simple: ¿para qué complicarnos en cliente si podíamos hacerlo todo en servidor?

De hecho, durante la era Webforms, la célebre pareja formada por viewstate y postback llevaban a servidor prácticamente la totalidad de la lógica de presentación mediante el artificio de la programación por eventos, y el código cliente necesario para que todo funcionara era generado de forma automática por ASP.NET en su mayor parte.

Esta lógica de presentación podía estar (y de hecho muchas veces estaba) mezclada con tareas de control e incluso con lógica de negocio, y los desarrolladores empezamos a hacernos conscientes de los monstruos que estábamos creando. Esta preocupación provocó la aparición de soluciones que pretendían estructurar los sistemas de forma razonable, separando las responsabilidades y, en definitiva, poniendo un poco de orden en ese caos.

Implementaciones del patrón MVP, MVVM, o incluso el framework ASP.NET MVC son ejemplos del resultado de esta inquietud. Aunque con matices, todos estos enfoques permiten separar la lógica de negocio, control y presentación en “capas” relativamente independientes.

Sin embargo, la programación web está cambiando, o mejor dicho, lo ha hecho ya ;-). El pesado modelo tradicional petición-respuesta de página completa está siendo relegado en favor de interfaces más ágiles y dinámicos que se basan en el aprovechamiento de la capacidad del cliente para realizar una gran cantidad de tareas a través del uso intensivo de scripting y Ajax.

¿Y a dónde nos lleva este cambio de paradigma? Pues, entre otras cosas, a que el volumen de código script en nuestras páginas ha crecido de forma desmesurada y, debido a ello, se incremente exponencialmente la complejidad en el lado cliente.

Pero como ocurrió en el lado servidor, enseguida han comenzado a aparecer soluciones que nos ayudan a estructurar el código cliente usando patrones ya usados en el otro lado, como MVVM, MVP, o MVC.

En esta serie de posts estudiaremos el uso de Knockout.js, una biblioteca javascript que facilita la creación de interfaces ricas y dinámicas basándose en el patrón MVVM.

¿El patrón MVVM?

MVVM, Model-View-ViewModel, es un patrón de diseño de la capa presentación definido en 2005 por John Gossman, de Microsoft, adaptando el Presentation Model de Fowler a las particularidades de las tecnologías en las que estaba trabajando (WPF).

De forma muy similar a MVC, esta arquitectura divide los componentes en tres grupos.

El Modelo básicamente contiene datos de forma totalmente independiente de cómo vayan a ser presentados en el UI, y casi siempre sin comportamiento. Por ejemplo, podrían ser clases o entidades planas del dominio de la aplicación.

La Vista contiene los elementos del interfaz necesarios para comunicarse con el usuario, como etiquetas, cuadros de texto, botones, desplegables, etc. Por ir centrándonos en el contexto que nos interesa, la vista es puro lenguaje de marcado (HTML, XAML…), y no contiene lógica de ningún tipo. Tanto los datos que necesita para componer la UI como el comportamiento de los elementos en pantalla los toma del View-Model usando mecanismos como el binding (después entraremos en esto).

El Modelo-Vista, o View-Model, es una abstracción sobre la Vista que contiene tanto los datos como el comportamiento de ésta, pero sin conocer los detalles sobre cómo está implementada. En cierto sentido podríamos considerar que es similar a un controlador en MVC. Es el encargado de transformar y formatear la información del Modelo para que pueda ser representada en la vista y, de la misma forma, se encarga de recibir y gestionar las acciones del usuario y actualizar el Modelo cuando es necesario.

Para los desarrolladores ASP.NET MVC, el concepto podría asimilarse con una clase ViewModel, a la que además se han incorporado métodos para gestionar los eventos desencadenados por el usuario durante la interacción con la aplicación.

Pero sin duda, una de las piezas clave en este patrón es el binding, o enlace, tanto de datos como de acciones entre las capas View y View-Model.

En la práctica, este mecanismo permite indicar sobre la Vista, de forma declarativa, qué propiedades del Modelo-Vista se corresponden con cada uno de los componentes del interfaz de usuario, estableciendo un vínculo uni o bidireccional sobre ambos.

Por ejemplo, podríamos tener un cuadro de texto en la Vista vinculado a una propiedad llamada “Nombre” en el View-Model, de forma que cuando el valor de la propiedad cambiara automáticamente se reflejaría en el valor del cuadro de texto, y cuando el usuario modificara el cuadro de texto el valor de la propiedad también sería actualizado de forma automática. Con esto conseguimos mantener Vista y View-Model perfectamente sincronizados sin ningún tipo de esfuerzo por parte del desarrollador.

Y al igual que es posible enlazar elementos del interfaz con propiedades del View-Model, también podemos enlazar de forma declarativa acciones o eventos del usuario a comandos, o métodos definidos sobre el mismo View-Model. Por tanto, y valga como ejemplo, el tratamiento del clic sobre un botón lo implementaríamos en un método del Modelo-Vista, mientras que en la Vista lo único que haríamos es bindear (enlazar) el evento click del botón a dicho método.

¿Qué es Knockout?

Knockout.js es una biblioteca de scripts desarrollada por Steve Sanderson que implementa el patrón MVVM con el objetivo de facilitarnos la creación de interfaces de usuario de edición y visualización de datos, usando una estructura simple, limpia y mantenible en nuestro código.

Es bastante compacta (~40Kb sin comprimir), no depende de ninguna otra biblioteca para funcionar y funciona con todos los navegadores razonablemente actualizados. Es open source, se distribuye bajo licencia MIT y está muy bien documentada en su sitio web (incluyendo unos tutoriales interactivos bastante buenos).

Sus características principales, que conforman las ventajas que nos aporta a los desarrolladores, son:

Sistema de bindings declarativos, expresados sobre los propios tags HTML usando atributos data-bind, que permiten crear un vínculo uni o bidireccional entre elementos del interfaz de usuario y propiedades o acciones del View-Model, que se actualizarán de forma automática ante cambios.
Seguimiento de dependencias, capaz de detectar los cambios realizados tanto en la Vista como en el Modelo-Vista y propagarlos hacia todos los objetos o elementos dependientes.
Por supuesto, el interfaz de usuario se actualiza automáticamente para reflejar los cambios en el View-Model.
Incluye un sistema de plantillas que facilita la creación porciones de vistas reutilizables.

Y por si lo que trae de serie Knockout se nos queda corto, podemos extenderlo muy fácilmente.

¿En qué tipo de proyectos puedo utilizarlo?

En todos: PHP, Python, Perl, JSP, Ruby, ASP.NET MVC, Webforms, ASP clásico, HTML y en los que se os puedan ocurrir.

Realmente se trata de una biblioteca pura de scripts que funciona en cliente sin dependencias hacia ninguna tecnología concreta en el lado servidor.

¡Un poco de código, por favor!

Veamos un ejemplo rápido que demuestre una pequeña parte de la potencia de Knockout. Nuestro objetivo es implementar una funcionalidad sencilla como la siguiente:

presentaremos un simple cuadro de texto en el que el usuario podrá introducir su nombre, junto con un botón.
bajo ellos, un texto en el que se podrá ver el nombre del usuario y el número de veces que ha sido pulsado el botón; las porciones “dinámicas” de este texto (nombre y número de clics) se actualizarán desde script conforme el usuario actúe sobre el interfaz. Es decir, si el usuario modifica el nombre o pulsa el botón, se actualizará el mensaje para representar el nuevo estado.
además, para complicar un poco más el escenario, como máximo se podrá hacer clic cinco veces sobre el botón. Al llegar a ese punto, el botón deberá deshabilitarse.

Pero veamos primero una posible implementación utilizando métodos “tradicionales”, puro scripting con un poco de jQuery para simplificar:

HTML

SCRIPT

<div>
  <input type="text" id="name" />
  <button id="button">Click me!</button>
  <p>
    <span id="nameLabel"></span>, 
    you've clicked 
    <span id="clicksLabel"></span> 
    times
  </p>
</div>

$(function () {
  var numClicks = 0;
    
  $("#name").val("John");
  $("#clicksLabel").text(numClicks);
  $("#nameLabel").text($("#name").val());
  
  $("#name")
    .change(function () {
       $("#nameLabel").text($("#name").val());
    });
  
  $("#button").click(function () {
    numClicks++;
    if (numClicks >= 5) {
       $("#button").attr("disabled", true);
    }
    $("#clicksLabel").text(numClicks);
  });
});

Observad en el código anterior que, aunque logramos una separación razonable entre la visualización (HTML) y la lógica de presentación (script), el código script es bastante farragoso y presenta una fuerte dependencia hacia la forma en que está implementada la vista. Estamos mezclando inicialización de valores, el registro de manejadores de eventos, lógica, accesos al DOM, mapeo entre valores y controles… demasiadas responsabilidades para un único punto.

Pero lo peor de todo es que esta forma de implementarlo no deja claro qué datos maneja la página, ni qué comportamiento se espera de ella, pues ambos aspectos están dispersos a lo largo del script. Esta forma de desarrollar, cuando nos encontremos ante un escenario más complejo, nos llevaría irremediablemente al caos que comentaba al principio.

¿Y cómo implementaríamos estas mismas funcionalidades con Knockout.js? Veamos primero el script que podríamos emplear, que conformaría la capa View-Model:

    var viewModel = {
        numClicks: ko.observable(0),
        name: ko.observable("Peter"),
        canClick: function () {
            return this.numClicks() < 5;
        },
        addClick: function () {
            if (this.canClick()) {
                var clicks = this.numClicks();
                this.numClicks(clicks + 1);
            }
        }
    };
    ko.applyBindings(viewModel);

Bastante más simple y ordenado, ¿verdad? En el código podemos ver claramente los datos que necesita la vista para funcionar (numClicks y name), y el comportamiento esperado en ella (los métodos canClick() y addClick()); ojo, y no existe ninguna referencia hacia la implementación de la vista ni accesos al DOM.

Pasemos ahora a los detalles.

ko es el objeto básico de Knockout; o en otras palabras, ko es a Knockout lo que $ a jQuery.

Las propiedades nombre (name) y número de clicks (numClicks) las estamos inicializando a sus valores por defecto, “Peter” y “0” respectivamente. Sin embargo, como podéis observar, usamos para ello el método ko.Observable(). Esto quiere decir básicamente que estas propiedades serán “vigiladas”, de forma que cuando cambie su valor Knockout deberá analizar qué elementos dependen de ellas y actualizarlos en consecuencia (volveremos a esto cuando veamos el código de la Vista).

También podemos ver que sobre el propio View-Model se define el método canClick(), que determina si debemos permitir al usuario hacer más clicks sobre el botón, y addClick(), que será la lógica a ejecutar cuando el usuario lo pulse: simplemente incrementamos el número de clicks, aunque dado que es un objeto “observable” tenemos que hacerlo usándolo como una función tanto a la hora de consultar su valor como de asignárselo.

Por último, la llamada a ko.applyBindings() lo que hace es poner en marcha Knockout con el objeto View-Model que hemos definido.

Lo interesante de este código es que, aparte de dejar bastante claro qué esperamos de la página, no hay referencia alguna desde el script hacia los elementos de la vista, ni accesos al DOM, simplemente se mantiene actualizado el View-Model. Knockout se encargará de actualizar el UI conforme a los cambios realizados gracias al binding y a los “observables” que hemos comentado anteriormente.

La implementación de la Vista, puro marcado HTML, podría ser la siguiente:

<div>
    <input  data-bind="value: name" type="text" />
    <button data-bind="click: addClick, enable: canClick()" type="button">Click me!</button>
    <p>
        <span data-bind="text: name"></span>, you've clicked 
        <span data-bind="text: numClicks"></span> times
    </p>
</div>

El atributo data-bind es el utilizado por Knockout para definir los enlaces, o bindings, desde los elementos del interfaz hacia las propiedades o métodos del View-Model.

en el primer caso, el cuadro de edición, estamos enlazando su valor al de la propiedad name del View-Model. Cuando cambie ésta, el cuadro de texto de texto cambiará y viceversa: Vista y View-Model estarán siempre sincronizados de forma automática.
en el segundo caso, el botón, enlazamos el evento click del ratón con el método addClick del View-Model, y su atributo enable con canClick() para deshabilitar el botón cuando hayamos llegado al máximo de veces permitidas.
el tercer y cuatro enlace se realiza entre los <span> y las propiedades del View-Model que queremos mostrar. De nuevo la magia de los “observables” hará que cuando éstas cambien el texto interior de estas etiquetas cambien de forma automática para mostrar su valor.

Fijaos que en la vista no hay lógica, sólo enlaces hacia datos y comportamiento definido en el View-Model.

Bueno, y con esto creo que podemos dejarlo por hoy :-) Obviamente, Knockout es mucho más que esto, y así lo iremos viendo en futuros posts, en los que iremos desmenuzando poco a poco este interesante framework y viendo cómo podemos utilizarlo para mejorar el código de nuestra capa de presentación.

Ah, he colgado en Skydrive el ejemplo desarrollado en este post. Es un zip de 15kb, con un único archivo .html y otro .js (knockout) con el que podéis jugar para entender mejor su funcionamiento.

Publicado en Variable not found.

Enlaces interesantes 78

2012-04-16T09:10:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 9 al 15 de abril de 2012. Espero que os resulten interesantes :-)

.Net

Multicast delegates in c#
Jalpesh P. Vadgama
Gestión de excepciones con WCF
Fernando Escolar
Leer un QR desde Windows con la webcam
Carlos Pérez
System.DateTime: Good practices and common pitfalls
David Rickard
How to remove the last character from Stringbuilder
Hmloo

Asp.net

T4MVC has its own home, with some git love
David Ebbo
Contributing to ASP.NET Web Stack Source on CodePlex
Henrik F. Nielsen
What’s new in Razor v2
Andrew Nurse
Beyond Role Based Authorization in ASPNET MVC
Steve Smith
Adding Client-Side Validation in ASP.NET MVC 3
Peter Vogel
Your own sports news site with ESPN API and Knockout.js
Filip W.
MVC: Trabajando con campos con etiquetas HTML
Javier Torrecilla
Embedded .NET HTTP Server
Bob Janova
Why I'm Not Using Bundling In MVC4.. Yet
Alexander Beletsky

Azure / Cloud

Hadoop en Windows Azure (III)
Ibon Landa
Big Data, Hadoop y Windows Azure (I)
Ibon Landa
Using the Windows Azure Content Delivery Network
Maarten Balliauw

Conceptos

New is Glue
Steve Smith
Dealing with the “Too many dependencies” problem
Hadi Hariri
From Legacy to Dependency Injection
Telerik code team

Data access

Tips for Entity Framework Migrations
Jarod Ferguson
My Favorite Things in OData v3 and WCF Data Services 5.0
Glenn Gailey
WCF Data Services 5.0 RTM Release
Turker Keskinpala
EF Power Tools Beta 2 Available
Brice Lambson
Performance Considerations for Entity Framework 5
David Obando, Eric Dettinger and others
Physical Directories vs. MVC View Paths
Rick Strahl
EF5: Where are my DataAnnotations?
Julie Lerman
Cuidado con EF 4.3.X si vienes desde 4.2 o anteriores…
Unai Zorrilla

Html/Css/Javascript

Toying With the HTML5 File System API
Ivaylo Gerchev
The Secret to the Page Flip in HTML5/Canvas for Windows8 and iOS
Rick Barraza
JavaScript Debugging Enhancements
Dmitri Leonov
The Current State of HTML5 Forms
Wufoo
Understanding MVVM – A Guide For JavaScript Developers
Addy Osmani
Common Pitfalls of jQuery
Peter Olson
Writing Your Own JavaScript Library – Enums
Gil Fink
On :target
Chris Coyier
On Responsive Images
Chris Coyier
Knockout.js Performance Gotcha #2–manipulating observableArrays
Ryan Niemeyer

Visual Studio/Complementos

NuGet 1.7 Release notes
NuGet Team
Become a Visual Studio 11 Master Detective – A Look into the Page Inspector
ASP.NET AJAX Team

Otros

The Most Popular Screen Resolution On The Web Is Now 1366×768
Frederic Lardinois
[Evento presencial] Cómo construir tu entorno de integración continua desde cero
Auges
Semantic versioning
Tom Preston-Werner
TRUCO: Como compartir cualquier carpeta o archivo con cualquiera en DropBox
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Caching de bundles en MVC 4 (o MVC 3, o Webforms…)

2012-04-11T08:57:00.000+02:00

Hace unos meses ya estuvimos comentando el interesante paquete System.Web.Optimizations que se distribuía con la developer preview de MVC 4, aunque también decíamos que este paquete era igualmente descargable a través de Nuget, y esto hacía posible su uso con MVC 3 o incluso con WebForms.

Como vimos en su momento, su uso era bastante sencillo. En resumidas cuentas, si no queríamos complicarnos demasiado la vida, era suficiente con introducir el siguiente código en la inicialización de la página (en el Application_Start del Global.asax):

    BundleTable.Bundles.RegisterTemplateBundles();

(Bueno, en la preview el método a llamar era EnableDefaultBundles(), pero el resultado era el mismo)

Simplemente con ello, ya podíamos acceder a dos recursos que eran generados automáticamente por el sistema:

/scripts/js, que contiene un único archivo .js con todos los scripts existentes en la carpeta /scripts del proyecto, convenientemente minimizados.
/content/css, donde encontramos en un único archivo todos los .css presentes en /content, también minimizados para aligerar su descarga.
/content/themes/base/css, nuevo en la última versión del componente, que incluye los estilos relativos al tema básico de jQuery UI, utilizado en la plantilla del proyectos de MVC 4.

Además de las ventajas que ofrece en tiempo de ejecución, este mecanismo es muy cómodo a la hora de mantener los scripts actualizados con Nuget. Es decir, dado que descargamos todos los scripts en una única llamada y bajo una única denominación, ya no será necesario andar actualizando las referencias a las bibliotecas en el _Layout.cshtml, algo que resulta molestillo en estos momentos cada vez que actualizamos.

Con la beta de MVC 4 recientemente liberada, este componente ha incluido también un interesante sistema de cacheo que hace aún más eficiente y automático su uso. Si observamos el layout de la plantilla de proyectos ASP.NET MVC 4 veremos que incluye las siguientes líneas:

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" 
      rel="stylesheet" type="text/css" />
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" 
      rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")">
</script>

Observad que las referencias a los distintos recursos se generan a través del método ResolveBundleUrl(). Pues bien, el código generado por las líneas anteriores es, más o menos así de sorprendente:

<link href="/Content/css?v=oI5uNwN5NWmYrn8EXEybCIbINNBbTM_DnIdXDUL5RwE1" 
      rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/css?v=UM624qf1uFt8dYtiIV9PCmYhsyeewBIwY4Ob0i8OdW81" 
      rel="stylesheet" type="text/css" />
<script src="/Scripts/js?v=GP89PKpk2iEmdQxZTRyBnKWSLjO7XdNG4QC1rv6LPxw1"></script>

En las referencias se está añadiendo un parámetro que contiene un valor hash correspondiente al contenido de la carpeta empaquetada en el momento de generación de la vista. La primera petición que se realice enviará de vuelta los recursos empaquetados y minimizados con una validez a nivel de caché de un año; las siguientes peticiones, por tanto, se resolverán muy rápidamente mediante un HTTP 304 (No modificado):

A partir de ahí, cualquier cambio que se realice en alguno de los archivos o directorios incluidos en los bundles provocará un cambio de hash, por lo que la petición será diferente y, por tanto, el resultado no se tomará desde la caché.

Publicado en: Variable not found.

Enlaces interesantes 77

2012-04-09T09:15:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 2 al 9 de abril de 2012. Espero que os resulten interesantes :-)

.Net

How to pad number with leading zero with C#
Jalpesh P. Vadgama
¿Qué hay de malo en este código? (C#)
Eduard Tomás
.NET Versioning and Multi-Targeting - .NET 4.5 is an in-place upgrade to .NET 4.0
Scott Hanselman
A LINQ Style Range Generator
BlackWasp

Asp.net

With HTTP, your application is your API
Hadi Hariri
Creación de una barra de progreso con SignalR
Dino Esposito
67% of ASP.NET websites have serious configuration related security vulnerabilities
Troy Hunt
.NET 4.0 ASP.NET MVC 3 plug-in architecture with embedded views
Liviu Ignat
Creating a JSONP Formatter for ASP.NET Web API
Rick Strahl
Shhh… don’t let your response headers talk too loudly
Troy Hunt
Using SpecsFor.Mvc – Introduction
Matt Honeycutt
Configuring Bundles in MVC 4
Tom Dupont
JsAction: call MVC Action Methods from javascript
XVincentX
Infinite Scroll in ASP.NET MVC
Tomasz Pęczek
ASP.net MVC generic client and server side validation
DotNetStep

Data access

Tips to avoid deadlocks in Entity Framework applications
Diego B Vega

Html/Css/Javascript

Drag and Drop and Automatically Send to the Server
Remy Sharp
18 Most Popular jQuery Plugins of March 2012
More Tech Tips
Getting Cozy With Underscore.js
Nettuts
Knockout.js Performance Gotcha #1–if/with bindings are not always cheap
Ryan Niemeyer

Otros

Nuevas obligaciones en relación a las cookies
Xavier Ribas (vía @jm_alarcon)
La fiebre del oro o cómo hacerte rico vendiendo picos y palas
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Enlaces interesantes 76

2012-04-02T09:57:00.000+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 26 de marzo al 1 de abril de 2012. Espero que os resulten interesantes :-)

.Net

C#/.NET Little Wonders: Skip() and Take()
James Michael Hare
IQueryable is Tight Coupling
Mark Seeman
Ref and Out (The Inside Story)
Akhil Mittal
C# Value Type Table
Mark Treadwell
Identifying .NET 4.0 Special Folders
Richard Carr
Null is not false
Eric Lippert
C# and VB.NET language specification
Salvo Davide Rapisarda
Do I need to dispose of Tasks?
Stephen Toub
Should I expose asynchronous wrappers for synchronous methods?
Stephen Toub

Asp.net

Combining LESS with ASP.NET
Malcolm Sheridan
How to fork the ASP.NET Web Stack to GitHub
Jimmy Bogard
Some points to consider while working on ASP.NET MVC and jQuery
Rahul Bandopadhyaya
ASP.NET MVC 4, ASP.NET Web API and ASP.NET Web Pages v2 (Razor) now all open source with contributions
Scott Hanselman
ASP.NET MVC, Web API, Razor and Open Source
Scott Guthrie
Creating Absolute Urls Of Controller Actions In ASP.NET MVC
Mohamed Meligy
How to build a grid with knockout and ASP.Net MVC
David Carter
Tutorial Asp.net Web API con MongoDB – Parte 2.2
Gonzalo Pérez
Securing your ASP.NET MVC 4 App and the new AllowAnonymous Attribute
Rick Anderson
Bringing oData to your WebAPI – just use IQueryable
John V. Petersen

Azure / Cloud

Ejemplo de NodeJS, Express y Azure en el codemotion
David Salgado

Data access

EF DateTime2 y el índice perdido
Unai Zorrilla
SQLinq: Use LINQ to generate Ad-Hoc, strongly typed SQL queries
Chris Pietschmann

Html/Css/Javascript

10 Tips for Developing Better jQuery Plugins
Craig Buckler
10 Most Exciting jQuery Plugins of Early 2012
jQuery4u
Providing Synchronous / Asynchronous Flexibility With jQuery.when
Derick Bailey
Using Modernizr to detect HTML5 features and provide fallbacks
Tom Leadbetter
Minimum Paragraph Widths in Fluid Layouts
Gustav Andersson
Saving the values of dynamically populated dropdown on back button
Mark Needham
JavaScript design patterns – Part 1: Singleton, composite, and façade
Joseph Zimmerman
For Modernizr, Don’t Stop with NuGet
Steve Albers
Responsive Content Navigator with CSS3
Mary Lou
Readable DOM Ready Event Handlers
K. Scott Allen

Visual Studio/Complementos

My Top 5 Visual Studio 11 Designer Improvements for ASP.NET 4.5 Development
Carl Bergenhem
Make IIS Express the Default for VS2010 Web Projects
Steve Smith

Otros

¡campusMVP en inglés!
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

ASP.NET MVC, WebAPI y Razor, ahora mucho más open source

2012-03-28T19:36:00.000+02:00

¿Ein? ¿Pero no lo eran ya? Bueno, sí… pero no en toda la amplitud que puede ofrecer este término.

El progresivo acercamiento de ASP.NET al mundo del open source es algo que llevamos observando bastante tiempo. Desde hace unos años es posible acceder al código fuente de muchos productos, y también hemos visto cómo determinados proyectos puramente libres como jQuery eran incluidos con todos los honores en el conjunto de tecnologías de desarrollo oficiales de Microsoft. Ahora vamos un paso más allá.

El código fuente de la primera versión de ASP.NET MVC fue publicado en 2009, poco después de su lanzamiento, bajo licencia MS-PL, un modelo de licencia open source aprobado por la OSI (Open Source Initiative). Desde ese momento, cada lanzamiento del framework iba acompañado de la publicación del código fuente en CodePlex, lo que nos permitía descargarlo, estudiar su funcionamiento, compilarlo, y retocarlo libremente. Lo mismo ocurría con la primera versión de WebPages, y previsiblemente lo mismo iba a ocurrir con las nuevas versiones de MVC, WebPages y Web API.

Sin embargo, el desarrollo de estos productos seguía estando totalmente en manos de Microsoft. Es cierto que podíamos reportar bugs y sugerir cambios, pero en ningún momento participar de forma activa en los proyectos, ni ver lo que iba ocurriendo entre una RTM y otra.

Y de pronto, hoy nos levantamos con la noticia de que ASP.NET MVC, Web API y Web Pages (Razor) van a ser distribuidos como open source (licencia Apache 2.0). Pero si ya podíamos acceder al código fuente, ¿cuál es la novedad?

Pues, en primer lugar, que ahora los proyectos se han abierto totalmente de cara a la comunidad. No se trata de dejar que se vean las tripas de estos productos una vez terminados, sino de adoptar un modelo de desarrollo abierto y transparente al cien por cien.

Para empezar, ya no tendremos que esperar a las versiones RTM para acceder al código fuente, como ocurría hasta ahora; tendremos total transparencia durante el proceso de desarrollo, puesto que el fuente está ya disponible en un repositorio público accesible con Git. Podemos descargarlo, clonarlo, hacer forks, sugerir ideas, ver en cualquier momento el estado de los trabajos, las características pendientes de desarrollo, los bugs subsanados y las modificaciones que se están realizando por parte de los contribuyentes en tiempo real.

Y recalco aquí la palabra “contribuyentes”, que es el segundo aspecto importante de la noticia a la que hacía referencia. No hablamos ya exclusivamente de los equipos de Microsoft que hasta ahora han llevado las riendas: a partir de ahora, los desarrolladores de la comunidad podemos contribuir con parches e implementando funcionalidades de estos tres productos.

De hecho, el primero en estrenarse ha sido Miguel de Icaza, que había sido avisado previamente del movimiento, y ha contribuido añadiendo modificaciones a las plantillas de edición para que tengan en cuenta el DataType (Email, Url, DateTime, Date, Time, Number, etc.) a la hora de generar los controles en la página, de forma que éstos ya aparezcan con el atributo type establecidos de forma correcta para aprovechar las ventajas de HTML5.

Pero ojo, que esto no significa que MVC, Web API o Razor vayan a ser abandonados a su suerte. Microsoft va a seguir incluyéndolos con Visual Studio y trabajando en ellos como hasta ahora, desarrollándolos con la misma gente, dándoles soporte oficial, y asegurando su calidad. Cada contribución será minuciosamente revisada y comprobada por el equipo de ASP.NET y sólo serán aprobadas aquellas que cumplan estrictos criterios de calidad y adhesión al Roadmap de cada producto.

En palabras de Hanselman, nada cambia salvo una cosa: “Es ASP.NET, pero ahora puedes involucrarte”.

Y las ventajas están claras: estas tecnologías se verán enriquecidas e impulsadas por la comunidad de desarrolladores, y, si no se ponen trabas, esto seguro que se traduce en un crecimiento mucho mayor que el que hemos vivido hasta ahora, una respuesta más rápida ante problemas, una mejor y más eficiente adaptación a los cambios tecnológicos del entorno, y sobre todo, una mayor cercanía de los productos a sus usuarios y a la realidad de nuestro trabajo.

En fin, se trata de un importante movimiento por parte de Microsoft cuyas consecuencias y resultado iremos viendo con el tiempo, pero si todas las premisas se cumplen sin duda es una gran noticia para los desarrolladores ASP.NET.

Enlaces:

Anuncio oficial de Scott Guthrie: ASP.NET MVC, Web API, Razor and Open Source
Anuncio de Hanselman: ASP.NET MVC 4, ASP.NET Web API and ASP.NET Web Pages v2 (Razor) now all open source with contributions
Sitio en codeplex: http://aspnetwebstack.codeplex.com/
Sitio oficial de ASP.NET: http://asp.net

Publicado en: Variable not found.

Registro centralizado de scripts en MVC 4 y Webpages 2

2012-03-28T11:42:00.000+02:00

Una novedad que descubro en los tutoriales preliminares de la segunda versión de WebPages, y que por tanto tendremos disponible en las futuras versiones de WebMatrix y ASP.NET MVC 4, es la posibilidad de registrar los scripts y estilos que necesitan nuestros componentes visuales (sean layouts, vistas completas, parciales o helpers), centralizando su carga y evitando duplicidades.

Por ejemplo, imaginad que tenemos una vista parcial o helper que requiere la inclusión de una biblioteca de scripts concreta. Si introducimos los correspondientes tags <script>, y por cualquier causa necesitamos utilizar este componente más de una vez sobre la misma página, estaremos realizando una doble carga del archivo externo, lo que además de lento puede generar errores. Otros escenarios igualmente incómodos son cuando si hay varias parciales distintas que usan una misma biblioteca común, o cuando queremos generar los scripts en un lugar determinado del HTML (por ejemplo, al final de la página) también desde una vista parcial o un helper. Y por supuesto, lo mismo ocurre con los estilos CSS.

El Asset Manager es un componente introducido en WebPages 2, también disponible para MVC 4, que va a poner un poco de orden ahí, usando un mecanismo bastante parecido al disponible en Webforms desde hace bastante tiempo.

Así, el objeto estático Asset (definido en System.Web.WebPages) permite registrar bloques de script inline, referencias a archivos de script externos, bloques de estilos, y referencias a archivos de hojas de estilo usando métodos tan simples como los siguientes:

    Assets.AddScriptBlock("alert('hi!');", true); // Include <script> tag
    Assets.AddScript("~/scripts/jquery.1.6.2.js");
    Assets.AddScript("~/scripts/jquery.1.6.2.js");
    
    Assets.AddStyleBlock("p { font-size: 4em}", true); // Include <style> tag
    Assets.AddStyle("~/content/site.css");

Este registro se puede implementar en cualquier parte dentro del ciclo de ejecución de la vista: en la página de contenido, parciales, helpers, de forma que se irán registrando todos los elementos que puedan hacer falta. Más adelante, para generar los bloques almacenados basta, con hacer lo siguiente por ejemplo en el Layout:

            [...]
            </div>
        </div>
    </footer>
    @Assets.GetScripts()
</body>
</html>

El resultado en ejecución sería:

            [...]
            </div>
        </div>
    </footer>
    <script type="text/javascript">alert('hi!');</script>
    <script src="/scripts/jquery.1.6.2.js" type="text/javascript"></script>
</body>
</html>

Y de la misma forma, tenemos disponible un método @Assets.GetStyles() para obtener todos los bloques relativos a estilos de la página que hemos ido registrando, y que podríamos generar en el interior de la etiqueta <head>, por ejemplo.

Es interesante saber que, al generar el código, Asset detectará si existen dos referencias hacia el mismo archivo de script o estilos, en cuyo caso la referencia se generará sobre la página una única vez, aunque por razones obvias este control no se realizará sobre los bloques de scripts o estilos inline.

Publicado en: Variable not found.

Enlaces interesantes 75

2012-03-26T09:21:00.001+02:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 19 al 25 de marzo de 2012. Espero que os resulten interesantes :-)

.Net

Mono 2.11.0 is out
Miguel de Icaza
10 Questions, 10 Answers on Roslyn
Joe Kunk
C#/.NET Little Wonders: Of LINQ and Lambdas - A Presentation
James Michael Hare
What else is new in C# 5?
Ivan Towlson
Dynamic JSON Parsing in .NET with JsonValue
Rick Strahl

Asp.net

Yet Another Bundling Approach for MVC 4
K. Scott Allen
Exprime la potencia asíncrona en IIS
Marc Rubiño
ASP.NET MVC 3 Client-Side Validation + jQuery BlockUI
Sebastián Henzenn
Multiple login pages with ASP.NET MVC
Sean Blakemore
Tutorial Asp.net Web API con MongoDB – Parte 2.1
Gonzalo Pérez
A good way to keep your entities clean
Leon Cullen

Azure / Cloud

The Differences Between Development on Windows Azure and Windows Server
Rachel Appel

Data access

What’s new in SQL Server 2012?
Tim Anderson
EF5 Beta 2 Available on NuGet
EF Team
EF, inicializadores, migraciones y datos de referencia
Unai Zorrilla
Avoiding NotSupportedException with IQueryable
K. Scott Allen
Usando Enumeraciones en Entity Framework 5.0
Javier Torrecilla
Entity Framework Code First: Get Entities From Local Cache or the Database
Ricardo Peres

Html/Css/Javascript

JavaScript's Two Zeros
Axel Rauschmayer
KnockoutJS and Google Maps binding
Jan Fajfr
Augmented Reality comes to JavaScript
Paul Neave
jQuery 1.7.2 Released
Dave Methvin
Quick Tip – Deleting a JavaScript Object Property
Gil Fink
jQuery full-screen plugin
Darcy Clarke
Make External Links Open in a New Window With This jQuery Plugin
Michael Kennedy
Metro: Introduction to CSS 3 Grid Layout
Stephen Walther
Build Facebook style infinite scroll with knockout.js and Last.fm API
StrahWeb
Your jQuery: Now With 67% Less Suck
Scott Kosman

Visual Studio/Complementos

Features NO ONE NOTICED in Visual Studio 11 Express Beta for Web
Scott Hanselman

Otros

Propagación y herencia de permisos- la clase FileSystemAccessRule
José Manuel Alarcón
WebSockets in Windows Consumer Preview
Brian Raymor (IEBlog)
Hola Metro en JavaScript para Windows 8
David Salgado
Generating Random Pronounceable Passwords
Richard Carr
El efecto Zeigarnik y cómo vencer la procrastinación
José Manuel Alarcón

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

SignalR (IV): Hubs

2012-03-20T09:35:00.000+01:00

Como vengo comentando desde hace un tiempo, SignalR es un framework realmente impresionante y aporta unas posibilidades enormes en prácticamente cualquier tipo de aplicación. Ya hemos visto qué es y las bases en las que se sustenta, y también hemos visto algunos ejemplos de uso utilizando conexiones persistentes (aquí y aquí), que es el enfoque de menor nivel disponible a la hora de desarrollar servicios basados en esta plataforma.

En este post ascenderemos a un nivel de abstracción mucho mayor que el proporcionado por las conexiones persistentes y veremos cómo utilizar los Hubs, otro mecanismo proporcionado por SignalR que nos permitirá lograr una integración increíble entre el código cliente y de servidor, y hará aún más sencilla la implementación de este tipo de servicios.

En este momento ya deberíais tener claro qué cosas se pueden hacer con las conexiones persistentes de SignalR, e incluso cómo implementarlas:

En el cliente:
- Conectar con un endpoint o servicio SignalR, manteniendo la conexión virtualmente abierta.
- Recibir asíncronamente (a través de un callback) los mensajes enviados desde el servidor mediante broadcasts o mensajes directos.
- Enviar mensajes al servicio usando el método send().
En el servidor:
- Detectar la conexión de nuevos clientes.
- Detectar la desconexión de clientes.
- Recibir los mensajes enviados por los clientes.
- Enviar objetos a todos los clientes conectados, a grupos de ellos, o a un cliente concreto.

Podemos hacer algunas cosillas más, como capturar los errores tanto en cliente como en servidor; aunque no lo hemos visto en los anteriores posts, son aspectos bastante triviales.

Pues bien, con Hubs vamos a poder hacer exactamente las mismas cosas, pero usaremos una sintaxis mucho más fluida y directa tanto en cliente como en servidor, gracias a la mágica flexibilidad que aportan tecnologías como javascript y los tipos dinámicos de .NET.

Y para demostrarlo, implementaremos una sencilla hoja de cálculo multiusuario en tiempo real. Todos los usuarios conectados a la misma podrán editar celdas directamente, y las actualizaciones se irán propagando al resto de clientes de forma automática. Podéis descargar el proyecto para Visual Studio 2010 en el enlace que encontraréis al final del post, aunque en el siguiente vídeo se muestra la locura de resultado en ejecución con algunos clientes conectados editando celdas de forma aleatoria:

Hoja de cálculo multiusuario en ejecución

Veremos que teniendo las herramientas apropiadas es algo bastante sencillo. Conceptualmente, sólo tenemos que hacer lo siguiente:

en el lado cliente, cuando un usuario modifique el valor de una celda, enviar al servidor el nuevo valor V que ha introducido en la celda X, Y.
en el lado servidor, ante la recepción del mensaje anterior, notificar a todos los clientes conectados que el usuario U ha establecido el nuevo valor V en la celda X, Y.
de nuevo en el lado cliente, y ante la recepción del mensaje anterior, modificar la celda X, Y para que aparezca el nuevo valor V que introdujo el usuario U.

Obviamente, esto irá acompañado por algún script más para conseguir que se puedan editar las celdas de forma similar a una hoja de cálculo, o para mantener actualizados los sumatorios de la última fila, pero no nos centraremos en ello. En cualquier caso, siempre podéis verlo descargando el proyecto de prueba.

1. El lado servidor: creación de un Hub

En SignalR, un Hub es la clase donde se implementa el servicio, es decir, el punto desde el cual se gestionarán las peticiones enviadas por todos los clientes conectados al mismo, y desde donde se emitirán los mensajes destinados a actualizar su estado.

En la práctica, se trata simplemente de una clase que hereda de la clase Hub, definida en SignalR.Hubs, en cuyo interior encontraremos los métodos que van a ser invocados directamente desde el cliente. En tiempo de ejecución, SignalR creará un proxy o representante del hub en el lado cliente, con métodos idénticos a los definidos en la clase, en cuyo cuerpo introducirá las llamadas Ajax necesarias para que se produzca la invocación de forma automática. Por tanto, si nuestra clase Hub tiene un método llamado “hacerAlgo()” y el proxy que hemos creado en cliente se llama “hub”, podemos invocarlo desde script haciendo un simple hub.hacerAlgo().

En nuestro ejemplo en el servidor lo único que tenemos que hacer es recibir las notificaciones de cambios de celda y enviárselas al resto de usuarios, lo que podemos conseguir con estas líneas:

public class MultiuserExcel: Hub
{
    public void Update(int y, int x, string value)
    {
        this.Clients.updateCell(this.Caller.userName, y, x, value);
    }
}

Voy a destacar varios aspectos de este código, comenzando por su extrema simplicidad. Casi sin haber visto antes nada de SignalR se puede intuir lo que hace. Observad también que hemos llegado a un punto de abstracción tal que no vemos nada relativo a conexiones ni desconexiones, simplemente implementamos lógica de nuestro servicio.

Es interesante también la propiedad Clients de la clase Hub. Ésta representa al representa al conjunto de clientes conectados, y nos permite llamar directamente a funciones que creemos en el lado cliente. O sea, que si desde el servidor hacemos una llamada a Clients.hacerAlgo(), se ejecutará la función de script hacerAlgo() en todos y cada uno de los clientes conectados. Ya ahí cada uno podrá procesar el mensaje y parámetros que enviemos.

Por último llamar la atención también sobre la propiedad Caller. Ésta, también heredada de la clase base Hub, nos permite acceder a propiedades definidas a nivel de script en el cliente que ha realizado la llamada al método de servidor Update(). En nuestro caso, será una propiedad en la que almacenaremos el nombre del usuario conectado, como veremos algo más adelante.

Fijaos que las clásicas fronteras entre cliente y servidor parecen haberse disuelto, es como si ambas capas se ejecutaran en el mismo proceso, aunque obviamente no es así: es SignalR el que se está encargando de mapear las llamadas entre ellas de forma transparente. Y aunque pueda parecer pura brujería, se trata simplemente de un uso ingeniosísimo de los tipos dinámicos de .NET 4 y de la flexibilidad de javascript.

2. El lado cliente

Como comentaba anteriormente, voy a saltarme el código destinado a hacer que funcionen los mecanismos básicos de edición de la hoja de cálculo, y nos centraremos en lo que nos interesa en este momento, la implementación de la comunicación con el servidor.

Lo primero que debemos hacer en el lado cliente es referenciar desde la vista o página dos archivos de script. El primero de ellos es el mismo que utilizábamos con las conexiones persistentes, /scripts/jquery.signalR.js, mientras que el segundo es un script dinámico generado por SignalR en la dirección /signalr/hubs. Para generarlo, SignalR localizará todas las clases descendientes de Hub disponibles en el proyecto e incluirá en el script un proxy para cada una de ellas; en nuestro ejemplo, generará un objeto llamado $.connection.multiUserExcel (el nombre del hub), que es el que podremos utilizar como proxy, aunque normalmente lo asignaremos a una variable para hacer más cómodo su uso.

Por tanto, un primer acercamiento al código de la vista específico para conectarse a un servicio SignalR podría ser algo así:

<script src="@Url.Content("~/scripts/jquery.signalR.min.js")" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var hub = $.connection.multiuserExcel; // en “hub” tenemos el proxy
        // .. resto del código
    });
</script>

Una consecuencia derivada de la inclusión del script dinámico generado por SignalR es que, a diferencia de lo que ocurría con las conexiones persistentes, no será necesario modificar la tabla de rutas de nuestra aplicación, puesto que los proxies contienen toda la información necesaria para que los servicios puedan ser utilizados de forma directa.

2.1. Envío de mensajes al servidor

Si analizamos los objetos generados de forma dinámica por SignalR para representar al hub en el lado cliente (proxies) podremos ver que éstos incluyen métodos exactamente con el mismo nombre y parámetros que los que hemos implementado en el lado servidor. Es decir, si en nuestra clase Hub tenemos métodos X() e Y(), el proxy en cliente dispondrá de estos dos mismos métodos, aunque en su implementación únicamente se realizarán las llamadas vía Ajax a sus respectivos equivalentes en servidor.

Por tanto, volviendo a nuestro ejemplo, dado que hemos creado un método Update() en el Hub (lado servidor), desde el cliente tendremos disponible el método update() en el hub, que podemos utilizar directamente para enviar mensajes al servidor. Así, en nuestra hoja de cálculo podemos capturar el evento de cambio de cada celda y enviar la actualización al servidor para que la distribuya al resto de clientes conectados:

        $("table.excel input").change(function() {
            var newValue = $(this).val(); // Get current cell’s value
            var x = $(this).data("x");    // Get current cell’s coords
            var y = $(this).data("y");
            hub.update(y, x, newValue);  // Broadcast this change
            updateTotal(x);               // Update column total
        });

Un detalle importante a tener en cuenta es que para adaptarse a las convenciones de nombrado de Javascript, aunque el método en servidor comience por una mayúscula, su correspondencia en cliente comienza en minúscula. Esta conversión sólo se realiza en el primer carácter, el resto debe escribirse exactamente igual en ambos extremos.

2.2. ¿Variables de script accesibles desde el servidor?

Recordad que decíamos que era posible acceder desde el servidor a propiedades existentes a nivel de script simplemente referenciándolas mediante la propiedad Caller del Hub. Pues bien, para que esto sea así, las propiedades deben estar definidas sobre el proxy:

    $(function() {
        var hub = $.connection.multiuserExcel;
        hub.userName = prompt("Username:");
        
        // .. resto del código

A partir de ese momento podremos hacer uso de Caller.userName desde el servidor para acceder al valor que se haya introducido en la misma desde el cliente que realice la llamada al hub. Ojo, que el acceso a las variables es sensible al uso de mayúsculas y minúsculas, deben escribirse igual en ambos extremos.

Otro comportamiento curioso de SignalR a este respecto es que también es capaz de propagar los cambios realizados en el servidor sobre estas variables, de forma que su nuevo valor pasará al lado cliente de forma automática:

    this.Caller.message = "Current time: " + DateTime.Now.ToShortTimeString();

Obviamente, podemos crear tantas propiedades como necesitemos sobre el proxy, y todas ellas las tendremos disponibles en el servidor de la misma forma, tanto para consultar su valor como para modificarlo.

2.3. Recepción en cliente de mensajes enviados por el servidor

A diferencia de lo que habíamos visto usando conexiones persistentes, utilizando hubs no es necesario implementar evento, es mucho más simple. Lo único que debemos hacer es definir sobre el objeto que representa al hub en cliente el método o función a la que estamos llamando desde el servidor utilizando el objeto dinámico Clients.

En nuestro ejemplo, si recordáis, en el servidor estamos enviando el mensaje a todos los clientes conectados al servicio de la siguiente forma:

    this.Clients.updateCell(this.Caller.userName, y, x, value);

Por lo tanto, en cliente debemos implementar un método exactamente con el mismo nombre, y que reciba justo los parámetros que se envían desde el servidor (el usuario que realiza el cambio, la celda modificada y el nuevo valor de ésta):

    hub.updateCell = function(username, y, x, value) {
        if (username != hub.userName) {
            var elem = $("#cell" + y + "-" + x);
            elem.val(value);
            updateTotal(x); // Update column total
        }
    };

¡Y eso es todo!

En el proyecto de demostración encontraréis bastante más código que el que hemos visto en este post, pero principalmente va destinado a conseguir un look&feel similar a las hojas de cálculo tradicionales (bueno, salvando las distancias, claro!). En lo que respecta a la comunicación asíncrona desde y hacia el servidor, estas pocas líneas que hemos visto aquí son prácticamente todo lo que necesitamos para el sistema funcione y el resultado sea espectacular.

Como os he recomendado otras veces, no dejéis de descargar el proyecto y probar el sistema con varias instancias del navegador abiertas, o desde varios equipos. Veréis lo sorprendente y espectacular que resulta y lo sencillo que es de implementar.

Publicado en: Variable not found.

Enlaces interesantes 74

2012-03-19T09:25:00.000+01:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 12 al 18 de marzo de 2012. Espero que os resulten interesantes :-)

.Net

Programación Asíncrona .NET 4.5
Javier Torrecilla
Windows Identity Foundation in the .NET Framework 4.5 Beta: Tools, Samples, Claims Everywhere
Vittorio Bertocci
.NET 4.5 is an in-place replacement for .NET 4.0
Rick Strahl

Asp.net

[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (I)
Luis Ruiz Pavón
jQuery, ASP.NET Web API, and Json.NET walk into a bar…
Dave Ward
How to access NuGet when NuGet.org is down (or you're on a plane)
Scott Hanselman
6 Ways To Avoid Mass Assignment in ASP.NET MVC
K. Scott Allen
MVC - log4net Controller Action tracing using global filters
Dylan Morley
It’s The Little Things about ASP.NET MVC 4
Phil Haack
Switching between Mobile and Desktop Host in ASP.NET MVC 4
Imran Baloch
Tutorial Asp.net Web API con MongoDB – Parte 1
Gonzalo Pérez

Data access

DbMigration y Code First
Javier Torrecilla
Entity Framework Performance
Mark Nischalke

Html/Css/Javascript

Find the jQuery Bug #8: Suspicious Selectors
Elijah Manor
The ol Element and Related Attributes: type, start, value, and reversed
Oli Studholme
JavaScript for the C# Guy: Function Overloads
Shawn Wildermuth

Visual Studio/Complementos

VS11 Beta JavaScript Feature comparison with VS2010sp1
Xinyang Qiu
VS11 and EF5: Where’s that database that Code First created?
Julie Lerman

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

SignalR (III): Más Conexiones Persistentes

2012-03-13T09:33:00.000+01:00

Lo divertido de escribir sobre productos que están todavía en fase de desarrollo es que cambian... y a veces, ¡de qué forma! Pues esto ha ocurrido con SignalR: recientemente se publicó la revisión 0.4 y bastantes cosas de las tratadas en el post anterior de la serie ha quedado en agua de borrajas. En fin, estaba avisado, así que mucho no puedo quejarme ;-)

Por tanto, esta tercera entrega de la serie vamos a dedicarla (otra vez ;-)) a las conexiones persistentes, veremos qué cosas han cambiado con la llegada de la revisión 0.4, y desarrollaremos un nuevo ejemplo que ilustre las novedades que podemos encontrar a la hora de trabajar a bajo nivel con SignalR.

1. Resumen rápido: persistent connections y la versión 0.4 de SignalR

Para los que ya dominabais SignalR, os resumo las novedades principales que he encontrado hasta el momento en esta nueva revisión:

han desaparecido todos los métodos síncronos (OnConnected, OnDisconnect, OnReceived…) que implementábamos en el ejemplo de la segunda entrega de la serie para tomar el control ante determinados eventos de la conexión.
por tanto, ahora es obligatorio utilizar las versiones asíncronas (OnConnectedAsync, OnDisconnectAsync, OnReceivedAsync…), que retornan un objeto Task para implementar la lógica de gestión de los eventos.
SignalR ha sido desacoplado de ASP.NET, lo que permite utilizarlo en otros entornos. Como consecuencia, la firma de algunos métodos ha sido modificada. Así, cuando somos notificados de una nueva conexión, ya no recibimos el contexto HTTP tradicional, sino abstracciones propias de SignalR y desvinculadas de ASP.NET, lo cual supone alguna pequeña limitación aunque fácilmente salvable.
El proceso de negociación utiliza el transporte más apropiado para cada navegador, teniendo en cuenta de los componentes disponibles en servidor. En Internet Explorer se utiliza el transporte “Forever frame”, mientras que Firefox y Chrome usan “Long Polling” cuando el servidor no corre sobre .NET 4.5 (en caso contrario usaría websockets de HTML5).
Curiosamente, lo que antes denominábamos “clientId”, que es ese GUID que identifica de forma única a cada cliente conectado, ha pasado a llamarse “connectionId”. No afecta a nada, sigue significando lo mismo, pero es un cambio conceptual destinado a que tengamos claro qué indica ese dato.
Ahora, los broadcasts enviados justo durante la conexión de un nuevo cliente incluyen al propio cliente conectado, lo que evita tener que hacer el hack al que nos veíamos obligados en el post anterior (el “ping”).

A continuación desarrollaremos un ejemplo completo para que podemos ver de nuevo en funcionamiento esta maravilla. Como siempre, al final del artículo encontraréis un enlace para descargar el proyecto de demostración, en el que también he modificado el ejemplo que vimos en el post anterior para adaptarlo a los cambios de la revisión de SignalR.

2. Creación de un chat simple con SignalR

En este artículo vamos a complicar ligeramente el ejemplo anterior para construir un pequeño chat al estilo del que encontramos en Facebook, y cuyo aspecto podéis ver en la captura de pantalla siguiente:

De forma muy similar al ejemplo que vimos en el post anterior, necesitaremos:

Crear nuestro servicio, como ya sabemos, implementando una clase que herede de PersistentConnection. Llamaremos a esta clase SimpleChatService.
Tomar el control cuando un cliente envía un mensaje al servidor, con objeto de hacer un broadcast al resto de usuarios. Esto lo conseguiremos sobrescribiendo el método OnReceivedAsync.
También tendremos que registrar la ruta hacia el endpoint, de forma que las peticiones puedan llegar a él.
Y, por último, implementaremos el lado cliente, que consistirá en el UI y los scripts que se conectan al servidor, envían los mensajes cuando son tecleados por el usuario, y muestran en pantalla a su vez los textos enviados por otros usuarios.

Vamos con ello.

3. El lado servidor. Asincronía al 100%.

Un sistema basado en SignalR no podría funcionar correctamente si no utilizara las capacidades de asincronía del framework, debido a la gran cantidad de mensajes que pueden llegar a intercambiarse entre cliente y servidor. Por ello, el equipo del producto ha puesto especial énfasis en utilizar métodos asíncronos siempre que sea posible, evitando así bloqueos innecesarios y aumentando la capacidad de respuesta del servicio.

En el post anterior veíamos que podemos tomar el control del sistema cuando los usuarios se conectan, desconectan, o envían información al servidor sobrescribiendo los métodos OnConnected(), OnDisconnect(), y OnReceived() respectivamente. Sin embargo, el uso de esos métodos síncronos podían hacer ver que este aspecto no era importante.

La versión 0.4 ha dado la vuelta a esto, y obliga a utilizar sus equivalentes asíncronos OnConnectedAsync(), OnDisconnectAsync() y OnReceivedAsync(); en estos casos siempre se retornarán objetos de tipo Task, lo que abre la puerta a la paralelización y mejor aprovechamiento de la infraestructura sobre la que estamos corriendo.

Por tanto, comenzaremos la implementación de nuevo servicio heredando de PersistentConnection y sobrescribiendo, aunque de momento con un cuerpo vacío, el método que necesitamos para nuestro chat:

public class SimpleChatService : PersistentConnection
{

    protected override Task OnReceivedAsync(string connectionId, string data)
    {
        // ...
    }
}

Observad el retorno del objeto Task, que representa la tarea asíncrona que iniciamos desde el método. Si el trabajo a realizar en su interior es asíncrono podemos utilizar cualquiera de las vías disponibles para crear un Task, lo retornamos, y listo, por ejemplo así:

    protected override Task OnReceivedAsync(string connectionId, string data)
    {
        return Task.Factory.StartNew(() =>
            // Async task here...
        );
    }

Pero, ¿qué ocurre si la lógica que queremos implementar en ellos es puramente síncrona? Pues no pasa nada, la ejecutaremos y retornaremos una llamada a la implementación por defecto del método, que ya se encarga de devolvernos un Task vacío :-)

    protected override Task OnReceivedAsync(string connectionId, string data)
    {
        // Do some sync work and 
        // then return an empty Task
        return base.OnReceivedAsync(connectionId, data);
    }

Bueno, continuemos con la implementación de nuestro chat. Cuando un cliente nos envíe un texto, lo recibiremos en el método OnReceivedAsync, y lo que queremos hacer es enviarlo al resto de usuarios conectados, ¿no? Pues simplemente usaremos la propiedad Connection disponible en la clase base y llamaremos a su método BroadCast(). Y dado que éste retorna un Task, directamente podremos retornarlo como resultado del método. La implementación completa de la clase queda como sigue:

public class SimpleChatService : PersistentConnection
{
    protected override Task OnReceivedAsync(string connectionId, string data)
    {
        string clientDescription = getClientDescription();
        return Connection.Broadcast(new { user = clientDescription, message = data });
    }
 
    private static string getClientDescription()
    {
        var context = HttpContext.Current;
        var name = context.Request.IsAuthenticated
                        ? context.User.Identity.Name
                        : context.Request.UserHostAddress;
        return name;
    }
}

Mediante la invocación a BroadCast() estamos enviando a todos los clientes conectados un objeto anónimo serializado en JSON. En este caso, dicho objeto contará únicamente con dos propiedades, user y message, que recuperaremos desde el lado cliente para mostrar el mensaje en pantalla junto con el nombre del usuario emisor.

El otro método que aparece en el código, getClientDescription(), es simplemente una ayuda para obtener el nombre del usuario que se mostrará en pantalla, que será el User.Identity.Name si está autenticado, o la IP en caso contrario.

No sé si os estáis dando cuenta, pero, ¡estamos implementando el lado servidor de un mini-chat en menos de diez líneas de código!

4. Rutado de peticiones hacia el endpoint

Como también vimos en el artículo anterior de la serie, para que las peticiones lleguen al endpoint es necesario registrarlo en el sistema de routing. El lugar para hacerlo, como es habitual, será el global.asax:

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        RegisterGlobalFilters(GlobalFilters.Filters);
        RegisterSignalrConnections(RouteTable.Routes);
        RegisterRoutes(RouteTable.Routes);
    }
 
    public static void RegisterSignalrConnections(RouteCollection routes)
    {
        routes.MapConnection<SimpleChatService>("SimpleChat", "SimpleChatService/{*operation}");
    }

Esto es todo lo que necesitamos para dejar configuradas las rutas. El parámetro genérico de la llamada a MapConnection() indica la clase que implementa el servicio; el primer parámetro del método es simplemente el nombre de la ruta (no tiene mayor importancia), y el segundo especifica la URL a través de la cual será posible acceder al endpoint.

Y así, podemos pasar ahora a implementar el cliente.

5. El lado cliente

En el proyecto de demostración que podéis descargar al final del post está un poco más trabajado a nivel de interfaz de usuario, aquí vamos a comentar únicamente los principales aspectos a tener en cuenta.

En lo relativo a la presentación, nuestro chat sólo necesita la inclusión del siguiente código en la página:

<div id="chat">
    <div id="chat-messages">
        <!-- Placeholder for messages -->
    </div>
    <form method="POST" action="#" id="chat-form">
        <input type="text" id="chat-message" />
        <input type="submit" value="Send" />
    </form>
</div>

Como podéis intuir, el bloque con identificador “chat-messages” será utilizado, obviamente, para introducir los mensajes que vayamos recibiendo desde el servidor, es decir, los escritos por todos los usuarios que estén participando en el chat. El formulario, por otra parte, simplemente es el mecanismo mediante el cual los usuarios podrán enviar sus mensajes.

Además de esto necesitaremos algunos scripts que le den vidilla al asunto:

    $(function () {
        $("#chat-form").submit(function () {
            var message = $.trim($("#chat-message").val());
            if (message != "") {
                conn.send(message);
            }
            $("#chat-message").focus().val("");
            return false;
        });
 
        var conn = $.connection("SimpleChatService");
        conn.received(function (data) {
            var user = data.user;
            var message = data.message;
            $('#chat-messages')
                .append("<div><strong>" + user + "</strong>: " +
                         message + "</div>"
                );
          
            var sh = $('#chat-messages')[0].scrollHeight;
            $("#chat-messages").animate({ scrollTop: sh }, 3000);
        });
        conn.start();
    });

A grandes rasgos, lo que estamos haciendo es lo siguiente:

En primer lugar, creamos y asignamos la función de tratamiento del evento submit del formulario. En su interior, lo único que hacemos es enviar el contenido de la caja de texto “chat-message” al servidor, limpiar dicho control y volver a posicionar sobre él el foco de edición. El texto enviado desde este punto será el que recibimos en el método OnReceivedAsync() que hemos visto anteriormente implementado en el servidor.
A continuación, se obtiene una conexión al servicio, almacenándola en la variable conn.
Implementamos el callback received sobre el objeto conn, que será invocado cuando se reciban datos enviados por el servidor. El parámetro data será la instancia del objeto anónimo que enviamos desde el servidor mediante el broadcast, por eso podemos usar directamente sus propiedades name y message para añadirlo a la ventana del chat. Finalmente, desplazamos la ventana hasta el final del scroll para que se puedan ver directamente los últimos mensajes recibidos.
Por último, iniciamos la conexión llamando a método start() del objeto correspondiente.

Y con esto hemos acabado la implementación de nuestro simplísimo chat. Como os comentaba, en el proyecto de demostración está un poco más trabajado a nivel de interfaz, pero básicamente es lo que hemos visto aquí.

6. Punto extra: agrupación de clientes en SignalR

Hasta ahora, hemos visto que al hacer un broadcast el mensaje es enviado a todos y cada uno de los clientes que se encuentran en ese momento conectados al servicio. Esto es válido en muchos escenarios, pero hay otros en los que necesitamos algún mecanismo para segmentar o agrupar los clientes según determinados criterios.

Un ejemplo clásico serían los chats reales, donde es habitual encontrar “salas”. Los mensajes enviados por un usuario concreto son vistos únicamente por los compañeros de la sala en la que se encuentra, por lo que podríamos considerar que se trata simplemente de un mecanismo de agrupación de usuarios.

SignalR incluye de serie mecanismos para añadir o eliminar usuarios (clientes) a grupos y enviar mensajes a éstos de forma bastante sencilla, mediante los siguientes métodos de la clase PersistentConnection (que, por cierto, también retornan un objeto de tipo Task):

AddToGroup(string connectionId, string groupName): agrega el cliente con el identificador clientId al grupo denominado groupName.
RemoveFromGroup(string connectionId, string groupName): elimina el cliente clientId del grupo identificado como groupName.
SendToGroup(string groupName, object value): envía el objeto value, convenientemente serializado en JSON, a todos los clientes conectados al grupo groupName.

Fijaos que, de momento, el API es bastante simple en lo relativo a los grupos. Por ejemplo, no hay forma de vaciar un grupo, o de consultar los clientes pertenecientes a cada uno de ellos, aunque parece que está previsto ampliar las funcionalidades disponibles en futuras versiones del producto.

De nuevo os animo a que descarguéis el proyecto de demostración y veáis SignalR en ejecución. Un framework que, sin duda, vale la pena conocer por la cantidad de escenarios en los que podemos utilizarlo y aportar ese factor “¡uau!” que comentaba al principio de esta serie.

Publicado en: Variable not found.

Enlaces interesantes 73

2012-03-12T09:00:00.000+01:00

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 7 al 11 de marzo de 2012, y algunos más que tenía pendientes desde antes del viaje a Seattle. Espero que os resulten interesantes :-)

.Net

C#/.NET Little Wonders – The DateTimeOffset struct
James Michael Hare
C#/.NET Little Wonders: The SequenceEqual() Method
James Michael Hare

Asp.net

9 Ways Your Brand New ASP.NET MVC Project Can Be Better
Michael Kennedy
Managing Cumbersome Shared Views Folder for Large Projects in MVC
Michael Kennedy
Simplify Session and ViewState Access With a Helper Method and Func<>
Chris Surfleet
Microsoft IIS 8.0 Express Beta is Released!
Robert McMurray
Introduction to the ASP.NET Web API
Stephen Walther
Mass Assignment Vulnerability in ASP.NET MVC
Josh Bush
Implementando CORS en ASP.NET Web API
Unai Zorrilla
ASP.NET MVC 4 – Web API
Malcolm Sheridan
ASP.NET MVC 4 Beta – Bundling and Minification Dymystified
John V. Petersen
ASP.NET MVC Tutorial: Handling Errors and Exceptions
Dino Esposito
Up and running with Less (ASP.NET MVC)
Mads Cortz
Implementing CORS support in ASP.NET Web APIs
Carlos Figueira
ASP.NET Web API and HttpClient Available on NuGet
Henrik F Nielsen
Introducing ASP.NET MVC 4 Beta with Web APIs
Carlos Figueira
CoffeeScript Custom Processor in ASP.NET MVC 4 Beta
Pieter Germishuys
Explorando ASP.NET MVC4 WebAPI–3: Formatos de salida
Eduard Tomás
ASP.NET MVC 4 Beta
Scott Guthrie

Azure / Cloud

Añadir administradores en la sección Windows Azure AppFabric
Gisela Torres

Conceptos

CQRS Martin Fowler

Data access

SQL Server 2012 RTM Day Download Link Round-up
Greg Duncan
MVC 4 and Entity Framework Database Migrations
David Hayden
Using Entity Framework 4.3 Database migration for any project
Fredrik Normén
Using EF 4.3 Code First Migrations with an Existing Database
Julie Lerman

Html/Css/Javascript

New CSS3 Properties For Better Text And Word Wrapping
Christian Vasile
Mastering CSS3: 7 Cool text-shadow Samples You Can’t Miss
Konstantin Kichinsky (Vía @etnassoft)
Editor visual de javascript
Vía @etnassoft
3 Simple Things to Make Your jQuery Code Awesome
Joe Zim
Using the Fullscreen API in web browsers
Robert Nyman
Thinking Async
Chris Coyier
Find the jQuery Bug #5: Defective Data
Elijah Manor
JavaScript Closures Explained
Derek Greer
Viewport, Device, and Document Size
Kirupa Chinnathambi
Using CSS without HTML
Mathias Bynens
Essential JavaScript Design Patterns For Beginners
Addy Osmani (vía @hhariri)

Visual Studio/Complementos

New time saving features for Web projects in Visual Studio 11 Beta
John Wen

Otros

Don’t try to model the real world, it doesn’t exist
Udi Dahan
Dark Matter Developers: The Unseen 99%
Scott Hanselman
Mapear los documentos de Skydrive en Windows 7
Gisela Torres

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found