Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Download as PPTX, PDF0 likes365 views
The document discusses WebAssembly (Wasm), a low-level code format designed for efficient execution in web browsers, and its integration with C# through the Blazor framework. Blazor allows developers to use C# in the browser, providing features like components, routing, and JavaScript interop. Despite being in its early stages, WebAssembly and Blazor are positioned as promising technologies for enhancing web development functionality.
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
- 1. Oleksandr Skachkov, Itera Running C# in your Web Browser with WebAssembly
- 2. ABOUT ME • Itera’s FrontEnd Tech Lead • WebKit contributor • WebAssembly enthusiast • Twitter: @alSkachkov
- 3. • JavaScript in the Web • WebAssembly’s key features • WebAssembly and C# • Blazor
- 4. JavaScript has monopoly in the Web
- 5. C# developer asked to do some JavaScript
- 10. New solution!
- 14. • Announced in 17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018 WebAssembly – New Hope
- 15. What is WebAssembly (aka WASM)?
- 16. safe, portable, low-level code format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
- 17. C - Source code
- 18. RUST - Source code
- 19. S - Expression
- 20. fast to load Byte code
- 24. S-expression
- 25. S-expression
- 29. Streaming API
- 30. 1
- 31. 3 2 1
- 32. 5 4 3 2 1
- 34. Only 4 primitive types
- 35. No access to DOM and WEB API
- 36. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
- 37. WEBASSEMBLY WILL BRING TO WEB • High performance • New languages • Variety of existed libraries
- 39. .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
- 40. WEBASSMBLY .NET FRAMEWORKS • Blazor - https://github.com/aspnet/Blazor • Xamarin.FORMS - https://github.com/praeclarum/Ooui • NoesisGUI - http://www.noesisengine.com
- 41. BLAZOR. KEY FEATURES • Built specially for SPA • Use C# in Browser! • Own shadow DOM • Same codebase for both ENDS
- 42. 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!
- 43. CLR IN BROWSER
- 44. HOW BLAZOR WORKS
- 45. BLAZOR. FEATURES Components Routing Binding Dependency injection HTTP Calls JavaScript interop Support asm.js for old browsers
- 46. 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 …
- 47. COMPONENT
- 48. ROUTING
- 49. BINDING
- 50. BINDING
- 51. BINDING
- 52. BINDING
- 54. HTTP CALLS
- 55. JAVASCRIPT INTEROP: JS FROM C#
- 56. JAVASCRIPT INTEROP: C# FROM JS
- 57. JAVASCRIPT INTEROP: C# FROM JS
- 58. 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/
- 59. 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/
- 60. SUMMARY • WebAssembly is an emerging technology • Blazor on earliest stages • Blazor very promising Framework • Large build package for the Web
- 61. 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/
- 62. THANKS!
- 63. QUESTIONS?