Tweet
Tweet

Slide 1

Slide 1 text

AMBITIOUS UX FOR AMBITIOUS APPS EMBERCONF 2015 Lauren Elizabeth Tan @sugarpirate_ @poteto

Slide 2

Slide 2 text

DESIGN DEV Lauren Elizabeth Tan Designer & Front End Developer

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 5

Slide 5 text

BUT I’M NOT A DESIGNER

Slide 6

Slide 6 text

“Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

Slide 7

Slide 7 text

applyConcatenatedProperties() giveDescriptorSuper() beginPropertyChanges()

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

=

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

What is good design?

Slide 16

Slide 16 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 17

Slide 17 text

REACTIVE?

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

FLOW OF DATA & MAINTAINING RELATIONSHIPS BETWEEN THAT DATA

Slide 20

Slide 20 text

var EmberObject = CoreObject.extend(Observable);

Slide 21

Slide 21 text

FUNCTIONAL REACTIVE PROGRAMMING?

Slide 22

Slide 22 text

FUNCTIONAL REACTIVE PROGRAMMING?

Slide 23

Slide 23 text

FUNCTIONAL REACTIVE PROGRAMMING? Immutability Some side effects

Slide 24

Slide 24 text

EVENT STREAMS Things that consist of discrete events

Slide 25

Slide 25 text

.asEventStream('click') https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Slide 26

Slide 26 text

PROPERTIES Things that change and have a current state

Slide 27

Slide 27 text

(100, 250)

Slide 28

Slide 28 text

(300, 200)

Slide 29

Slide 29 text

Array.prototype#map Array.prototype#filter Array.prototype#reduce Array.prototype#concat

Slide 30

Slide 30 text

BACON.JS FRP library

Slide 31

Slide 31 text

!== (obviously)

Slide 32

Slide 32 text

Ember.observer Ember.computed Ember.Observable Ember.Evented Ember.on

Slide 33

Slide 33 text

THE OBSERVER PATTERN Computed properties and observers

Slide 34

Slide 34 text

COMPUTED PROPERTIES Transforms properties, and keeps relationships in sync

Slide 35

Slide 35 text

export default Ember.Object.extend({ fullName: computed('firstName', 'lastName', function() { return `${get(this, 'firstName')} ${get(this, 'lastName')}`; }) });

Slide 36

Slide 36 text

COMPUTED PROPERTY MACROS Keeping things DRY

Slide 37

Slide 37 text

export default function(separator, dependentKeys) { let computedFunc = computed(function() { let values = dependentKeys.map((dependentKey) => { return getWithDefault(this, dependentKey, ''); }); return values.join(separator); }); return computedFunc.property.apply(computedFunc, dependentKeys); };

Slide 38

Slide 38 text

DEMO http://emberjs.jsbin.com/vubaga/12/edit?js,output

Slide 39

Slide 39 text

import joinWith from '...'; export default Ember.Object.extend({ fullName: joinWith(' ', [ 'title', 'firstName', 'middleName', 'lastName', 'suffix' ]) }); get(this, 'fullName'); // Mr Harvey Reginald Specter Esq.

Slide 40

Slide 40 text

Ember.computed.{map,mapBy} Ember.computed.{filter,filterBy} Ember.computed.sort Ember.computed.intersect Ember.computed.setDiff Ember.computed.uniq Ember.computed.readTheAPIDocs http://emberjs.com/api/#method_computed

Slide 41

Slide 41 text

OBSERVERS Synchronously invoked when dependent properties change

Slide 42

Slide 42 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

ƈ http://youtu.be/OK34L4-qaDQ

Slide 46

Slide 46 text

Waterboarding at Guantanamo Bay sounds super rad if you don't know what either of those things are.

Slide 47

Slide 47 text

The person who would proof read Hitler's speeches was a grammar Nazi.

Slide 48

Slide 48 text

If your shirt isn't tucked into your pants, then your pants are tucked into your shirt.

Slide 49

Slide 49 text

ƈ +

Slide 50

Slide 50 text

/index /users route:user model() { this.store.find('user') } // returns Promise  GET "https://foo.com/v1/api/users" /loading /error resolve() reject()

Slide 51

Slide 51 text

Service ƈ Reddit API Index Route User Route Loading Route Fetch top posts Component Fetch user records resolve() Get random message Display shower thought

Slide 52

Slide 52 text

SERVICE

Slide 53

Slide 53 text

Ember.Service.extend({ ... });

Slide 54

Slide 54 text

messages : Ember.A([]), topPeriods : [ 'day', 'week', 'month', 'year', 'all' ], topPeriod : 'day', subreddit : 'showerthoughts',

Slide 55

Slide 55 text

getPostsBy(subreddit, period) { let url = `//www.reddit.com/r/${subreddit}/top.json?sort=top&t=${period}`; return new RSVP.Promise((resolve, reject) => { getJSON(url) .then((res) => { let titles = res.data.children.mapBy('data.title'); resolve(titles); }).catch(/* ... */); }); }

Slide 56

Slide 56 text

_handleTopPeriodChange: observer('subreddit', 'topPeriod', function() { let subreddit = get(this, 'subreddit'); let topPeriod = get(this, 'topPeriod'); run.once(this, () => { this.getPostsBy(subreddit, topPeriod) .then((posts) => { set(this, 'messages', posts); }); }); }).on('init'),

Slide 57

Slide 57 text

COMPONENT

Slide 58

Slide 58 text

export default Ember.Component.extend({ service : inject.service('shower-thoughts'), randomMsg : computedSample('service.messages'), loadingText : 'Loading', classNames : [ 'loadingMessage' ] });

Slide 59

Slide 59 text

export default function(dependentKey) { return computed(`${dependentKey}.@each`, () => { let items = getWithDefault(this, dependentKey, Ember.A([])); let randomItem = items[Math.floor(Math.random() * items.get('length'))]; return randomItem || ''; }).volatile().readOnly(); }

Slide 60

Slide 60 text

DEMO http://emberjs.jsbin.com/lulaki/35/edit?output

Slide 61

Slide 61 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 62

Slide 62 text

VISIBILITY OF SYSTEM STATUS Jakob Nielsen — 10 Heuristics for User Interface Design

Slide 63

Slide 63 text

FLASH MESSAGES Is it time for snacks yet?

Slide 64

Slide 64 text

Service Routes Controllers Message Component Message Component

Slide 65

Slide 65 text

SERVICE

Slide 66

Slide 66 text

Ember.get(this, 'flashes').success('Success!', 2000); Ember.get(this, 'flashes').warning('...'); Ember.get(this, 'flashes').info('...'); Ember.get(this, 'flashes').danger('...'); Ember.get(this, 'flashes').addMessage('Custom message', 'myCustomType', 3000) Ember.get(this, 'flashes').clearMessages();

Slide 67

Slide 67 text

SERVICE: PROPS queue : Ember.A([]), isEmpty : computed.equal('queue.length', 0), defaultTimeout : 2000

Slide 68

Slide 68 text

SERVICE: PUBLIC API success(message, timeout=get(this, 'defaultTimeout')) { return this._addToQueue(message, 'success', timeout); }, info(/* ... */) { return ...; }, warning(/* ... */) { return ...; }, danger(/* ... */) { return ...; }, addMessage(message, type='default', timeout=get(this, 'defaultTimeout')) { return this._addToQueue(message, type, timeout); }

Slide 69

Slide 69 text

SERVICE: PUBLIC API clearMessages() { let flashes = get(this, 'queue'); flashes.clear(); }

Slide 70

Slide 70 text

SERVICE: PRIVATE API _addToQueue(message, type, timeout) { let flashes = get(this, 'queue'); let flash = this._newFlashMessage(this, message, type, timeout); flashes.pushObject(flash); }

Slide 71

Slide 71 text

SERVICE: PRIVATE API _newFlashMessage(service, message, type='info', timeout=get(this, 'defaultTimeout')) { Ember.assert('Must pass a valid flash service', service); Ember.assert('Must pass a valid flash message', message); return FlashMessage.create({ type : type, message : message, timeout : timeout, flashService : service }); }

Slide 72

Slide 72 text

FLASH MESSAGE

Slide 73

Slide 73 text

FLASH MESSAGE: PROPS isSuccess : computed.equal('type', 'success'), isInfo : computed.equal('type', 'info'), isWarning : computed.equal('type', 'warning'), isDanger : computed.equal('type', 'danger'), defaultTimeout : computed.alias('flashService.defaultTimeout'), queue : computed.alias('flashService.queue'), timer : null

Slide 74

Slide 74 text

FLASH MESSAGE: LIFECYCLE HOOK _destroyLater() { let defaultTimeout = get(this, 'defaultTimeout'); let timeout = getWithDefault(this, 'timeout', defaultTimeout); let destroyTimer = run.later(this, '_destroyMessage', timeout); set(this, 'timer', destroyTimer); }.on('init')

Slide 75

Slide 75 text

FLASH MESSAGE: PRIVATE API _destroyMessage() { let queue = get(this, 'queue'); if (queue) { queue.removeObject(this); } this.destroy(); }

Slide 76

Slide 76 text

FLASH MESSAGE: PUBLIC API & OVERRIDE destroyMessage() { this._destroyMessage(); }, willDestroy() { this._super(); let timer = get(this, 'timer'); if (timer) { run.cancel(timer); set(this, 'timer', null); } }

Slide 77

Slide 77 text

Lj DEPENDENCY INJECTION

Slide 78

Slide 78 text

import FlashMessagesService from '...'; export function initialize(_container, application) { application.register('service:flash-messages', FlashMessagesService, { singleton: true }); application.inject('controller', 'flashes', 'service:flash-messages'); application.inject('route', 'flashes', 'service:flash-messages'); } export default { name: 'flash-messages-service', initialize: initialize };

Slide 79

Slide 79 text

COMPONENT

Slide 80

Slide 80 text

COMPONENT: TEMPLATE {{#if template}} {{yield}} {{else}} {{flash.message}} {{/if}}

Slide 81

Slide 81 text

COMPONENT: PUBLIC API export default Ember.Component.extend({ classNames: [ 'alert', 'flashMessage' ], classNameBindings: [ 'alertType' ], alertType: computed('flash.type', function() { let flashType = get(this, 'flash.type'); return `alert-${flashType}`; }), click() { let flash = get(this, 'flash'); flash.destroyMessage(); } });

Slide 82

Slide 82 text

USAGE

Slide 83

Slide 83 text

{{#each flashes.queue as |flash|}} {{flash-message flash=flash}} {{/each}}

Slide 84

Slide 84 text

{{#each flashes.queue as |flash|}} {{#flash-message flash=flash}}
{{flash.type}}

{{flash.message}}

{{/flash-message}} {{/each}}

Slide 85

Slide 85 text

DEMO http://emberjs.jsbin.com/ranewo/46/edit?js,output

Slide 86

Slide 86 text

$ ember install:addon ember-cli-flash $ npm install --save-dev ember-cli-flash

Slide 87

Slide 87 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 88

Slide 88 text

DRAG AND DROP Skip

Slide 89

Slide 89 text

Draggable Dropzone Draggable Item Draggable Item Draggable Item Controller sendAction() Route

Slide 90

Slide 90 text

COMPONENT/VIEW EVENTS http://emberjs.com/api/classes/Ember.View.html#toc_event-names

Slide 91

Slide 91 text

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/ Drag_operations#draggableattribute

Slide 92

Slide 92 text

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#getData.28.29

Slide 93

Slide 93 text

DROPZONE

Slide 94

Slide 94 text

export default Ember.Component.extend({ classNames : [ 'draggableDropzone' ], classNameBindings : [ 'dragClass' ], dragClass : 'deactivated', dragLeave(event) { event.preventDefault(); set(this, 'dragClass', 'deactivated'); }, dragOver(event) { event.preventDefault(); set(this, 'dragClass', 'activated'); }, drop(event) { let data = event.dataTransfer.getData('text/data'); this.sendAction('dropped', data); set(this, 'dragClass', 'deactivated'); } });

Slide 95

Slide 95 text

DRAGGABLE ITEM

Slide 96

Slide 96 text

export default Ember.Component.extend({ classNames : [ 'draggableItem' ], attributeBindings : [ 'draggable' ], draggable : 'true', dragStart(event) { return event.dataTransfer.setData('text/data', get(this, 'content')); } });

Slide 97

Slide 97 text

{{ yield }}

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

{{#draggable-dropzone dropped="addUser"}}
    {{#each selectedUsers as |user|}}
  • {{user.fullName}}
    • {{/each}}
{{/draggable-dropzone}}
{{#each users as |user|}} {{#draggable-item content=user.id}} {{user.fullName}} {{/draggable-item}} {{/each}}

Slide 100

Slide 100 text

actions: { addUser(userId) { let selectedUsers = get(this, 'selectedUsers'); let user = get(this, 'model').findBy('id', parseInt(userId)); if (!selectedUsers.contains(user)) { return selectedUsers.pushObject(user); } } }

Slide 101

Slide 101 text

DEMO http://emberjs.jsbin.com/denep/18/edit?js,output

Slide 102

Slide 102 text

TL;DR

Slide 103

Slide 103 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 104

Slide 104 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 105

Slide 105 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 106

Slide 106 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 107

Slide 107 text

DESIGN IS HOW IT WORKS GOOD DESIGN IS REACTIVE GOOD DESIGN IS PLAYFUL GOOD DESIGN IS INFORMATIVE GOOD DESIGN IS INTUITIVE

Slide 108

Slide 108 text

AMBITIOUS UX FOR AMBITIOUS APPS EMBERCONF 2015 Lauren Elizabeth Tan @sugarpirate_ @poteto

Slide 109

Slide 109 text

Makes ambitious UX easy (and fun!)

Slide 110

Slide 110 text

Design is how it works

Slide 111

Slide 111 text

Follow @sugarpirate_

Slide 112

Slide 112 text

bit.ly/sugarpirate

Slide 113

Slide 113 text

Thank you! Lauren Elizabeth Tan @sugarpirate_ @poteto