Download as PDF, PPTX
Blazor introduction
- 1. Silverlight to Blazor Thenew version of silverlight ? Simon Lee, 2021.06.18
- 2. 大綱 ● 前情提要 ● Blazor ●WebAssembly 時代來臨 ? ● 怎麼做？ ● Q&A
- 3.
- 4.
- 5. Silverlight ● Internet Explorer2004年市佔 95% (Windows XP時代) ● 2007年發表 Silverlight 1.0 ● 2011年12月發表 Silverlight 5.0 ● 使用者介面(UI)、各種元件、圖形、影象以及動畫 ● Netflix、Amazon
- 7. What happened toSilverlight?
- 8. Silverlight 時代的結束 ● 一切都是Apple 的錯 ● 行動裝置崛起 ● HTML5 ● Browser 戰國時代 ● Open Silverlight ? https://github.com/OpenSilver/OpenSilver
- 9. 一起下去吧 (Adobe Flash) ●ActiveX ● Java Applet ● Adobe Flash ● Dart
- 10.
- 11.
- 12. Blazor ● Browser andRazor ● 2018 first release ● 打不過就加入 ● 致敬各大 SPA Component 設計 ● Open Source ● 不用安裝 ● 跨平台
- 13. What is Blazor Blazoris 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.
- 16.
- 17. Blazor render-mode ● Server ●ServerPrerendered ● Static ● WebAssembly ● WebAssemblyPrerendered
- 18.
- 19.
- 20.
- 21. Blazor server vsBlazor WebAssembly
- 22.
- 23.
- 24. WebAssembly vs Javascript ●Javascript 的問題 ○ 出生不純 ○ 直譯程式碼的效能瓶頸 ○ 程式碼大小 ● Wasm 特性 ○ 類似組合語言 ○ 接近原生應用程式效能
- 25. How does Javascriptrun https://javascript-1.gitbook.io/javascript/v8-engine
- 26. Javascript improvement ● Minify ●Bundle ● Cdn ● Cache ● Just In Time Compiler
- 27. How does Javascriptrun https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
- 28. How does assemblyrun https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
- 29. How does assemblyrun https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
- 30. How does WebAssemblyrun https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 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.
- 41. Component - Codebehind 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.
- 48.
- 49.
- 50.
- 51. Data binding ● OneWay 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.
- 54.
- 55. Event handling ● @on{DOMEVENT}=”{DELEGATE}”
- 56. Event handling ● Eventargument ○ Mouse ○ Drag ○ Focus ○ Input ○ Keyboard ○ … ● EventCallback<EventArgs> ● @onclick:stopPropagation={boolean} ● @onclick:preventDefault={boolean} Javascript button.addEventListener(‘click’, function(event) { //… })
- 57.
- 58. Javascript interop ● WebAssemblynot support ○ Media Capture ○ Popups ○ Web GL ○ Web Storage ● 用 .NET 呼叫 Javascript ○ IJSRuntime
- 59.
- 60.
- 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 BlazorOfficial Document ● Blazor University ● ithome 鐵人幫 ● MDN WebAssembly ● WebAssembly Official Website ● Blazor出生地
- 65.
- 66.