“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. 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. This is what the talk is about: the importance of developing with fake data, the types of data we can fake, and some useful strategies for getting up and running with fake data. http://www.okcruby.org/blog/2015/02/05/february-2015-meeting/

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

2. “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.

4. 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.

5. Designer, “No
problem”— makes
prototype

6. We can too.

7. WHOAMI
Ryan LaBouve (@ryanlabouve)

9. HOLYARCHERS

10. RyanLaBouve.com

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

12. What & WHY
Part 1
a brief exploration of prototyping

13. “faking it while we
make it”
=technical prototyping

14. Prototyping
Defined

15. Prototype
—Greek Derivative—
Primitive Form

16. Low-Fidelity = Primitive Form
We usually think of…

17. Old Version = Primitive Form

18. Smoke And Mirrors = Primitive Form

19. Effectively, Prototyping Can Be All Three

20. 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

21. Old Product Lo-Fidelity Product
Reinventing Sandtables
Smoke & Mirrors

22. Reinventing Lightsabers
This only kind of relates…

24. The Nature of Prototyping

25. The Goal is not to be Vague

26. Prototype —> Product
It focuses on the core problem
and gradually moves towards
an ideal solution

27. Specific Goals

28. Catch Obvious Mistakes Early
goal 1

29. quickly bridge imagination
to potential solutions
(aka: cheap wins)
goal 2

30. Reimagine the OU Site
(timeline: 1 night)

31. Modern/Traditional Sturdy and Approachable Techie and Scientific
Classic Rock. Magazine Ready. Honest and Trendy

32. Modern with Traditional Roots

33. Actually Harvard…

34. Sturdy and Approachable

35. Actually Bates University…

36. Techie and Scientific

37. Actually University of Michigan

38. Classic

39. Actually Cornell…

40. Rock. Magazine Ready.

41. This thing…

42. Honest and Trendy

43. Australian Catholic University

44. Avoid Late Blow-Back
from MGMT
(aka. Swoop & Poop)
goal 3

45. Because, why spend 6 weeks
getting an idea rejected
from stakeholders?
Aka…

46. swoop and poop
—Getting Agile With—

47. Explore weird solutions
goal 4

48. 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

49. How this applies
specifically to,
Application Development,
API’s, and Data

50. Problems &
Tools
Part 2

51. Data Tools
Rails-API
activemodel adapter/serializer
db seeds + faker **
(screen scraping)
(api scraping)
UI Tools
Ember.js
Fixtures
Interactions

52. Even though this is my
toolbox, it’s often 1-to-1 to
switch it with others

53. Common Problems

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

55. Ember
States
—vs—

56. TodoMVC
Flat mockup -> Interactive.
1 hour max?

57. http://todomvc.com/

58. Fixtures
Bootstrapping
—vs—

60. Rails-API
Bootstrapping
—vs—

61. Solving the Same Problem
With Ember+Rails API

62. From `rails-api new` to running

64. Active Model Serializer

65. Active Model Serializer
Before Active Model Serializer

66. Add to gemfile (throwing faker in too)
Generate Serializer
(The Serializer)

67. Active Model Serializer
After Active Model Serializer

68. For the Ember Side

69. Proxy For Convenience
Swap Ember Adapter

70. Faker
Realistic Data
—vs—

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

72. From Fake Company Stuff
Fake address information and more

73. 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

74. Add some todos to db/seeds.rb
Seed Database

75. Active Model Serializer
Fancy Latin Todos

76. Fancy Latin Todos
(in the app)

77. Rails-API
Scale
—via—

78. What if we do 2,000+ todos?

81. This will begin to change
what we’re making

82. Impacts our Decisions Early On

83. Other APIs
Realistic Data
—vs—

84. Latin Means Nothing
(ad maiorem partem populi)

85. Instead, StackOverflow Articles
Read vs. Unread

86. After adding HTTPart to gem file

87. AnswerMePlz
(powered by stack overflow)

88. Edge Cases
Variance
—and—

89. Exploring Edge Cases
http://robots.thoughtbot.com/ember-for-designers-alternate-states

90. Has Many
Relationship
—like—

91. splitticket.herokuapp.com
TodoList HasMany Todos

92. Practical
Part 3

93. Scenario: You are a Pug Enthusiast

94. And you want to bootstrap
an edgy startup…

95. It’s like tinder meets
zazzle for pug-enthusiasts
mug-enthusiasts.

96. PUGMUG

97. Goals:
Fresh Pug Pics
General App Flow

100. 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

102. To Gemfile:
gem 'active_model_serializers', '~> 0.8.1'
Then
rails g serializer Pug url title
More Rails…

104. 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

106. The End