Polymer and Web Components

Axon MeetUp
October
2014

about:me

Albert Adjei-Laryea
@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 calledWeb 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
<videowidth="320"height="240"controls>
<sourcesrc="movie.mp4"type="video/mp4">
<sourcesrc="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. Its 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