Building the Future with Polymer!

Polymer Hack Event -London 2014

Transcript

1. Build The Future With Polymer! +Eric Bidelman @ebidel
2. 36 Browser support Summer 2014
4. Photo source info here 2 years old
5. 1st of its kind ( web components )
6. Layers · polyfills · <script src=“platform.js”> · sugaring · polymer.js: declarative, data-binding, · property observation, gestures, …) · components · core elements, paper elements
7. Tools · build scripts & testing · vulcanize —inline —csp elements.html · designer · drag n’ drop prototyping app · documentation practices · free element documentation
8. Polymer designer polymer-project.org/tools/designer/
9. Ecosystem: we’re not alone
10. customelements.io
11. component.kitchen
12. ele.io
13. webcomponents.org
14. +
15. googlewebcomponents.github.io github.com/GoogleWebComponents
16. Subtitle bower install GoogleWebComponents/google-map —save Install <google-map latitude="37.779" longitude="-122.3892" disableDefaultUI> <google-map-marker latitude="37.779" longitude="-122.3892" title="Go Giants!" draggable="true"> <h2>Info window title!</h2> </google-map-marker> </google-map> Use
17. Subtitle bower install GoogleWebComponents/google-chart —save Install <google-chart type="pie"height="300px" width="400px" options='{"title": "Distribution of days in 2001Q1"}' cols='[{"label":"Month", "type":"string"}, …]’ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'> </google-chart> Use
18. goo.gl/tu53NU Mashups!
19. http://bit.ly/1jkTo5c core-elements Image:
20. Visual <core-ajax> <core-localstorage> <core-range> <core-shared-lib> <core-media-query> <core-iconset> Non-visual And many more… Image: http://bit.ly/1kuX889, <core-toolbar> <core-header-panel> <core-drawer-panel> <core-menu> <core-icon> <core-overlay>
22. <core-toolbar> A basic container for controls like tabs or buttons
23. <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like tabs or buttons
24. <core-toolbar> <div>I/O 2014</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like tabs or buttons
25. <core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like tabs or buttons
26. <core-toolbar class=“tall”> <core-icon-button icon=“menu”> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like tabs or buttons
27. simple container with a header section and content section <core-header-panel> <core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
28. <core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> simple container with a header section and content section <core-header-panel>
29. <core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> simple container with a header section and content section <core-header-panel>
30. <core-header-panel> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> simple container with a header section and content section <core-header-panel>
31. <core-header-panel mode=“scroll”> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> Toolbar will scroll with the page <core-header-panel>
32. <core-header-panel mode=“waterfall-tall”> <core-toolbar class=“tall” animate> <core-icon-button icon=“menu"> </core-icon-button> <div>I/O 2014</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> Toolbar will shrink on scroll <core-header-panel>
33. <core-scroll-header-panel condenses> <core-toolbar class=“tall" animate> <core-icon-button icon=“arrow-back"> </core-icon-button> <div class="bottom indent title”> Title </div> ... </core-toolbar> </core-scroll-header-panel> Image: http://bit.ly/1b3E67J <core-scroll-header-panel> adds the condenses attribute to create a cross-fade effect
34. <core-drawer-panel> A responsive container with drrawer on mobile
35. Material design
36. Preview @ Google
37. paper-elements
38. <paper-checkbox></paper-checkbox>
39. <paper-toggle-button></paper-toggle-button>
40. <paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
41. <paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less markup. Less CSS. Less clutter.
42. <div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple> </div> A reactive ink effect for indicating touch and mouse actions <paper-ripple>
43. <div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div> A dynamic shadow for conveying z-depth and spatial relationships <paper-shadow>
44. Topeka polymer-project.org/apps/topeka/
45. polymer-project.org
46. <thank you> @polymer polymer-project.org google.com/+PolymerProject +Eric Bidelman @ebidel
47. Template slides follow (Insert your slides before this slide)
48. Basic elements Segue slides are sentence case
49. 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
50. #EC407A Main color Lighter Grays Darker #29B6F6
51. A Simple rounded rectangle Callout Subcaption Callout Arrows 6px border radius
52. Example slides
53. Full-bleed, photo-only
 slides are great
54. Good design is as little design as possible. Dieter Rams
55. Step 1 Step 2 Step 3 End
56. Chart title 7% 8% 10% 11% 29% 35% April May June July August September Chart data source info here
57. Chart data source info here Chart title 0 25 50 75 100 April May June July
58. Chart data source info here Chart title 0 25 50 75 100 April May June July
59. <paper-button id="go" disabled>Go!</paper-button> 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
60. 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
61. 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
62. // 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
63. Photos make for excellent segue slides Photo source info here Use a semitransparent dark gray or black to ensure text is legible
64. Photo source info here
65. BIG IDEA Photo source info here
66. What’s next? Getting Started with Android Wear developer.android.com/wear Introduction to Beer-Brewing g.co/beerintro youtube.com/GoogleDevelopers
67. Avoid using the following slide types
68. 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