Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

.NET Fest 2019. Dan Patrascu-Baba. Architecting Blazor Applications. An Angular inspired approach

26 views

Published on

Blazor is certainly a technology for the future seen that the server-side hosting model is already part of .NET Core 3.0 and that the client-side hosting model is planned to be shipped in .NET 5. Therefore, we can start building cool Blazor application! But how to architect them? What goes where and how can we wire everything up? During this session we’ll try to sketch some Blazor architectural principles inspired by Angular. This means that we’ll cover topics like component design, component types, folder structure, communication patterns and services. All aspects will be backed by relevant code samples from a Blazor application created using these architectural principles.

Published in: Education
  • Copas Url to Read PDF Format === http://bestadaododadj.justdied.com/B01LYQTJM8-dan-et-celia-les-jumeaux-d-autremonde.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

.NET Fest 2019. Dan Patrascu-Baba. Architecting Blazor Applications. An Angular inspired approach

  1. 1. Тема доклада Тема доклада Тема доклада KYIV 2019 Dan Patrascu-Baba Architecting Blazor Applications. An Angular inspired approach .NET CONFERENCE #1 IN UKRAINE
  2. 2. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Dan Patrascu-Baba BIO: Software developer @Amdaris, Founder @Codewrinkles, Co-organizer @ApexVox Blog: http://danpatrascu.com Twitter: @danpdc
  3. 3. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Agenda .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Short Blazor overview • Folder structure • Designing Blazor components • Component communication
  4. 4. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 What is Blazor?
  5. 5. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Full-stack web development in C# .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Blazor is a framework for building interactive client-side web UI with .NET: • Create rich interactive UIs using C# instead of JavaScript. • Share server-side and client-side app logic written in .NET • Render the UI as HTML and CSS for wide browser support, including mobile browsers
  6. 6. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Hosting models .NET CONFERENCE #1 IN UKRAINE KYIV 2019 BlazorWebAssembly BlazorServer
  7. 7. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Folder structure
  8. 8. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Options for organizing code .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Convention based Follows strict naming conventions Related code might be separated Can result in a lot of files in a folder in larger applications Feature based Features are organized in their own folders Features are self-contained Easy to find everything related to a feature
  9. 9. Тема доклада Тема доклада Тема доклада .NET LEVEL UP What’s the correct way? .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • For feature rich application organizing by features might be useful • Since Blazor apps will probably result in feature rich UIss, feature based folder organization might be useful • However, KEEP THE FLATTESTS POSSIBLE FOLDER STRUCTURE
  10. 10. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 DEMO: Feature based folder structure
  11. 11. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Designing Blazor Components
  12. 12. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Inline component type .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • It is just a single .razor file which the Blazor compiler turns into a C# class at build time • Markup and logic are all in the same file • Logic is separated by using a @code block or a @function block
  13. 13. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Code behind component types .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Markup and logic are separated into different files • This is achieved using the @inherits directive • Convention: name the base class file the same as the view file but with .cs appended
  14. 14. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Class only components .NET CONFERENCE #1 IN UKRAINE KYIV 2019
  15. 15. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Use code behind components .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Inline components are great for demo purposes. However they get very crowded very fast. • Code behind component types separates two different concerns: rendering UI and business logic • Class only components are verbose, hard to read, easy to mess up. • Code behind component types give us an optimal component design.
  16. 16. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 DEMO: Code behind components
  17. 17. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Component communication
  18. 18. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Parameters .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Are defined using public properties on the component class with the [Parameter] attribute. • attributes are used to specify arguments for a component in markup • You can think about parameters as input properties in Angular
  19. 19. Тема доклада Тема доклада Тема доклада .NET LEVEL UP EventCallbacks .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Great for situations where you have nested components and you need a child component to trigger a parent components method upon a certain event • You can think about callbacks as Output parameters in Angular
  20. 20. Тема доклада Тема доклада Тема доклада .NET LEVEL UP Container presentation pattern .NET CONFERENCE #1 IN UKRAINE KYIV 2019
  21. 21. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 DEMO: Container presentation pattern
  22. 22. Тема доклада Тема доклада Тема доклада .NET LEVEL UP State container .NET CONFERENCE #1 IN UKRAINE KYIV 2019 • Can be a simple class injected as a service in each component • Can implement different and more complex patterns • Useful when we need to communicate between components that are not in the same hierarchy
  23. 23. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Questions?
  24. 24. Тема доклада Тема доклада Тема доклада .NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019 Thank you!

×