Unsere Artikel

Kategorie: Web Components

Angular

Master Web Component Forms Integration – with Lit and Angular

When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library.
However, some pitfalls are to consider when integrating these components into web forms.
Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.


Notice: All code samples are available on Github!

zum Inhalt >
Angular

About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

Modern web technologies enable us to write huge business applications that are performant and easy to use. But with time comes complexity to our projects naturally. That added complexity sums up and makes further app development slow and cumbersome. This article discusses how a simple architectural concept can make every app more maintainable, faster to develop, and extendable in the long run.

zum Inhalt >
Web Components

Stencil – Web Components On Steroids

In this article, we are exploring the framework Stencil from Ionic. Stencil is a Web Components compiler helping to create custom Web Components libraries that are usable in any web application.

zum Inhalt >
Dependency Injection

Deep Dive: Web Components & Dependency Injection – The Experiment

When developing Web Components you will ask yourself at some point, where to actually get the data and configuration from. If you are used to frameworks like Angular, you know that you can inject services and configurations. Web Components rely on HTML attributes, JavaScript properties and `CustomEvent` for input/outputs. But, what if we use that, to build our own dependency injection to share along with services and configuration? In this deep dive, we are going to experiment and not only see if it is possible but also if it makes sense.

zum Inhalt >
Angular

Creating Web Components With Modern SPA Frameworks – Angular, React, And Vue.Js

You might have read the article series about Web Components in which we talked about the advantages and disadvantages of Web Components in detail and how they are integrable in modern SPA frameworks. This article focuses on how you can create Web Components using a modern SPA framework and also addresses Angular Elements, Vue.js Web Components, and React. Besides, we will take a look at how to structure a project.

zum Inhalt >
JavaScript

Lightweight And Fast Web Components With LitElement

In my last article, I wrote about how to create Web Components without any framework using the native browser APIs. Nevertheless, there is something yet unsaid that is worth mentioning. Frameworks like Angular or VueJS give us a little bit more comfort to create our Web Components. For example, we have iterators like for loops. We can use these in our templates to generate our HTML template, and so much more. When using a framework though, we deal with a big bundle to make a small component. But are these frameworks the only option to create Web Components? No!

zum Inhalt >
Angular

The Motivation For Using Web Components, An Introduction: Perks & Flaws Series – Part 1

Web Components – a term you most probably hear regularly in recent times as a web developer. With the standards of Shadow DOM, HTML Custom Elements, HTML Templates, and, in former times, HTML Imports, there finally is a native component model within the browser. In this four-part article series, we are exploring the perks and flaws of Web Components within a demo application. This demo will show how frameworks like Angular, React, Vue, LitElement, and Stencil.js can seamlessly work together in one application as Web Components.

zum Inhalt >