WEB COMPONENTIZATION - WebComponent and Polymer
Web Front End Development
On Web Front-End's development seems focusing the greater part of developers' attention. After the wave "web as platform" now, another one is coming out, it is "browser as platform". The new web applications are built as "single page application" following the new principles of Service Oriented Front End Architecture(1) that extends the SOA ones.
As consequence the number of the frameworks concerning it are continuously growing and choosing the right one are beginning a complex task to accomplish
Such frameworks could be split in two main domains : the STRUCTURAL Framework(2) and the UIKIT(3).
Concerning the STRUCTURAL Framework seems that the most popular,until now, is AngularJS that has introduced into web development a lot of concepts once owned exclusively by BACK END Frameworks (like for example Inversion of Control) and gave us an easier way to manage, arrange & modularize our Front-End projects
Concerning UIKIT there isn't a clear indication about what is the most used/better/cooler but, however, Bootstrap seems a good player
The Web Components Revolution
Such introduction is for share with you my Front-End development experience. Lately i've started to deal with WebComponents and I've been impressed from such technology and i think that it truly will change In deep the web development approach.
The WebComponents rely on particular W3C features that are:
- Custom Elements
Enabling the author to define and use new types of DOM elements in a document. - HTML Imports
HTML Imports are a way to include and reuse HTML documents in other HTML documents. - Templates
Declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents. - Shadow DOM
Enabling better functional encapsulation within the DOM.
The WebComponents' approach promotes the idea that a web application is an aggregate/composition of independent components that communicate among them using a well defined interface composed by attributes, methods & events. These concepts are not new in development but how they are applied in web development is really awesome.
Polymer a Web Component implementation by Google
Let's start to show a simple example of WebComponents. We will use the Polymer that is the official "Google WebComponents Library" that provides a lot of components, also following material design guidelines, and Polyfiller that emulate features when not supported by browser.
<!-- proto-element.html -->
Define a Component (example could be edit on Plunker)
<!-- proto-element.html -->
<polymer-element name="proto-element" attributes="counter">
<template>
<span>I'm <b>proto-element {{counter}}</b>. Check out my prototype.</span>
</template>
<script>
Polymer({ counter:0,
ready: function() {
//...
}
});
</script>
</polymer-element>Use Component (example could be edit on Plunker)
<!-- index.html --><html lang="en">
<head>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>Such example put in evidence how define a new WebComponent and how you can use it. As you see, to define a new WebComponent we have to assign a name and optionally public attributes. A WebComponent is composed by a template and the Script Element.
Within a 'Template' we can:
- Include private resources like external Javascript(s) & Stylesheet(s)
- Define the User Interface using HTML and/or other WebComponents
- Use the attributes & methods of WebComponent through the binding that is automatically provided by WebComponents platform
Within a 'Script Element' we can:
- Handle WebComponent lifecycle through Element Lifecycle Methods: created, ready, attached, detached, propertyChanged.
- Define public & private Attributes
- Define public & private Methods
- Define public Events
- Implements WebComponent logic.
After definition, it is enough import component within another page and use it as a new tag within your page.
Analogies with AngularJS
To give you a parallel with AngularJS we can say that each WebComponent contains the template and the controller, moreover the scope is the WebComponent itself so the binding will acts only on the element's template.Conclusion
However there are a lot of other features (like components' inheritance) that i've not mentioned for brevity, with this article I would like to give just an idea of WebComponents possibilities and also an idea on how the Web development is changing to deal with the future challenges.
Hope that you are now a little bit more curious about ....
If you would start coding, I suggest to use the HTML Playgrounds like :
(1) Take a look to Next Generation Web Application Architecture
(3) UIKIT: Framework that provides User Interface Widgets,Theme, etc .. and promote/implements patterns for Usability & Accessibility
Official Site :
www.webcomponents.org
www.polymer-project.org
Hi,Lets joint to Sahifa Theme Premium Wordpress News Theme.
ReplyDeleteSahifa is a Clean Responsive Magazine, News and Blog Template.
Sahifa Theme