Korea Community Day 2019

1. Korea Community Day 2019 • “SPA with C#, • Blazor” 원기욱 • kiwookwon@noblemade.net

3. Experimental. 형용사 1. (아이디어·방법 등이) 실험적인

4. Front-End 웹의 연대기 브라우저와 개발자 전쟁의 서막 1세대 2세대 3세대 4세대? 2010년 이전 웹의 성장기 모바일 지원 이슈 등장 1990년대 인터넷이 등장. 하이퍼텍스트 위주의 환경 2010년 이후 웹 표준 및 웹접근성 IE 폭망의 시대 현재? 프론트앤드 개발 부각 SPA 프레임워크의 다양성

5. Single Page Application 새로 고침 방식의 웹과의 작별 SPA Frameworks Angular.js React.js Vue.js 약장수

6. One way Ticket! 천하군림 유아독존!

7. Change the World! 내가 이세상을 바꾸리라!

8. Edge WEB ASSEMBLY Crome Firefox Opera

9. What is WebAssembly?

10. WebAssembly • Not JavaScript 그것이 알고 싶다. What is that? • Modern browser • Native speed

13. NO!

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

15. .NET C#

17. What is Mono? • Android, IOS, Mac OS • Cross Platform

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

20. Blazor

21. Browser + Razor Blazor

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

23. Get started with Blazor • .NET 3.0 Core SDK • (https://www.microsoft.com/net/learn/dotnet/hello-world-tutorial#install) • Visual Studio 2019 (Preview 2 or later)(https://www.microsoft.com/net/learn/dotnet/hello-world-tutorial#install) • Blazor Language Services extension • (https://marketplace.visualstudio.com/items?itemName=aspnet.blazor)

24. Blazor Demo

25. Menu Main Component

28. C#

29. mono .NET dll

30. Blazor Demo

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

32. CLASS

33. Component • Nested • Razor or C# Code • Shared Class Libraries

34. Component

35. http://localhost/ http://localhost/Counter

36. JavaScript Interop

40. javascript C#

41. So What?

42. Blazor Demo

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