Freddy Montes

I'm a Frontend Developer and designer. I learn and teach everything about Web Technologies and Design.

Costa Rica (GMT-6)

🇪🇸 Traducir
InstagramTwitterGithubLinkedInStackOverflow

DotCMS Content Type Fields Library

We needed to create reusable UI components for each field, and we need them to be framework agnostic so we did.

Tech Stack

stencilStencilJS
WC
Web Components
sassSASS

DotCMS helps you manage and deliver content across all channels, devices, and platforms.

As a CMS, in DotCMS, you can create content types and add fields to them. There are around 24 types of fields users can create in a DotCMS content type.

Challenge

We needed to create reusable UI components for each field, and we need them to be framework agnostic.

Solution

Web Components are the native solution to create reusable UI components.

You can create Custom Elements with Angular, Vue, and other Javascript frameworks. We went with StencilJS because is aimed specifically for this purpose and in our proof of concepts works well. Some of its features are:

  • Asynchronous rendering pipeline
  • TypeScript support
  • One-way Data Binding
  • Component pre-rendering
  • JSX support

Benefits

The team and I were able to pick up into this tech quickly, it works similar to ReactJS, and the tooling is terrific. StencilJS allows us to have a v1 in about 2 months of work, all with units and e2s tests.

Results

Is not released yet, but our internal testing has shown excellent results:

  • Fast rendering
  • Easy to scale
  • Native support
  • Work perfectly with Angular and ReactJS
  • CSS stylable