The flexibility-usability tradeoff is a well-known design principle which states that as the flexibility of a system increases, its usability decreases. This tradeoff exists because accommodating flexibility requires satisfying a larger set of requirements, which results in greater complexity.
Microsoft Blazor is a mature, modern front-end web framework based on HTML, CSS, and C# that helps you build web apps faster. It allows you to build web apps using reusable components that can be run from both the client and the server so that you can deliver great web experiences. Blazor is an extremely powerful and versatile technology... so it should not be surprising that it suffers from the flexibility–usability tradeoff dilemma described above.
While experienced developers appreciate the vast capabilities of Blazor, it can often be daunting for new developers to come up to speed and master its complexities. In come cases it is simply confusion resulting from the unique technical jargon used in Blazor such as render modes, hosting models, SSR, web sockets, Wasm, WebView2, etc... In other cases it is related to the nuances and limitations when trying to implement specific development scenarios.
In this session we will provide a deep dive into some of the more challenging aspects of Blazor including state management, JavaScript integration, pre-rendering and double loading, render mode boundaries, static rendering interactivity, optimizing component ViewState, etc... Please join us for this private online event (registration required).
đź”— Open source project is here
Scenarios:
– 04:33 Project Setup
– 19:51 Button Link – using links rather than button onclick events
– 21:53 Button Form – using a standard form rather than button onclick events
– Anchors – inconsistent behavior of internal page references, sometimes fragments or hashes
– 26:03 Simple Form – simple form with multiple fields
– 29:03 Advanced Form – advanced form with dependencies between fields and onchange events – Multiple Forms – strange behavior of using multiple forms on a page
– 32:40 Progress Indicator – displaying a progress indicator using StreamRendering
– 35:44 Scroll Position – inconsistent scroll position behavior navigating between pages, and a simple solution
– 38:41 NavigateTo – calling NavigationManager.NavigateTo() throws an exception in Visual Studio
– 41:20 OnAfterRender – only called in interactive rendering
– 42:55 Cascading Parameter – does not cross render mode boundaries from static to interactive components
– 44:45 Scoped Service – does not cross render mode boundaries from static to interactive components
– 45:48 Pass State – how to pass Cascading Parameters and Scoped Services across render mode boundaries
– 47:56 ViewState – demonstration of how Blazor injects state into your page when cross render mode boundaries
– 51:57 Serialization – demonstration of how class which are not serializable can throw exceptions when cross rendering mode boundaries
– 54:14 Dual Service – technique for data access which supports both Server and Client (HttpClient) scenarios dynamically at runtime using dependency injection
– 59:45 Prerendering – disabling prerendering allows you to avoid OnInitialized being called twice for each component
– 01:01:37 JavaScript – how to utilize JavaScript in both static and interactive components