SlideShare a Scribd company logo
Oleksandr Skachkov, Itera
Running C# in your Web Browser with
WebAssembly
ABOUT ME
• Itera’s FrontEnd Tech Lead
• WebKit contributor
• WebAssembly enthusiast
• Twitter: @alSkachkov
• JavaScript in the Web
• WebAssembly’s key features
• WebAssembly and C#
• Blazor
JavaScript has monopoly in the Web
C# developer asked to do some JavaScript
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
New solution!
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Blazor on WebAssembly
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
• Announced in 17 June 2015
• Supported by major Browsers
• Developed by WebAssembly Working
Group (W3C)
• Draft specific published 15 Feb 2018
WebAssembly – New Hope
What is WebAssembly (aka WASM)?
safe, portable, low-level code format designed for efficient execution
and compact representation
https://webassembly.github.io/spec/intro
C - Source code
RUST - Source code
S - Expression
fast to load
Byte code
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
WebAssembly’s key features
quick validation (parsing)
S-expression
S-expression
$0 10
Stack
S-expression
$0
10
10 * $0
Stack
S-expression
10 * $0
Stack
S-expression
Streaming API
1
3 2 1
5 4 3 2 1
No garbage collector
Only 4 primitive types
No access to DOM and WEB API
INTERACTION WITH JAVASCRIPT
We can use JS function in WASM and WASM function in JS
WEBASSEMBLY WILL BRING TO WEB
• High performance
• New languages
• Variety of existed libraries
WebAssembly and C#
.NET RUNTIME
• Mono
• https://github.com/mono/mono
• https://github.com/lrz/mono-wasm
• CoreRT
• https://github.com/dotnet/corert
• https://github.com/dotnet/llilc
WEBASSMBLY .NET FRAMEWORKS
• Blazor - https://github.com/aspnet/Blazor
• Xamarin.FORMS - https://github.com/praeclarum/Ooui
• NoesisGUI - http://www.noesisengine.com
BLAZOR. KEY FEATURES
• Built specially for SPA
• Use C# in Browser!
• Own shadow DOM
• Same codebase for both ENDS
BLAZOR
• Blazor concept announced at NDC Jul 10 2017
• Bring C# to the WEB
• Blazor = Browser + Razor
• At start relied on DotNetAnywere
• Currently relies on Mono WebAssembly
• Current version 0.1.0
• Not a new Silverlight!
CLR IN BROWSER
HOW BLAZOR WORKS
BLAZOR. FEATURES
Components
Routing
Binding
Dependency injection
HTTP Calls
JavaScript interop
Support asm.js for old browsers
COMPONENTS
• C# class from .cshtml
• Master page
• Reusable components
• Shadow DOM and diff base update
• Can be created fully in C#
• Life cycle methods/event, ie onInit …
COMPONENT
ROUTING
BINDING
BINDING
BINDING
BINDING
DEPENDENCY INJECTION
HTTP CALLS
JAVASCRIPT INTEROP: JS FROM C#
JAVASCRIPT INTEROP: C# FROM JS
JAVASCRIPT INTEROP: C# FROM JS
SOME MORE
REDUX: https://github.com/torhovland/blazor-redux
Entity Framework: https://www.c-sharpcorner.com/article/asp-net-core-crud-
using-blazor-and-entity-framework-core/
BLAZOR. HOW TO START
https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-
net-web-apps-in-the-browser-with-blazor/
https://learn-blazor.com/
SUMMARY
• WebAssembly is an emerging technology
• Blazor on earliest stages
• Blazor very promising Framework
• Large build package for the Web
RESOURCES
• Blazor: https://learn-blazor.com
• Blazor github: https://github.com/aspnet/Blazor
• Blazor gitter: aspnet/Blazor
• Steven Sanderson: http://blog.stevensanderson.com
• WebAssembly Site: http://webassembly.org/
• Github: https://github.com/WebAssembly/
THANKS!
QUESTIONS?

More Related Content

What's hot (20)

PDF
Pump up the JAM with Gatsby
Stefan Adolf
 
PDF
Using eZ Platform as a Headless CMS (with Vue.js)
Jani Tarvainen
 
PDF
Blazor web apps
Rajesh Kolla
 
PPTX
Blazor - An Introduction
JamieTaylor112
 
PDF
Isomorphic web application
Oliver N
 
PPT
Bootstrapping angular js with bower grunt yeoman
Makarand Bhatambarekar
 
PDF
WebKit Programming in Cocoa
Jason Harwig
 
PDF
Blazor - The New Silverlight?
Christian Nagel
 
PDF
Blazor introduction
Chih-Yang Lee
 
PDF
React server side rendering performance
Nick Dreckshage
 
PPT
Fast Slim Correct: The History and Evolution of JavaScript.
John Dalziel
 
PPTX
Blazor Full-Stack
Ed Charbeneau
 
PDF
React Webinar With CodePolitan
Riza Fahmi
 
PDF
slide-dnrdw
Yue Liu
 
PPTX
[Cordova] Empezando con Ionic
Moises Alexander Salazar Vila
 
PDF
Node PDX: Intro to Sails.js
Mike McNeil
 
PPTX
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
PPTX
React brief introduction
Prograils.com
 
PDF
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Conference
 
PDF
Why NodeJS
Riza Fahmi
 
Pump up the JAM with Gatsby
Stefan Adolf
 
Using eZ Platform as a Headless CMS (with Vue.js)
Jani Tarvainen
 
Blazor web apps
Rajesh Kolla
 
Blazor - An Introduction
JamieTaylor112
 
Isomorphic web application
Oliver N
 
Bootstrapping angular js with bower grunt yeoman
Makarand Bhatambarekar
 
WebKit Programming in Cocoa
Jason Harwig
 
Blazor - The New Silverlight?
Christian Nagel
 
Blazor introduction
Chih-Yang Lee
 
React server side rendering performance
Nick Dreckshage
 
Fast Slim Correct: The History and Evolution of JavaScript.
John Dalziel
 
Blazor Full-Stack
Ed Charbeneau
 
React Webinar With CodePolitan
Riza Fahmi
 
slide-dnrdw
Yue Liu
 
[Cordova] Empezando con Ionic
Moises Alexander Salazar Vila
 
Node PDX: Intro to Sails.js
Mike McNeil
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
React brief introduction
Prograils.com
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Conference
 
Why NodeJS
Riza Fahmi
 

Similar to Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly" (20)

PPTX
Blazor.pptx
ssuserb1d1a2
 
PDF
WebAssemlby vs JavaScript
Alexandr Skachkov
 
PPTX
Azure Serverless Conf
Jose Javier Columbie
 
PPT
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
PPTX
WebAssembly overview. KievJS meetup
Alexandr Skachkov
 
PDF
The shift to the edge
Jakub Wadolowski
 
PPTX
Full stack web development with c# and web assembly - Blazor.Net
Ruwantha Ratnayake
 
PDF
Intro to Node.js
Jamal Sinclair O'Garro
 
PPTX
Web Assembly Big Picture
Yousif Shalaby
 
PDF
The shift to the edge
Jakub Wadolowski
 
PPTX
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Eric Nograles
 
PPTX
Oleksandr Skachkov "How to run WebAssembly in your React web application"
Fwdays
 
PPTX
ASP.NET 5 Overview - Post Build 2015
Shahed Chowdhuri
 
PPTX
Blazor - .NET in the Browser!
David Paquette
 
PPTX
ASP.NET 5 Overview: Post RTM
Shahed Chowdhuri
 
PPTX
ASP.NET 5 Overview for Apex Systems
Shahed Chowdhuri
 
PDF
Blazor certification training - Dot Net Tricks
Gaurav Singh
 
PPTX
.NET Conf 2019 高雄場 - .NET Core 3.0
Jeff Chu
 
PDF
JavaScript Engine and WebAssembly
Changhwan Yi
 
PPTX
ASP.NET 5 Overview
Shahed Chowdhuri
 
Blazor.pptx
ssuserb1d1a2
 
WebAssemlby vs JavaScript
Alexandr Skachkov
 
Azure Serverless Conf
Jose Javier Columbie
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
WebAssembly overview. KievJS meetup
Alexandr Skachkov
 
The shift to the edge
Jakub Wadolowski
 
Full stack web development with c# and web assembly - Blazor.Net
Ruwantha Ratnayake
 
Intro to Node.js
Jamal Sinclair O'Garro
 
Web Assembly Big Picture
Yousif Shalaby
 
The shift to the edge
Jakub Wadolowski
 
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Eric Nograles
 
Oleksandr Skachkov "How to run WebAssembly in your React web application"
Fwdays
 
ASP.NET 5 Overview - Post Build 2015
Shahed Chowdhuri
 
Blazor - .NET in the Browser!
David Paquette
 
ASP.NET 5 Overview: Post RTM
Shahed Chowdhuri
 
ASP.NET 5 Overview for Apex Systems
Shahed Chowdhuri
 
Blazor certification training - Dot Net Tricks
Gaurav Singh
 
.NET Conf 2019 高雄場 - .NET Core 3.0
Jeff Chu
 
JavaScript Engine and WebAssembly
Changhwan Yi
 
ASP.NET 5 Overview
Shahed Chowdhuri
 
Ad

More from Fwdays (20)

PPTX
"Як ми переписали Сільпо на Angular", Євген Русаков
Fwdays
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
"Validation and Observability of AI Agents", Oleksandr Denisyuk
Fwdays
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PPTX
"Co-Authoring with a Machine: What I Learned from Writing a Book on Generativ...
Fwdays
 
PPTX
"Human-AI Collaboration Models for Better Decisions, Faster Workflows, and Cr...
Fwdays
 
PDF
"AI is already here. What will happen to your team (and your role) tomorrow?"...
Fwdays
 
PPTX
"Is it worth investing in AI in 2025?", Alexander Sharko
Fwdays
 
PDF
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
PDF
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
PDF
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
PDF
"Scaling in space and time with Temporal", Andriy Lupa .pdf
Fwdays
 
PPTX
"Provisioning via DOT-Chain: from catering to drone marketplaces", Volodymyr ...
Fwdays
 
PPTX
" Observability with Elasticsearch: Best Practices for High-Load Platform", A...
Fwdays
 
PPTX
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
PPTX
"Istio Ambient Mesh in production: our way from Sidecar to Sidecar-less",Hlib...
Fwdays
 
PPTX
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
PPTX
"Confidential AI: zero trust concept", Hennadiy Karpov
Fwdays
 
PPTX
"Choosing Tensor Accelerators for Specific Tasks: Compute vs Memory Bound Mod...
Fwdays
 
"Як ми переписали Сільпо на Angular", Євген Русаков
Fwdays
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
"Validation and Observability of AI Agents", Oleksandr Denisyuk
Fwdays
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
"Co-Authoring with a Machine: What I Learned from Writing a Book on Generativ...
Fwdays
 
"Human-AI Collaboration Models for Better Decisions, Faster Workflows, and Cr...
Fwdays
 
"AI is already here. What will happen to your team (and your role) tomorrow?"...
Fwdays
 
"Is it worth investing in AI in 2025?", Alexander Sharko
Fwdays
 
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
"Scaling in space and time with Temporal", Andriy Lupa .pdf
Fwdays
 
"Provisioning via DOT-Chain: from catering to drone marketplaces", Volodymyr ...
Fwdays
 
" Observability with Elasticsearch: Best Practices for High-Load Platform", A...
Fwdays
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
"Istio Ambient Mesh in production: our way from Sidecar to Sidecar-less",Hlib...
Fwdays
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
"Confidential AI: zero trust concept", Hennadiy Karpov
Fwdays
 
"Choosing Tensor Accelerators for Specific Tasks: Compute vs Memory Bound Mod...
Fwdays
 
Ad

Recently uploaded (20)

PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Digital Circuits, important subject in CS
contactparinay1
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 

Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"

Editor's Notes

  • #5: Stackoverflow.com Github.com
  • #7: Stackoverflow.com
  • #8: Stackoverflow.com