AngularJs, el framework MVC de JavaScript

En la actualidad, los sitios web son mucho más dinámicos ofreciendo una experiencia de usuario agradable y ligera realizadas con las tecnologías web que dominan esta era; HTML5, Javascript y CSS3 son los líderes indiscutibles para el desarrollo de nuestros front-end.

Cómo sabemos HTML es un lenguaje estático y requiere de Javascript para hacerlo dinámico. Sin embargo, esta dinamización de documentos HTML es una tarea que conlleva trabajo.

En anterioridad a este tipo de frameworks podíamos modificar nuestro DOM mediante métodos conocidos cómo el getElementById o createElement, entre otros, que nos permitían modificar según nuestra necesidad el documento HTML. Todo el código JS que íbamos desarrollando no seguía un patrón y, con el tiempo, todo era difícilmente manejable y podía terminar generando un Spaguetti Code.

En este punto, frameworks de desarrollo cómo AngularJS y el patrón MVC (Modelo, Vista, Controlador) nos puede ser de gran ayuda.

AngularJs es un framework MVC de JavaScript que permite crear aplicaciones SPA (Single Page Application) y que corre al lado del cliente (browser) para dinamizar documentos HTML.

Este framework nos trae un enfoque dinámico que debemos aplicar sobre los documentos HTML estáticos mediante la vinculación de elementos de nuestro documento HTML con nuestro modelo de datos (data binding). De esta forma, definimos un modelo de datos que se corresponde con determinadas partes de nuestro documento HTML y que, cuándo se produzcan cambios que deban modificar la vista, actualizarán este documento.

AngularJS extiende nuestro documento HTML

Mediante el uso de las directivas (Directives) ng- y las expresiones (Expressions) para bindear datos a las vistas, angular, extiende nuestro documento HTML.

La directiva ng-app define que la aplicación web es una aplicación web que hace uso de angular.
La directiva ng-model se encarga de hacer los bindear nuestras propiedades del modelo de datos con los diferentes controles de HTML.
La directiva ng-bind realiza el binding de nuestro modelo de datos en la View.

Veamos un ejemplo para ver con detalle su uso,

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.controller.main.js"></script>
</head>
<body ng-app="app" ng-controller="Food as vm">
    <input type="text" ng-model="vm.item" placeholder="Entrar alimento" />
    <p>Tengo que comprar {{vm.item}}!</p>
</body>
</html>

Cómo vemos en la estructura de nuestro documento HTML lo primero que debemos hacer es descargar angular y poner una referencia a la librería.

Toda aplicación realizada con angular requiere ser inicializada mediante la etiqueta ng-app que hará referencia a nuestro modulo. Tenemos que ver el modulo cómo un contenedor de las diferentes partes de nuestra aplicación. Toda nuestra aplicación estará compuesta por módulos y a cada modulo le pertenecerá n controladores.

En nuestro fichero app.module.js tendremos la siguiente declaración para exponer nuestro modulo app,

(function () {
    angular.module('app', []);
})();

Y en el fichero app.controller.main.js tendremos el controlador foodController perteneciente al modulo app,

(function () {
    angular
        .module('app')
        .controller('Food', food);
 
    function food() {
        var vm = this;
        vm.item = 'leche';
    }
})();

Si seguimos con nuestro documento observamos que le indicamos el módulo mediange ng-app, el controlador mediante ng-controller al cuál le hemos puesto un alias vm y el modelo de datos (realizando en JS) mediante ng-model. Posteriormente, y en ese caso para la propiedad item, para mostrar el value hacemos uso de las expresiones {{vm.item}} substituyendo la directiva ng-bind. También podríamos hacer,

 <p>Tengo que comprar <span ng-bind="vm.item"></span>!</p>

Y veremos que el uso de las expresiones o de la directiva da el mismo resultado.

Cómo podemos observar AngularJs nos aporta beneficios en el momento de plantear una aplicación web dónde todo su funcionamiento sea en la parte del cliente y dónde el código JavaScript sea el principal actor de nuestro software. Nos aportará estructura, orden y un patrón con la que enfocar nuestras aplicaciones web.

Single-Page Application: Web Apps modernas

Single-Page Applications (SPAs) son aplicaciones web que cargan una única página de HTML y la actualizan de forma dinámica en función de las interacciones del usuario con esa página.

SPAs utiliza HTML5, CSS y AJAX para crear aplicaciones fluida sin recargar la página de forma constante. Básicamente, toda la carga de la página y toda su interacción se encuentra en el lado del cliente mediante JavaScript.

En una página tradicional, cada vez que se hace una navegación del cliente al servidor este renderiza una nueva página de HTML. Esto, ejecuta un refresco de la página en el navegador del cliente.

En una página SPA, después de que la página sea cargada por primera vez, todas las interacciones con el servidor suceden a través de llamadas AJAX. Este devuelve datos, no tags en HTML, normalmente en un formato JSON. La aplicación web usa los datos devueltos en JSON para actualizar la página de forma dinámica, sin tener que recargar la página completa.

Cómo podéis observar, el ciclo de vida de las páginas SPA ofrecerán un rendimiento más fluido sin tener que volver a hacer que la página se recargue al completo.

Uno de los aspectos más cambiantes es la arquitectura de nuestra aplicación web. El envío de peticiones mediante AJAX y recepción de resultados mediante JSON crea una separación entre la capa de presentación y la lógica de la aplicación.

Esta separación hace que sea más fácil diseñar y mejorar cada una de las capas por separado. Si implementamos nuestra arquitectura correctamente, podremos cambiar el código HTML sin tocar el código que implementa la lógica de la aplicaciones, haciendo nuestra solución la ideal.

En esta arquitectura, toda la interacción del usuario con la UI sucede en el cliente (browser) a través de JavaScript y CSS dejando al servidor cómo una capa de servicio, es decir, que el servidor encapsulará una Web Api para dar respuesta a las peticiones HTTP de la SPA.

Con esta arquitectura, el cliente y el servicio son independientes pudiendo reemplazar al completo todo nuestro back end siempre y cuándo las cabeceras de la API se conserven para que el cliente pueda ejecutar las llamadas HTTP sin modificación. Por supuesto, lo contrario, también sería completamente posible. Podríamos escribir una aplicación móvil nativa o cualquier otra aplicación que consumiera la API al completo.

Para hacer SPAs existen diferentes Frameworks de JavaScript que podemos usar. En próximos articulos veremos frameworks cómo KnockoutJs, AngularJs y Ember.Js para el lado del cliente sobre ASP.NET, y ASP.NET Web Api para nuestro back-end.

Un saludo!!

Novedades en C# 6.0 (II)

En mi anterior entrada hacia un anticipo de las novedades que ofrece la nueva versión de C#. Todas las novedades, recaen en una evolución hacia la simplicidad y mejora de la escritura del propio lenguaje.

Operador condición NULL

¿Cuantas veces has visto en tu aplicación un NullReferenceException por no controlar correctamente un posible valor null? Seguramente en diferentes ocasiones. En esta nueva versión se nos propone una forma simple y limpia de hacer esta validación.
Observemos cómo hacíamos la validación hasta el momento,

public string Truncate(string value, int length)
{
  string result = value;
  if (value != null)
    result = value.Substring(0, Math.Min(value.Length, length));
  return result;
}

Si no hacemos la validación del value a null, el método Substring nos devolvería una excepción NullReferenceException. Vamos a hacer exactamente lo mismo, pero con la nueva sintaxis de código,

public string Truncate(string value, int length)
{          
  return value?.Substring(0, Math.Min(value.Length, length));
}

Cómo podemos observar, nos simplifica la validación y la expresa de forma natural para que nos sea más simple y ágil tener en cuenta este tipo de validaciones que tantos quebraderos de cabeza nos dan cuándo las olvidamos.
Debemos tener en cuenta que el operador ? va a devolver siempre un tipo nullable, es decir, que si el tipo de devolución es int deberemos expresar el tipo cómo int? para que pueda aceptar el valor después de la validación con el operador o bien un null.
De hecho, si no indicamos esto, el IDE no nos dejará compilar indicando que el error es de conversión de tipos int? a int.

Mejoras en al gestión de excepciones

Tenemos dos mejoras muy importantes, la primera de ellas es el uso de operaciones async/await dentro de los bloques de excepciones y la segunda es el filtrado de excepciones.

try
{
  WebRequest webRequest = WebRequest.Create("http://contoso.com");
  WebResponse response = await webRequest.GetResponseAsync();
}
catch (WebException exception)
{
  await WriteErrorToDb(exception);
}

De forma totalmente asíncrona escribiríamos la traza en en nuestro log y seguiremos ejecutando el código mejorando así el performance de nuestra aplicación. Haciendo uso del mismo bloque de código podemos, ahora, filtrar por el tipo de excepción y actuar en consecuencia. Veamos el ejemplo,

try
{
  WebRequest webRequest = WebRequest.Create("http://contoso.com");
  WebResponse response = await webRequest.GetResponseAsync();
}
catch (WebException exception)
 when (exception.Status == WebExceptionStatus.Timeout)
  {
     await SendEmail(exception);
  }

Inicialización de diccionarios

Esta característica nos permite inicializar con valores por defecto nuestros diccionarios con mucho menos código que antes,

Dictionary<string, string> airportCode = new Dictionary<string, string>()
{
["BCN"] = "Barcelona",
["LER"] = "Lleida",
["SVQ"] = "Sevilla"
};

Constructores primarios

Esta es una fantástica feature para nuestro código, aunque a mi personalmente, me gusta más tener los constructores correctamente ubicados en regiones dentro de mi clase aunque debo reconocer que ubicar el constructor a nivel de clase es práctico y nos da, de un solo vistazo, que información precisa la clase para funcionar debidamente.

public class BasketItem(int unit, int productId, double price)
{
public string Unit{ get; set; } = unit;
public string ProductId { get; set; } = productId;
public string Price { get; set; } = price;
}

Espero disfrutéis de estas novedades y sobretodo, que las apliquéis 😉 ¡vuestro código lo agradecerá!

Novedades en C# 6.0 (I)

En mi anterior entrada, dónde hacia una introducción a Roslyn, ya citaba que no solo del compilador se trataba si no que tendríamos mejoras para que nuestro código sea mas compacto, legible y este mejor organizado.

El concepto de code smell lo podremos aplicar aquí y podremos ver cómo C# en su versión 6.0 nos ayuda mucho en ello con pequeñas pero significativas mejoras. Cómo hay varias y en bastantes quiero profundizar en detalle, he preparado una serie de entradas diferentes y en esta,me he centrado en aquellas que son más mundanas pero no por ello menos importantes.

Inicializar las propiedades

En todas nuestras clases tenemos propiedades y estas, en ocasiones, deben ser inicializadas. Con esta nueva versión, esto se puede hacer directamente al momento de declarar la propiedad y asignar su valor.

public class Employee
{
   public string First { get; set; } = "Francesc";
   public string Last { get; set; } = "Jaumot";
}

Propiedades de solo lectura

Relacionada con la anterior, podemos hacer exactamente lo mismo aunque nuestra propiedad sea solo de lectura, es decir, solo con get y sin set.

public class Employee
{
   public string First { get; } = "Francesc";
   public string Last { get; } = "Jaumot";
}

Por debajo, esto, es implícitamente declarado cómo readonly y esta se puede inicializar en el constructor de la siguiente manera,

public class Employee
{
   public string Name{ get; };

   public Employee(string first, string last)
   {
       Name = first + " " + last;
   }
}

Mejora en el uso de clases estáticas

¿Cuantas veces hemos visto Console.WriteLine(“”); o bien Math.Sqrt(2); entre muchas otras? En esta versión tan solo deberemos ocuparnos de hacer el correspondiente using y poder usar el método de dentro de la clase estática de una forma más simple.

using System.Console;
using static System.Math;

class Program
{
    static void Main(string[] args)
    {
        WriteLine(Sqrt(2));
    }
}

Interpolación en el string

Personalmente, la que más me gusta. Muchas veces deberemos devolver un string formateado, por ejemplo en una pantalla modal que nos muestre el nombre del cliente, o bien un nombre desde recursos en función del tipo de error, etc..Hasta ahora, debíamos hacer,

String.Format("¿Está seguro de eliminar el cliente {0} y número {1}?",obj.NombreCompleto, obj.IdentificadorCliente);

Ahora esto se ha simplificado y en casos dónde tengamos que concatenar varias cadenas el código, nos quedará limpio y ordenado.

return s = $"¿Está seguro de eliminar el cliente {obj.NombreCompleto} y número {obj.IdentificadorCliente}?";

Nombre del operador o clase

Este me encanta, sobretodo para los mensajes de error. Anteriormente teníamos el código así,

if (paramValue == null) throw new ArgumentNullException("paramValue");

Actualmente, lo veremos así,

if (paramValue == null) throw new ArgumentNullException(nameof(paramValue));

El operador nameof es en tiempo de compilación y no penaliza en rendimiento, ademas que nos servirá y mucho, para los que usamos INotifyPropertyChanged en MVVM.
Si alguna vez tenemos que hacer una refactorización, esto nos serviría muchísimo pues el nameof se verá afectado y dentro de la cadena, a no ser que uses alguna herramienta adicional, no aplicaría.

Recordar que algunas de estas mejoras pueden cambiar en su versión final, pero tenéis mi compromiso de que actualizaré el post a medida que tengamos más información 😉

Saludos y a por el siguiente!

¿Qué es “Roslyn” de Microsoft?

Muchos meses llevamos escuchando el nombre de “Roslyn” los que nos dedicamos a .net, pero, exactamente, ¿Qué es Roslyn?

Estoy plenamente convenido que todos los programadores de software queremos escribir el mejor código posible, participar en proyectos dónde todo este muy bien definido, donde existan las pruebas unitarias y dónde tengamos diferentes entornos para realizar nuestras pruebas cómo es debido. Los proyectos de este tipo, cuentan con arquitecturas y estándares que los programadores debemos seguir.

Existen herramientas en Visual Studio, como Code Analysis, que pueden analizar el código e informar de posibles code smells que no huelan demasiado bien. Desafortunadamente, este, no se ejecuta hasta que tenemos el código compilado y esto es poco productivo pues deberíamos saber como esta nuestro código al mismo momento que escribimos.

Una de las mejores herramientas que tenemos a nuestro abasto es nuestro compilador y este sabe analizar nuestro código, tratarlo, ejecutarlo y convertir lo que hemos escrito en algo tangible basado en nuestro código. El compilador realiza esto por nosotros pero este no tiene o no puede tener todo el conocimiento que pueden tener los programadores según el proyecto, entorno u otros. Roslyn es un conjunto de API de compilador que nos dan acceso a todos los pasos de la compilación. La siguiente imagen nos muestra una imagen de cómo actúa el compilador desde que pulsamos F6 si usamos Visual Studio.

Roslyn

Esta plataforma de compiladores para C# y Visual Basic es de código abierto y podemos acceder a él completamente en GitHub para poder ver cómo es y cómo actúa el nuevo compilador pudiendo compilar herramientas de análisis de código, entre otros aspectos mas complejos, con las API que el propio Visual Studio esta implementado.

Cuando Roslyn analiza nuestro código, devuelve un árbol de sintaxis. Este contiene todo lo relacionado con nuestro código, incluido aspectos simples como espacios, tabuladores, corchetes, paréntesis u cualquier otros símbolo escrito en la sintaxis de nuestro código.

Mediante .NET Compiler Platform Syntax Visualizer y con Visual Studio 2015 Preview instalado, podemos ver justo nuestro árbol de sintaxis si lo instalamos. Para ello deberemos ir a Ver > Otras Ventanas > Roslyn Syntax Visualizer y nos mostrará esta nueva ventana que nos analizará el código,

Roslyn_Syntax

Si nos basamos en algo tan simple cómo un “using System;” veremos, en la parte izquierda que todo comienza con una CompilationUnit del carácter 0 al 261, sigue con un UsingDirective que tiene un espacio en blanco entre using y System identificado cóm un IdentifierName con su IdentifierToken y finalmente un SemicolonToken que es un EndOfLineTrivia. Todo esto, es lo que Roslyn nos informa que va a hacer por debajo y nosotros, al ser de código abierto, lo podremos modificar.

Con Roslyn tendremos un compilador dinámico, simple y fácil de manejar con un lenguaje orientado a objetos y de alto nivel dejando de ser una caja negra para todos nosotros.

Esto no termina aquí, en próximos capítulos veremos que incorpora Roslyn en nuestro Visual Studio 2015 y en C# 6.0. Recordar que Visual Studio 2015 y todo lo que le acompaña, incluyendo Roslyn esta en Preview y que por lo tanto, puede ir evolucionando. Mantendré el post actualizado a medida que se vaya avanzando, este, y todos los que tengo preparados.

En las próximas entregas hablaré del las mejoras del entorno Visual Stuido 2015 y de C# 6.0. En la última de ellas, de ASP.NET vNext.

Happy coding! 😉