Improving the Code Quality in .Net and .Net Core projects using NDepends

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-7.png

Continuando con el análisis de código, la cobertura y los tests como ya viemos en este post (“Runing Tests and Code Coverage without Visual Studio. OpenCover con coverlet y ReportGenerator“), seguiremos profundizando en el “Code Quality”, y conoceremos otra buena herramienta, también extensión de Visual Studio e integración con Azure DevOps, NDepends:

NDepend es la única extensión de Visual Studio que puede decirnos que durante la última hora, el código recién escrito ha introducido una deuda técnica que costaría, por ejemplo, de 30 minutos. Sabiendo esto, podemos arreglar el código, incluso antes de comprometerlo con el control de código fuente.
Con NDepend, las reglas son consultas C# LINQ que se pueden crear y personalizar en cuestión de segundos. Estas consultas contienen fórmulas de C# para calcular estimaciones técnicas de la deuda.
El conjunto de reglas predeterminado ofrece más de cien reglas de código que detectan una amplia gama de Code Smell que incluyen código espagueti, código muerto, breaking changes, y mal uso de POO.

Antes de nada, quiero aprovechar la oportunidad y dar las gracias a Patrick Smacchia, quien me a invitado a probarla y a sacar mis propias conclusiones, que sin duda, me adelanto a decir que han sido satisfactorias.

Así mismo quiero hacer referencia a este post de Variable Not found, donde @jmaguilar, comentaba las bondades de esta herramienta. Profundizaré comentando nuevas características y mejoras que han seguido llegando. Como podemos ver, directamente al abrir la herramienta nos encontramos ya con nuevas integraciones: AppVeryor, Bamboo, VSCoverage, OpenCover, DotCover, NCover además delas ya conocidas: VSTS, TeamCity, Sonarqube, Jenkins y Reflector:

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-6.png

Par probarla, instalaremos la extensión para Visual Studio y utilizaremos este ejemplo (https://github.com/juanluelguerre/DotNet.ApiRest.BasicTemplate) .

En Visual Studio 2019, tenemos una nueva opción de menú (Extensions – NDepend) con multitud de opciones:

La imagen tiene un atributo ALT vacío; su nombre de archivo es image.png

Para añadir la solución , proyectos y/o ensamblados y así asociar NDepend para su ejecución, ejecutamos “NDepend Project Properties” y a continuación, el análisis (Run Analysis) tras el cual se muestra un Dashboard. Dashboard que representa un resumen general del estado de nuestra aplicación. A partir del mismo podemos acceder a cada uno de sus detalles que iran siendo mostrados en la ventana de la derecha y nos irán facilitando la posibilidad de navegar por el código e incluso ejecutar acciones sobre propio código.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-2.png

Uno de los puntos interesantes es la facilidad para hacer consultas sobre el código o incluso definir nuevas reglas, usando un lenguaje muy similar a “Linq” . Para ello bastará con editar las mismas o bien crear una nueva.

En lo que respecta, por ejemplo, a la deuda técnica, podemos verla detallada por método e incluso acceder y/o modificar el código “Linq” equivalente.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-3.png

Asi mismo, para nuevas personalizaciones tenemos varias alternativas mediante el menu: “Tools – NDepend – new y sub-menu: Code query… | Code Rule… \ Quality Gate… | Tend Metric…\ Trend Chart… \ Rule File… \ Project …“.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-5.png

Donde, para la creación de una nueva consulta (“Tools – NDepend – new – Code Query“), navegamos a la ventana de edición que incluso incorpora Intellisense, lo que nos facilita mucho más el trabajo.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-6.png

En cuanto a la covertura de código, NDepends proporciona el siguiente detalle de manera totalmente gráfica en proporción al número de lineas de código (LOC), e incluso, en la ventana de la derecha, el % de cobertura, a nivel de namespace, clase, método, etc..

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-7.png

La matriz de dependencias no cambia mucho con respecto a la que ya conocíamos,

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-9.png

sin embargo, el gráfico/diagrama de dependencias si que lo hace, con un diseño mucho más moderno y una navegación mucho más amigable e intuitiva y, nuevamente con posibilidad de edición:

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-11.png

Por otro lado, en la esquina inferior derecha de Visual Studio, encontramos también una opción, en la que, además de algunos accesos directos, vemos a modo de resumen datos significativos sobre el estado de nuestro código.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-1.png

Que también cuenta con una opción “Run Analysis and Build Report“, que, además de mostrar el Dashboard, como hemos visto anteriormente, genera un report local (en formato html), totalmente navegable y accesible a todos los detalles. Como podemos imaginar, su consumo, va a permitirnos no depender directamente de Visual Studio.

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-4.png

Por ultimo, NDepend cuenta con una herramienta de línea de comando avanzada (NDepend Power Tools), que hace uso del API de NDepends y proporciona una amplia variedad de características, desde la búsqueda de código duplicado, facilidad para la revisión de código y, hasta la detección de cambios de API públicas:

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-5.png

Como conclusión, y coincidiendo con @jmaguilar, NDepend:

  • No requiere la edición “Enterprise” de Visual Studio y tenemos la posibilidad de usar su versión stand alone.
  • Es una herramienta, en mi opinión muy potentente, que además resulta casi imprescindible en grandes proyectos y de alto y constante mantenimiento.
  • Esencial al adquirir/heredar proyectos de terceros, donde de un primer vistazo vamos a poder tener una amplia visión sobre el estado del mismo. Va a permitirno poder hacer una valoración y saber a que nos enfrentamos desde un primer momento.
  • Añadir, que se trata de una herramienta de pago con su versión trial que puedes descargar aquí.

Espero que sirva de utilidad y que ayude a seguir creciendo como programadores además de a continuar mejorando y aprendiendo de las buenas practicas.

Happy Coding and good Quality !

Referencias:

¿Javascript ha muerto? .NET Web Assembly con Blazor

imageDurante el pasado fin de semana, entre algo de running, y alguna que otra fiesta, al fin he decidido aventurarme con Blazor.   Es cierto, que tengo pendiente otros “TO DOs”, como por ejemplo  profundizar en Angular y otros frameworks Javascript. Pero,… ¿Realmente lo necesitaré? ¡me pregunto!.

Como apasionado del mundo .NET, ¿Porque cambiar de lenguaje de programación para desarrollar Front? ¿Porque no desarrollar siempre con .NET?

Veamos a continuación si realmente Javascript ha muerto o estamos ante una nueva era/moda o simplemente una alternativa más ¿Quizás ha llegado ya el momento de que Web Assembly esté maduro?¿DLLs que se ejecutan en el navegador? 

¿Quieres saber más de todo esto? Continua leyendo, vayamos poco a poco conociendo estos nuevos conceptos.

¿Que es Web Assembly (abreviado Wasm)?

WebAssembly (Wasm) es un formato de código binario portable (bytecode), para la ejecución íntegra en navegador de scripts de lado del cliente. Se trata de un lenguaje de bajo nivel, diseñado inicialmente como formato destino en la compilación desde C y C++ entre otros.

El resultado de usar Wasm en lugar de Javascript, es una aplicación mucho más rápida, tanto durante la carga como en ejecución. ¿Quieres saber porqué? Echa un ojo a este enlace.

¿Que es Blazor?

Ahora que sabemos lo que es Wasm, podemos decir que Blazor es la implementación de Microsoft .NET para generar ensamblados Wasm.  Y, mas concretamente, un framework para la construcción de páginas web (SPA) basadas en .NET (C# y Razor Pages) y HTML  que se ejecuta en el navegador a través de WebAssembly. Habilita el desarrollo web full stack con la estabilidad, consistencia y productividad de .NET.

¿Aún te quedas con ganas de conocer más? Echa un ojo a este otro link. ¡Y, Recuerda que “Razor” y “Razor Pages”  son cosas diferentes!

Ahora si, es el momento de ponerse con el código, y lo haremos partiendo de este Get Started, que resumo brevemente:

Requisitos/Herramientas

1.- Instalar NET Core 2.1 Preview 1 SDK.

2.- Instalar la última Preview de Visual Studio 2017 (15.7). ¡Tranquil@, puede convivir con tu Visual Studio sin ningún problema!

3.- Instalar ASP.NET Core Blazor Language Services extension o bien, directamente desde Visual Studio, configurar una nueva fuente “https://dotnet.myget.org/F/blazor-dev/vsix/” e instalar. Esta última alternativa nos permitirá disponer de las notificaciones de actualización en todo momento, dado que aun no se encuentra la extensión de Blazor en el Market Place.

image image

Un Nuevo Proyecto

1.- Crear un nuevo proyecto de tipo ASPNET Core Web Application:

image

2.- Seleccionar uno de los dos tipos de proyecto para Blazor: Blazor o Blazor (ASP.NET Core hosted).

 image

3.-  Actualizar referencias NuGet. Incluir una nueva fuente nos permitirá de las actualizaciones mucho más rápidamente.

image

4.- Compilar y ejecutar la solución. Si has optado por crear el proyecto de tipo Blazor (ASP.NET Core hosted), establece como “Startup Project” el proyecto con el sufijo “Server” , de los tres generados.

blazor-home

Nota: Por cada carpeta  Shared y Pages se generan namespaces, por lo que es recomenable que los nombres de los proyectos y  ensamblados coincidan con los namespaces. ¡Esto cosa de “Razor Pages”, que a diferencia de MVC, está basado en páginas en lugar de Controllers!

Además de los ejemplos del “Get Started” anterior, aquí dejo el código (Github) de mi proyecto Taskin, con el que podrás cacharrear cuanto quieras y seguir profundizando.

image

Un ejemplo, de donde es mejor usar Wasm, podemos verlo en este juego de demo o incluso, en algo más real, aquí.

Aspectos principales

  1. Layout. Cada fichero .cshtml con una instrucción “@implements ILayoutComponent” como primera línea, constituye un Layout. El Layout que usa cada aplicación se indica en el fichero _ViewImports.cshtml como: “@layout NOMBRE_LAYOUT
  2. Componentes. Cada página .cshtml es un componente Blazor. Para usar un componente, únicamente tenemos que escribirlo como si de un tag HTML se tratará. Ej.: “<Counter />”. Además,  éste puede tener parámetros (propiedades públicas) permitiendo así ser usados desde cualquier página u otro componente.
  3. App.cshtml. Utiliza el Router para realizar el enrutado de las peticiones (o requests) a componentes Blazor específicos. “<Router AppAssembly=typeof(Program).Assembly />”.
  4. Routing. La directiva @page, indica a cada componente que éste, es una página. Sin esta directiva, ningún componente podría ser enrutado pero si ser usado por cualquier otro componente o página, que hiciera este enrutamiento.
  5. Dependency Injection. La inyección se lleva a cabo usando “@inject”   Ej.:“@inject HttpClient Http”
  6. Componente principal (o Root).  El componente principal de la aplicación se especifica en el EntryPoint:  Program.Main, definido en Program.cs, que es donde se configuran los proveedores de servicios (o services providers) para la aplicacion.
  7. Index.html.  Html que determina donde se reenderizará el comonponente. En tiempo de compilación la etiqueta “<script type=”blazor-boot”></script>” es reemplazada por esta otra “<script src=”_framework/blazor.js” reload=”/_reload” linker enabled=”true” references=”ElGuerre.Taskin.Models.dll,Microsoft.AspNetCore.Blazor.Browser.dll,Microsoft.Extensions.DependencyInjection.dll, …” entrypoint=”ElGuerre.Taskin.Blazor.Program::Main” main=”ElGuerre.Taskin.Blazor.dll”></script>”, que maneja el inicio de la aplicación y el punto de entrada a la misma.
  8. Hosting with ASP.NET Core. Para la publicación en ASP,NET Core, el proyecto “Server” hace referencia al proyecto cliente haciendo uso de un middleware que permite que Blazor pueda estar disponible en los navegadores: “app.UseBlazor<Client.Program>();”

Y, tranquil@, Javascript no ha muerto. Aquí puedes ver una prueba de ello, Wasm también puede ser usado desde Angular gracias a Emscripten. Podemos ver una colección de ejemplos sobre su uso en este enlace: https://boyan.io/angular-wasm/.

Esto sólo ha sido el principio, Wasm está comenzando y Blazor también, ¡eso si, hay que seguir disfrutando de todo lo que trae y seguirá trayendo Blazor!

Referencias:

¡A new era/seasson coud be comming!
Saludos & do Wasm !
Juanlu

Nuevas Características C# 7.1

cs71_featuresBuenas,

Siguiendo con las características de C#, en este post continuaremos con nuestro Tour y veremos concretamente las de C# 7.1:

  • Async Main Method
  • Default Literal Expressions
  • Inferred Tuple Element Names

ver-github

¡Recordemos que aquí tenemos los links a todos los post sobre las características de C# desde su versión 6.0: https://elguerre.com/2017/12/14/y-ms-new-features-c-7-0-2-2/!

Enjoy your coding !
Juanlu

Referencia: https://docs.microsoft.com/es-es/dotnet/csharp/whats-new/csharp-7-1

TIP: C#6 New Features 2/2

imageHola,

Continuando con las nuevas características que incorpora C# 6.0,  he aquí un nuevo Video TIP / Tutorial con el resumen de las siguientes y últimas 4 de ellas:  https://youtu.be/v5DJ7drAwr0.

  • Autoproperties
  • Expresion Bodied Members
  • Collectoin Initializers
  • Exception Filters

Si aun no has visto el detalle con las cuatro características anteriores, aquí las tienes: https://elguerre.com/2017/10/02/tip-c6-new-features-12/

Como siempre, el código de ejemplo, en Github, para que puedas descargarlo y hacer las pruebas que consideres para explotarlas: https://github.com/juanluelguerre/Demos/tree/develop/CSFeatures/CS6/CS6

Un saludo & happy new Features Winking smile
Juanlu

[GIFTip] Excepciones personalizadas sin escribir código

Hola,

Ahora que voy cogiendo ritmo con los Tips y  VídeoTips que podemos ver en mi canal de youtube (https://www.youtube.com/user/JuanluElguerre), ¿Por qué no dar paso a los GIFTips? Creo que es una gran idea para aquellos posts en los que hay poco que decir y mucho que contar.

¡Seguro que ahora no paso por alto el escribir algún que otro post!

Gracias a Visual Studio, cada vez escribimos menos código. En esta imagen GIF podemos ver un ejemplo de crear una nueva clase personalizada para nuestras excepciones.

CreationCustomExceptions

¡Expero que sea de utilizad!

Un saludo
Juanlu

[Video Tip]Análisis estático con Sonar Lint y servidor privado Sonar en Azure App Service (Linux)

Muy buenas,

En esta ocasión veremos como realizar el análisis estático de nuestro código y como sacar mayor partido haciendo uso de Sonar como servidor, aunque también veremos que no es realmente necesario.

¿Quieres ver un vídeo explicativo a modo de DEMO? Si es así, puedes acceder directamente a partir de este enlace. En caso contrario, sigue leyendo para leer brevemente un resumen.

Sin usar un servidor sonar.

Para llevar a cabo el análisis estático de código en nuestra solución seguiremos los siguientes pasos:

1.- Añadir el paquete NuGet: SonarAnalyzer.CSharp.

image

2.- Incluir en nuestra solución un fichero Demo.RuleSet.

3.- Configurar las reglas, tanto las específicas de Microsoft, como hasta ahora hacemos en nuestros proyectos, así como las nuevas añadidas por sonar, que distinguiremos fácilmente dado que tienen la nomenclatura “Snnnn”.

image

4.- Finalmente, recompilar para analizar y posteriormente revisar el código.

image

Usando un servidor Sonar.

1.- Instalar la extensión “SonarLint for Visual Studio 2017”.

image

2.- Abrir la solución y realizar la conexión con el servidor Sonar.

image

3.- Tras la conexión, vincularemos la solución a proyecto Sonar previamente creado desde el propio servidor.

4.- Finalmente, el fichero de reglas “.ruleset”, se creará automáticamente.

image

5.- Al igual que para el caso anterior (sin servidor), configurar las reglas y compilar para comenzar a analizar y revisar el código.

Happy testing!

Un saludo
Juanlu, ElGuerre

Template 10. Un nuevo camino para hacer aplicaciones UWP. ¡La churrera está en marcha!

Icon for package Template10

 

Template 10: “Una amplia biblioteca de helpers, servicios y clases para las aplicaciones UWP con el fin de maximizar la genialidad y minimizar lo repetitivo.”

UWP se encuentra entre nosotros y como sabemos, viene con muchas y nuevas caráctericticas: Device families, SplitView/Hamburger Menu, Relative Panel, StateTriggers/AdaptiveTrigger, etc. Si bien es cierto, la creacion de aplicaciones siguie siendo repetitiva teniendo que crear la estructura base o esqueleto de nuestra aplicación cada vez que comenzamos con una nueva. Es cierto que podemos crear una plantilla y guardarla para partir de ella. También es cierto que seguiremos teniendo que repetir código o pensar en la navegación, etc. Para evitar “todo” esto ¡llega TEMPLATE 10!

 

Con Template10 podremos comenzar a crear aplicaciones como UWP “churros” y disponer en ellas desde el momento cero, de “todo” lo imprescindible.

  • Controles
  • Behaviors
  • Services
  • Converters
  • MVVM y, ademas compatible con con MVVMLight (Galasoft) y IoC/DI.
  • etc.

Personalmente lo que mas me gusta de Template 10, es toda la funcionalidad que incluye Out-of-the-box:

  • Plantillas de projectos “Mínima” o “Básica”
  • BootStrapper. Menos eventos en nuestro “App.xaml.cs”. En lugar de: OnLaunched, OnActivated, OnFileActivated, OnCachedFileUpdaterActivated, etc. Unicamente necesitaremos dos: “ public override async Task OnInitializeAsync(IActivatedEventArgs args)” y “   public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)”
  • Menu Hamburger
  • Navegación y control del Menú, sin tener que codificar practicamente nada.
  • Adios a “Behaviors SDH (XAML)”. Referencia con advertendia de obsolescencia y Bienvenida: “Microsoft.Xaml.Behaviors.Uwp.Managed”, como Open Source.
  • El códio se encuentra en Gihub: https://github.com/Windows-XAML/Template10 y además, con algunos ejemplos para hacerlo aún más fácil.

Los pasos que seguiremos para la ejecución de una aplicación haciendo uso de Templat10 son los siguientes:

  1. Descargar el instalable (v1.5) para la plantilla de proyecto desde aquí.
  2. Crear un nuevo proyecto de tipo Template 10 (Minimal): image
  3. Actualizar desde NuGet el paquete “Template10” e incluir el paquete “Microsoft.Xaml.Behaviors.Uwp.Managed”
  4. En estos momento y hasta que sea actualizada la plantilla de proyecto, modificar el constructor de la clase Shell.xaml.cs, sustituyendo el parámetro “NavigationService” por su interfaz “INavigationService” tal y como puede verse en la siguiente image: image
  5. F5 y voilá…

imageimage image

Espero que haya sido de utilidad.

Gracias @jerrynixon, por ofrecernos tan apreciado trabajo y hacernos más facil la creación de nuestas aplicaciones. “Thanks so much”

Saludos
Juanlu, ElGuerre