fake it while we make it (data-driven prototyping)

106
Fake it While We Make it featuring rails-api and ember.js

Upload: ryan-labouve

Post on 16-Jul-2015

2.744 views

Category:

Design


2 download

TRANSCRIPT

Page 1: Fake It While We Make It (Data-Driven Prototyping)

Fake it While We Make it

featuring rails-api and ember.js

Page 2: Fake It While We Make It (Data-Driven Prototyping)

“Can you make this?” Our manager slides over a screenshot from Tron/Oblivion/Any Sci-fi movie with a sticky note that says “our data here” and pitches us an idea.

Page 3: Fake It While We Make It (Data-Driven Prototyping)
Page 4: Fake It While We Make It (Data-Driven Prototyping)

We are stuck between a cool idea and tons of unknowns. We know that the availability, accuracy, and nature of our data will directly affect the quality and outcome of our project. So how do we begin developing? We fake it while we make it.

Page 5: Fake It While We Make It (Data-Driven Prototyping)

Designer, “No problem”— makes

prototype

Page 6: Fake It While We Make It (Data-Driven Prototyping)

We can too.

Page 7: Fake It While We Make It (Data-Driven Prototyping)

WHOAMIRyan LaBouve (@ryanlabouve)

Page 8: Fake It While We Make It (Data-Driven Prototyping)
Page 9: Fake It While We Make It (Data-Driven Prototyping)

HOLYARCHERS

Page 10: Fake It While We Make It (Data-Driven Prototyping)

RyanLaBouve.com

Page 11: Fake It While We Make It (Data-Driven Prototyping)

Agenda: I. What & Why II. Our Toolbox III. Practical

Page 12: Fake It While We Make It (Data-Driven Prototyping)

What & WHYPart 1

a brief exploration of prototyping

Page 13: Fake It While We Make It (Data-Driven Prototyping)

“faking it while we make it”

=technical prototyping

Page 14: Fake It While We Make It (Data-Driven Prototyping)

Prototyping Defined

Page 15: Fake It While We Make It (Data-Driven Prototyping)

Prototype—Greek Derivative—

Primitive Form

Page 16: Fake It While We Make It (Data-Driven Prototyping)

Low-Fidelity = Primitive Form

We usually think of…

Page 17: Fake It While We Make It (Data-Driven Prototyping)

Old Version = Primitive Form

Page 18: Fake It While We Make It (Data-Driven Prototyping)

Smoke And Mirrors = Primitive Form

Page 19: Fake It While We Make It (Data-Driven Prototyping)

Effectively, Prototyping Can Be All Three

Page 20: Fake It While We Make It (Data-Driven Prototyping)

In the year 2000, Douglas Caldwell was successfully petitioned by his teenage son to see the film X-Men. Douglas wasn’t really a fan of sci-fi, but wanted to spend time with his son, so he agreed to go. Watching the film, he was amazed to see a solution to a 2,000-year-old problem that he dealt with every day.

As Cyclops describes the mission they are about to undertake, the map changes shape, as if it was made of hundreds of tiny pins, each rising and falling to form the topography needed (Figure 1.5).

Douglas was that he worked for the US Army Topographic Engineering Center. Part of his job was to create 3D maps and ship them to generals in the field, so they could study the theater of battle and consider tactics. These maps are called “sand tables” because they were originally created by generals thousands of years ago using actual trays of sand. Military leaders still do the same thing when they don’t have a better map on hand

DANGER ROOM

Page 21: Fake It While We Make It (Data-Driven Prototyping)

Old Product Lo-Fidelity Product

Reinventing Sandtables

Smoke & Mirrors

Page 22: Fake It While We Make It (Data-Driven Prototyping)

Reinventing Lightsabers

This only kind of relates…

Page 23: Fake It While We Make It (Data-Driven Prototyping)
Page 24: Fake It While We Make It (Data-Driven Prototyping)

The Nature of Prototyping

Page 25: Fake It While We Make It (Data-Driven Prototyping)

The Goal is not to be Vague

Page 26: Fake It While We Make It (Data-Driven Prototyping)

Prototype —> Product

It focuses on the core problem and gradually moves towards

an ideal solution

Page 27: Fake It While We Make It (Data-Driven Prototyping)

Specific Goals

Page 28: Fake It While We Make It (Data-Driven Prototyping)

Catch Obvious Mistakes Early

goal 1

Page 29: Fake It While We Make It (Data-Driven Prototyping)

quickly bridge imagination to potential solutions

(aka: cheap wins)

goal 2

Page 30: Fake It While We Make It (Data-Driven Prototyping)

Reimagine the OU Site (timeline: 1 night)

Page 31: Fake It While We Make It (Data-Driven Prototyping)

Modern/Traditional Sturdy and Approachable Techie and Scientific

Classic Rock. Magazine Ready. Honest and Trendy

Page 32: Fake It While We Make It (Data-Driven Prototyping)

Modern with Traditional Roots

Page 33: Fake It While We Make It (Data-Driven Prototyping)

Actually Harvard…

Page 34: Fake It While We Make It (Data-Driven Prototyping)

Sturdy and Approachable

Page 35: Fake It While We Make It (Data-Driven Prototyping)

Actually Bates University…

Page 36: Fake It While We Make It (Data-Driven Prototyping)

Techie and Scientific

Page 37: Fake It While We Make It (Data-Driven Prototyping)

Actually University of Michigan

Page 38: Fake It While We Make It (Data-Driven Prototyping)

Classic

Page 39: Fake It While We Make It (Data-Driven Prototyping)

Actually Cornell…

Page 40: Fake It While We Make It (Data-Driven Prototyping)

Rock. Magazine Ready.

Page 41: Fake It While We Make It (Data-Driven Prototyping)

This thing…

Page 42: Fake It While We Make It (Data-Driven Prototyping)

Honest and Trendy

Page 43: Fake It While We Make It (Data-Driven Prototyping)

Australian Catholic University

Page 44: Fake It While We Make It (Data-Driven Prototyping)

Avoid Late Blow-Back from MGMT

(aka. Swoop & Poop)

goal 3

Page 45: Fake It While We Make It (Data-Driven Prototyping)

Because, why spend 6 weeks getting an idea rejected

from stakeholders?Aka…

Page 46: Fake It While We Make It (Data-Driven Prototyping)

swoop and poop—Getting Agile With—

Page 47: Fake It While We Make It (Data-Driven Prototyping)

Explore weird solutions

goal 4

Page 48: Fake It While We Make It (Data-Driven Prototyping)

Because sometimes they are radically better

solutions.

“If I had asked my customers what they wanted they would have said a faster horse.”

— Probably Henry Ford

Page 49: Fake It While We Make It (Data-Driven Prototyping)

How this applies specifically to,

Application Development, API’s, and Data

Page 50: Fake It While We Make It (Data-Driven Prototyping)

Problems & Tools

Part 2

Page 51: Fake It While We Make It (Data-Driven Prototyping)

Data Tools Rails-API

activemodel adapter/serializer db seeds + faker ** (screen scraping)

(api scraping)

UI Tools Ember.js Fixtures

Interactions

Page 52: Fake It While We Make It (Data-Driven Prototyping)

Even though this is my toolbox, it’s often 1-to-1 to

switch it with others

Page 53: Fake It While We Make It (Data-Driven Prototyping)

Common Problems

Page 54: Fake It While We Make It (Data-Driven Prototyping)

Data Problems I. States II. Bootstrapping III. Realistic Data IV. Scale V. Relationship VI. Variance

Page 55: Fake It While We Make It (Data-Driven Prototyping)

Ember

States—vs—

Page 56: Fake It While We Make It (Data-Driven Prototyping)

TodoMVC

Flat mockup -> Interactive. 1 hour max?

Page 57: Fake It While We Make It (Data-Driven Prototyping)

http://todomvc.com/

Page 58: Fake It While We Make It (Data-Driven Prototyping)

Fixtures

Bootstrapping—vs—

Page 59: Fake It While We Make It (Data-Driven Prototyping)
Page 60: Fake It While We Make It (Data-Driven Prototyping)

Rails-API

Bootstrapping—vs—

Page 61: Fake It While We Make It (Data-Driven Prototyping)

Solving the Same Problem With Ember+Rails API

Page 62: Fake It While We Make It (Data-Driven Prototyping)

From `rails-api new` to running

Page 63: Fake It While We Make It (Data-Driven Prototyping)
Page 64: Fake It While We Make It (Data-Driven Prototyping)

Active Model Serializer

Page 65: Fake It While We Make It (Data-Driven Prototyping)

Active Model Serializer

Before Active Model Serializer

Page 66: Fake It While We Make It (Data-Driven Prototyping)

Add to gemfile (throwing faker in too)

Generate Serializer

(The Serializer)

Page 67: Fake It While We Make It (Data-Driven Prototyping)

Active Model Serializer

After Active Model Serializer

Page 68: Fake It While We Make It (Data-Driven Prototyping)

For the Ember Side

Page 69: Fake It While We Make It (Data-Driven Prototyping)

Proxy For Convenience

Swap Ember Adapter

Page 70: Fake It While We Make It (Data-Driven Prototyping)

Faker

Realistic Data—vs—

Page 71: Fake It While We Make It (Data-Driven Prototyping)

faker gem https://github.com/stympy/faker

Page 72: Fake It While We Make It (Data-Driven Prototyping)

From Fake Company Stuff

Fake address information and more

Page 73: Fake It While We Make It (Data-Driven Prototyping)

The faker and ffaker APIs are mostly the same, although the API on ffaker keeps growing with its users additions. In general, the

only difference is that you need to

ffaker gem https://github.com/EmmanuelOga/ffaker

Page 74: Fake It While We Make It (Data-Driven Prototyping)

Add some todos to db/seeds.rb

Seed Database

Page 75: Fake It While We Make It (Data-Driven Prototyping)

Active Model Serializer

Fancy Latin Todos

Page 76: Fake It While We Make It (Data-Driven Prototyping)

Fancy Latin Todos (in the app)

Page 77: Fake It While We Make It (Data-Driven Prototyping)

Rails-API

Scale—via—

Page 78: Fake It While We Make It (Data-Driven Prototyping)

What if we do 2,000+ todos?

Page 79: Fake It While We Make It (Data-Driven Prototyping)
Page 80: Fake It While We Make It (Data-Driven Prototyping)
Page 81: Fake It While We Make It (Data-Driven Prototyping)

This will begin to change what we’re making

Page 82: Fake It While We Make It (Data-Driven Prototyping)

Impacts our Decisions Early On

Page 83: Fake It While We Make It (Data-Driven Prototyping)

Other APIs

Realistic Data—vs—

Page 84: Fake It While We Make It (Data-Driven Prototyping)

Latin Means Nothing (ad maiorem partem populi)

Page 85: Fake It While We Make It (Data-Driven Prototyping)

Instead, StackOverflow Articles Read vs. Unread

Page 86: Fake It While We Make It (Data-Driven Prototyping)

After adding HTTPart to gem file

Page 87: Fake It While We Make It (Data-Driven Prototyping)

AnswerMePlz (powered by stack overflow)

Page 88: Fake It While We Make It (Data-Driven Prototyping)

Edge Cases

Variance—and—

Page 89: Fake It While We Make It (Data-Driven Prototyping)

Exploring Edge Caseshttp://robots.thoughtbot.com/ember-for-designers-alternate-states

Page 90: Fake It While We Make It (Data-Driven Prototyping)

Has Many

Relationship—like—

Page 91: Fake It While We Make It (Data-Driven Prototyping)

splitticket.herokuapp.comTodoList HasMany Todos

Page 92: Fake It While We Make It (Data-Driven Prototyping)

PracticalPart 3

Page 93: Fake It While We Make It (Data-Driven Prototyping)

Scenario: You are a Pug Enthusiast

Page 94: Fake It While We Make It (Data-Driven Prototyping)

And you want to bootstrap an edgy startup…

Page 95: Fake It While We Make It (Data-Driven Prototyping)

It’s like tinder meets zazzle for pug-enthusiasts

mug-enthusiasts.

Page 96: Fake It While We Make It (Data-Driven Prototyping)

PUGMUG

Page 97: Fake It While We Make It (Data-Driven Prototyping)

Goals: Fresh Pug Pics General App Flow

Page 98: Fake It While We Make It (Data-Driven Prototyping)
Page 99: Fake It While We Make It (Data-Driven Prototyping)
Page 100: Fake It While We Make It (Data-Driven Prototyping)

rails-api new pugmug-api

cd pugmug-api/

rails-api g scaffold --help

rails-api g scaffold pug url:string \ title:string

rake db:migrate

New API

Page 101: Fake It While We Make It (Data-Driven Prototyping)
Page 102: Fake It While We Make It (Data-Driven Prototyping)

To Gemfile: gem 'active_model_serializers', '~> 0.8.1'

Then rails g serializer Pug url title

More Rails…

Page 103: Fake It While We Make It (Data-Driven Prototyping)
Page 104: Fake It While We Make It (Data-Driven Prototyping)

ember new pugmug-ember ember serve --proxy http://localhost:3000

ember g adapter application (switch adapter to ActiveModelAdapter)

ember g resource pugs ember g controller pugs

Ember

Page 105: Fake It While We Make It (Data-Driven Prototyping)
Page 106: Fake It While We Make It (Data-Driven Prototyping)

The End