Intro to WebAssembly and Blazor

Barry S. Stahl - @bsstahl - http://www.cognitiveinheritance.com

About Me

I think it is noteworthy that I am the type of person who has both favorite physicists and favorite mathematicians - @bsstahl 16 Apr 2017

Favorite Physicists Favorite Mathematicians
Harold "Hal" Stahl Ada Lovelace
Carl Sagan Alan Turing
Neil Degrasse Tyson Johannes Kepler
Nikola Tesla Rene Descartes
Marie Curie Isaac Newton
Richard Feynman Leonardo Fibonacci
Albert Einstein George Boole

Other notables: Niels Bohr, Galileo Galilei, Michael Faraday, Blaise Pascal, Johann Gauss, Grace Hopper, Stephen Hawking, Marvin Minsky, Daphne Koller, Benoit Mandelbrot

Some OSS Projects I Run

  • Liquid Victor
    • [Experimental] The media tracking and aggregation system that was used to assemble this presentation
  • Prehensile Pony-Tail
    • A blogging platform that produces plain HTML5/CSS output for ultimate scalability.
  • IntentBot
    • A microservices framework for creating conversational bots on top of Bot Framework.
  • LiquidNun
    • A library of abstractions and their implementations that help create loosely-coupled applications.
  • Toastmasters Agenda
    • A c# library and website for generating agenda's for Toastmasters meetings.

GiveCamp

International Headquarters: http://givecamp.org

A weekend event where software creators come together to create great software for some amazing local charities

GiveCamps Around the Country

GiveCamps_201903.png

WASM in the Browser

A first look at WASM directly in the browser

What is WebAssembly (WASM)

  • A W3C Specification
    • A portable binary compilation-target
    • Designed to execute well within existing web platforms
    • Able to support non-browser embeddings
  • The Intermediate-Language of the Web
    • Can be compiled-to from nearly any language
    • Can be executed on nearly any platform
    • Can be used inside the browser or out

WASM Provides

  • A Structured Stack Machine execution model
    • Most instructions use the stack for data
    • Flow of control handled with structured constructs
      • i.e. if and while
  • A very limited type-system
    • Integer types: i32 & i64
    • Float types: f32 & f64
    • Any other types handled by the compiler

WASM Module Sections

Name Code Description
Type 1 Declares signatures of all types (functions)
Import 2 Declares all imported modules (i.e. Javascript)
Function 3 Cross references sections type (1) and code (10)
Table 4 Declares tables for storage
Memory 5 Declares contiguous memory sections
Global 6 Declares globabl variables
Export 7 Declares items to be exposed outside of the module
Start 8 Declares the start function if one exists
Element 9 Used to initialize imported modules
Code 10 The implementation of all functions
Data 11 Used to initialize any memory ranges

Module Header

Human Readable (wat)

(module)

Compiler Output

0000000: 0061 736d ; WASM_BINARY_MAGIC
0000004: 0100 0000 ; WASM_BINARY_VERSION

Section 1 (Type)

Human Readable (wat)

(func $label1 (param i32 i32) (result i32))

Compiler Output

; section "Type" (1)
0000008: 01 ; section code
0000009: 07 ; section size
000000a: 01 ; num types
; type 0
000000b: 60 ; func
000000c: 02 ; num params
000000d: 7f ; i32
000000e: 7f ; i32
000000f: 01 ; num results
0000010: 7f ; i32

Section 7 (Export)

Human Readable (wat)

(export "addTwo" (func $label1))

Compiler Output

; section "Export" (7)
0000015: 07 ; section code
0000016: 0a ; section size
0000017: 01 ; num exports
0000018: 06 ; string length
0000019: 6164 6454 776f ; addTwo
000001f: 00 ; export kind
0000020: 00 ; export func index

Section 10 (Code)

Human Readable (wat)

get_local 0
get_local 1
i32.add

Compiler Output

; section "Code" (10)
0000021: 0a ; section code
0000022: 09 ; section size
0000023: 01 ; num functions
; function body 0
0000024: 07 ; func body size
0000025: 00 ; local decl count
0000026: 20 ; get_local
0000027: 00 ; local index
0000028: 20 ; get_local
0000029: 01 ; local index
000002a: 6a ; i32.add
000002b: 0b ; end

Browser Execution Pipeline

BrowserExecutionPipeline_PreWasm.png

As the world existed pre-WASM

Browser Execution Pipeline

BrowserExecutionPipeline_WithWasm.png

As the world exists today

Basic Blazor

A first look at Blazor from File > New Project

What is Blazor?

  • A SPA Framework
    • Builds client-side applications
    • Runs in the browser
    • C# is the programming language
  • Uses the Razor engine and syntax
    • C# code is inline
    • Encapsulation done with components
    • .NET code executed using mono.wasm

Mono.wasm

  • A Web Assembly implementation of the .NET runtime
    • Built by the Xamarin team
    • Supports NetStandard2.0

Chutes & Ladders Project Structure

ChutesAndLaddersProjectStructure.png

.NET Code in Blazor

Using Blazor to run existing .NET libraries

Why NOT Use Blazor Right Now?

  • Blazor is an Experimental Project from Microsoft
    • It is not guaranteed to ever RTW
    • There may be better ways to accomplish the goals
  • The tooling is not yet where we need it to be
    • Many features are planned but not yet implemented
  • Little benefit if you are fluent and comfortable with JavaScript

    • Why move to an experiment if it isn't solving your pain?
  • Little benefit if you don't need existing .NET in the browser

    • If your code is Javascript (or not written) use what is right

Should I Be Using Blazor Now?

UseBlazorNow.png

Only if you are unhappy with JavaScript or want to run .NET in the browser AND You don't need to release for at least 6 months

How Do I Get Started?

  • In Visual Studio 2019
    • File > New Project > Web > ASP.NET Core Web Application

Summary

  • WebAssembly
    • A portable binary compilation-target
    • Executes in the same browser context as Javascript
  • Blazor
    • A SPA framework
    • Uses C# for scripting
    • Interpreted using Mono.wasm in the browser

Resources