Building web components with Polymer



TunJS - March 2015

By Nihel Akremi

Program


  • What are web components?
  • What is Polymer?
  • Create Custom Element

What are web components?



Web components are a collection of specifications that enable developers to create their web applications as a set of reusable components.

What are web components?


Web Components consists of these four technologies:

  • Custom Elements: capability for creating your own custom HTML tags (elements) with the ability to style/script them just like any other HTML tag.
  • HTML Templates: fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript.
  • Shadow DOM: define functional boundaries between the DOM tree and the subtrees hidden behind a shadow root.
  • HTML Imports: allow you to include and reuse HTML documents in other HTML documents.

What is Polymer?


Polymer is a framework that is based on Web Components technologies.

The Polymer library provides a declarative syntax that makes it simpler to define custom elements. And it adds features like two-way data binding, property observation, and gesture support to help you build powerful, reusable elements.

Philosophy


Everything is an element



                



                

Create Custom Element

Element declaration#



  
  

            

Create Custom Element

Profile View Sample#


Profile-card
                    

Education-list-card
                    

Create Custom Element

profile-view#




  
  

                    

Create Custom Element

profile-card#




  

                    

Create Custom Element

empty-list-card#




  

                    

Create Custom Element

education-card#




  

                    

Create Custom Element

profile-view#







  
  

                    

< thank-you >