Web Components and Polymer - Introduction to the future web
15 Jun 2015
The web now has evolved a lot, it has grown from static sites those in 90's to dynamic application building platform. It is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible.
Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. This is shown [here](http://www.evolutionoftheweb.com/#/evolution/day). But as it grows it is becoming more complex, at the time of static sites it used to few pages, no heavy markup but now going through the html markup of the application is a headache and we have css, js of more than thousands of lines which makes it impossible to comprehend in a single go.
The way we develop our applications is not upto the mark, today in order to complete our task in time with too many feature we tend to rely on the already developed feature which may or may fit into our requirement but we tweak it little bit hoping that it would work fine if not then we go to similar implementation by some different vendor, without realizing the complexity we are adding in.
For example if we have to develop some kind of image slider we just google it and we find n numbers of sliders already implemented, we download any particular implementation trying to fit in our project, if it does not work we go to other - repeating the steps till it satisfies our need
As a problems like divitis, unmaintainability creeps in the due to complexity in the large application there must be some way out of it. If we analize our modern web applications they are not only complex to design but also quite difficult to develop. Given the range of tools involved, amount of testing required, and the combination of libraries/frameworks used, the development process has become harder. As the application scales over a period of time, it becomes harder to maintain the code and make enhancements.
For instance, take a look at the frontend code of these few popular websites:
The complex DOM structure of morder web applications is largely due to indiscriminate use of divs and spans. HTML5 was brought into picture to resolve this issue with symantic markup, but it still falls shart due to following reasons:
- We have too many similar components in our web page that fall under the same semantic structure. To distinguish them from each other, we use classes, IDs, or other attributes.
- The available list of semantic tags are simply not enough to target the wide variety of components that constitute our design. As a result, we fall back to traditional tags like div or span.
## Web componets to the rescue
The W3C aims to address this problem by introducing Web Components. Web components are a collection of specifications that enable developers to create their web applications as a set of reusable components.
Each component lives in its self-defined encapsulated unit with corresponding style and behavior logic. These components can not only be shared across a single web application but can also be distributed on the web for use by others.
It is the combinations following 4 specifications:
- **Custom Elements** – These enable developers to create their own elements that are relevant to their design as part of the DOM structure with the ability to style/script them just like any other HTML tag.
- **Shadow DOM** – This is designed to abstract all the complexities from the markup by defining functional boundaries between the DOM tree and the subtrees hidden behind a shadow root.
- **HTML Imports** – Similar to import one CSS file into another, these allow you to include and reuse HTML documents in other HTML documents.
## Custom Elements
Custom Elements allow web developers to define new types of HTML elements.
Web Components don't exist without the features unlocked by custom elements:
- Define new HTML/DOM elements
- Create elements that extend from other elements
- Logically bundle together custom functionality into a single tag
- Extend the API of existing DOM elements
### Registering a custom element
### Lifecycle callback methods
- **createdCallback** - an instance of the element is created
- **attachedCallback** - an instance was inserted into the document
- **detachedCallback** - an instance was removed from the document
- **attributeChangedCallback(attrName, oldVal, newVal)** - an attribute was added, removed, or updated
All of the lifecycle callbacks are optional.
## HTML Templates
HTML Templates are another new API primitive that fits nicely into the world of custom elements.
The <template> element allows you to declare fragments of DOM which are parsed, inert at page load, and instantiated later at runtime. They're an ideal placeholder for declaring the structure of custom element.
Example: registering an element created from a <template> and Shadow DOM:
## Shadow DOM
Shadow DOM is a powerful tool for encapsulating content. Use it in conjunction with custom elements and things get magical!
Shadow DOM gives custom elements:
- A way to hide their guts, thus shielding users from gory implementation details.
- Style encapsulation.
Creating an element from Shadow DOM is like creating one that renders basic markup. The difference is in createdCallback():
## HTML Imports
Include an import on your page by declaring a :
The URL of an import is called an import location. To load content from another domain, the import location needs to be CORS-enabled:
## What is Polymer?
The specifications introduced above are quite new and it is hardly surprising to know that browser support is not very good. But, thanks to the Polymer library, created by the awesome folks at Google, we can use all these features in modern browsers today. Polymer provides a set of polyfills that enables us to use web components in non-compliant browsers with an easy-to-use framework. Polymer does this by:
- Allowing us to create Custom Elements with user-defined naming schemes. These custom elements can then be distributed across the network and used by others with HTML Imports.
- Allowing each custom element to have its own template accompanied by styles and behavior required to use that element.
- Providing a suite of ready-made UI and non-UI elements to use and extend in your project.