Building for the Material web with Polymer and Dart
description
Transcript of Building for the Material web with Polymer and Dart
![Page 1: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/1.jpg)
![Page 2: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/2.jpg)
Who am I?๏ Founder @ Dynamatik
๏ Co-Founder @ Ember Chat
๏ Engineer @ Kobo
๏ @FaisalAbid
๏ [email protected] - Ask me anything about Node, AngularJS, Dart, Polymer, and Android.
![Page 3: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/3.jpg)
About the talk๏ Split into three parts.
๏ Goal is to inspire you to go out, learn Dart & Polymer and rule the world.
๏ Part 1. Quick Dart introduction to basic language concepts
๏ Part 2. Quick rundown of Web components & Polymer
๏ Part 3. Dart + Polymer and what Material design is
![Page 4: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/4.jpg)
But first Let’s play a game
![Page 5: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/5.jpg)
Guess the language
![Page 6: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/6.jpg)
public String Hello(){return "World";
}
![Page 7: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/7.jpg)
public String Hello(){return "World";
}
Java
![Page 8: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/8.jpg)
function Hello(){return "World";
}
![Page 9: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/9.jpg)
function Hello(){return "World";
}
Javascript
![Page 10: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/10.jpg)
String Hello(){return "World";
}
![Page 11: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/11.jpg)
String Hello(){return "World";
}
Dart!
![Page 12: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/12.jpg)
You already know Dart**95% of it at least
![Page 13: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/13.jpg)
1Dart
![Page 14: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/14.jpg)
What is Dart & Why should I care?๏ Dart is a new platform and language by Google.
๏ Dart is for “Scalable web app engineering”
![Page 15: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/15.jpg)
![Page 16: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/16.jpg)
![Page 17: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/17.jpg)
![Page 18: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/18.jpg)
![Page 19: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/19.jpg)
“Scalable web app engineering” What does that mean?
![Page 20: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/20.jpg)
Scalable web app engineering๏ Javascript is “Scalable” to an extent
• RequireJS/AMD modules
• Frameworks like Backbone, Ember.js, Angular.js
• JQuery, Zepto
![Page 21: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/21.jpg)
Javascript is the root of all evil*
*a little bit dramatic, but gets the point across
![Page 22: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/22.jpg)
Scalable web app engineering๏ Dart is built for scale
• Optional type checking - I <3 typed objects
• Single threaded “Isolate” concept for server apps. Web workers for client.
• Objects, Classes, Polymorphism
• Easy async, less messy callbacks
• Many years of programming language research
• High performance VM, Dartium
• Compile straight to JS for cross browser compatibility
![Page 23: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/23.jpg)
All while keeping the language easy to develop in.
![Page 24: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/24.jpg)
All while keeping the language easy to develop in.
Because all that scale stuff is cool, but this is what really matters.
![Page 25: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/25.jpg)
class Conference { String name; num attendees; Conference(String name, num attendees) { this.name = name;
this.attendees = attendees; } }// then latervar webunleashed = new Conference("WebUnleashed", 5800);
Example Class in Dart
![Page 26: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/26.jpg)
Dart IDE Tour
![Page 27: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/27.jpg)
Dart IDE Tour
![Page 28: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/28.jpg)
Dart Package Manager
![Page 29: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/29.jpg)
Dart IDE Tour
![Page 30: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/30.jpg)
Dart IDE Tour
![Page 31: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/31.jpg)
Optionally Typed๏ Dart is optionally typed.
๏ For Public API’s / Public Methods - Use Type
๏ For internal method implementations, use var.
• Dart IDE will make use of type info also. Easy code assist.
• “Explicit type annotations are usually just visual noise.”
![Page 32: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/32.jpg)
Dart Typed Example
![Page 33: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/33.jpg)
Async / Future๏ One of the most powerful features of Dart
๏ Dart is single threaded, blocking code blocks!
๏ Dart futures lets you perform async operations. I.e HTTP
![Page 34: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/34.jpg)
Dart Future Example
![Page 35: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/35.jpg)
Async / Future - Recap๏ One of the most powerful features of Dart
๏ Dart is single threaded, blocking code blocks!
๏ Dart futures lets you perform async operations. I.e HTTP
๏ Futures make it easy to avoid callback hell and keep syntax simple.
๏ Almost one line API calls. no callbacks needed
![Page 36: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/36.jpg)
Dart Everywhere๏ You can write your Dart apps on the server side also!
๏ Dart on the full stack! Front-end and backend.
๏ Use classes, futures and everything you’ve learned
![Page 37: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/37.jpg)
Simple Dart:io Example
![Page 38: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/38.jpg)
Dart for web๏ Ran through simple but powerful examples.
๏ Dart makes web development easy.
๏ Dart is built to scale, with OOP principals, Async programming made easy and simple to use syntax. Making Dart web apps is easy.
๏ But what’s this polymer thing about?
![Page 39: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/39.jpg)
2Polymer / Web components
![Page 40: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/40.jpg)
What are web components?๏ Next generation of encapsulation for the web.
๏ Build your own tag, hide the implementation details.
![Page 41: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/41.jpg)
Whats the shadow DOM?๏ Shadow DOM hides the web component implementation from the
DOM.
๏ I.e <my-tag> shows up as <my-tag> and not a series of divs.
๏ Ready in firefox, chrome, opera, and their mobile counterparts.
๏ Not in Safari.
๏ Polyfills ready for older browsers and Safari. Mileage may vary
![Page 42: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/42.jpg)
![Page 43: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/43.jpg)
![Page 44: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/44.jpg)
Now what’s Polymer then?๏ Truthfully the web component spec is sometimes messy
๏ Hard to implement on its own.
๏ Polymer wraps all this up in a nice abstraction layer. By Google
๏ Works wherever Web components/ Shadow dom works.
![Page 45: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/45.jpg)
Now what’s Polymer then?
![Page 46: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/46.jpg)
Can I use Polymer with only Dart?๏ No! Polymer can be used with Javascript. In fact it’s first written for JS.
๏ Dart has a feature parity port by Google.
๏ pub : polymer
๏ pub : paper-elements
๏ Polymer is better with Dart. You feel like you are coding for the future.
![Page 47: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/47.jpg)
3Dart meet Polymer
![Page 48: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/48.jpg)
How do you use Polymer with Dart๏ Starter project makes it easy to get started.
๏ Transformer gets polymer all ready to rock.
![Page 49: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/49.jpg)
Dart / Polymer Example
![Page 50: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/50.jpg)
Simple data binding in Polymer๏ You want your components to do something and take attributes
๏ Databinding is simple with polymer.
๏ Lets take a look!
![Page 51: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/51.jpg)
Dart / Polymer Databinding
![Page 52: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/52.jpg)
Simple data binding in Polymer๏ You want your components to do something and take attributes
๏ Databinding is simple with polymer.
๏ @published - is two way binding
๏ @observable - is one way binding
![Page 53: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/53.jpg)
Advanced data binding in Polymer๏ Databind on lists too!
![Page 54: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/54.jpg)
@CustomTag(‘speaker-list')class SpeakerList extends PolymerElement { final List speakers = toObservable(["Speaker One", "Speaker Two", "Speaker Three"]);
SpeakerList() : super.created();}
[ . . . ]
<template repeat=“{{speaker in speakers}}”><li> {{speaker}} </li></template>
Example list data binding in Dart
![Page 55: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/55.jpg)
Advanced data binding in Polymer๏ Databind on lists too!
๏ DAMN THIS IS EASY!!!!
![Page 56: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/56.jpg)
Material Design & Polymer๏ Google introduced this at Google IO
๏ Sexy fluid new UI components for the web & mobile.
๏ “Paper-elements” is a package ready to be used by Dart. In fact many examples have used paper-elements already
๏ Must have polymer: ">=0.14.0 <0.15.0” in your pub
๏ core_elements: ">=0.2.0 <0.3.0"
๏ paper_elements: ">=0.2.0 <0.3.0"
![Page 57: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/57.jpg)
Material Design & Polymer๏ Paper-Elements is the new UI language from Google
๏ Lets take a look at a sample example
![Page 58: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/58.jpg)
![Page 59: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/59.jpg)
Material Design & Polymer๏ Paper-Elements is the new UI language from Google
๏ Do all Material design apps look alike?
• No! You can easily theme them via CSS
• Great resource is http://polymerthemes.com/
![Page 60: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/60.jpg)
Styling Polymer 101๏ Styling Polymer components is straight forward with a few pitfalls.
๏ Use CSS - Duh.
๏ However CSS is encapsulated in your component. No global css styles.
๏ New selectors help with this.
![Page 61: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/61.jpg)
<polymer-element name="x-foo" noscript> <template> <style> :host { /* Note: by default elements are always display:inline. */ display: block; } </style> </template></polymer-element>
Styling Example
![Page 62: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/62.jpg)
<style> x-foo { display: block; } x-foo:hover { opacity: 0; }</style>
Styling from outside
![Page 63: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/63.jpg)
Closing Thoughts๏ Dart is ready for prime time. version 1.6
๏ Polymer still in beta for Dart, but “pretty” stable.
๏ Dart brings sanity to web development.
๏ Polymer/Web components brings proper modularity to web development.
๏ Dart is moving full steam ahead, adopted heavily by Google.
๏ It’s not going anywhere, so embrace change and lets rule the world.
![Page 64: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/64.jpg)
Thank you@FaisalAbid - [email protected] Title screen by Sam Beck - SamBeck.ca
![Page 65: Building for the Material web with Polymer and Dart](https://reader033.fdocuments.net/reader033/viewer/2022051514/54825af3b4af9f820d8b475f/html5/thumbnails/65.jpg)