Stencil

We chose Angular 2+ because our product has a rather complex back-office, most of which is visible only to our employees and contractors.

The "full featured" approach of Angular as well as the way it deals with the data model suited this business case well. We also use the Reactive Forms module a lot, as well as Clarity (an Open Source design system by VMWare) for the internal parts of the product. We also intend to use Angular's offline features.

For user-facing parts of the product we are now considering implementing views as Web Components with Stencil. We use Sass (SCSS syntax) for styling and TSLint to enforce a style guide close to Angular's default.

As a #Frontend developer I'm used to using tools like #BootstrapCDN or some APIs/Library like #GoogleMaps to create or have styled elements with cool functionality. But this requires me remembering Bootstrap classes, or trying to get Google Maps to work in #Angular. 😢

And that's just framework agnostic solutions... If you look at framework specific libraries you end up dealing with the fact you are pigeon holed into using framework specific libraries!

Libraries like Polymer or Stencil for #WebComponents are definitely the way to go!

We are leveraging @WebComponents to build front end widgets that work across all our web properties easily even when there is no other commonality in the underlying frontend stack.

Being able to ship small, self contained UI elements has allowed us to strategically eliminate technical debt in small bites while shipping highly interactive, fast to render fully reusable components constantly.

We've built some components with Stencil and Lit but the majority are still vanilla @CustomElements with the styles namespaced by the custom element name to keep them contained.

We are really happy with our ability to make forward progress without requiring any big bang rewrites of our site's underlying frameworks and to share the latest component packages across the company.