Slides for my talk about Blazor

2. Let’s kill JavaScript

3. Rafał Hryniewski
@r_hryniewskifb.me/hryniewskinet

7. Let’s kill JavaScript

8. Agenda
• About JS and WebAssembly
• Meet Blazor
• Components
• JS interop
• Concerns
• Q&A

9. Short JS story
• Created in 10 days in 1995
• Standardized in 1997
• Most popular programming language since NaN
• We love JavaScript!

10. https://www.reddit.com/r/ProgrammerHumor/comments/8w0fve/i_will_try_this/

11. Most popular languages
https://insights.stackoverflow.com/survey/2018/

12. Most popular languages
https://insights.stackoverflow.com/survey/2018/

13. https://blog.hellojs.org/javascript-the-king-of-popularity-7c012a74d859

14. What is web assembly?
• Also known as: Wasm, WA
• Developed by joint forces – Mozilla, MS, Google, Apple
• Web standard with ASM-like syntax and capacity to be
executed nearly as fast as machine code

15. Compiling to WASM
https://auth0.com/blog/7-things-you-should-know-about-web-assembly/

16. WASM Languages
• .NET
• C/C++
• Go
• Java
• Kotlin
• Rust
• Python
• Brainfuck
• So on, so on

17. Can I use WASM?
https://caniuse.com/#feat=wasm

18. https://memegenerator.net/instance/63040808/ned-stark-brace-yourself-webassembly-is-coming-yourself

19. Meet Blazor
• Browser + Razor = Blazor
• Basically .cshtml with codebehind executed in browser
• Has js fallback on browsers without WASM support
• Uses .NET Runtime running on WASM to execute .NET
Assemblies
• Introduced by Steve Sanderson in 2017

20. So, it’s basically .NET
compiled into WASM?

21. https://makeameme.org/meme/nope-t240mr

22. How it works in browser
• C# code files and Razor files are compiled into .NET
assemblies.
• The assemblies and the .NET runtime are downloaded to the
browser.
• Blazor uses JS to bootstrap the .NET runtime
• Your .NET assemblies run on .NET runtime in browser
https://blazor.net/docs/introduction/index.html

23. https://memegenerator.net/instance/23338457/success-kid-voila-magic

24. Components
• Similar to modern front-end components (ie. React)
• Any .cshtml file in Blazor project
• Name of the component and class equals file name

25. Components - .cshtml

26. Components - .cshtml

28. Components - .cs

29. Components - .cs

30. Components

31. Components - .cs

32. https://imgur.com/gallery/b38AI

33. Components - parameters

34. Components - parameters

35. Components - bindings

36. Components – browser events

37. Components – lifecycle
• OnInit/OnInitAsync
• OnParametersSet/OnParametersSetAsync
• OnAfterRender/OnAfterRenderAsync

38. You can components as packages
https://www.reddit.com/r/ProgrammerHumor/comments/6rn25j/what_else_is_really_big/

39. Packages
Install-Package Blazor.Extensions.Canvas

40. Packages - _ViewImports.cshtml

42. Routing

43. Dependency Injection

44. Invoking JS from .NET

45. Invoking JS from .NET

46. Invoking .NET from JS

47. Invoking .NET from JS

48. Invoking .NET from JS

49. Hosting
• Publish anywhere
• Nope, Windows is not required on your environment
• Nope, .NET is not required on your environment
• You still need energy, internet and some server to host it tho

50. It’s simple
•Azure AppService -
https://rh-blazor.azurewebsites.net
•Blob storage –
https://blazortalkdemo.z6.web.core.windows.net

51. Why we should use it?
• It’s easy, fun and development is pretty fast
• It doesn’t have NaNs
• [ ] + { } equals { } + [ ] which equals to compilation error
• We love new stuff

52. Why you should use it?
• It’s easy, fun and development is pretty fast
• It doesn’t have NaNs
• [ ] + { } equals { } + [ ] which equals to compilation error
• We love new stuff

53. Community projects
• Calculators
• Chess
• Snake
• Asteroids
• Libraries and Components
• Blazor + Electron
• Charts
• SignalR support
• Redux
• And more… see https://blazor.net/community.html

54. https://memegenerator.net/instance/68243018/grumpy-cat-im-deeply-deeply-concerned

55. Concerns – older browsers
https://www.memedroid.com/memes/detail/2429165/internet-explorer-is-crap

56. Concerns – downloading .NET runtime in browser?
https://imgflip.com/i/rc8j4

57. Concerns – remember Silverlight?
https://www.theverge.com/2011/12/10/2625339/microsoft-silverlight-5-released-will-it-be-the-final-version

58. Concerns – it’s experimental
http://www.quickmeme.com/p/35nkal

59. Resources
Docs: https://blazor.net
Code: https://github.com/r-hryniewski/blazortalkdemo
Slides: https://bit.ly/rhblazor

60. Questions?

61. Use it on production! I dare you!
@r_hryniewskifb.me/hryniewskinet