Web components: Under pressure

Have you been told that your app code needs to be more dry? What this means is that some parts of the code have repetition that could be optimized. That’s what “dry” means. It’s an acronym that stands for Don’t Repeat Yourself (DRY).

One of the many techniques to help you dry your code out is web components.

Web components help you by saving you the trouble of rewriting HTML elements again and again in your application. For example, a Rich Text Editor might be needed in multiple places. The last thing you need is to have to rewrite the code, or copy and paste it several times. That’s a great way to get typos and other errors. But, some rich text editors are more effective than others at working with web components. That’s what this article explores. 

In this article, you’ll find the results of a comparison between different rich text editors and their functionality, when used as a web component. It contrasts the different editors across speed of integration, the integration steps needed, code involved, and the extent of functionality that’s possible.

Table of contents

What is a web component?
Web component results summary and comparison
CKEditor
Froala
Slate.js
Quill
TinyMCE
Choosing the right web component integration

What is a web component?

Web components are reusable code snippets. They’re composed of HTML, CSS style, and JavaScript. Going another layer down in their construction, there are three main technologies that further define them. These are: 

1. Custom HTML elements: the actual HTML element you use to define the component
2. HTML templates: These define how the browser and web component should handle markup that goes unused when the page loads, but have the ability to be read later at run time
3. Shadow DOM: a separate DOM tree that contains the custom web components styles and functionality

The web components introduction documentation provides more information on how these technologies combine.

How are web components made?

To make a web component, you define a custom element, and then register the markup and other functions that are represented by that element. The TinyMCE web components how-to article further explains what’s involved.

Web component results summary and comparison

The rich text editors included in this review were evaluated under the following conditions:

• Web component support: Although not all the selected editors have supported web components maintained by a developer team, third party components are available in some cases.

• File Management: How many NPM files need to be installed and managed to get the editor working?

• Speed to get working: How much time and effort is needed to configure the web component? Are there scripts that automate the work, or is it manual?

Note: For testing conditions, Webpack offered a direct way to set up and apply web components in a demo.

Web component testing results

This table gives an overview of each rich text editor’s performance with Web Components:

Web component testing with Webpack

Using the webpack documentation, a demo web page was built for each rich text editor in this Pressure test. The demo web page only had the text editor to isolate, and we measured how quickly and easily the demo could build with the editor component alone.

Note: Because each test run used the same webpack files and folders, the NPM webpack dependencies (webpack/ and webpack-cli/) were not included in the final NPM count.

The final folder directory structure for each rich text editor looked like this:

dist;
node_modules;
package - lock.json;
package.json;
src;
webpack.config.js;

And here is an example build output. This one is from the CKEditor test (so you know what to look for if you’re trying out any of these for yourself in your developer environment): 

npm run build

> ckeditor5-1@1.0.0 build
> webpack

asset main.js 991 KiB [emitted] [minimized] [big] (name: main) 1 related asset
asset 462.main.js 2.34 KiB [emitted] [minimized]
asset 551.main.js 2.34 KiB [emitted] [minimized]
runtime modules 7.08 KiB 11 modules
orphan modules 1.12 KiB [orphan] 3 modules
built modules 1000 KiB [built]
modules by path ./node_modules/ckeditor5-webcomponent/dist/ 24.3 KiB
optional modules 8.4 KiB [optional]
./node_modules/ckeditor5-webcomponent/dist/esm/es2017/build/jd0ndvcq.entry.js 4.2 KiB [optional] [built] [code generated]
./node_modules/ckeditor5-webcomponent/dist/esm/es2017/build/jd0ndvcq.sc.entry.js 4.2 KiB [optional] [built] [code generated]
./node_modules/ckeditor5-webcomponent/dist/esm/es2017/x-ckeditor.core.js 15.8 KiB [built] [code generated]
./node_modules/ckeditor5-webcomponent/dist/esm/es2017/build/ lazy ^\.\/.*.*\.entry\.js$ include: \.entry\.js$ namespace object 160 bytes [built] [code generated]

./src/index.js + 3 modules 1.5 KiB [built] [code generated]
./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js 975 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.
Assets: 
  main.js (991 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:
  main (991 KiB)
  Main.js
webpack 5.74.0 compiled with 3 warnings in 8538 ms

CKEditor

The CKEditor project does not have a dedicated web components integration. However, a third party integration is available. 

The CKEditor NPM folders: 

npm install ckeditor5 && 
npm install --save-dev \
    ckeditor5-webcomponent
    @ckeditor/ckeditor5-build-classic
    @webcomponents/webcomponentsjs

Getting a basic editor running with the third party offering doesn’t represent a lengthy time investment. There are not a larger than expected number of NPM packages to configure. 

The build does come together with some warnings reported on the command line.

Ongoing maintenance and extending the CKEditor Web component, is the biggest challenge though. 

To add further functionality, the components need to be imported, set up in detail within the JavaScript index file, and then the project rebuilt. It could represent a significant amount of resources to manage at scale.

Froala

The Froala Editor currently does not have a dedicated web component. A custom web component tag is not supported.

A third party component is available on GitHub.

This component compiles quickly, but calls out to the Froala editor over a CDN. The third party component does not use NPM packaging for self-hosting. There is also the question of how to add additional features beyond the basic Froala editor, which is left unanswered.

Quill

For Quill, there is currently no dedicated web component. There are several third party components that can support Quill as a web component. Two of them stood out during research for the comparisons in this article:

1. The Stencil Quill Project
2. The Polymer Quill Project

Testing with the Stencil Quill project revealed that the project is fast to get working. 

There are few NPM folders to manage:

npm install quill &&
npm install --save-dev \
    stencil-quill

But there are questions of incorporating more features beyond the essential functions of the rich text editor. The path forward for adding new functions to the Quill editor as a web component is not completely clear, but a working demo of the stencil-quill project is available online by the project creator.

Slate

Like Froala and Quill, Slate does not offer a dedicated web component feature. However, Slate’s design means that it’s optimized to work within frameworks. This means web components are not a desirable fit for the project overall.

TinyMCE

TinyMCE offers a dedicated web component integration. You can access it through NPM, or with a CDN reference to reach the integration through TinyMCE Cloud.

Here’s the NPM content needed:

npm install tinymce &&
npm install --save-dev \
  mini-css-extract-plugin \
  html-webpack-plugin \
  css-loader

The overall set up steps are slightly faster than CKEditor, and of a similar speed to the Quill third party integration. More NPM packages are required compared to other integrations, comparable to CKEditor.

The TinyMCE integration offers a clear pathway for integrating functionality beyond the essential rich text editor. In Webpack, the index JavaScript file set up in the src/ directory is the place to import additional plugins. An example is shown in the web component bundle documentation:

/* Import plugins */

import "tinymce/plugins/advlist";
import "tinymce/plugins/code";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/emoticons/js/emojis";
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/table";

For more information and instructions on TinyMCE and web components, see the how-to guide on web components integration with TinyMCE.

Choosing the right web component integration

Of the rich text editors available, only TinyMCE offers a tested, verified, and official web component integration. 

While additional NPM management is required compared to the other editor solutions, the ease of integrating additional plugins and features balances the overall experience.

The build process for Froala may have been faster overall, but it is not clear how the Froala integration would work in production. Compared to TinyMCE, CKEditor, and Quill, the speed to set up seems to be the end of the advantages that the Froala integration offers.

If you need a web component rich text editor that receives attention from a dedicated community, works quickly and can expand to your needs, choose TinyMCE.

You can further expand on what TinyMCE can do, by adding Premium plugins. The configuration of plugins in the web component source JavaScript is easy to do with imports. All you need is a FREE API key to get started with a reusable, TinyMCE web component running the most useful rich text editor features.