Axon MeetUpOctober 2014

Polymer and Web Components

Albert Adjei-Laryea

about:me

@aladjetey

Web Development

• HTML – Content Presentation

• CSS – Styling your content

• JavaScript – Interactivity

The HTML

• Heading (h1 ...h5)• Paragraph (P)• Image (img)• List (ul,ol)• Table• Iframe• Form

• Input (type: text, checkbox, radio, button, sumbit)

Then we start working and realize we want more

• Tabs• Images Slides• Declarative sectioning• Check Listbox• and the list goes on and on

So what do we do?

• We pick up CSS and JavaScript, use them to parch the HTML together writing multiple lines of code to achieve “PIMP my HTML”, which is more like a second hand elements.

• And it looks cool to us. How sad?

• But well who knows more?

• Anyway we got what we wanted

This plus 83 lines of CSS

In an ideal scenario

• The HTML language would be expressive enough to create complex UI widgets and also extensible so that we, the developers, could fill in any gaps with our own tags.

• Today, this is finally possible through a new set of standards called Web Components.

Web Components

• Web Components are a collection of standards which are working their way through the W3C and landing in browsers as we speak.

• In a nutshell, they allow us to bundle markup and styles into custom HTML elements

• What's truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that we write always render as intended.

Web Components

• HTML its self has evolved and it evolution is strong empowered by web components.

Hidden in the shadows

• Let take a look at the video tag<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>

Web Components

• Building our <img-slider> with web components

• More goodies on web components at http://webcomponents.org/

Polymer• First time I heard of it and our little forest adventure.• Is a library utilizing web components for building elements and

applications.• Its not a framework. With Polymer the framework is DOM.• The component model is Custom Elements.• Scoping is provided by Shadow DOM.• “Too much talent is being spent on papering over a previously insuffient

web platform. It’s time to change that.” – Matthew McNulty

Polymer

• Polyfills are a bridge to the future web platform

• Polyfills are not polymer, even thought it was built by the same team.

• Polymer is a sugaring layer to build your own element set & apps.

• Polymer Designer Tool @ https://www.polymer-project.org/tools/designer/index.html

Polymer is active

The Polymer Concept

• Components all the way down

• Everything is an element

Unlock the next era of UI development

Core Elements

Paper Elements

• More stylized and part of the Material Design system.

• They are really design to push the envelop of what we have come expect in a browser in teams of animations, enlighten, shadow and element relationships

Building a polymer application

• Install the generator npm install -g generator-polymer

• Make a new directory and cd into it mkdir my-project

• Scaffold a new Polymer project yo polymer

Resources

• http://webcomponents.org/• https://www.polymer-project.org/• https://github.com/yeoman/generator-polymer• http://customelements.io/

Thank You