Build your next app with Polymer

Presentation from GDG DevFest Berlin 2015 (https://2015.devfest-berlin.de/schedule/#session-325)

Updated version from Deep dive into Web Components
http://www.meetup.com/GDG-Lviv/events/227121876/

Would you like to create a web application without copying the same block many times? Create powerful and fast apps? Additionally have a beautiful material design? Take a look at Polymer - a library that helps you build elements and apps out of web components.

Source code: https://github.com/ozasadnyy/emojify-polymer
Live demo: https://emojify-polymer.firebaseapp.com/

Transcript

1. Build your next app with Polymer Oleh Zasadnyy GDG Lviv
2. +Oleh Zasadnyy @ozasadnyy
3. A long time ago in a galaxy far, far away...
6. Hey, now is 2015!
7. <paper-tabs selected="0">
 <paper-tab>TAB 1</paper-tab>
 <paper-tab>TAB 2</paper-tab>
 <paper-tab>TAB 3</paper-tab>
 </paper-tabs>
8. <paper-tabs selected="{{selected}}">
 <paper-tab>Tab 1</paper-tab>
 <paper-tab>Tab 2</paper-tab>
 <paper-tab>Tab 3</paper-tab>
 </paper-tabs>
 
 <iron-pages selected="{{selected}}">
 <div>Page 1</div>
 <div>Page 2</div>
 <div>Page 3</div>
 </iron-pages>
10. HTML <div id="map"></div> <script>
 var map;
 function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: -34.397, lng: 150.644},
 zoom: 8
 });
 }
 </script>
11. <google-map latitude=“-34.397" longitude=“150.644"> </google-map>
14. The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.
15. Web components primitives Polymer library Custom elements
16. <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> <template> <p>I'm a DOM element. This is my local DOM!</p> </template> <script> Polymer({ is: “dom-element" }); </script> </dom-module>
17. <dom-module id="name-tag"> <template> This is <b>{{owner}}</b>'s name-tag element. </template> <script> Polymer({ is: "name-tag", ready: function() { this.owner = "Daniel"; } }); </script> </dom-module>
18. Polymer({ is: 'employee-list', ready: function() { this.employees = [ {first: 'Bob', last: 'Smith'}, ... ]; } });
19. <dom-module id="employee-list"> <template> <div> Employee list: </div> <template is="dom-repeat" items="{{employees}}"> <div># <span>{{index}}</span></div> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> </template> ...
20. <template is="dom-if" if="{{user.isAdmin}}"> Only admins will see this. <div>{{user.secretAdminStuff}}</div> </template>
21. $$(selector) toggleClass(name, bool, [node]) toggleAttribute(name, bool, [node]) attributeFollows(name, newNode, oldNode) classFollows(name, newNode, oldNode) fire(type, [detail], [options]) async(method, [wait]) cancelAsync(handle) debounce(jobName, callback, [wait]) cancelDebouncer(jobName) flushDebouncer(jobName) isDebouncerActive(jobName) transform(transform, [node]) translate3d(x, y, z, [node]) importHref(href, onload, onerror) resolveUrl(url)
22. Let’s create something
23. But how to start?
25. $ npm install -g generator-polymer $ mkdir -p my-project && cd $_ $ yo polymer
26. Yeoman generator for Polymer End-to-end build process Application theming Responsive app layout Offline-first (optional) Web-component-tester support
27. Folder /app bower.json /bower_components /dist gulpfile.js /node_modules package.json Our application Build file
28. /app bower.json /bower_components /dist gulpfile.js /node_modules package.json Folder Application dependencies Build dependencies
29. /app bower.json /bower_components /dist gulpfile.js /node_modules package.json Folder Destination folder
30. $ gulp serve
32. Emojify
37. emojify-text.html <dom-module id="emojify-text"> <template> <style>...</style> <div id="emojifiedText" class="emojified-text"></div> <div id="emojiList" class="all-emojify-wrapper" hidden=[[!viewSupported]]></div> </template> <script>...</script> </dom-module>
38. emojify-text.html Polymer({ is: 'emojify-text', properties: { text: { type: String, notify: true, observer: '_triggerEmojify' }, ... }, ... });
39. emojify-text.html Polymer({ is: 'emojify-text', properties: { renderedText: { type: String, notify: true } } });
40. emojify-text.html Polymer({ is: 'emojify-text', properties: { viewSupported: { type: Boolean, observer: 'viewSupportedEmojis' } } });
41. emojify-text.html Polymer({ is: 'emojify-text', properties: { _namedMatchHash: { type: Object, value: function() { ... } } } });
42. emojify-text.html Polymer({ is: 'emojify-text', _triggerEmojify: function() { var emojifiedText = this.emojifyText(this.text); this.renderedText = emojifiedText; this.$.emojifiedText.innerHTML = this.emojiReplacer(emojifiedText); }, viewSupportedEmojis: function() { ... } });
43. emojify-text.html Polymer({ is: 'emojify-text', _triggerEmojify: function() { var emojifiedText = this.emojifyText(this.text); this.renderedText = emojifiedText; this.$.emojifiedText.innerHTML = this.emojiReplacer(emojifiedText); }, emojifyText: function(text) { // 'I am writing code in airplane to de' // return 'I am writing code in :airplane: to :de:' } });
44. emojify-text.html Polymer({ is: 'emojify-text', _triggerEmojify: function() { var emojifiedText = this.emojifyText(this.text); this.renderedText = emojifiedText; this.$.emojifiedText.innerHTML = this.emojiReplacer(emojifiedText); }, emojiReplacer: function(text) { // 'I am writing code in :airplane: to :de:' // return 'I am writing code in <iron-image class="emoji" sizing="contain" title="airplane" src="/images/emoji/airplane.png"></iron-image> to <iron-image class="emoji" sizing="contain" title="de" src="/images/emoji/de.png"></iron-image>' } });
45. <emojify-text text="{{text}}" rendered-text=“{{message.body}}" view-supported> </emojify-text>
47. <paper-material elevation="1"> <emojify-text view-supported></emojify-text> </paper-material>
48. <paper-checkbox> <paper-input> <paper-button> <emojify-text>
49. <paper-material elevation="1"> <emojify-input></emojify-input> </paper-material>
50. emojify-input.html <dom-module id="emojify-input"> <template> <style>...</style> <div class="layout vertical"> <paper-checkbox>View supported emojis</paper-checkbox> <paper-input label="Author"></paper-input> <paper-input label="Text to emojify"></paper-input> <emojify-text></emojify-text> <paper-button>Save</paper-button> </div> <paper-toast text="Text saved"></paper-toast> <emojify-data id="emojiData"></emojify-data> </template> <script>...</script> </dom-module>
51. emojify-input.html <dom-module id="emojify-input"> <template> <div class="layout vertical"> <paper-checkbox checked=“{{viewSupported}}”> View supported emojis</paper-checkbox> <emojify-text view-supported=“{{viewSupported}}"> </emojify-text> </div> </template> </dom-module>
53. emojify-input.html <div class="layout vertical"> <paper-input label="Author" value=“{{message.author}}"></paper-input> <paper-input label="Text to emojify" value=“{{text::change}}”> </paper-input> <emojify-text text="{{text}}" rendered-text=“{{message.body}}”> </emojify-text> <paper-button on-tap='saveRenderedText' disabled=“{{_isEmptyString(message.body)}}">Save </paper-button> </div> <paper-toast id="saved" duration="6000" text=“Message has been saved”>
54. emojify-input.html Polymer({ is: 'emojify-input', properties: { message: { type: Object, value: {} } } });
55. emojify-input.html Polymer({ is: 'emojify-input', saveRenderedText: function() { this.message.timestamp = new Date().getTime(); this.message.author = !this._isEmptyString(this.message.author) ? this.message.author : 'Anonymous'; this.$.emojiData.add(this.message); this.$.saved.show(); }, _isEmptyString: function(text) { return (!text || text.length === 0 || !text.trim()); } });
56. emojify-input.html <dom-module id="emojify-input"> <template> <div class="layout vertical"> <emojify-text rendered-text="{{message.body}}"></emojify-text> <paper-button on-tap="saveRenderedText">Save</paper-button> </div> <emojify-data id="emojiData"></emojify-data> </template> </dom-module>
58. emojify-history.html <dom-module id="emojify-history"> <template> <style>...</style> <p hidden="[[emojifiedMessages.length]]">No messages so far... Be the first!</p> <div class="layout vertical-reverse“> <template is="dom-repeat" items="{{emojifiedMessages}}" as="message"> <paper-material elevation="1"> <emojify-text text="[[message.body]]"></emojify-text> <p>by [[message.author]] <time is="time-ago" datetime$=“[[_getDate(message.timestamp)]]"></time></p> </paper-material> </template> </div> <emojify-data emojified-messages="{{emojifiedMessages}}"></emojify-data> </template> <script>...</script> </dom-module>
59. emojify-history.html Polymer({ is: 'emojify-history', _getDate: function(timestamp) { return new Date(timestamp); } });
61. emojify-data.html <dom-module id="emojify-data"> <template> <firebase-collection id="firebase" location="[[firebaseLocation]]" data="{{fbEmojifiedMessages}}" on-firebase-value="_firebaseLoaded"> </firebase-collection> </template> <script>...</script> </dom-module>
62. emojify-data.html Polymer({ is: 'emojify-data', add: function(message) { this.$.firebase.add(message); } });
63. emojify-data.html Polymer({ is: 'emojify-data', properties: { emojifiedMessages: { type: Array, notify: true }, _firebaseLoaded: { type: Boolean, value: false } } });
64. emojify-data.html Polymer({ is: 'emojify-data', _firebaseLoaded: function() { this._firebaseConnected = true; this.emojifiedMessages = this.fbEmojifiedMessages; this.linkPaths('fbEmojifiedMessages', 'emojifiedMessages'); } });
66. No connection
68. emojify-data.html <dom-module id="emojify-data"> <template> <firebase-collection></firebase-collection> <iron-localstorage name="polymer-emojify" on-iron-localstorage-load="_backupLoaded" value="{{backupEmojifiedMessages}}"> </iron-localstorage> </template> <script>...</script> </dom-module>
69. emojify-data.html Polymer({ is: 'emojify-data', _backupLoaded: function() { if (!this._firebaseConnected) { this.emojifiedMessages = this.backupEmojifiedMessages.slice(); } } });
71. Try it now! emojify-polymer.firebaseapp.com Get sources github.com/ozasadnyy/emojify-polymer
82. elements.polymer-project.org
83. There’s an element for that
84. 1518+ elements <sortable-js></sortable-js> <html-gl></html-gl> <x-gif></x-gif> <voice-elements></voice-elements> <markdown-edit></markdown-edit> <qr-code></qr-code> customelements.io
85. Who are using Polymer?
92. I want to learn more about this!
93. Get more about Polymer Website - polymer-project.org Chrome Developers Channel - youtube.com/user/ChromeDevelopers Google+ Community - plus.google.com/communities/115626364525706131031 Twitter - twitter.com/polymer Slack - polymer-slack.herokuapp.com
94. Thank you! +Oleh Zasadnyy @ozasadnyy o.zasadnyy.com