alexmcpherson/code-1.js

## code-1.js
//spoiler: I just copy this from view to view. Bad ergonomics.

attachIncrementors: function() {
  var incrementor = new IncrementorView({
    attrName : 'difference',
    model: this.model.dishwashing_model,
    options: Helpers.range(0, 100),
    template: JST['components/load_incrementor']
  });

  incrementor.render();
  this.$('#dishLoadsIncrementor').html(incrementor.el);
},

## code-3.html
<body>
  <!-- WHAT THIS IS CRAZY USEFUL -->
  <carousel autoplay controls='false'>
    <img src='1.png' />
    <img src='2.gif' />
    <img src='3.jpg' />
  </carousel>
</body>

## code-4.html
<body>
  <!-- How does that... I don't even... -->
  <twitter-follow user='@alexmcpherson'>Follow me!</twitter-follow>
</body>

## code-5.html
<html>
  <head>
    <!-- 1. Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>
    <!-- 2. Use an HTML Import to bring in the element. -->
    <link rel="import"
      href="bower_components/core-ajax.html">
  </head>
  <body>
    <!-- 3. Declare the element. Configure using its attributes. -->
    <core-ajax url="http://example.com/json"
               handleAs="json"></core-ajax>

    <script>
      window.addEventListener('polymer-ready', function(e) {
        var ajax = document.querySelector('core-ajax');

        ajax.addEventListener('core-response', function(e) {
          console.log(this.response);
        });

        ajax.go(); // Call its API methods.
      });
    </script>
  </body>
</html>

## code-6.js
//lifecycle filters
Polymer('sweet-tag', {
  created: function() { ... },
  ready: function() { ... },
  attached: function () { ... },
  domReady: function() { ... },
  detached: function() { ... },
  nameChanged: function() { //magic! },
});

//expressions in templates
<div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList }}">

## slide-1.md

      
    Raw
  

              slide-1.md
            
          
    What the what is a web component


a little box drawn around some functionality in a reusable way
Polymer.js, React.js, Ember.Component, Mozilla Brick, etc
DX issues: a Backbone component...?


## slide-10.md

      
    Raw
  

              slide-10.md
            
          
    But what about:


Testing? ezpz
HTML Load times and file sizes? Vulcanize
Sharing or using sweet internet stuff? Bower
Mobile? A primary goal Topeka

Other features


two way data binding
element inheritance
plays fine with CSS pre-processers
nuzzles in nicely to the grunt/gulp/bower/yeoman toolchain
not all you can eat: take what you need
this thing


## slide-2.markdown

      
    Raw
  

              slide-2.markdown
            
          
    Why is Polymer different?


Secret browser advances for custom elements

Shadow DOM API
HTML Imports
Object.observe
ES6 WeakMap (objects as keys! What!)


Google sugar for stitching it together

Mutation Observers
Animation Helpers
URL helpers


## slide-5.md

      
    Raw
  

              slide-5.md
            
          
    How do I use this?


platform.js (polyfills everything)
<link rel="import" href="custom-element.html">
There is no 3. Throw those tags around like you mean it


IE10+, evergreen browsers
IE9 sorta works
Chrome 36 doesn't need platform.js. It's all there (!!!)


## slide-7.md

      
    Raw
  

              slide-7.md
            
          
    Pros/Cons

A++

native languages for everything
true sandboxing
dev ergonomics through the roof

F--

sandboxing with shadow DOM is the new this problem
big network time. async requests throughout
seems unwieldy for 'apps', better for true components


## slide-8.md

      
    Raw
  

              slide-8.md
            
          
    Approaches that seem to work (IMO)


No-business-logic widgets
Only replace the view layer
Styleguide build out

Not so hot


Big injection trains
Less sure about the 'void' components


## slide-9.md

      
    Raw
  

              slide-9.md
            
          
    But Alex, how do I trust you?
	//spoiler: I just copy this from view to view. Bad ergonomics.

	attachIncrementors: function() {
	var incrementor = new IncrementorView({
	attrName : 'difference',
	model: this.model.dishwashing_model,
	options: Helpers.range(0, 100),
	template: JST['components/load_incrementor']
	});

	incrementor.render();
	this.$('#dishLoadsIncrementor').html(incrementor.el);
	},
	<body>
	<!-- WHAT THIS IS CRAZY USEFUL -->
	<carousel autoplay controls='false'>
	<img src='1.png' />
	<img src='2.gif' />
	<img src='3.jpg' />
	</carousel>
	</body>
	<body>
	<!-- How does that... I don't even... -->
	<twitter-follow user='@alexmcpherson'>Follow me!</twitter-follow>
	</body>
	<html>
	<head>
	<!-- 1. Load platform.js for polyfill support. -->
	<script src="bower_components/platform/platform.js"></script>
	<!-- 2. Use an HTML Import to bring in the element. -->
	<link rel="import"
	href="bower_components/core-ajax.html">
	</head>
	<body>
	<!-- 3. Declare the element. Configure using its attributes. -->
	<core-ajax url="http://example.com/json"
	handleAs="json"></core-ajax>

	<script>
	window.addEventListener('polymer-ready', function(e) {
	var ajax = document.querySelector('core-ajax');

	ajax.addEventListener('core-response', function(e) {
	console.log(this.response);
	});

	ajax.go(); // Call its API methods.
	});
	</script>
	</body>
	</html>
	//lifecycle filters
	Polymer('sweet-tag', {
	created: function() { ... },
	ready: function() { ... },
	attached: function () { ... },
	domReady: function() { ... },
	detached: function() { ... },
	nameChanged: function() { //magic! },
	});

	//expressions in templates
	<div class="{{ {active: user.selected, big: user.type == 'super'} \| tokenList }}">