• Indigenous DNNizen •

Paving The Way For A Web Components Based DNN Future

Paving The Way For A Web Components Based DNN Future

Are you tired of JavaScript Framework Churn? Perhaps some of my latest development efforts will help brighten your day and improve your outlook for future DNN development possibilities. While this project is in the early stages, I am so excited about it and wanted to go ahead and share what I am working on for the DNN community. I believe this contribution will have similar, if not greater, impact to future DNN development as some of my previous open source contributions.

Web Components

Have you heard of Web Components yet? If not, head on over to this Introduction to Web Components. There you will find links to the various Specifications that make up Web Components. It is exciting for modern web development and establishes a means for components that are no longer framework dependent.

Framework Dependent Components

If you are an Angular, Vue.js, React or similar JS framework developer, the concept of components is not a new one. This is the way we build modern applications. We create components for various elements and features within our applications. Then we tie them all together in an interactive fashion to make an application work as a whole.

Framework Independent Components

Unlike the above framework dependent components, Web Components are a new browser feature that provides a standard component model for the Web. These take advantage of new standards such Custom Elements, Shadow DOM, HTML Templates, and more.
 

Web Components Tooling

There are several great projects out there for helping developers to create Web Components based on the W3C Web Components Specification. Polymer and SkateJS are two early pioneers in this space. A more recent player that is catching the attention of many is Stencil. Each solution has its pros and cons.
 

Stencil

Being an Ionic developer for mobile apps and progressive web apps (PWA) myself, Stencil caught my eye early on because it is what the folks at Ionic created to help them build all the new web components for Ionic 4. As a bit of history, Ionic 1 was based on AngularJS (v1). Ionic 2/3 were based on Angular 2/3/4 components. To help Ionic become framework agnostic and reach a broader developer audience for mobile app and PWA development, the move to pure web components was necessary. Therefore, they created Stencil to help them through that process and they have shared the goodness by open-sourcing Stencil. As a by-product, Angular developers can use Stencil to create their own Web Components to be used in any framework, or even no framework at all using pure HTML and JavaScript.
 

A New Collection of Web Components

Now that we have a good background established, let me tell you more specifically about what I'm cooking up in the kitchen! To date I have been focused on establishing a solid project structure and development workflow for creating a new collection of Web Components. I wanted this new collection of Web Components to also be easily consumable for developers via Node Package Manager (npm).

These goals have now been achieved and the initial commit of nvQuickComponents has been made on GitHub. An npm organization has been created and an early version of nvq-components has been published. nvQuickComponents is yet another great open source contribution from nvisionative to our fantastic DNN Community (and beyond)!

As of the writing of this article, two Web Components have been developed. Not only can these be used within the context of a DNN extension, they can also be used in any web application that has an HTML front end.
 

<nvq-progress-bar />

The first one is nvq-progress-bar. This is a simple progress bar that is more of a proof of concept. This web component was used to "kick the tires" a bit with Stencil and to help initially setup the project structure and get a good development workflow established. Though this is not a polished component at this time, it does a great job of illustrating a few key concepts.

  • It takes full advantage of the Shadow DOM.
  • It uses the @Element decorator to access the host element within the class instance. This returns an instance of an HTMLElement, so standard DOM methods/events can be used.
  • It utilizes @Prop decorators for configurability via HTML attributes using dash-case on the Custom Element, via JSX attributes using camelCase, or via JavaScript accessing the Custom Element.
  • It utilizes custom SCSS variables, or shorthand properties, to allow for style manipulation from within the component and/or by the developer utilizing the component.

Here is what the nvq-progress-bar looks like.

nvq-progress-bar


Try It Out Yourself

Check out this HTML example for a simple implementation of this web component. Try updating the property values via JavaScript in the browser Console and you'll see how it updates immediately! Here is some code for quick reference.

    
        const nvqProgressBar1 = document.querySelector('nvq-progress-bar');
        nvqProgressBar1.value = 22;
        nvqProgressBar1.max = 50;
    

<nvq-editor />

One that is much more involved is nvq-editor. This web component leverages the vastly popular Quill. Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. So far, we have implemented basic usage of the editor.

I have exposed some common attributes via @Prop decorators, some of which are mutable. An example is conditional loading of the proper CSS for the Quill theme, based on the theme custom element attribute value.

I have begun work on several custom events via @Event decorators and I have implemented a CustomOptions interface.


Here is what the nvq-editor looks like using the bubble theme.

CODE

        
            <nvq-editor theme="bubble"></nvq-editor>
        
    

nvQuickEditor Demo 1


Here is what the nvq-editor looks like using the snow theme.

CODE

        
            <nvq-editor theme="snow"></nvq-editor>
        
    

This screenshot is using a minimalist editor feature set.

nvQuickEditor Demo 2


This screenshot is using a more robust configuration of the editor.

nvQuickEditor Demo 3


Try It Out Yourself

Check out this HTML example for a simple implementation of this web component. Try changing the theme from "snow" to "bubble" and have a bit of fun!


Using nvQuickComponents

As you can see from the HTML examples, it is quite simple to use these web components. In pure HTML, all you need to do is link to a single JavaScript file and use the Custom Element syntax. For more information on integration with other frameworks, check out the Stencil documentation.

Some additional features and concepts I will be exploring and implementing in the future, as needs arise, are:

  • Additional Decorators (@Watch, @State, @Method, etc.)
  • Custom DOM Events using the @Event decorator
  • Listening for Events via @Listen decorator
  • Form handling
  • Prerendering
  • Server Side Rendering
  • Services Workers
  • Context
  • Unit Testing
  • Routing
  • Framework Integration guidance

Stay tuned and feel free to jump in on the fun. Participation in this project is welcomed!

What are your thoughts on using Web Components in DNN? Let me know in your comments below and/or on GitHub.

Here's to a great DNN future!

GitHub
nvQuickComponents on GitHub
https://github.com/nvisionative/nvQuickComponents

npm
nvQuickComponents on npm
https://www.npmjs.com/package/@nvisionative/nvq-components

Print
blog comments powered by Disqus