Article
0 comment

Web Components: A look into the future of web development and maybe SharePoint

Let’s take a look in the future of web development and the upcoming new web standard called web components. In the future everybody can introduce, enhance the document object model through custom elements or change the behavior of existing HTML elements.
Let me give you a brief overview what the actual ingredients of web components are and how this will improve how you write your code in the future. You will also find some wild guesses on the new SharePoint Framework.

Ingredients of Web Components

As mentioned before the W3C is currently working on a standard for a thing called ‘web components’. This new standard definition consists of the following element:

The only ingredient of those that works on Microsoft Edge for now is HTML Templates. The others are currently in consideration, but I suggest they will follow soon. It is no secret that Microsoft develop their browser along the web standards and implement feature once they have become a recommendation.

Web Conponents Support Microsoft Edge

Web Conponents Support Microsoft Edge

So, let’s take a closer look what is hidden behind those new recommendations.

HTML Templates

When you currently implement a style guide or template components at some point you need to pass them over to a back end developer to do the plumbing.
Through HTML templates the thing becomes easier. Now a new component can be directly defined as a template. Therefor the W3C introduced a new HTML tag named template.
Inside the template tag any HTML markup can be specified. To integrate the template on a web site. A simple JavaScript grabs the code and added it to the DOM. Take a look at this small example of an actual HTML Template implementation

See the Pen HTML Template by Stefan Bauer (@StfBauer) on CodePen.14928

You might think. WOW! I can do this with a regular div element too. Yes, but in this case you have to hide the div element through CSS and is part of the document.
Through this template tag the content of the template will be hidden from the normal document and will become a so called “Shadow Content”.
When you view the source of a web site, you will only find a remark for that but won’t see the actual code. The good thing is that the content of the template can be accessed through JavaScript.
HTML Template currently doesn’t support any kind of data binding. This still needs to be done through tools like Mustache, Handlebars, AngularJS, Knockout or React.
The ‘Shadow Content’ brings us right to another new HTML Specification that is currently supported in Google Chrome and Opera.

Shadow DOM

The only way to add an HTML Document to another HTML Document for now is through an iframe. A well proven piece of technology part of the HTML4 specification from 1999.
This pattern has one big benefit. In general, you cannot access the main HTML document through JavaScript and the Style Sheet Definitions won’t break the design of the main document.
Attached to the benefit, there are countless disadvantages, especially in responsive web design.
Shadow DOM is here to solve this issue because you can directly integrate an HTML file into your main document. The style sheets and JavaScript files will only affect this part of the DOM, but not the overall web page.
Let say you create a custom video player, input control or a web part. Like before you have a template definition on your website, but instead of adding the content directly to the host element as show before you create a Shadow DOM Element through JavaScript which represents basically a sub document as part of the main document.
Inside the Shadow DOM you can use any JavaScript library you want and it will only affect the current component. Even the style definition will only be applied to this control.
So you can now better scope everything on a web page.
The following picture shows how an actual implementation looks like.

Shadow DOM Implementation – HTML5 Rocks

You can test this example on the HTML5 Rocks page using Google Chrome or Opera.
In the old way you included an HTML document that contains an iframe that contains an HTML document.
Now you have a component that can be optimized for certain view ports and reused on various pages and don’t have to be part of the DOM.
This gives you the freedom to add components built on AngularJS, KnockoutJS, React or ‘The-latest-shiny-new-framework’ and even combine them on the same page.
If you like to learn more about Shadow DOM, please check out HTML 5 Rocks 101 on Shadow DOM.

Custom Elements

Currently the definition of HTML Elements is limited to a few base elements. If you like to create a custom element you have to combine the base elements together and add them to your page.
With AngularJS and other frameworks you are able to define custom elements, that will transform through JavaScript to provide the required functionality. Let’s reuse an example I used in a previous blog post. It is the ngOfficeUI Fabric Button example.

See the Pen NG Office UI Fabric by Stefan Bauer (@StfBauer) on CodePen.14928

In this example, I added a custom button with the tag name ‘<uif-button>’ to the page. Well, instead of using a framework like Angularjs you will be able to do this only by using the web standards too.
The advantage is that your HTML will become a valid HTML5 document through custom components. The framework only serves as the transpiler for the elements.

HTML Imports

Finally the last part of the web component specification is not really new because we were already able to link to JavaScript and Style Sheets Document. The new thing is that you can link to html files.
The Abstract of the W3C draft states this as:

HTML Imports are a way to include and reuse HTML documents in other HTML documents

This simply means that you will be able to link to HTML documents through HTML. In this case all HTML Templates a website used can be stored in a single HTML file and will be included on the page instead of specifying directly on the current document. The following example shows how such link looks like.

<link rel="import" href="/imports/mytemplates.html">

The important thing is that you have to add the rel=’important’.
Again, this will be really useful for many scenarios and will improve frameworks too.
In addition, you will have new JavaScript functions such as document.open(), document.read() and document.write.

The future is here soon

All these technologies and upcoming web standards I listed here are highly theoretical part of the new SharePoint Framework. I haven’t attended the Dev Kitchen and still wait to get my hands on the new framework. The only thing I can say is with the words of the great philosopher Dwayne ‘The Rock’ Johnson: “I smell what they are cooking”.

In future it will become easier to define reusable components and add those components to existing web sites. If I’m not completely wrong, we will see those technologies in SharePoint soon.
Currently the browser support, except HTML Templates, is limited to Google Chrome and Opera but I think the other browser will catch up soon once the W3C standards will become recommendations.

It’s a good sign that modern.ie lists the specifications as ‘In considerations’. In half a year those features might be implemented.

The only constant in life is change

Web technologies get more powerful day by day. Learning things like TypeScript, AngularJS, KnockoutJS or ReactJS will open new possibilities for every developer in the future.
Your development skill won’t be limited to SharePoint anymore. You might become a true passionate web developer and can do a lot of things and applications to shape the future of and apart from SharePoint.

To be honest. I wanted to quite SharePoint in 2010 and move back to my web development origins because with the upcoming responsive web design it looked more appealing to me. Since then I have tried to combine the best of both worlds and use it in SharePoint.

With the new announcements I must admit it’s become more appealing to me than ever to do things in SharePoint and the Office Development space.

Additional Resources:

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.