Web Components!They’re gonna be everywhere (probably)

Presentation by Abdella Ali front-end developer at rangle.io

Okay, what are they?

● Think Directives! ● Collection of W3 standards ● Includes both javascript and css ● http://www.w3.org/TR/components-intro/

Sounds complicated● X-Tags ● Polymer ● Other Libraries

But I like angular!You don’t have to choose! !“One of the main goals of Angular 2.0 is the ability to work with WebComponents. This means *any* WebComponent, including those built with WebComponent libraries such as Polymer and XTags. We've got some of this working already in our templating engine, including two-way databinding to XTags components. We've also go a demo that shows Angular's depdency injection working to inject a custom Polymer component with services. Integration is a pretty important story for us.”

Fine, but why use them?

● Interoperability ● Web component libraries are focused ● Self-contained

Tell me about Polymer!

● Backed by Google ● Plenty of pre-made components ● Supports Web Animations ● Based on flexbox ● Has ‘paper’ themed components

Convince me with a cool demohttp://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar

What does the code look like?

<paper-button class="colored hover" label="colored" >

</paper-button>

What does it really look like?!!Let’s take a look in WebStorm ~

That seems like a lot

● Very customizable ● Components can be very complex ● This ‘Button’ component covers all paper buttons in

the example ● It doesn’t have to be a lot.

Show me something simple<polymer-element name="preview-hero"> <template> <link rel="stylesheet"

href="preview-hero.css"/> <paper-shadow z="1"animated="true"></paper-shadow> <content> </content> </template> <script> Polymer('preview-hero', { ready: function() { } }); </script> </polymer-element>

:host{ height: 30%; opacity: 0.6; transition: opacity 200ms ease-in-out; } !:host(:hover) { opacity: 1; }

So how do I style it?

● :host is for the element ● ::content is for the ‘transcluded’ content ● Polyfills for non-native components ● http://www.polymer-project.org/docs/polymer/

styling.html

How do I get’m?

● bower install Polymer/paper-button

<link rel="import" href="components/paper-button/paper-button.html">

!<paper-button label=“hi”> </paper-button> !

What are all these tags?

● <polymer-element> ● <template> ● <content>

polymer-element

● Declares your custom element ● Special attributes:

o name (required) - self explanatory o attributes - can declare a bunch at once o extends - use to extend another element o noscript - for simple elements o constructor - global name for javascript

template

● Between the open and close is your markup ● can put other custom elements in here

content

● Allows for transclusion of content ● Can have multiple content tags ● Can specify what element types are allowed and

where they go using the select attribute (ie select=“h1”)

Demo!!!!!

What do I need?

● Chrome 36+ or polyfills ● bower install polymer ● bower install polymer/core-elements ● bower install polymer/paper-elements

What about web animations?

var elem = document.querySelector('.pulse'); var player = document.timeline.play(new Animation(elem, [ {opacity: "0.5", transform: "scale(0.5)"}, {opacity: "1.0", transform: "scale(1)"} ],{ direction: "alternate", duration: 500, iterations: Infinity }));

Here's a simple example of an animation that scales and changes the opacity of a

<div> over 0.5 seconds. The animation alternates producing a pulsing effect.!

!

Links/References● http://customelements.io/ ● http://css-tricks.com/modular-

future-web-components/ ● http://webcomponents.org/ ● http://www.x-tags.org/ ● http://www.polymer-project.org/ ● https://github.com/web-

animations/web-animations-js

https://groups.google.com/forum/#!topic/polymer-dev/fAvqDo40tMk !http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36