C# en el browser .NET WebAssembley Blazor

Nota: Esta tecnologia aun es experimental.

Si eres un desarrollador web moderno, probablemente est√©s usando JavaScript. Hasta hace poco, era la √ļnica opci√≥n seria para desarrollo web. Para aquellos de nosotros que quiz√°s no tengamos JS como skill en nuestras habilidades principales (pero que todav√≠a estamos interesados en crear aplicaciones web), el mundo est√° empezando a cambiar. Hoy en d√≠a, tenemos WebAssembly (Wasm). WebAssembly es una forma alternativa de desarrollar aplicaciones web, y no requiere que usted conozca ning√ļn framework JavaScript. WebAssembly es un nuevo tipo de c√≥digo que se puede ejecutar en navegadores web modernos y proporciona nuevas funciones y mejoras importantes en el rendimiento.

El sue√Īo de todo desarrollador .NET

Como desarrollador .NET, tambi√©n podr√° usar su lenguaje y framework¬† favorito para crear aplicaciones del lado del cliente. Tambi√©n podr√° compartir sus modelos, c√≥digo, l√≥gica de negocios entre el c√≥digo del lado del servidor y el c√≥digo del lado del cliente, y esto es enorme. Tener un c√≥digo compartido entre el servidor y el cliente siempre ha sido un sue√Īo para muchos desarrolladores de .NET.

Como funciona el WASM.

Para entender se puede dividir en dos partes:

  • Una m√°quina virtual (VM) que ejecuta el c√≥digo de la aplicaci√≥n web, por ejemplo, El c√≥digo JavaScript que alimenta tus aplicaciones.
  • Un conjunto de API web a las que la aplicaci√≥n web puede llamar para controlar la funcionalidad del dispositivo / navegador web y hacer que sucedan las cosas (DOM, CSSOM, WebGL, IndexedDB, API de audio web, etc.).

Hist√≥ricamente, la m√°quina virtual solo ha podido cargar JavaScript. Esto nos ha funcionado bien, ya que JavaScript es lo suficientemente poderoso como para resolver la mayor√≠a de los problemas que las personas tienen hoy en la Web. Sin embargo, nos hemos encontrado con problemas de rendimiento cuando intentamos utilizar JavaScript para casos de uso m√°s intensivos, como juegos en 3D, realidad virtual y aumentada, visi√≥n de computadora, edici√≥n de im√°genes / video y una cantidad de otros dominios que exigen un rendimiento nativo para tener una idea mas clara puede consultar los siguientes casos de uso –> Aqui¬†.

Que hay de nuevo en Blazor 

El equipo de desarrollo de Blazor se centra en ejecutar código .NET, como C #, del lado del cliente en el navegador. Pero, aparentemente, los esfuerzos del lado del cliente no están listos para el .NET Core prime time, ya que hay más partes móviles y dependencias asociadas con el esfuerzo del lado del cliente, por lo que el progreso no solo lo determina el equipo de desarrollo de Blazor. Por ejemplo, para ejecutar Blazor en el navegador, el código debe compilarse a WebAssembly, otro trabajo en progreso completamente nuevo que básicamente es un código de bytes para la Web por lo cual aun no esta ready para produccion.

Las nuevas caracteristicas de  Blazor 0.6.0 seran entregadas en el release de Net Core 3.0

Mas informacion sobre el progreso aqui .

Construyendo tu primera aplicación Blazor y WebAssembly

Aqui les dejo un video donde muestro como crear nuestra primera aplicacion con Blazor. Nota para tener el ultimo update de Blazor solo debemos actualizar el SDK de Net Core.

Esta es la nueva promesa del gigante de Redmond .Net en el browser ! Me gustar√≠a saber tu impresi√≥n u opini√≥n en los comentarios !

Browser + Razor = Blazor! .NET en el Browser

Los SPA se adoptaron mucho en los √ļltimos a√Īos para construir el dashboard privado parte de las plataformas SaaS (software como servicio) o servicios de Internet en general, as√≠ como para desarrollar aplicaciones empresariales basadas en datos y de gran cantidad de formularios.

¬ŅQu√© es una aplicaci√≥n de una sola p√°gina?

A veces, los nombres en Desarrollo de software no están bien seleccionados, y eso puede generar mucha confusión. Ese no es ciertamente el caso con el término SPA: ¡una aplicación de una sola página literalmente tiene solo una página!

Si ya usas .NET, esto completa el panorama: podr√°s utilizar tus habilidades para el desarrollo basado en el navegador adem√°s de los escenarios existentes para servicios basados en servidores y en la nube, aplicaciones m√≥viles / de escritorio nativas y videojuegos. Si a√ļn no usas .NET, te invito a usarlo.

¬ŅPor qu√© usar .NET para aplicaciones de navegador?

La construcci√≥n de aplicaciones web modernas a√ļn plantea desaf√≠os. Usar .NET en el navegador ofrece muchas ventajas que pueden ayudar a que el desarrollo web sea m√°s f√°cil y productivo:

Estable y consistente: .NET ofrece un conjunto de API, herramientas e infraestructura de compilación estándar en todas las plataformas .NET que son estables, ofrecen gran cantidad de funciones y son fáciles de usar.

Lenguajes modernos e innovadores: Los lenguajes .NET como C # y F # hacen que la programaci√≥n sea un placer y que contin√ļen mejorando con nuevas funciones de lenguaje innovadoras.

Herramientas líderes en la industria: La familia de productos Visual Studio brinda una excelente experiencia de desarrollo .NET en Windows, Linux y macOS.

Rápido y escalable: .NET tiene una larga historia de rendimiento, confiabilidad y seguridad para el desarrollo web en el servidor. El uso de .NET como una solución full-stack hace que sea más fácil crear aplicaciones rápidas, confiables y seguras.

 

Browser + Razor = Blazor!

Blazor se basa en tecnologías web existentes como HTML y CSS, pero utiliza la sintaxis C # y Razor en lugar de JavaScript para construir una interfaz de usuario web composable. Debemos tener en cuenta que no es una forma de implementar aplicaciones móviles UWP o Xamarin existentes en el navegador. Blazor tendrá todas las características de un web framework moderno.

Blazor usa solo los √ļltimos est√°ndares web. No se necesitan complementos o trans compilaci√≥n . Se ejecuta en el navegador en¬† tiempo de ejecuci√≥n en¬† .NET¬† (Mono) implementado en WebAssembly que ejecuta ensamblados .NET normales. Tambi√©n funciona en navegadores m√°s antiguos pasando a un tiempo de ejecuci√≥n de .NET basado en asm.js.

Aun este proyecto est√° muy joven no hay nada que descargar pero si podemos ir al repositorio de Github clonar y ejecutar los ejemplos de prueba. Los requisitos para ejecutar Blazor son los siguientes:

Para ver a Blazor en acci√≥n, echa un vistazo a¬†¬†Steve Sanderson’s prototype demo at NDC Oslo. Tambi√©n puedes probar una aplicaci√≥n simple Blazor en vivo.

Esta es la nueva promesa del gigante de Redmond .Net en el browser ! Me gustaría saber tu impresión u opinión en los comentarios !

Fuente.

Paso a Paso: .NET Core y Entity Framework Core

Saludos hoy quiero mostrarles como funciona net core fuera de windows yo estare usando MAC OS , pero antes debemos cumplir con una serie de prerrequisitos los cuales son:

OS Prerrequisitos
Windows Windows: Debemos .NET Core SDK for Windows o ambos Visual Studio 2015 Update 3* y .NET Core 1.0 for Visual Studio installedo.
linux, mac o docker Guia para instalar aca  .NET Core

A codear !

  • Paso 1

Abrimos la terminal y escribimos

mkdir sampleefcore

  • Paso 2

Creamos un nuevo proyecto

cd sampleefcore
dotnet new

  • Paso 3

Creamos el archivo de configuración llamado appsettings.json en el cual indicaremos la conexión a la base de datos para este ejemplo usaremos SQLite.

{
  "ConnectionStrings": {
    "Sample": "Data Source=sample.db"
  }
}

  • Paso 4

Ahora modificamos el archivo de proyecto, el cual es el project.json para agregar las dependencias EntityFrameworkCore que especificamos en el archivo appsettings.json

{
  "version": "1.0.0-*",
  "buildOptions": {
    "debugType": "portable",
    "emitEntryPoint": true,
    "copyToOutput": {
      "include": "appsettings.json"
    }
  },
  "dependencies": {
    "Microsoft.Extensions.Configuration": "1.0.0",
    "Microsoft.Extensions.Configuration.Json": "1.0.0",
    "Microsoft.EntityFrameworkCore": "1.0.0",
    "Microsoft.EntityFrameworkCore.Sqlite": "1.0.0"
  },
  "frameworks": {
    "netcoreapp1.0": {
      "dependencies": {
        "Microsoft.NETCore.App": {
          "type": "platform",
          "version": "1.1.0"
        }
      },
      "imports": "dnxcore50"
    }
  }
}

  • Paso 5¬†

Restauramos los paquetes, para ellos ejecutamos el siguiente comando.

dotnet restore

  • Paso 6

Ahora creamos el contexto de EntityFrameworkCore, para ello creamos un archivo y lo llamamos SampleContext.cs y copiamos el siguiente código:

namespace ConsoleApplication
{
    using Microsoft.EntityFrameworkCore;

    /// <summary>
    /// The entity framework context with a Venta DbSet 
    /// </summary>
    public class VentaContext : DbContext
    {
        public VentaContext(DbContextOptions<VentaContext> options)
            : base(options)
        { }

        public DbSet<Venta> Ventas { get; set; }
    }

    /// <summary>
    /// A factory to create an instance of the VentaContext 
    /// </summary>
    public static class VentaContextFactory
    {
        public static VentaContext Create(string connectionString)
        {
            var optionsBuilder = new DbContextOptionsBuilder<VentaContext>();
            optionsBuilder.UseSqlite(connectionString);

            var context = new VentaContext(optionsBuilder.Options);
            context.Database.EnsureCreated();

            return context;
        }
    }

/// <summary>
    /// /// A simple class representing a Venta
    /// </summary>
    public class Venta
    {
        public Venta()
        {
        }

        public int Id { get; set; }

        public string Producto { get; set; }

        public string Caracteristic { get; set; }
    }
}

  • Paso 7

Modificamos el Program.cs con el siguiente código

namespace ConsoleApplication
{
    using System;
    using Microsoft.Extensions.Configuration;

    public class Program
    {
        public static void Main(string[] args)
        {
            // Enable to app to read json setting files
            var builder = new ConfigurationBuilder()
                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true);

            var configuration = builder.Build();

            // Get the connection string
            string connectionString = configuration.GetConnectionString("Sample");

            // Create a Venta instance
            var user = new Venta() { Producto = "Soda", Caracteristic = "Pepsi" };

            // Add and Save the Venta in the database
            using (var context = VentaContextFactory.Create(connectionString))
            {
                context.Add(user);
                context.SaveChanges();
            }

            Console.WriteLine($"Product was saved in the database with id: {user.Id}");
        }
    }
}

  • Paso 8

Compilamos nuestra aplicación con el siguiente comando

dotnet build

  • Paso 9

Si todo está bien estamos listos para correr nuestra aplicación.

dotnet run

Fin

Ahora aqui les dejare un peque√Īo video de como funciona ¬†la aplicaci√≥n.

Manejando las Properties C# Like a Ninja | .Net Core | Visual Code

Saludos, que tal volveré acá a escribir un poco como a los inicios del blog. En esta entrada trataremos lo que son las Properties en C#.

Las propiedades nos permiten controlar la accesibilidad de las variables de una clase y es la forma recomendada de acceder a variables desde el exterior en un lenguaje de programación orientado a objetos como C #. En el video Live que realice en Facebook via  streaming, puedes verlo aca si te lo perdiste, vimos el uso de una Properties por primera vez, y el concepto es realmente muy simple.

Una propiedad es como una combinaci√≥n de una variable y un m√©todo – ¬†esta¬†no puede tomar ning√ļn par√°metro-, pero es capaz de procesar el valor antes de que se asigne a nuestro devuelto.

Una propiedad consta de 2 partes, un get y un método de set, contenido dentro de la propiedad:

private string color;

public string Color
{
    get{ return color;}
    set{color = value;}
}

El método get debe devolver la variable, mientras que el método set debe asignarle un valor. El ejemplo es tan simple como es posible, pero puede extenderse. Otra cosa que debemos debe saber sobre las Properties es el hecho de que sólo se requiere un método Рya sea get o set. Esto nos permite definir las propiedades de solo lectura y escritura. Aquí hay un ejemplo de cómo utilizar las propiedades:

public string Color
{
    get 
    {  // vuelve el string a minusculas.
        return color.ToLower(); 
    }
    set 
    { 
        if(value == "Rojo")
            color = value; 
        else
            Console.WriteLine("A mi me gustan Rojos !!");
    }
}

Esta propiedad hace que la variable ¬†color se devolver√° ahora en min√ļsculas, ya que aplicamos el m√©todo ToLower () antes de devolverlo, y cuando intentamos establecer el color, s√≥lo se aceptar√° el valor “Rojo”. Claro, este ejemplo no es Waoooo de tan √ļtil, pero muestra el potencial de las propiedades.