Blazor - the successor of angular/react/vue?
- 1. Browser + Razor = Blazor SPA with C# only Robert Szachnowski
- 2. Agenda 2 1. History of client-side web development. 2. What is blazor? Framework’s features. 3. How blazor works – architecture. 4. C# vs AngularJS. • AngularJS elements. • Blazor’scomponent power. • Components. • Layouts. 5. Look in the code. 6. Materials.
- 3. History of client-side web development 3 1 2 3
- 4. What is that Blazor? 4 Blazoris a single-page web app framework built on .NET that runs in the browser with WebAssembly.Running .NET in the browser is made possibleby a relatively new standardized web technology called WebAssembly.WebAssemblyis a "portable, size- and load-time-efficient format suitable for compilation to the web." Code compiled to WebAssemblycan run in any browser at native speeds.To run .NET binaries in a web browser, we use a .NET runtime (specificallyMono) that has been compiled to WebAssembly.
- 5. 5 Blazor Razor has its roots on the serverwhere it is typically used to dynamically generate HTML. In Blazor,Razor is used on the client. To be more specific, the Razor engine runs during compilation to generate C# Code from Razor templates.
- 6. 6How is it compiled? .cshtml example
- 7. Blazor features 7 • A component model for building composableUI • Routing • Layouts • Forms and validation • Dependency injection • JavaScript interop • Publishing and app size trimming • Livereloadingin the browser during development • Server-siderendering • Full .NET debuggingboth in browsers and in the IDE • Rich IntelliSenseand tooling • Abilityto run on older (non-WebAssembly) browsers via asm.js Existing and planned
- 8. 8
- 9. What dependencies are in the browser? 9 BROWSER Lorem ipsum Blazor & Javascript dependencies Mono.js & mono.wasm runtime Application DLL’s in IL code
- 11. 11Example
- 12. C# vs AngularJS Comparing Blazor features to Javascript framework’s
- 13. 13AngularJS elements Comparing to list of many different elements in the AngularJS framework, creators of Blazor want to simplifythe whole workflow, adjust to the .net world and don’t make it the same as this framework. They want to make it better. Source: https://www.slideshare.net/ThoughtWorks/angular-js-introduction-by-tania-gonzales
- 15. Components Components in Blazorare equivalent of controllers in the AngularJS. Main difference is that to the component is attached template which is „UI” for code. „Components are flexibleand lightweight, and they can be nested, reused,and shared between projects.” We can cast our component in other templates as well. It similar to directive in angularJS. The main difference in this case is that components can be called only with specified HTML tag and not like in the JS framework – as attributes of HTML tag. Component C# code can be nested in the template but can be taken to the code-behind class as well. If we do this then our class can be inherited in more than one template (if we 15
- 16. Layouts Technically, a layout is just another Blazorcomponent. A layout is defined in a Razor template or in C# code and can contain data binding, dependencyinjection, and other ordinary features of components. Two additional aspects turn a component into a layout: 16 The layout component must inherit from BlazorLayoutComponen t. BlazorLayoutComponen t defines a Body property that contains the content to be @Body syntax located in the template can allow layout to be base layout for components or layouts (nesting).
- 17. Look in the code... 17 Source: https://github.com/rafek1241/blazor-first-approach
- 18. Thank you for reading 18 Materials that were used in this presentation: - Blazor.net - Learn-blazor.com - Github.com/aspnet/Blazor Resources: - https://blazor.net/community.html