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

6.
What happened to Silverlight?

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

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

9.
Blazor
The New Silverlight

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

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

12.
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)

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

14.
Blazor server

15.
Blazor WebAssembly

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

17.
Blazor server

18.
Blazor server

19.
Blazor server

20.
Blazor server vs Blazor WebAssembly

21.
Blazor WebAssembly

22.
WebAssembly 何方神聖 ?

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

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

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

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

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

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

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

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

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

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

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

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

35.
Blazor 實作

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

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

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

39.
Component
HTML
.NET

40.
Component - Code behind
HTML
.NET

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

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

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

44.
Component - Layout
設計Layout 套用 Layout

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

46.
Component Lifecycle

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

48.
Component Lifecycle

49.
Data binding

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

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

52.
Data binding

53.
Event handling

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

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

56.
Javascript interop

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

58.
Javascript interop

59.
用Javascipt呼叫.NET?

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

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

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

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

64.
Q & A

65.
感謝聆聽