about:me
Marcos Placona
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?
Web Components
By Marcos Placona
