Presentation made at .NET Fest 2019 in Ukraine.

1. Тема доклада
Тема доклада
Тема доклада
KYIV 2019
Alexandre Malavasi
The future of Web: what Microsoft Blazor can do for you
.NET CONFERENCE #1 IN UKRAINE

2. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
About me
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
MCP | MCTS | MCPD | ITIL | .NET | MBA | MTAC |
Technical Leader | Consultant | .NET Developer
Medium.com/@alexandre.malavasi
LinkedIn.com/in/alexandremalavasi
Twitter.com/alemalavasi

3. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Agenda
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Current status of Web Technologies
Concept of Single Page Applications
Blazor: how it works
Comparison between Blazor and other SPAs (React, VueJS and
Angular)
Demo

4. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Status of Web Technologies
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Migration from server to client-side
• Intense use of Javascript libraries / frameworks
• Powerful browser resources, such as WebAssembly
support

5. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Migration from server to client-side
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Everything was processed in the server:
• Database operations
• Logic implementation
• HTML process
• Security and validation

6. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Migration from server to client-side
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

7. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Migration from server to client-side
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Issues on running everything on the server:
• Costs of scalability
• Performance
• Latency
• No-friendly user experience

8. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Intense use of Javascript libraries / frameworks
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Gradual Web migration to JS libraries / frameworks

9. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Javascript libraries / frameworks
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Library / framework First release
jQuery 2006
AngularJs 2009
NodeJS 2009
UnderscoreJS 2009
BackboneJS 2010
React 2013
VueJS 2014

10. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Delegating responsibility to the client-side
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

11. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Delegating responsibility to client-side
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Massive use of API based on JSON
• Transfer non-sensitive logic to client
• Intense use of local storage
• Off-line resources

12. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Based on components
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
{Component
HTML
CSS
JS

13. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
WebAssembly is the new Web
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

14. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
What can I do with WebAssembly?
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Increase performance
• Reduce latency issues
• Run server-side code directly on the browser
• Share libraries between desktop and web
applications easier

15. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
WebAssembly code
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

16. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
WebAssembly x JS performance
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
WebAssembly is faster than Javascript, manly for complex operations:
• video editing
• 3D rendering
• video games
• music streaming
• encryption
• image recognition

17. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
What is Microsoft Blazor
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

18. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
What is Microsoft Blazor
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Single Page Application of .NET Platform
• Based on WebAssembly and not in Javascript
• Started as a open-source project and now it is officially part of .NET Stack
• Quick improvements and updates since 2017

19. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
How it works?
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Client-side Blazor
• .NET generates the underlying WebAssembly
file
• We don’t need to know WebAssembly to use
Blazor
• Generates JS compatible file for obsolete
browsers

20. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
How it works?
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Server-side Blazor
• Intense use of SignalR
• More responsibility in the server
• Recommendable for external integrations

21. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
How it works?
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Dependency injection
• It can use only C#
• Possible to integrate with Javascript Libraries
• As part of .NET Core platform, it is fully multi-platform and it could be hosted
everywhere

22. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Blazor App Template
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

23. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Blazor App Template
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

24. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Tools for the demo
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Visual Studio 2019 (latest version)
• .NET Core 3.1
• Blazor templates

25. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
Demo

26. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Benefits
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Easy adoption by .NET developers
• Uncomplicated to learn
• All .NET resources already available
• Performance

27. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Benefits
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Compatible with all modern browsers
• Can be hosted in a very low cost service
• Re-use of code in client-side (validation, logic and more)
• The client-side Blazor application works off-line

28. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Negative points
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Current low adoption in the market
• Scalabity for server-side Blazor application
• Doubts about updates and evolution of it
• Limited debugging capability

29. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
Questions

30. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Contact info
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
Medium.com/@alexandre.malavasi
LinkedIn.com/in/alexandremalavasi
Twitter.com/alemalavasi

31. Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
Thank you