Mistakes I Made Building Netflix for the iPhone

Mistakes I Made
Building Netflix
for the iPhone
Kent Brewster
@kentbrew
http://kentbrewster.com

In This Talk
About Me
About Life at Netﬂix
Mistakes I Made and Lessons I
Learned
View Source, Launch Movies,
and Roll Your Own UI

About Me
Seven-time Hugo and one-time
Nebula loser.

About Me
Nebula loser.
Atari, 1977.

About Me
Nebula loser.
Atari, 1977.
Invented the Learn-To-Type-Or-
Be-Blown-To-Bits Video Gaming
Genre, 1982.

My Qualiﬁcations
No Degree or Training in
Anything Remotely Relevant

My Qualiﬁcations
In the Right Place at the Right
Time, with the Right Amount of
Curiosity and OCD

My Qualiﬁcations
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

Even More About Me
WebMD, 1984-2003. (Yeah,
seriously, nineteen years.)
Yahoo, 2004-2009.
Netﬂix, 2009-2010.
These days? Vurve.

Um ... "Vurve?"
Vurve makes the process of
advertising online suck a whole
lot less for small businesses.

Um ... "Vurve?"
Currently playing with: Big
Data, Hadoop/MapReduce, Hive/
Pig, Ruby, Python, HTML5, EC2,
Node.js, Redis, Mongo.

Um ... "Vurve?"
Currently playing with: Big
Data, Hadoop/MapReduce, Hive/
Pig, Ruby, Python, HTML5, EC2,
Node.js, Redis, Mongo.
http://vurve.com/jobs

Life at Netﬂix
They pay you what you're worth.

Life at Netﬂix
They don't track your vacation.

Life at Netﬂix
You can bring your dog to work.

Life at Netflix
You can bring your dog to work.
When you tell your friends
where you work, they will all say
"Netflix! I love Netflix!"

Things I Worked On
Facebook Connect (v1)

Things I Worked On
OAuth Walk-Through

Things I Worked On
OAuth Walk-Through
Netﬂix Widgets

Things I Worked On
OAuth Walk-Through
Netﬂix Widgets
First API-Based Prototype

Things I Worked On
OAuth Walk-Through
Netﬂix Widgets
Trickplay in HTML

Things I Worked On
OAuth Walk-Through
Netﬂix Widgets
Trickplay in HTML
Netﬂix for iPhone

iPhone Chronology
April 1st: iPad ships with Netﬂix

iPhone Chronology
April 4th: invited to lead iPhone

iPhone Chronology
April 9th: working prototype

iPhone Chronology
April 23rd: ﬁrst design mocks

iPhone Chronology
April 23rd: ﬁrst design mocks
August 26th: champagne in the
War Room!

Surprise the First

April 19th: iPhone 4
on Gizmodo.

Surprise the Second

June 7th: Reed shows
the prototype at
Apple's Worldwide
Developer Conference,
commits to "summer"
launch.

First Three Mistakes
I took on a ridiculous deadline.

I let my manager (who wrote
zero lines of code) make key
architectural decisions.

I let my manager (who wrote
zero lines of code) make key
architectural decisions.
I shipped the prototype.

Why HTML?
Netﬂix does incremental
updates and heavy A/B testing.

Why HTML?
Entire UI can be overhauled
without requiring a trip to the
App Store.

Why HTML?
Entire UI can be overhauled
without requiring a trip to the
App Store.
Bugs ﬁx very quickly; the ﬁrst
one we had was on launch day,
and was handled in 15 minutes.

How To Tell HTML
from HTML5
Try it out on Internet Explorer.*

How To Tell HTML
from HTML5
Did it work?

How To Tell HTML
from HTML5
Did it work?
No?

How To Tell HTML
from HTML5
Did it work?
No?
It's HTML5.

*Except IE9
IE9 launched the day after I
gave this talk at SxSW.

*Except IE9
Everything I like to play with
(shadows, round corners,
gradients, canvas) works like a
champ.

*Except IE9
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.

UI Mistake

I tried to use native form
controls.

Ratings Selector

I liked this, but the
designer hated the
checkmark, and really
wanted red and gold
stars.
Failed on Android.

Search Box
input type=search didn't work.

Search Box
Had to hand-whittle the borders,
the little magnifying glass, and
the progress indicator.

Search Box
Goofy timing issues on focus()
and blur().

Search Box
Goofy timing issues on focus()
and blur().
Blew up on Android.

The Damn Keyboard
Could not be raised or lowered
programatically.

The Damn Keyboard
programatically.
(You'd think focus() and blur()
would do it, but you'd be wrong.)

The Damn Keyboard
programatically.
Shoved the UI up and failed to
shove it all the way back down.

The Damn Keyboard
programatically.
Shoved the UI up and failed to
shove it all the way back down.
Blew steaming chunks on
Android.

Really Enormous
Mistake

I attempted to replicate native
scrolling using HTML, CSS, and
JavaScript.

Scrolling
Had to provide native
performance, with a ﬁxed
header and footer.

Scrolling
header and footer.
Had to perform awesomely on a
2G iPod Touch.

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

I Stole From:
PastryKit library (not public at
the time, hard to understand)

I Stole From:
TouchScroll (basic framework)

I Stole From:
iScroll (excellent physics)

I Stole From:
iScroll (excellent physics)
Sencha Touch (did not ofﬁcially
exist)

How Scrolling Works
Kill touchmove default actions
with preventDefault().

How Scrolling Works
Listen and respond with CSS
transitions, not JS positioning.

How Scrolling Works
Listen and respond with CSS
transitions, not JS positioning.
Independent three-window
scrolling and sliding is really
hard.

Three Windows
Main list, gallery list, and details
page.

Three Windows
page.
Try not to re-render lists, but
also try not to rely on the DOM.

Three Windows
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....)

Home Position
#viewport {
position: absolute;
top: 0; left: 0;
height: 480px;
width: 320px;
overﬂow: hidden;
}

#body, #main, #gallery,
and #details all
positioned absolutely

Drag to Scroll
#main {
-webkit-transition:
-webkit-transform
2000ms ease-in;
-webkit-transform:
translate3d(0, -300px,
0);
}

Transform just the main
list.

Tap to Slide
#page {
-webkit-transition:
-webkit-transform
500ms ease-in;
-webkit-transform:
translate3d(320px, 0,
0);
}

Transform the entire
page to the right.

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!

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.

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.

position:ﬁxed?

Yes, position:ﬁxed 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

webOS
position:ﬁxed?

Yes, but I have a feeling that
this won't roll out to everyone.

Webkit Scrolling?
Position header and footer
absolutely.
Listen for touchstart.
Hide the header and footer,
scroll the window, and replace
when done.

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.

Why We Quit Working
On The Scrolling

Why We Quit Working
On The Scrolling
The ﬁrst 90% of the job takes the
ﬁrst 90% of the time.

Why We Quit Working
On The Scrolling
The last 10% of the work takes
the remaining 90% of the time.

Why We Quit Working
On The Scrolling
The last 10% of the work takes
the remaining 90% of the time.
Manager got an iPhone 4.

Big Mistake

I tried to make the same
codebase work for Android. (See
also "I let my manager make key
architectural decisions.")

Um ... Android?
When you view source you will
discover multiple references to
"android," so it's an open secret.

Um ... Android?
I have absolutely no idea when
or if Netﬂix will launch for
Android.

Um ... Android?
I have absolutely no idea when
or if Netﬂix will launch for
Android.
I will say this: it was very, very
hard to work on.

More Mistakes

I did not push back hard enough
on the design.

More Mistakes

on the design.
I ignored the application
framework.

More Mistakes

on the design.
I ignored the application
framework.
I failed to use some really
important tools.

HTML5
data:URIs for CSS backgrounds

HTML5
local storage to cache API calls
(main list is regenerated daily)

HTML5
Multipart XHR for images that
never change but may be served
up in different order (box art).

HTML5
Multipart XHR for images that
never change but may be served
up in different order (box art).
cache-manifest to store code &
framework ofﬂine

Careful, Now:
border-image was very slow to
render at different widths.

Careful, Now:
Scrolling using CSS transitions
hit an absolute height limit on
iPod Touch and iPhone 3

Careful, Now:
Scrolling using CSS transitions
hit an absolute height limit on
iPod Touch and iPhone 3
box-shadow slowed things down
tremendously

Big but Unavoidable
Mistake

I used an inadequate API.

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.

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.

All calls must be
signed with oAuth.
Cannot be done on the ﬂy by the
application; too slow.
Using JavaScript exposes your
key and secret.
Hack to ﬁx: throw key/secret
over the wall with the app on
launch.

Good news: they may
be ﬁxing the API.

http://techblog.netﬂix.com

NQL?
Netﬂix 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 Netﬂix
knows about a customer's front
page, or a season of South Park,
with a single call to the API.

Really happening?

Yep, looks like like it might be.
http://techblog.netﬂix.com

View Source?
Netﬂix has taken great care to
obfuscate this application.

View Source?
I'd like to help you view source,
but I can't.

View Source?
I'd like to help you view source,
but I can't.
I strongly recommend you do
NOT do any of the following....

Do not search
http://developer.netﬂix.com
for "ipad open app."

Should you discover the nﬂx://
protocol, don't mess around with it.

Don't get all stubborn and try
nﬂx:// calls on an iPhone or iPad
with the Netﬂix app installed.

If you try to hit an invalid nﬂx://
URL, the app will drop you into
Safari, pointed at the UI loader.

Do not copy this
URL into desktop Safari.

Don't inspect or follow any links to
JavaScript.

Do not copy behavior.js to your
clipboard....

And whatever you do, do NOT run
it through http://jsbeautiﬁer.org.

If You Accidentally Happen to
Glimpse Some Source, Please Avert
Your Eyes, and Assume the
Following:

Following:

Anything that looks broken or
brain-damaged is my fault.

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.

Try It Yourself!

Plays only on devices with the Netﬂix app
installed. Windows phone? Unknown....

Try It Yourself!
Please be gentle:
http://iﬂx.us


Try It Yourself!
Please be gentle:
http://iﬂx.us
Remember, it's a two-hour hack.


Try It Yourself!
Please be gentle:
http://iﬂx.us
Remember, it's a two-hour hack.
Fork Me On GitHub:
https://github.com/kentbrew/iﬂx


Search Structure

<input id="query" /><ul id="results"></ul>

Search Loop
checkSearch : function() {
var v = $.s.query.value;
if (v) {
if (v !== $.g.lastValue) {
$.f.runSearch(v);
}
$.g.lastValue = v;
}
}

$.w.setInterval(
function() {
$.f.checkSearch();
}, 500
);

Search Query
runSearch: function(q) {
var n = $.f.fn.length;
var id = $.a.k + '.f.fn[' + n + ']';
var url = $.a.search + '?expand=@title';
url += '&max_results=20&output=json&v=2.0';
url += '&term=' + encodeURIComponent(q);
url += '&callback=' + encodeURIComponent(id);
$.f.fn[n] = function(r) {
var id = $.a.k + '.f.fn[' + n + ']';
$.f.destroy($.d.getElementById(id));
$.f.renderSearch(r);
};
$.d.b.appendChild(
$.f.create({'SCRIPT':{
'src':$.f.oAuthRequest(url),
'type':'text/javascript',
}})
);
}

OAuth?

http://kentbrewster.com/netﬂix-
api-explorer
http://kentbrewster.com/true-
oauth-confessions

Launching a Movie


Launching a Movie
nﬂx://www.netﬂix.com/
WiPlayer


Launching a Movie
WiPlayer
?movieid=[box art movie ID]


Launching a Movie
WiPlayer
&episodeid=[episode ID]


Launching a Movie
WiPlayer
&episodeid=[episode ID]
&returnUrl=[your page]


Launch Behavior
var playUrl = 'nﬂx://www.netﬂix.com/WiPlayer?';
playUrl += 'movieid=' + id;
playUrl += '&returnUrl=http://yourpage.com';

var playButton = $.f.create({'A':{
'innerHTML':'Play',
'href': playUrl
}});

playButton.onclick = function() {
$.w.location = this.href;
}

ASCII-art Starbars
li {
.fullStars, .emptyStars
text-shadow: 0 1px 1px #fff;
{
}
position: absolute;
width: 100px;
li p.starContainer {
top: 0;
display: inline-block;
left: 0;
position: relative;
}
width: 100px;
height: 32px;
.fullStars {
line-height: 32px;
color: #a00;
letter-spacing: 4.2px;
overﬂow: hidden;
text-align: center;
}
margin: 0;
padding: 0;
}

Starbar JS
var starContainer = $.f.create({'P':{
'className':'starContainer'
}});
var fullStars = $.f.create({'SPAN':{
'className':'fullStars',
'innerHTML':'★★★★★'
}});
fullStars.style.width = (t.average_rating * 20) + '%';
starContainer.appendChild(fullStars);
var emptyStars = $.f.create({'SPAN':{
'className':'emptyStars',
'innerHTML':'☆☆☆☆☆'
}});
starContainer.appendChild(emptyStars);
li.appendChild(starContainer);

Starbar, Rendered


★★★★★


☆☆☆☆☆

Randall
Munroe
always
has the last
laugh.

Mistakes I Made Building Netflix for the iPhone

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mistakes I Made Building Netflix for the iPhone

Similar to Mistakes I Made Building Netflix for the iPhone (20)

Recently uploaded

Recently uploaded (20)

Mistakes I Made Building Netflix for the iPhone

Editor's Notes