AspNET vs NestJS

with me, Kyle

ASP.NET

ASP.​NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.

NestJS

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)

Github

Fully Open Source - Free as in Freedom

• nestjs/nest
• dotnet/aspnetcore

Docs

Well written docs

• NestJS Documentation
• ASP.NET Core Docs

Architecture

Evolutions of Prior Art 🏛

• aspnet - built on top of dotnet core
• nestjs - built on top of node / express

Model View Controller

A common paradigm for your data 🛠

Dependencies

What you'll need to get started

Dependencies (.net)

.NET SDK

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

Dependencies (nest)

Node JS

npm install @nestjs/cli -g

Getting Started

Hello World

Getting Started (.net)

dotnet new mvc -o aspnet

Getting Started (nest)

git clone https://github.com/nestjs/typescript-starter.git nestjs --depth 1
cd nestjs
npm install

Running Locally

Getting the project up and running

Running Locally (.net)

dotnet run       # run once
dotnet watch run # run with watch

open http://localhost:5000

Running Locally (nest)

npm run start     # run once
npm run start:dev # run with watch

open http://localhost:3000

Entry Point

Entry Point (.net)

// Program.cs
public static void Main(string[] args)
{
    CreateHostBuilder(args).Build().Run();
}

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
        });

Entry Point (nest)

// main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Create Controller

Create Controller (.net)

nest schematics

nest generate controller weather

Create Controller (nest)

aspnet-codegenerator

dotnet aspnet-codegenerator controller -name weather

Controllers

Controller (.net)

Add a controller

// Controllers/WeatherController.cs
[Route("weather")]
public class WeatherController : Controller
{
    [HttpGet]
    public IActionResult GetWeather()
    {
        return Content("Frightful");
    }
}

Controller (nest)

Controllers

// weather.controller.ts
@Controller('weather')
export class WeatherController {

  @Get()
  getWeather(): string {
    return 'Frightful';
  }
}

Model Binding

Model Binding (.net)

[HttpGet]
[Route("light")]
public IActionResult GetDaylight([FromQuery] int hour)
{
    var result = hour < 6 || hour > 18 ? "Dark" : "Light";
    return Content(result);
}

Model Binding (nest)

@Get('light')
getDaylight(@Query('hour') hour: number): string {
  console.log(hour);
  return hour < 6 || hour > 18 ? 'Dark' : 'Light';
}

Models

Models (.net)

public class Home
{
    public Home(string msg)
    {
        this.Message = msg;
    }
    public string Message { get; set; }
}

Models (nest)

@Injectable()
export class Home {
  message: string;

  constructor(msg: string) {
    this.message = msg;
  }
}

Views Setup

Neither solution comes with views in the bare bones setup.

Both are well supported

Views Setup (.net)

// startup.cs
public void ConfigureServices(IServiceCollection services)
{
    // ...
    services.AddMvcCore().AddRazorViewEngine();
    // ...
}

Views Setup (nest)

MVC for NestJS

npm install --save hbs

// main.ts
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');

View Controllers

View Controllers (.net)

[Route("home")]
public class HomeController : Controller
{
    public IActionResult Index()
    {
        var model = new Home("Hi There!");
        return View(model);
    }
}

View Controllers (nest)

@Controller('home')
export class HomeController {
  @Get()
  @Render('index')
  root() {
    const model = new Home('Hello');
    return model;
  }
}

Views

Views (.net)

Razor Syntax

// views/home/index.cshtml
@model.Message

Views (nest)

Handlebars / hbs

<!-- views/home/index.hbs -->
{{message}}

Resources

• KyleMit/nestjs-vs-aspnet
• Introduction to NestJS
• Introduction to ASP.NET Core

Fin

Thanks ya'll!

Questions?