Teayo's & ASP.NET Korea group

1. 그것마저 알려주마, 블라블라~
BLAZOR
원기욱 / johnrovinson@naver.com
Facebook : https://www.facebook.com/kiwook.won.96

3. 원기옥
원기욱
X
O

4. Experimental

6. Single Page Application
=
SPA

11. WEBASSEMBLY

12. What is WebAssembly?

13. - Not JavaScript
- Modern browser
- Native speed
- C, C++, RUST, more others….
What is WebAssembly?

17. Why use .NET for browser?

18. - Stability and consistency
- Modern innovative languages
- Industry-leading tools
- Speed and scalability
- Full-stack development that leverages existing skills
Why use .NET for browser?

19. C#
.NET
?

21. What is Mono?
- Android, IOS, Mac OS
- Cross Platform
: Xamarin

23. Dev C# / Razor files
Runtime
(Browser)
MyApp.dll
.NET Runtime
mono.wasm
WebAssembly binary
Browser APIs
DOM, HTTP, etc.

25. Blazor

26. Browser + Razor = Blazor

27. What is Blazor?
- .NET Based Client Side in Browser
- Single Page Application
- No Plug-in
- .NET end-to-end

28. Get started with Blazor
- .NET 2.1 Core SDK
(https://www.microsoft.com/net/learn/dotnet/hello-world-tutorial#install)
- Blazor Language Services extension
(https://marketplace.visualstudio.com/items?itemName=aspnet.blazor)
- Blazor CLI templates command line
(dotnet new -i Microsoft.AspNetCore.Blazor.Templates)

29. Blazor
Demo
Create Project

30. Menu
Main Component

33. C#

34. mono
.NET dll

35. Blazor
Demo
Process in Crome

36. .cs
.cshtml
Compile to .NET
BROWSER
App.dll
.NET
(System.Core.dll,
, mscorlib.dll,…)
WebAssembly
(mono.wasm)

37. Class Name

38. Component
- Nested
- Razor or C# Code
- Shared Class Libraries

41. Component parameters

43. Route

44. /app.cshtml

45. http://localhost/Counterhttp://localhost/

48. Life Cycle
Call Rendering Dispose

49. OnInit
OnInitAsync
OnParametersSet
OnParametersSetAsync
OnAfterRender
OnAfterRenderAsync
SetParameters ShouldRender
Dispose

50. Blazor
Demo
Life Cycle

51. Menu
Header

52. Layout

54. @inherits BlazorLayoutComponent

55. <div id=“content”>@Body</div>

56. @layout MainLayout

57. Dependency Injection

58. public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
//여기에서 종속성 주입을 사용할 수 있습니다.
}
public void Configure(IBlazorApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}

59. JavaScript Interop

63. javascript
C#

64. So What?

65. Blazor.NET
https://www.mono-project.com https://webassembly.org/

66. Thanks you!