.NET Blazor Introduction including Blazor webassembly and Blazor server and some history of silverlight and javascript

1. Silverlight to Blazor
The new version of silverlight ?
Simon Lee, 2021.06.18

2. 大綱
● 前情提要
● Blazor
● WebAssembly 時代來臨 ?
● 怎麼做？
● Q&A

3. 還記得 Silverlight 嗎?

4. Silverlight
reference:https://support.microsoft.com/en-us/windows/silverlight-end-of-support-0a3be3c7-bead-e203-2dfd-74f0a64f1788

5. Silverlight
● Internet Explorer 2004年市佔 95% (Windows XP時代)
● 2007年發表 Silverlight 1.0
● 2011年12月發表 Silverlight 5.0
● 使用者介面(UI)、各種元件、圖形、影象以及動畫
● Netflix、Amazon

7. What happened to Silverlight?

8. Silverlight 時代的結束
● 一切都是 Apple 的錯
● 行動裝置崛起
● HTML5
● Browser 戰國時代
● Open Silverlight ?
https://github.com/OpenSilver/OpenSilver

9. 一起下去吧 (Adobe Flash)
● ActiveX
● Java Applet
● Adobe Flash
● Dart

10. Blazor
The New Silverlight

11. 就是想用.NET寫網頁
再來一次....

12. Blazor
● Browser and Razor
● 2018 first release
● 打不過就加入
● 致敬各大 SPA Component 設計
● Open Source
● 不用安裝
● 跨平台

13. What is Blazor
Blazor is a Single Page Application development framework.
○ Blazor Server (2019 September release)
○ Blazor WebAssembly (2020 May release)
○ Blazor PWA (release)
○ Blazor Hybrid (preview)
○ Blazor Native (preview)

14. Blazor hosting model
● Blazor server
○ Javascript
○ SignalR (websocket)
○ ASP.NET Core (.NET)
● Blazor WebAssembly
○ WebAssembly
○ PWA

15. Blazor server

16. Blazor WebAssembly

17. Blazor render-mode
● Server
● ServerPrerendered
● Static
● WebAssembly
● WebAssemblyPrerendered

18. Blazor server

19. Blazor server

20. Blazor server

21. Blazor server vs Blazor WebAssembly

22. Blazor WebAssembly

23. WebAssembly 何方神聖 ?

24. WebAssembly vs Javascript
● Javascript 的問題
○ 出生不純
○ 直譯程式碼的效能瓶頸
○ 程式碼大小
● Wasm 特性
○ 類似組合語言
○ 接近原生應用程式效能

25. How does Javascript run
https://javascript-1.gitbook.io/javascript/v8-engine

26. Javascript improvement
● Minify
● Bundle
● Cdn
● Cache
● Just In Time Compiler

27. How does Javascript run
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

28. How does assembly run
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

29. How does assembly run
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

30. How does WebAssembly run
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

31. WebAssembly
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

32. WebAssembly vs Javascript
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

33. WebAssembly and Javascript
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

34. WebAssembly compiler support
大概所有你想得到的程式語言

35. WebAssembly Blazor Demo
Demo
https://github.com/n-stefan/diabloblazor

36. Blazor 實作

37. About Blazor
● Component
● Layout
● Routing
● Data binding
● Event handling
● Javascript interop

38. 萬物皆 Component
● 請正名 Razor components
● UI
● 處理事件
● 可重複使用
● 可巢狀設計
● .razor

39. 萬物皆 Component
● Microsoft.AspNetCore.Components
● IComponent
● ComponentBase
● Router
● LayoutComponentBase

40. Component
HTML
.NET

41. Component - Code behind
HTML
.NET

42. Component - Router
● IComponent
● Router
● RouteView
● LayoutView

43. Component - Router
● IComponent
● @page
○ @page “/counter”
○ @page “/counter/{id:int}”
○ @page “/counter/{param}”

44. Component - Layout
● 設計 Layout
○ @inherits LayoutComponentBase
○ @body
● 套用 Layout
○ @layout (layoutName)
● _Imports.razor

45. Component - Layout
設計Layout 套用 Layout

46. Component Lifecycle
● SetParameterAsync
● OnInitialized / OnInitializedAsync
● OnParametersSet / OnParametersSetAsync
● OnAfterRender / OnAfterRenderAsync
● ShouldRender

47. Component Lifecycle

48. Component Lifecycle
https://blazor-university.com/components/component-lifecycles/

49. Component Lifecycle

50. Data binding

51. Data binding
● One Way Binding - 沒什麼不說了
● Two Way Binding
○ @bind
○ Datetime
○ boolean
○ int
○ string
○ enum

52. Data binding
● @bind:event=”onchange”
● @bind:event=”oninput”
● chained bind
○ Parent： @bind-{child-property}={parent-property}
○ EventCallback<T> {child-property}Changed

53. Data binding

54. Event handling

55. Event handling
● @on{DOM EVENT}=”{DELEGATE}”

56. Event handling
● Event argument
○ Mouse
○ Drag
○ Focus
○ Input
○ Keyboard
○ …
● EventCallback<EventArgs>
● @onclick:stopPropagation={boolean}
● @onclick:preventDefault={boolean}
Javascript
button.addEventListener(‘click’, function(event) {
//…
})

57. Javascript interop

58. Javascript interop
● WebAssembly not support
○ Media Capture
○ Popups
○ Web GL
○ Web Storage
● 用 .NET 呼叫 Javascript
○ IJSRuntime

59. Javascript interop

60. 用Javascipt呼叫.NET?

61. 用 Javascript 呼叫 .NET
● JsInvokableAttribute
● 參數與回傳值皆需為 Json Serializable
○ return type
■ void
■ Task
■ Task<T>
(T 為 Json Serializable)

62. 還有更多進階使用...

63. 點擊解鎖更多...
● Tag Helpers
● Forms and validation
● Progressive Web Application
● File Upload
● debug

64. 參考資料
● .NET Blazor Official Document
● Blazor University
● ithome 鐵人幫
● MDN WebAssembly
● WebAssembly Official Website
● Blazor出生地

65. Q & A

66. 感謝聆聽