WEB COMPONENT
&
GOOGLE POLYMER

Romain Linsolas

Why Web Components?

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML 5, it's:

A tab component with Twitter Bootstrap


<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

A better solution


<tabs-panel active="home">
    <tab id="home">...</tab>
    <tab id="profile">...</tab>
    <tab id="messages">...</tab>
    <tab id="settings">...</tab>
</tabs-panel>

A Twitter post

                
<blockquote class="twitter-tweet" lang="fr">
    <p>If only Bradley's arm was longer. Best photo ever.
        <a href="https://twitter.com/search?q=%23oscars&amp;src=hash">#oscars</a>
        <a href="http://t.co/C9U5NOtGap">pic.twitter.com/C9U5NOtGap</a>
    </p> - Ellen DeGeneres (@TheEllenShow)
    <a href="https://twitter.com/TheEllenShow/statuses/440322224407314432">3 Mars 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Again, a better solution

<twitter-post tweetId="440322224407314432"></twitter-post>

Creation of a Web Component

Google Polymer



http://www.polymer-project.org/ 

<super-hero></super-hero>

Marvel Rest API

http://gateway.marvel.com/v1/public/characters/1009368?apikey=*** 

{ ...,
    {
        "id": 1009368,
        "name": "Iron Man",
        "description": "Wounded, captured and forced...",
        "modified": "2013-11-07T10:55:38-0500",
        "thumbnail": {
            "path": "http://i.annihil.us/u/prod/marvel/i/mg/9/c0/527bb7b37ff55",
            "extension": "jpg"
        },
        "resourceURI": "http://gateway.marvel.com/v1/public/characters/1009368",
        "comics": { ...

About the Web Component standard

The Web component is a standard... based on others standards

Solution? Use polyfills

Platform

https://github.com/Polymer/platform

Alternatives to
Google Polymer

Alternatives to Google Polymer

Ready for production?

Short answer

...in fact, not yet!

Resources

Questions?

https://github.com/linsolas/polymer-presentation