Slide 1
Slide 1 text
Build The Future
With Polymer!
+Eric Bidelman
@ebidel
Slide 2
Slide 2 text
36
Browser support
Summer 2014
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Photo source info here
2 years old
Slide 5
Slide 5 text
1st of its kind
( web components )
Slide 6
Slide 6 text
Layers
·
polyfills
·
·
sugaring
·
polymer.js: declarative, data-binding,
·
property observation, gestures, …)
·
components
·
core elements, paper elements
Slide 7
Slide 7 text
Tools
·
build scripts & testing
·
vulcanize —inline —csp elements.html
·
designer
·
drag n’ drop prototyping app
·
documentation practices
·
free element documentation
Slide 8
Slide 8 text
Polymer designer
polymer-project.org/tools/designer/
Slide 9
Slide 9 text
Ecosystem: we’re not alone
Slide 10
Slide 10 text
customelements.io
Slide 11
Slide 11 text
component.kitchen
Slide 12
Slide 12 text
ele.io
Slide 13
Slide 13 text
webcomponents.org
Slide 14
Slide 14 text
+
Slide 15
Slide 15 text
googlewebcomponents.github.io
github.com/GoogleWebComponents
Slide 16
Slide 16 text
Subtitle
bower install GoogleWebComponents/google-map —save
Install
Info window title!
UseSlide 17
Slide 17 text
Subtitle
bower install GoogleWebComponents/google-chart —save
Install
Use
Slide 18
Slide 18 text
goo.gl/tu53NU
Mashups!
Slide 19
Slide 19 text
http://bit.ly/1jkTo5c
core-elements
Image:
Slide 20
Slide 20 text
Visual
Non-visual
And many more…
Image: http://bit.ly/1kuX889,
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
A basic container for controls
like tabs or buttons
Slide 23
Slide 23 text
A basic container for controls
like tabs or buttons
Slide 24
Slide 24 text
I/O 2014
A basic container for controls
like tabs or buttons
Slide 25
Slide 25 text
I/O 2014
A basic container for controls
like tabs or buttons
Slide 26
Slide 26 text
I/O 2014
A basic container for controls
like tabs or buttons
Slide 27
Slide 27 text
simple container with a header
section and content section
I/O 2014
…
Slide 28
Slide 28 text
I/O 2014
…
simple container with a header
section and content section
Slide 29
Slide 29 text
I/O 2014
…
simple container with a header
section and content section
Slide 30
Slide 30 text
I/O 2014
…
simple container with a header
section and content section
Slide 31
Slide 31 text
I/O 2014
…
Toolbar will scroll with the page
Slide 32
Slide 32 text
I/O 2014
…
Toolbar will shrink on scroll
Slide 33
Slide 33 text
Slide 34
Slide 34 text
A responsive container
with drrawer on mobile
Slide 35
Slide 35 text
Material design
Slide 36
Slide 36 text
Preview @ Google
Slide 37
Slide 37 text
paper-elements
Slide 38
Slide 38 text
Slide 39
Slide 39 text
Slide 40
Slide 40 text
Slide 41
Slide 41 text
KNOWLEDGE
HISTORY
FOOD
Less markup. Less CSS. Less clutter.
Slide 42
Slide 42 text
Slide 43
Slide 43 text
Slide 44
Slide 44 text
Topeka
polymer-project.org/apps/topeka/
Slide 45
Slide 45 text
polymer-project.org
Slide 46
Slide 46 text
@polymer
polymer-project.org
google.com/+PolymerProject
+Eric Bidelman
@ebidel
Slide 47
Slide 47 text
Template slides follow
(Insert your slides before this slide)
Slide 48
Slide 48 text
Basic elements Segue slides are
sentence case
Slide 49
Slide 49 text
Small caption
Heading
Subheading
Body
Source
Code
All text is set in Roboto and Roboto Condensed.
All code is set in Inconsolata.
Download all 3 on google.com/fonts
Slide 50
Slide 50 text
#EC407A
Main color
Lighter Grays
Darker
#29B6F6
Slide 51
Slide 51 text
A
Simple rounded
rectangle
Callout
Subcaption
Callout Arrows
6px border radius
Slide 52
Slide 52 text
Example slides
Slide 53
Slide 53 text
Full-bleed, photo-only
slides are great
Slide 54
Slide 54 text
Good design is as little
design as possible.
Dieter Rams
Slide 55
Slide 55 text
Step 1 Step 2 Step 3
End
Slide 56
Slide 56 text
Chart title
7%
8%
10%
11%
29%
35%
April
May
June
July
August
September
Chart data source info here
Slide 57
Slide 57 text
Chart data source info here
Chart title
0
25
50
75
100
April May June July
Slide 58
Slide 58 text
Chart data source info here
Chart title
0
25
50
75
100
April May June July
Slide 59
Slide 59 text
Go!
HTML
.paper-button {
background-color: red;
}
CSS
document.querySelector('.paper-button')
.addEventListener('click', function(e) {
// your code here
}, false);
JavaScript
For really short code snippets, use
this style, with optional indication
of filename or language
Visit j.mp/iohighlighter in Safari
and copy + paste into Keynote
Slide 60
Slide 60 text
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse("http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Visit j.mp/iohighlighter in Safari
and copy + paste into Keynote
MainActivity.java
If your code snippet is over 6 lines, use a
full-page slide of code in this style
Slide 61
Slide 61 text
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse("http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
MainActivity.java
Use this style to highlight a particular section
Slide 62
Slide 62 text
// A couple more notes on code slides:
// * Use the Inconsolata font available at google.com/fonts
// * Set line spacing to 1.2
// * Don’t use font sizes below 40pt
code_slides.txt
Slide 63
Slide 63 text
Photos make for
excellent segue slides
Photo source info here
Use a semitransparent dark gray or black to
ensure text is legible
Slide 64
Slide 64 text
Photo source info here
Slide 65
Slide 65 text
BIG IDEA
Photo source info here
Slide 66
Slide 66 text
What’s next?
Getting Started with Android Wear
developer.android.com/wear
Introduction to Beer-Brewing
g.co/beerintro
youtube.com/GoogleDevelopers
Slide 67
Slide 67 text
Avoid using the following
slide types
Slide 68
Slide 68 text
Avoid using titles
• Also try to avoid bullets
·
Here’s what sub-bullets look like
·
But you should generally avoid them, too
• Think about all the awesome visuals
you could be showing instead!
• A third bullet (by now, no one’s paying
attention to what you’re actually saying)
• DON’T USE 3RD-LEVEL BULLETS!
But when you need to use them, sentence case