Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
9. My Qualifications
No Degree or Training in
Anything Remotely Relevant
In the Right Place at the Right
Time, with the Right Amount of
Curiosity and OCD
10. My Qualifications
No Degree or Training in
Anything Remotely Relevant
In the Right Place at the Right
Time, with the Right Amount of
Curiosity and OCD
Living Proof that Just About
Anybody Can Do This
11. Even More About Me
WebMD, 1984-2003. (Yeah,
seriously, nineteen years.)
Yahoo, 2004-2009.
Netflix, 2009-2010.
These days? Vurve.
13. Um ... "Vurve?"
Vurve makes the process of
advertising online suck a whole
lot less for small businesses.
14. Um ... "Vurve?"
Vurve makes the process of
advertising online suck a whole
lot less for small businesses.
Currently playing with: Big
Data, Hadoop/MapReduce, Hive/
Pig, Ruby, Python, HTML5, EC2,
Node.js, Redis, Mongo.
15. Um ... "Vurve?"
Vurve makes the process of
advertising online suck a whole
lot less for small businesses.
Currently playing with: Big
Data, Hadoop/MapReduce, Hive/
Pig, Ruby, Python, HTML5, EC2,
Node.js, Redis, Mongo.
http://vurve.com/jobs
19. Life at Netflix
They pay you what you're worth.
They don't track your vacation.
20. Life at Netflix
They pay you what you're worth.
They don't track your vacation.
You can bring your dog to work.
21. Life at Netflix
They pay you what you're worth.
They don't track your vacation.
You can bring your dog to work.
When you tell your friends
where you work, they will all say
"Netflix! I love Netflix!"
32. iPhone Chronology
April 1st: iPad ships with Netflix
April 4th: invited to lead iPhone
April 9th: working prototype
33. iPhone Chronology
April 1st: iPad ships with Netflix
April 4th: invited to lead iPhone
April 9th: working prototype
April 23rd: first design mocks
34. iPhone Chronology
April 1st: iPad ships with Netflix
April 4th: invited to lead iPhone
April 9th: working prototype
April 23rd: first design mocks
August 26th: champagne in the
War Room!
39. First Three Mistakes
I took on a ridiculous deadline.
I let my manager (who wrote
zero lines of code) make key
architectural decisions.
40. First Three Mistakes
I took on a ridiculous deadline.
I let my manager (who wrote
zero lines of code) make key
architectural decisions.
I shipped the prototype.
43. Why HTML?
Netflix does incremental
updates and heavy A/B testing.
Entire UI can be overhauled
without requiring a trip to the
App Store.
44. Why HTML?
Netflix does incremental
updates and heavy A/B testing.
Entire UI can be overhauled
without requiring a trip to the
App Store.
Bugs fix very quickly; the first
one we had was on launch day,
and was handled in 15 minutes.
52. *Except IE9
IE9 launched the day after I
gave this talk at SxSW.
Everything I like to play with
(shadows, round corners,
gradients, canvas) works like a
champ.
53. *Except IE9
IE9 launched the day after I
gave this talk at SxSW.
Everything I like to play with
(shadows, round corners,
gradients, canvas) works like a
champ.
Now if we just had proper DOM-
compatible JavaScript, life
would be complete.
58. Search Box
input type=search didn't work.
Had to hand-whittle the borders,
the little magnifying glass, and
the progress indicator.
59. Search Box
input type=search didn't work.
Had to hand-whittle the borders,
the little magnifying glass, and
the progress indicator.
Goofy timing issues on focus()
and blur().
60. Search Box
input type=search didn't work.
Had to hand-whittle the borders,
the little magnifying glass, and
the progress indicator.
Goofy timing issues on focus()
and blur().
Blew up on Android.
63. The Damn Keyboard
Could not be raised or lowered
programatically.
(You'd think focus() and blur()
would do it, but you'd be wrong.)
64. The Damn Keyboard
Could not be raised or lowered
programatically.
(You'd think focus() and blur()
would do it, but you'd be wrong.)
Shoved the UI up and failed to
shove it all the way back down.
65. The Damn Keyboard
Could not be raised or lowered
programatically.
(You'd think focus() and blur()
would do it, but you'd be wrong.)
Shoved the UI up and failed to
shove it all the way back down.
Blew steaming chunks on
Android.
66. Really Enormous
Mistake
I attempted to replicate native
scrolling using HTML, CSS, and
JavaScript.
69. Scrolling
Had to provide native
performance, with a fixed
header and footer.
Had to perform awesomely on a
2G iPod Touch.
70. Scrolling
Had to provide native
performance, with a fixed
header and footer.
Had to perform awesomely on a
2G iPod Touch.
Was tested by launching the app,
immediately scrolling like crazy
before the data had loaded, and
declaring that it sucked.
73. I Stole From:
PastryKit library (not public at
the time, hard to understand)
TouchScroll (basic framework)
74. I Stole From:
PastryKit library (not public at
the time, hard to understand)
TouchScroll (basic framework)
iScroll (excellent physics)
75. I Stole From:
PastryKit library (not public at
the time, hard to understand)
TouchScroll (basic framework)
iScroll (excellent physics)
Sencha Touch (did not officially
exist)
78. How Scrolling Works
Kill touchmove default actions
with preventDefault().
Listen and respond with CSS
transitions, not JS positioning.
79. How Scrolling Works
Kill touchmove default actions
with preventDefault().
Listen and respond with CSS
transitions, not JS positioning.
Independent three-window
scrolling and sliding is really
hard.
82. Three Windows
Main list, gallery list, and details
page.
Try not to re-render lists, but
also try not to rely on the DOM.
83. Three Windows
Main list, gallery list, and details
page.
Try not to re-render lists, but
also try not to rely on the DOM.
iOS is optimized for translate3d.
(Android? Not so much....)
84. Home Position
#viewport {
position: absolute;
top: 0; left: 0;
height: 480px;
width: 320px;
overflow: hidden;
}
#body, #main, #gallery,
and #details all
positioned absolutely
85. Drag to Scroll
#main {
-webkit-transition:
-webkit-transform
2000ms ease-in;
-webkit-transform:
translate3d(0, -300px,
0);
}
Transform just the main
list.
86. Tap to Slide
#page {
-webkit-transition:
-webkit-transform
500ms ease-in;
-webkit-transform:
translate3d(320px, 0,
0);
}
Transform the entire
page to the right.
87. Scroll Gallery Up
#gallery {
-webkit-transition:
-webkit-transform
2000ms ease-in;
-webkit-transform:
translate3d(0, -200px,
0);
}
Scroll the gallery up.
Leave main list alone!
88. Tap to Open Details
#page {
-webkit-transition:
-webkit-transform
500ms ease-in;
-webkit-transform:
translate3d(320px, 0,
0);
}
Slide the entire page
to the right again.
89. Going Back is Hard
Sometimes we need to
reset the list we're
backing into, sometimes
we don't.
Sometimes the entire
gallery has changed,
from instant queue to a
category gallery.
90. position:fixed?
Yes, position:fixed works on
Android. http://bit.ly/aj8wyl
This is good, because scrolling
with JavaScript is kinda busted.
This is bad, because it's buggy.
http://bit.ly/cCTX6r
92. Webkit Scrolling?
Position header and footer
absolutely.
Listen for touchstart.
Hide the header and footer,
scroll the window, and replace
when done.
93. Headers in the App
Header and footer should be
part of the app's framework.
Body should be a Web view;
native scrolling will take care of
everything.
Throw title info over the wall to
native app using hacky
JavaScript bridge.
95. Why We Quit Working
On The Scrolling
The first 90% of the job takes the
first 90% of the time.
96. Why We Quit Working
On The Scrolling
The first 90% of the job takes the
first 90% of the time.
The last 10% of the work takes
the remaining 90% of the time.
97. Why We Quit Working
On The Scrolling
The first 90% of the job takes the
first 90% of the time.
The last 10% of the work takes
the remaining 90% of the time.
Manager got an iPhone 4.
98. Big Mistake
I tried to make the same
codebase work for Android. (See
also "I let my manager make key
architectural decisions.")
100. Um ... Android?
When you view source you will
discover multiple references to
"android," so it's an open secret.
101. Um ... Android?
When you view source you will
discover multiple references to
"android," so it's an open secret.
I have absolutely no idea when
or if Netflix will launch for
Android.
102. Um ... Android?
When you view source you will
discover multiple references to
"android," so it's an open secret.
I have absolutely no idea when
or if Netflix will launch for
Android.
I will say this: it was very, very
hard to work on.
109. HTML5
data:URIs for CSS backgrounds
local storage to cache API calls
(main list is regenerated daily)
110. HTML5
data:URIs for CSS backgrounds
local storage to cache API calls
(main list is regenerated daily)
Multipart XHR for images that
never change but may be served
up in different order (box art).
111. HTML5
data:URIs for CSS backgrounds
local storage to cache API calls
(main list is regenerated daily)
Multipart XHR for images that
never change but may be served
up in different order (box art).
cache-manifest to store code &
framework offline
114. Careful, Now:
border-image was very slow to
render at different widths.
Scrolling using CSS transitions
hit an absolute height limit on
iPod Touch and iPhone 3
115. Careful, Now:
border-image was very slow to
render at different widths.
Scrolling using CSS transitions
hit an absolute height limit on
iPod Touch and iPhone 3
box-shadow slowed things down
tremendously
117. 23+ API calls build
the front page.
Get the master list.
For each item on the master list,
get a child list.
For each item in the child list,
make two calls, one for the title
and one for the user's rating.
118. Episodes and
bookmarks are hard.
For each episode in a series,
create a stand-alone call for that
episode and append it to a very
long bulk query.
This query is too big to GET. Use
XHR.
Oh, wait. Use CORS, because we
are in the cloud.
119. All calls must be
signed with oAuth.
Cannot be done on the fly by the
application; too slow.
Using JavaScript exposes your
key and secret.
Hack to fix: throw key/secret
over the wall with the app on
launch.
120. Good news: they may
be fixing the API.
http://techblog.netflix.com
121. NQL?
Netflix needs to build something
like Yahoo! Query Language.
http://developer.yahoo.com/yql
Group related endpoints
together. Developers need to be
able to get everything Netflix
knows about a customer's front
page, or a season of South Park,
with a single call to the API.
125. View Source?
Netflix has taken great care to
obfuscate this application.
I'd like to help you view source,
but I can't.
126. View Source?
Netflix has taken great care to
obfuscate this application.
I'd like to help you view source,
but I can't.
I strongly recommend you do
NOT do any of the following....
133. Do not copy behavior.js to your
clipboard....
134. And whatever you do, do NOT run
it through http://jsbeautifier.org.
135. If You Accidentally Happen to
Glimpse Some Source, Please Avert
Your Eyes, and Assume the
Following:
136. If You Accidentally Happen to
Glimpse Some Source, Please Avert
Your Eyes, and Assume the
Following:
Anything that looks broken or
brain-damaged is my fault.
137. If You Accidentally Happen to
Glimpse Some Source, Please Avert
Your Eyes, and Assume the
Following:
Anything that looks broken or
brain-damaged is my fault.
Anything that works or is
awesome was put in after I left, or
in spite of my valiant efforts to
fuck it up.
139. Try It Yourself!
Plays only on devices with the Netflix app
installed. Windows phone? Unknown....
140. Try It Yourself!
Please be gentle:
http://iflx.us
Plays only on devices with the Netflix app
installed. Windows phone? Unknown....
141. Try It Yourself!
Please be gentle:
http://iflx.us
Remember, it's a two-hour hack.
Plays only on devices with the Netflix app
installed. Windows phone? Unknown....
142. Try It Yourself!
Please be gentle:
http://iflx.us
Remember, it's a two-hour hack.
Fork Me On GitHub:
https://github.com/kentbrew/iflx
Plays only on devices with the Netflix app
installed. Windows phone? Unknown....