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.
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.
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>
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
This screenshot is using a more robust configuration of the editor
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!
nvQuickComponents on GitHub
https://github.com/nvisionative/nvQuickComponents
nvQuickComponents on npm
https://www.npmjs.com/package/@nvisionative/nvq-components