1 / 44

SPA with C#, Blazor: The Evolution of Front-End Web

Explore the history from hyperlinks to modern SPA frameworks like Angular.js, React.js, and Blazor using .NET technologies. Learn about WebAssembly and the power of Blazor for full-stack development. Get started with Blazor now!

greenj
Download Presentation

SPA with C#, Blazor: The Evolution of Front-End Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

  7. Edge WEB ASSEMBLY Crome Firefox Opera

  8. What is WebAssembly?

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

  10. NO!

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

  12. .NET C#

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

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

  15. Blazor

  16. Browser + Razor Blazor

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

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

  19. Blazor Demo

  20. Menu Main Component

  21. C#

  22. mono .NET dll

  23. Blazor Demo

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

  25. CLASS

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

  27. Component

  28. http://localhost/ http://localhost/Counter

  29. JavaScript Interop

  30. javascript C#

  31. So What?

  32. Blazor Demo

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

More Related