The document discusses the integration of WebAssembly (WASM) and Blazor for client-side AI applications, detailing their capabilities and specifications. WebAssembly is a portable binary compilation target designed to execute in browsers alongside JavaScript, while Blazor is a Single Page Application (SPA) framework that utilizes C# for scripting in the browser. The document highlights usage scenarios, project structure, and considerations for adopting Blazor in web development.

1. PUSHING AI TO THE CLIENTPUSHING AI TO THE CLIENT
WITH WEBASSEMBLY AND BLAZORWITH WEBASSEMBLY AND BLAZOR
Barry S. Stahl - @bsstahl - http://www.cognitiveinheritance.com
PRINTABLE VERSIONPRINTABLE VERSION

2. ABOUT MEABOUT ME
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
I think it is noteworthy that I am the type of person who has both favorite physicists
and favorite mathematicians - @bsstahl 16 Apr 2017

3. SOME OSS PROJECTS I RUNSOME OSS PROJECTS I RUN
[Experimental] The media tracking and aggregation system that was used to assemble this presentation
A blogging platform that produces plain HTML5/CSS output for ultimate scalability.
A set of extension methods helpful when building unit tests.
A conference schedule optimizer
A microservices framework for creating conversational bots on top of Bot Framework.
A library of abstractions and their implementations that help create loosely-coupled applications.
A c# library and website for generating agenda's for Toastmasters meetings.
Liquid Victor
Prehensile Pony-Tail
TestHelperExtensions
Conference Scheduler
IntentBot
LiquidNun
Toastmasters Agenda

4. GIVECAMPGIVECAMP
International Headquarters:
WHERE SOFTWARE CREATORS COME TOGETHER TO BUILD GREAT TOOLS FOR AMAZINGWHERE SOFTWARE CREATORS COME TOGETHER TO BUILD GREAT TOOLS FOR AMAZING
LOCAL CHARITIESLOCAL CHARITIES
http://givecamp.org

5. WASM IN THE BROWSERWASM IN THE BROWSER
A rst look at WASM directly in the browser
HTTPS://WEBASSEMBLY.GITHUB.IO/WABT/DEMO/WAT2WASM/HTTPS://WEBASSEMBLY.GITHUB.IO/WABT/DEMO/WAT2WASM/

6. WHAT IS WEBASSEMBLY (WASM)WHAT IS WEBASSEMBLY (WASM)
A W3C Speci cation
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

7. WASM PROVIDESWASM 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

8. WASM MODULE SECTIONSWASM 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

9. ONE GOAL OF WEBASSEMBLYONE GOAL OF WEBASSEMBLY
Execute in the same sematic universe as JavaScript
Allow synchronous calls to and from JavaScript
Enforce the same-origin and permissions security policies
Design to integrate well with the existing Web platform -
https://webassembly.org/docs/high-level-goals/

10. BROWSER EXECUTION PIPELINEBROWSER EXECUTION PIPELINE
AS THE WORLD EXISTED PRE-WASMAS THE WORLD EXISTED PRE-WASM

11. BROWSER EXECUTION PIPELINEBROWSER EXECUTION PIPELINE
AS THE WORLD EXISTS TODAYAS THE WORLD EXISTS TODAY

12. ASP.NET CORE BLAZORASP.NET CORE BLAZOR

13. ASP.NET RAZORASP.NET RAZOR

14. WHY RAZOR?WHY RAZOR?
Simpli ed Routing
Each page's location in the le system is its route
Simpli ed Layout
HTML is inline with C# or VB syntax
Can be used alongside MVC
Razor pages are ASP.NET pages

15. BASIC BLAZORBASIC BLAZOR
A rst look at Blazor from File > New Project

16. WHAT IS BLAZOR?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

17. MONO.WASMMONO.WASM
A Web Assembly implementation of the .NET runtime
Built by the Xamarin team
Supports NetStandard2.0

18. CHUTES & LADDERS PROJECT STRUCTURECHUTES & LADDERS PROJECT STRUCTURE

19. .NET CODE IN BLAZOR.NET CODE IN BLAZOR
Using Blazor to run existing .NET libraries

20. WHY NOT USE BLAZOR RIGHT NOW?WHY NOT USE BLAZOR RIGHT NOW?
Blazor has only recently had its "Experimental" tag removed by Microsoft
We still don't know when it will 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 bene t if you are uent and comfortable with JavaScript
Why move away from proven technologies if it isn't solving your pain?
Little bene t if you don't need existing .NET in the browser
If your code is Javascript (or not written) use what is right

21. SHOULD I BE USING BLAZOR NOW?SHOULD I BE USING BLAZOR NOW?
ONLY IF YOU ARE UNHAPPY WITH JAVASCRIPT OR WANT TO RUN .NET IN THE BROWSERONLY IF YOU ARE UNHAPPY WITH JAVASCRIPT OR WANT TO RUN .NET IN THE BROWSER
ANDAND YOU DON'T NEED TO RELEASE FOR AT LEAST 6 MONTHSYOU DON'T NEED TO RELEASE FOR AT LEAST 6 MONTHS

22. HOW DO I GET STARTED?HOW DO I GET STARTED?
Install Visual Studio 2019
Install the latest .NET Core
Install the Blazor Extension
In Visual Studio 2019
File > New Project > Web > ASP.NET Core Web Application
https://visualstudio.microsoft.com/downloads/
https://www.microsoft.com/net/download
https://go.microsoft.com/fwlink/?linkid=870389

23. SUMMARYSUMMARY
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

24. Pushing AI to the Client Barry S. Stahl - @bsstahl - http://www.cognitiveinheritance.com
RESOURCESRESOURCES
These Slides
Code
Instructions & Tutorials
http://PushingAIToTheClient-2019Q2.azurewebsites.net
Chutes & Ladders Simulation
My GitHub Repos
WebAssembly
Blazor
Cognitive Inheritance (my blog)