about:me
Marcos Placona

github.com/mplacona

Instant jQuery Drag-and-Drop Grids - Packt

Web Components

a shift to the future

At first, things were simple...

But then we complicated it ...

And that was confusing...

But this is how we build apps...

To the rescue...

Web Components + Polymer

What's in it for me?

Shadow DOM
DOM & style encapsulation
HTML Templates
Inert chunks of DOM activated when needed
Custom Elements
Roll-out your own tags
HTML Imports
bundle common HTML/CSS/JS (e.g. components)

Old School vs Polymer

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(37.790, -122.390)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

 <!DOCTYPE html>
<html>
<head>
    <script src="components/platform/platform.js"></script>
    <link rel="import" href="components/google-map.html">
</head>
<body>
    <google-map lat="37.790" long="-122.390"></google-map>
</body>
</html>

Show me some code...

What have we just done?

Created a new custom component <pirate-badge>
Added logic to the Shadow Dom
Used HTML templates
imported it to our index.html page

Questions?