Web Components, Angular and SPFx

An exciting announcement from the Angular team during the Angular Mix event last month has brought lot of attention around the SharePoint community.

Lets try to understand what this is all about.

What are Web Components ?

These are simple widgets that allow us to bundle markup and styles into custom HTML elements. They are not tied to any framework- purely built with HTML, CSS, and JAVASCRIPT.

To understand it easily, imagine them as web parts that we could add into any SharePoint page. These components can be plugged into any piece of existing HTML adding few lines of code.

If you are interested to know more about web components, like custom elements and Shadow DOM , this is a neat blog from css-tricks, where it is explained in detail.

BTW, most of the major browsers have pretty much good support for the web components or at least one can use webcomponents.js as polyfill.

So, in a nutshell, if you convert your widget / web part as a Web Component, then you will be able to run it pretty much everywhere, which is pretty awesome.

web_component

 

Integrating Web Components into JS Frameworks

Did you know that these web components could be integrated into the framework of your choice?

The new Angular and Vue frameworks score full points in utilizing all the web component capabilities, although React is not quite there yet.

This enables you to create your widget and utilize them in your Angular or Vue projects. This also allows you to pass attributes to your widget, have custom properties utilized and even trigger events.

web_component angular

How do you create Web Components?

To be super quick in creating Web Components, Polymer library created by Google, has done much of the heavy lifting. They have also created a bunch of  ready to use custom elements that are maintained in their Github.

You can even create Web Components using Vue.

But wait… what if you can create them using Angular too?

If you are that person who loves Angular and had problems with Angular integrating into the SPFx model, the new feature named Angular Elements that came out as part of the Angular Labs would definitely help.

This was taken a step forward when Rob Wormald from Google, during the European SharePoint Conference 2017, explained how Angular Elements could be used in a SharePoint SPFx web part.

Keep it coming…

All these announcements should help us plan better for future SharePoint developments.

I think this is the best part of SPFx, where it allows you to embrace the awesomeness that happens in the outside world.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s