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:
- HTML Templates – Currently a recommendation
- Shadow DOM – Draft
- Custom Elements – Draft
- HTML Imports – Draft
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.
So, let’s take a closer look what is hidden behind those new recommendations.
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
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”.
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.
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.
Attached to the benefit, there are countless disadvantages, especially in responsive web design.
So you can now better scope everything on a web page.
The following picture shows how an actual implementation looks like.
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.
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.
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.
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.
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.
- Microsoft Edge and Web Components – Great interview on Web Components
- Web Components
- Web Component Kitchen
- Introduction to Shadow DOM
- Modular Future Web – Web Components – CSS Tricks
- Using Encapsulate on Semantic Markup – CSS Tricks
- Custom Elements – HTML5Rocks
- HTML Imports: #include for the web – HTML5 Rocks