"Hands-on development experience using wasm Blazor", Furdak Vladyslav.pptx

I will share my personal experience of full-time development on wasm Blazor
What difficulties our team faced: life hacks with Blazor app routing, whether it is necessary to write JavaScript, which technology stack and architectural patterns we chose
What conclusions we made and what mistakes we committed

1. About me 13 years of experience with .NET stack .NET Consultant in GlobalLogic, CTO in Nearshore Devs Founder of UA .NET communities Blogger / Speaker / Microsoft MVP Front-end experience : ~5 years of Full-stack experience with: JS, JQuery, Angular, etc 10 month of full-time FE development using wasm Blazor

2. Last project t ech stack : One more SaaS project .NET 8, wasm Blazor MudBlazor component library Blazored.LocalStorage / SessionStorage Auto-generated Http clients Blazor App Insight for Telemetry NUnit + NSubstitute + FluentAssertions Browser-specific: JavaScript + WebPack html5/css3/flexbox/css grid

3. Tips & Tricks : Application design

4. Routing enhancements Routing using Enums is more convenient and does not rely on URI schema changing. That approach will have less error in enterprise-scale applications. Pages are mapped to enums like one-to-one. Conventions are good. Let’s separate “Pages” from “Components”. This approach makes code more readable. My package introduces a policy to restrict having routable components without a “Page” postfix. Do not reinvent the wheel when implementing “go on the previous page”, checking which is the “Current” page, parsing query string, etc.

5. BlazorNexus.Navigation nuget package https://github.com/VladislavFurdak/BlazorNexus Source code:

6. Nesting in components https://github.com/VladislavFurdak/FWDays2024Demos

7. Nesting in components https://github.com/VladislavFurdak/FWDays2024Demos

8. MVVM components interaction ViewModels Events Properties Methods Keeps state Services catch exceptions API Clients Repositories LocalStorage SessionStorage Razor Views Subscription on events Lifecycle of Pages Http calls

9. MVVM components interaction Skype window Contacts Current chat Contact Item Message Item Last messages NavBar Search Chat Settings State Object Events NewChatAdded ChatSettingsChanged New message recieved OnInit -> Subscribe -> NotifyStateChanged

10. Tips Tricks : JavaScript in Blazor

11. JS in Blazor JS interop is not fast Try to warp & forget js code into some Blazor components or use 3rd party Sometimes Blazor 3rd party packages has poor quality or abandoned

12. My experience to write JavaScript inside Blazor app It is legal to C all JS functions from Blazor Call C# methods from Browser We used Js interop for Infinite scroll Managing google ReCaptcha Local/Session storages Payments widget integration Browser API like MediaRecorder

13. Blazor Pros & Cons

14. Is Blazor the replacement for React or Angular? NO, Blazor is a good alternative to Web Forms or asp.net MVC

15. Blazor vs Modern FE frameworks When Blazor loses NPM Ecosystem >>>>> Nuget Blazor packages JS Labor market >>> Blazor devs amount Custom dynamic behavior using browser API When Blazor equals Rapid development of SPA using UI libraries like Telerik, Radzen, DevExpress, SyncFusion SSR (Blazor Server, Hybrid) MAUI hybrid apps When Blazor win Re-using of existing C# code Reduce an entry threshold in front-end for C# developers

16. Conclusions

17. Lessons we learned Be in touch with Product Designer on the stage of UI/UX development. Always start your project from Component Library (Storybook clone https://github.com/jsakamoto/BlazingStory ). I don’t recommend to use MudBlazor structured elements like: MudPaper, MudGrid, MudCard. Flexbox is faster & simpler. Determine which css helpers & which breakpoints will you use : Mud or Bootstrap. Decide will you use mobile native elements/events or not (MudBlazor does not support it)

18. Thanks Demos https://github.com/VladislavFurdak/FWDays2024Demos JOIN my TG Community