Overview

What is StencilJS?

Our web components are built with StencilJS. It is a compiler that generates Web Components from plain JavaScript classes. Stencil combines the best concepts of the most popular frameworks into a compile-time rather than run-time tool. Web Components are simply custom HTML tags that you can use in any web page.

Stencil takes a lot cues in terms of development experience from modern front-end frameworks, like React.

The difference is the end result is a standalone web component that works in any browser with native browser featureincluding slots and CSS scoping, and if we need it, the Shadow DOM.

The only “extra” code that is shipped is a very small Stencil runtime that’s bundled with the components and the CSS itself.

All of this is bundled with Rollup.js.

Compatibility across frameworks

We need to support a variety of front-end frameworks (for instance React, Angular JS, Vue even) and server side technologies (Play/Twirl, Node, etc).

The big selling point of Stencil is the ability to write once and distribute our UI primitives anywhere, regardless of framework.

Ship CSS “closer” to the markup

Web components allows us to ship the CSS closer to the use-case.

Up to this point we would ship a huge CSS monolith with each product, and a developer would have to pay close attention to markup patterns, order of elements, etc.

Stencil allows us to, for say a Card component, ship the CSS that just powers the Card alongside the component itself. And if we need to encapsulate the CSS or use the Shadow DOM, we have those options as well.

Performance

Front-end performance is always a challenge. Luckily Stencil comes with a lot of smart defaults, and it’s optimized for async loading through native browser Javascript modules.

This allows us to take advantage of bundling, treeshaking, and lazy loading.

Stencil gives us this all of this out-of-the-box, with minimal config. If you ever looked at a Webpack config file, Stencil is much easier to understand.

JSX/Developer experience

Stencil ships with a hot module reloading dev-server, which is great for dev experience.

It exposes Helper utilities that makes it easier to work within the web component lifecycle.

Anyone who has written React/JSX will be able to pick up Stencil pretty readily.

TypeScript support

The front-end tooling landscape has moved to Typescript, and that’s where we’ve followed. Typescript provides benefits in that it’s somewhat self-documenting, and modern IDEs support syntax highlighting and code completion.

“Utilize the platform”

<certara-web-component></certara-web-component>

At its core, Web Components use modern browser features (such as list them out etc). So instead of shipping client-side JavaScript which forces a user to download a runtime and parse that payload for every view, Stencil opts to use the platform itself and APIs built directly into the browser.

Using the native browser https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements custom element API, we can build and distribute UI modules that will conceivably work across any stack.