How to build a fully functioning app with Polymer and Firebase

Transcript

1. How to build a fully functioning app with Polymer and Firebase Vinay Raghu / @rvinay88
2. About Me • New Haven • Design, UX and frontend coding • I love meetups • @rvinay88 • http://viii.in
3. About this talk • https://github.com/rvinay88/cards-ui • Introduction to Web components • Introduction to Polymer • Polymer overview • Building progressively complex components • A little bit about v0.8 and Firebase
4. Web Components • Best new technology 2014 • Built on standards • HTML Imports • Templates • Custom elements • Shadow DOM Source: http://webcomponents.org/
5. Idea of components • React, Polymer, Atomic design, OOCSS • Self contained components that can be shared and reused • Each element gets its own interface • Building a system of components
6. Bootstrap Buttons • Interaction states - Normal, Focus, Hover, Active • Contextual states - Info button, danger button, warning button • Physical states - Tiny, small, medium, large, block level • "Weirdness of HTML and CSS" states - Using it with <a> tag, <button> tag and <input> tags.
7. Polymer 101 • It’s an HTML document - Markup, style and scripts • Everything related to a component lives in that one file • Define and use • Custom elements have to include a hyphen
8. Polymer 101 • Polymer != Web components • Material design != Polymer • Webcomponents.js Polyfill • HTML import on Polymer library (HTML file not a JS file)
9. Polymer 102 • Content insertion • Lifecycle callbacks • Node finding using this.$. • Communicating between elements
10. Content Insertion
11. Content Insertion <content></content> <content select="h2"></content> <content select=".crucial"></content> <content select="child-el"></content>
12. Lifecycle callbacks • Created • Ready • Attached • DomReady • Detached
13. Node Finding
14. Message Passing • Communicating between elements • Fire event • Event bubbling • Global element
15. Message Passing
16. Context
17. Context
18. Actions
19. Tags
20. Comments
21. How would you define markup?
22. Getting started • Install Node • npm install -g yo • npm install -g generator-polymer • yo polymer • Removing cruft
23. What you are going to build
24. A simple component 1. Define markup 2. Abstract data 3. Define polymer element 4. Import and use
25. A simple component 1. Define markup
26. A simple component 1. Define markup <card-context name="Looney Tunes" image="http://imgur.com/random"></card-context>
27. A simple component 1. Define markup <card-context name="Looney Tunes" image="http://imgur.com/random"></card-context>
28. A simple component 1. Define markup 2. Abstract data
29. A simple component 1. Define markup 2. Abstract data context: { name: "Looney Tunes", image: "http://i.imgur.com/8uo3vrm.png" }
30. A simple component 1. Define markup 2. Abstract data 3. Define polymer element
32. A simple component 1. Define markup 2. Abstract data 3. Define <card-context> element
33. A simple component 1. Define markup 2. Abstract data 3. Define <card-context> element 4. Use the component
34. A simple component <link rel="import" href=“card-context.html"> <card-context name=“Looney Tunes" image=“http://imgur.com/random"></card-context> <link rel="import" href=“polymer.html"> <script src="webcomponents.js"></script>
35. <card-actions> 1. Define markup 2. Abstract data 3. Define polymer element 4. Import and use
36. <card-actions>
37. <card-tags>
38. <card-user>
39. <card-plusses>
40. <card-comments>
41. Issues • Data should be organized and stored better • context - contextID • author - authorID • tags - listOfTags • content - contentID • comments – arrayOfCommentIDs • Too many cases of 2 way bindings
42. Firebase • Firebase element - link • Firebase login • Arrays are bad for data storage • Asynchronous calls <firebase-element id="base" location="https://YOUR.firebaseio.com/" data="{{data}}" keys="{{keys}}"></firebase-element> <template repeat="{{key in keys}}"> <p>{{key}}: {{data[key]}}</p> </template>
43. Firebase • Firebase element - link • Firebase login • Arrays are bad for data storage • Asynchronous calls
44. Let’s talk about 0.8 <dom-module id="x-foo"> <template>I am x-foo!</template> </dom-module> <script> Polymer({ is: 'x-foo' }); </script>
45. Let’s talk about 0.8 // Declared properties MyElement = Polymer({ is: 'my-element', properties: { user: String, isHappy: Boolean, count: { type: Number, readOnly: true, notify: true, reflectToAttribute: true
46. Let’s talk about 0.8 Can’t do {{ something }} Have to do <span>{{ something }}</span> Or <div>{{ something }}</div>
47. Let’s talk about 0.8 • Migration guide • Closer to using in Production • More mature framework • Implements a lot of ES6 items
48. Further Reading • Rob Dodson's polycasts • Divshot • Firebase's documentation are a pleasure to read • Polymer documentation
49. Thank you!