Tweet
Tweet

Slide 1

Slide 1 text

How to build a fully functioning app with Polymer and Firebase Vinay Raghu / @rvinay88

Slide 2

Slide 2 text

About Me • New Haven • Design, UX and frontend coding • I love meetups • @rvinay88 • http://viii.in

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Web Components • Best new technology 2014 • Built on standards • HTML Imports • Templates • Custom elements • Shadow DOM Source: http://webcomponents.org/

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 tag, tag and tags.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Polymer 101 • Polymer != Web components • Material design != Polymer • Webcomponents.js Polyfill • HTML import on Polymer library (HTML file not a JS file)

Slide 9

Slide 9 text

Polymer 102 • Content insertion • Lifecycle callbacks • Node finding using this.$. • Communicating between elements

Slide 10

Slide 10 text

Content Insertion

Slide 11

Slide 11 text

Content Insertion

Slide 12

Slide 12 text

Lifecycle callbacks • Created • Ready • Attached • DomReady • Detached

Slide 13

Slide 13 text

Node Finding

Slide 14

Slide 14 text

Message Passing • Communicating between elements • Fire event • Event bubbling • Global element

Slide 15

Slide 15 text

Message Passing

Slide 16

Slide 16 text

Context

Slide 17

Slide 17 text

Context

Slide 18

Slide 18 text

Actions

Slide 19

Slide 19 text

Tags

Slide 20

Slide 20 text

Comments

Slide 21

Slide 21 text

How would you define markup?

Slide 22

Slide 22 text

Getting started • Install Node • npm install -g yo • npm install -g generator-polymer • yo polymer • Removing cruft

Slide 23

Slide 23 text

What you are going to build

Slide 24

Slide 24 text

A simple component 1. Define markup 2. Abstract data 3. Define polymer element 4. Import and use

Slide 25

Slide 25 text

A simple component 1. Define markup

Slide 26

Slide 26 text

A simple component 1. Define markup

Slide 27

Slide 27 text

A simple component 1. Define markup

Slide 28

Slide 28 text

A simple component 1. Define markup 2. Abstract data

Slide 29

Slide 29 text

A simple component 1. Define markup 2. Abstract data context: { name: "Looney Tunes", image: "http://i.imgur.com/8uo3vrm.png" }

Slide 30

Slide 30 text

A simple component 1. Define markup 2. Abstract data 3. Define polymer element

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

A simple component 1. Define markup 2. Abstract data 3. Define element

Slide 33

Slide 33 text

A simple component 1. Define markup 2. Abstract data 3. Define element 4. Use the component

Slide 34

Slide 34 text

A simple component

Slide 35

Slide 35 text

1. Define markup 2. Abstract data 3. Define polymer element 4. Import and use

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Firebase • Firebase element - link • Firebase login • Arrays are bad for data storage • Asynchronous calls

{{key}}: {{data[key]}}

Slide 43

Slide 43 text

Firebase • Firebase element - link • Firebase login • Arrays are bad for data storage • Asynchronous calls

Slide 44

Slide 44 text

Let’s talk about 0.8 I am x-foo! Polymer({ is: 'x-foo' });

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Let’s talk about 0.8 Can’t do {{ something }} Have to do {{ something }} Or
{{ something }}

Slide 47

Slide 47 text

Let’s talk about 0.8 • Migration guide • Closer to using in Production • More mature framework • Implements a lot of ES6 items

Slide 48

Slide 48 text

Further Reading • Rob Dodson's polycasts • Divshot • Firebase's documentation are a pleasure to read • Polymer documentation

Slide 49

Slide 49 text

Thank you!