26 Followers
·
Follow

I recently gave a presentation at Triangle JS about web components and web component interoperability amongst common UI frameworks. I’d like to build on this talk and present some new ideas around web component rendering options and their performance. I’ll also follow up with some sample implementations that address more complex rendering challenges such as transcluded content rendering and rendering common web components across different frameworks.

Benchmarking a variety of JS rendering implementations

A recent post at auth0 surveyed the landscape of commonly used JS frameworks and provided some insight into their individual performance. It was subsequently updated to include some metrics for DOM rendering libraries incremental-dom.js and virtual-dom.js. I took some time to reproduce these tests and verify the results claimed by the author. I also added some metrics for the case that a custom element was used in the rendering template alongside the virtual-dom library. It should be noted that the goal of this suite is to “stress” test the browser’s rending with each library and provide an average benchmark after running five tests with each implementation. …


With the advent of Shadow DOM, HTML Imports, HTML Templates, and Custom Elements, the future of web development is pretty bright. In this post I’d like to talk about a few concepts which may help when writing custom elements, and how you can improve your element interop with other frameworks.

Using Custom Events

Custom Events give us the ability to communicate from our custom element back to the framework. You can see a great example of this here using Typescript with Ng2 and a custom element:

// fires when our element is attached to the DOM
attachedCallback() {
this.addEventListener(‘click’, (e) => {
var eventObj = new CustomEvent(‘selected’, {
detail: this.username …

About

priley86

Software Developer for the @RedHatUXD team and core contributor to @patternfly_des.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store