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.

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 :
  • PLUNKER - A common purpose HTML Playground
  • Ele - A WebComponent specialised Playground



(1) Take a look to Next Generation Web Application Architecture 

(2) STRUCTURAL FRAMEWORK: Framework that provides infrastructure for communication, data binding, navigation, routing , etc .. in addition provides patterns for project organization, modularization, test and packaging

(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

Comments

  1. Hi,Lets joint to Sahifa Theme Premium Wordpress News Theme.
    Sahifa is a Clean Responsive Magazine, News and Blog Template.
    Sahifa Theme

    ReplyDelete

Post a Comment

Popular posts from this blog

POLYMER + TYPESCRIPT the marvelous couple

PlantText: The new "Online" UML Editor powered by PlantUML

PlantUML & Maven - Enrich your project's documentation