¿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