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

•

1 gefällt mir•169 views

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.

Bildung

Тема доклада
Тема доклада
Тема доклада
KYIV 2019
Dan Patrascu-Baba
Architecting Blazor Applications. An Angular inspired
approach
.NET CONFERENCE #1 IN UKRAINE

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Agenda
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
• Short Blazor overview
• Folder structure
• Designing Blazor components
• Component communication

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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Hosting models
.NET CONFERENCE #1 IN UKRAINE KYIV 2019
BlazorWebAssembly BlazorServer

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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
DEMO:
Feature based folder structure

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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Class only components
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

Тема доклада
Тема доклада
Тема доклада
.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.

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
DEMO:
Code behind components

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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.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

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP
Container presentation pattern
.NET CONFERENCE #1 IN UKRAINE KYIV 2019

Тема доклада
Тема доклада
Тема доклада
.NET LEVEL UP .NET CONFERENCE #1 IN UKRAINE KYIV 2019
DEMO:
Container presentation pattern

Тема доклада
Тема доклада
Тема доклада
.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

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

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

Weitere ähnliche Inhalte

Mehr von NETFest

В этом выступлении Андрей расскажет о внутренностях базового сервиса, написанного с использованием паттерна CQS, который обрабатывает входящие запросы команд и публикует события, описывающие переходы состояния системы. После этого он опишет общие способы тестирования такого сервиса и объяснит плюсы и минусы существующих подходов. Затем он расскажет про AutoFixture и покажет, как она может сделать тесты намного чище, а конфигурацию - более удобной, путем инъекции параметров в метод теста, объяснит существующие проблемы с инициализацией и очистке данных в асинхронных тестах и покажет, как с этим справляться с помощью некоторой легковесной интеграции между xUnit и AutoFixture.

.NET Fest 2019. Андрей Литвинов. Async lifetime tests with xUnit and AutoFixture

NETFest

.NET Fest 2019. Анатолий Колесник. Love, Death & F# Tests

NETFest

Все когда-либо писали парсеры, но многие так и не знают как спарсить HTML без регулярных выражений. Очень длительное время концепция парсинга языков с рекурсивной грамматикой для меня была черной магией, а люди которые занимаются разработкой компиляторов и предметно-ориентированных языков вовсе казались волшебниками. Но это оказалось не так и сложно. В моем докладе я хочу вам рассказать о том что такое парсеры в целом, зачем они нужны и какие они бывают, а самое главное -- покажу как перейти от традиционных методик их написания к более удобному и понятному функциональному способу. В ходе презентации мы также напишем рабочий JSON парсер в качестве proof of concept.

.NET Fest 2019. Алексей Голуб. Монадные парсер-комбинаторы в C# (простой спос...

NETFest

Believing it is the most powerful PaaS service of the entire public cloud, I will share with you all the most interesting features of App Service and the good tips from the field, to see how to properly use it in production and focus on applications, instead of governance. I will dig into the architecture, the deployment options, the runtimes, the secrets management, logging and troubleshooting and into some advanced high-scale scenarios. If you never used this, you will say ""ok, how did I survive without it?"".

.NET Fest 2019. Roberto Freato. Azure App Service deep dive

NETFest

Во время доклада, я поделюсь с Вами опытом, который мы получили, используя микросервисы в прод K8S кластере. Также, обозначу основные проблемы, с которыми столкнулась наша команда на этапе их диагностики. И, самое главное - что мы сделали чтобы избежать их в будущем. Отвечу на вопросы: Почему мы мигрировали в облако? Почему dotNet Core 2.2 вызвал кучу проблем? Данный доклад сохранит сотни часов вашим разработчикам и DevOps команде, жизнь которой может напоминать кошмар.

.NET Fest 2019. Леонид Молотиевский. DotNet Core in production

NETFest

The majority of companies are struggling with an issue of growth where they started from handful group of people and reached 1000+ employees. In case of small groups the relationships remind family’s connections so everyone knows each other personally and the atmosphere is warm and charm whereas starting from 500+ to 1k keep it as family is tough and most of the companies come up with processes on one hand and culture on other. There ain’t no silver bullet how to manage it and in the end of the day they are balancing working a lot about good atmosphere in company and setting up relationships between teams. The issue isn’t new however tools and approaches evolved a lot this is where .NET Core and ML.Net comes in handy. These days AI/ML take over the world and bots as one of implementations are already a part of our life therefore our entuthiastic team created a bot using latest .NET Bot Framework v4 who helps managers to “measure” atmosphere in teams and crucial to socialize teams leveraging the power of ML.NET.

.NET Fest 2019. Александр Демчук. How to measure relationships within the Com...

NETFest

In this session we'll demonstrate how to bring dragons or any other 3D model to life using Microsoft's Azure Spatial Anchors, HoloLens and mobile phones. You will learn what is augmented reality, we will introduce you Hololens, we will teach you what is Azure Spatial Anchor, how they work and how you can use them in your apps. This cross-device experience might be usable for all kind of applications.

.NET Fest 2019. Anna Melashkina та Philipp Bauknecht. Dragons in a Mixed Real...

NETFest

You must have noticed how Docker and containers is playing a more and more important part in .NET development. Docker support is everywhere, so it should be easy to build solutions based on container technology, right? But, it takes a bit more to architect and create a .NET solution that use Docker at its core. Many questions arise: How do you design a solution architecture that fits well with containers? Would I use .NET or .NET Core? What is a proper way to migrate to such an architecture? What changes in the .NET implementation from pre-Docker solutions with micro-services? Where do container orchestrators fit in and how do I build and deploy my solutions on a Docker container cluster, such as Azure Kubernetes Service? These and many other questions will be answered in this session. You will learn how to design and architect your .NET solutions and get a flying start to create, build and run Docker-based containerized applications.

.NET Fest 2019. Alex Thissen. Architecting .NET solutions in a Docker ecosystem

NETFest

Serverless technology is trending, but in-depth details are missing. How does it fit with non-serverless components? What are the practical use cases? Should you fight vendor lock-in? And what about limits and pitfalls with Azure? I will answer those questions, share a few tricks and short demo. I'll cover serverless usage scenarios with Azure, what problems can be solved, and what is a viable adoption strategy. Then I'm going to talk about technology shortcomings, when to omit it and how to rip all benefits. There are circumstances when a cloud-agnostic approach is beneficial, so I discuss serverless frameworks too and why vendor lock is not that bad. Finally, we'll look at a short demo that illustrates why you have to use specific serverless patterns.

.NET Fest 2019. Stas Lebedenko. Practical serverless use cases in Azure with ...

NETFest

Do you recall those buzz words like TDD, BDD? Yep, but we know their problems as well! TDD is too granular. BDD is too coarse-grained. Unit tests are too chatty. BDD is too abstract. TDD requires knowledge of implementation details. BDD does not care about implementation at all. What is in the middle? Integration tests. Let's be Integration driven then! OK, then how to build infrastructure to run Integration tests? Should we start with IaaS first? How to speed up the development and take into account non-foundational requirements like scaling, security borders, isolation, etc. from the very beginning? To answer the questions, we would combine Integration test-based development with serverless (AWS) to solve a typical business task. Based on the example, we would show how to create a solid foundation for further refactoring/refining of the overall solution and concreting it with Unit tests. Acceptance tests would be left for home exercise ;)

.NET Fest 2019. Сергей Медведев. How serverless makes Integration TDD a reali...

NETFest

Задачи по обработке естественного языка сейчас встречаются практически в любом проекте. К сожалению, до недавнего времени, платформа .NET не сильно подходила для решения подобных задач. С выходом ML.NET ситуация стала меняться к лучшему, но все еще далека от идеала. На этом докладе я расскажу про основные задачи, которые решаются методами Natural Language Processing и какие существуют способы решения этих задач на платформе .NET (сервисы, библиотеки, фреймворки).

.NET Fest 2019. Сергей Корж. Natural Language Processing in .NET

NETFest

A Public Key Infrastructure (PKI) is the basis of modern system authentication; X.509 certificates are at the core of modern cryptography. Building your own PKI is not for the faint of heart, so we usually buy our certificates from an external Certificate Authority or operate a 3rd-party off-the-shelf PKI. But what can you do if you need to issue your own certificates while keeping your costs low? What if, for example, you're in the business of manufacturing millions of IoT devices and you need to issue a certificate to each and every one of them? And to top it off - you want to do it in a Serverless manner? Join me in this session, as we build a Serverless PKI system with Azure Functions & Key-Vault and learn all about Key-Vault's capabilities in regards to X.509 certificates along the way.

.NET Fest 2019. Eran Stiller. Create Your Own Serverless PKI with .NET & Azur...

NETFest

For the past couple of years it seems that Microservices is all the rage. We want to use Microservices, we want to decompose into Microservices and we want Microservices to be a part of our world. While modern tools and platforms such as Docker, Kubernetes, Service Mesh and the public cloud help in implementing and maintaining such systems, the reality is that many fail even before the first line of code was written. This can happen for many reasons; Perhaps you chose a Microservices architecture for the wrong reasons? Maybe the organization wasn't ready for it? Or just possibly - the proposed architecture didn't embrace the true meaning of Microservices? As the CTO of a software services company I get tackle these questions a lot. Join me in this session as I provide my perspective on transitioning from Monolith to Microservices through lessons learned in the real world, while architecting and implementing multiple Microservices based software systems at various customers.

.NET Fest 2019. Eran Stiller. 6 Lessons I Learned on My Journey from Monolith...

NETFest

.NET Fest 2019. Kevin Dockx. Uncovering Swagger/OpenAPI

NETFest

You've used OpenID Connect. You know a thing or two about OAuth. But have you ever wondered how to achieve Single Sign-On between Angular & ASP.NET Core MVC apps, and automated Single Sign-Out? How, and why, to work with reference tokens? How to create a custom grant, and for what use case that might be a good idea? In this in-depth session we'll cover all of these topics, extensively using IdentityServer4 in the process. Note that some previous knowledge on securing ASP.NET Core applications with OpenID Connect is a must.

.NET Fest 2019. Kevin Dockx. OpenID Connect In Depth

NETFest

В данном докладе автор расскажет об опыте построения высоконагруженных Big Data решений на базе Microsoft Azure. Особое внимание будет уделено не только архитектурным подходам и best practices, но и многим ньюансам, тонким моментам и подводным камням, с которыми придется столкнуться. В каждом конкретном случае будут даны практические советы, cheat sheets и варианты решений, которые помогут с выбором подхода и позволят избежать потенциальных проблем. Также автор отдельно расскажет об опыте решения еще одной распростаненной задачи - проектировании Rules Engines для аналитики данных в реальном времени.

.NET Fest 2019. Андрей Антиликаторов. Проектирование и разработка Big Data ре...

NETFest

Microservices should be autonomous and independent, but what happens when your business domain doesn’t allow it, and you need to get data from other microservices? You’ll soon realize that simple HTTP calls are not enough anymore, or that your app is more brittle than ever and then you switch to messaging. With messaging you need to have a different mindset and be willing to embrace new challenges. In this session, we’ll explore different ways of getting data from one ‘micro-service’ to another and while doing that we’ll talk about the benefits or the drawbacks of choosing an approach or another.

.NET Fest 2019. Irina Scurtu. Forget about HTTP

NETFest

.NET Fest 2019. Łukasz Pyrzyk. Daily Performance Fuckups

NETFest

Я хочу рассказать о нашем опыте создания высоконагруженного REST API, который имеет следующие параметры: * Интуитивно понятный * Масштабируемый * Отказоустойчивой * Защита от атаки * Высокая пропускная способность Также я расскажу о том: * как мы делали нагрузочное тестирование * как мы пережили множество DDoS-атак * как мы сделали Blue-Green deploy Использовался следующий список технологий: .NET Core 2, ASP.NET Core 2, Consul, Fabio, Orleans.NET, Kafka, RabbitMQ, Serilog, xMetrics, Grafana, ELK

.NET Fest 2019. Андрей Винда. Создание REST API с поддержкой высокой нагрузки

NETFest

Traditionally developers only write unit tests (hopefully!) and QA engineers write System tests, with Selenium or some other tool. However, while this separation has some reasons, it's also a bit arbitrary and unhealthy. In this talk we'll discuss why you should be involved in all kinds of test automation and discuss best practices for utilizing the test automation to improve the development lifecycle, as well as both the internal and the external quality of your code.

.NET Fest 2019. Arnon Axelrod. Test automation for developers

NETFest

Mehr von NETFest (20)