06-03-2023
Web Components & minimal API: why and when to use
by Diogo Salaberri, Technical Project Manager (Enterprise Solutions), and Jorge Borralho, Tech Lead (Digital Xperience) @ Xpand IT
When talking about the more practical goals of web development, functionality is one of the key words. It is imperative that everything is up and running when we access a networked application or platform. For example, within a webpage, a lot of content is uploaded to be visible to the user — from design to text and other visual media such as videos, images, etc.
These and other various elements need to be interconnected to ensure functioning. How to do it? Web components and minimal API could be viable options in these types of web development projects.
What are web components?
Web components are a set of specifications, rules and practices that can be introduced or extended in an HTML component (in which the tags are well known, such as: <div>, H1, H2, image, etc.). That is, we can create our own components and define how they should behave when they are operational. To do this, we can explore some of the most recurring specifications:
- Custom Elements. It is the specification that allows the foundation and definition of the rules to create the components. In practice, it is used to register a custom component so that it behaves and is used as intended
- Shadow DOM. Remember: DOM stands for Document Object Model, which are the programming interfaces for web documents. A DOM already exists in an original HTML page, but with Shadow DOM it may be possible to attach another DOM. The implementation of web components on Shadow DOM is optional. When using this specification, elements like styles/CSS are isolated. That is, depending on where they are created, they are either not exposed to the web component or outside the web component. If you create a CSS outside the scope of the web component, the web component can’t see it. And if you create a CSS inside the web component’s scope, that CSS is not seen outside of this scope
- ES Modules. This is one of the most trivial specifications for those who use JavaScript because we can define how we can create several JavaScript files (import/export) and how to migrate them to other JavaScript or HTML files. With the specification in ES Modules it will also be possible to define the inclusion and reuse of JavaScript documents based on standards, modules or performance
- HTML Template. In this specification we can define a HTML fragment that will be the body of the web component. The template is one of the default tags that exist in standard HTML. Although it can be defined at the time of development, the HTML Template is a good practice because the web component can be isolated or imported to separate the code in a more intuitive and healthy way for eventual maintenance of the web project in the future
So, when and how to use web components?
Many web developers believe that web components have not taken the spotlight away from the work of standard frameworks for HTML and JavaScript (such as React, Angular or Viewer.js), but rather to fill an already existing place in the web development universe. The frameworks we have listed above are geared towards building action components — these components can be reused in the development of other applications if properly applied.
A web component has the differential capacity to be linked and compatible with projects written in different frameworks — this is a very recurrent solution in the day-to-day of technology companies so that several applications are interconnected. As with web components, so the standard HTML elements are retained, but there is high potential for being highly customisable.
You can develop web components in Angular, React, Viewer.js or even JavaScript. However, these frameworks are not optimized for this as they can fail in performance, bundle size, linkability, etc. For this, we recommend:
- Svelte.js — With a strong aspect of web component development, it is one of the frameworks with one of the smallest bundles possible (1.6KB — which is highly important when several web components are created). It is also a framework that allows the development of web applications.
- Stencil — Specialized tool for just developing reusable, customizable, scalable, optimized, and compatible web components with any browser. It is free and open source.
Minimal API: what it is used for?
Minimal API is one of the latest frameworks of the C# programming language, already integrated into the .NET 6 platform, which serves to create APIs (Application Programming Interfaces) in a different but simple way.
Minimal APIs emerge with the goal of creating HTTP APIs that use fewer resources or resources with reduced file sizes and features, with a reduced boilerplate, while maintaining all the potential of .NET. This is a good solution to create microservices quickly, minimizing ASP .NET Core dependencies and maintaining the demonstrated performance.
Conclusion
Web components and minimal API allow you to create frontends and backends in different ways.
Web components are an extension of the HTML component. Agnostic. Not new, but very useful for reusing components from one web application to another, including between different frameworks.
Whereas minimal API, a new framework, allows you to create APIs in .NET 6 and C# in the fastest way you’ve ever seen.
If you liked this blogpost, we hope you find useful how these two techniques in a software solution.
Leave a comment
Comments are closed.