Mistakes I Made Building Netflix for the iPhone

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

In This TalkAbout MeAbout Life at NetﬂixMistakes I Made and Lessons ILearnedView Source, Launch Movies,and Roll Your Own UI

About Me

About MeSeven-time Hugo and one-timeNebula loser.

About MeSeven-time Hugo and one-timeNebula loser.Atari, 1977.

About MeSeven-time Hugo and one-timeNebula loser.Atari, 1977.Invented the Learn-To-Type-Or-Be-Blown-To-Bits Video GamingGenre, 1982.

My Qualiﬁcations

My QualiﬁcationsNo Degree or Training inAnything Remotely Relevant

My QualiﬁcationsNo Degree or Training inAnything Remotely RelevantIn the Right Place at the RightTime, with the Right Amount ofCuriosity and OCD

My QualiﬁcationsNo Degree or Training inAnything Remotely RelevantIn the Right Place at the RightTime, with the Right Amount ofCuriosity and OCDLiving Proof that Just AboutAnybody 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?"

Um ... "Vurve?"Vurve makes the process ofadvertising online suck a wholelot less for small businesses.

Um ... "Vurve?"Vurve makes the process ofadvertising online suck a wholelot less for small businesses.Currently playing with: BigData, Hadoop/MapReduce, Hive/Pig, Ruby, Python, HTML5, EC2,Node.js, Redis, Mongo.

Um ... "Vurve?"Vurve makes the process ofadvertising online suck a wholelot less for small businesses.Currently playing with: BigData, Hadoop/MapReduce, Hive/Pig, Ruby, Python, HTML5, EC2,Node.js, Redis, Mongo.http://vurve.com/jobs

Vurve, if IE < 8

Life at Netﬂix

Life at NetﬂixThey pay you what youre worth.

Life at NetﬂixThey pay you what youre worth.They dont track your vacation.

Life at NetﬂixThey pay you what youre worth.They dont track your vacation.You can bring your dog to work.

Life at NetflixThey pay you what youre worth.They dont track your vacation.You can bring your dog to work.When you tell your friendswhere you work, they will all say"Netflix! I love Netflix!"

Things I Worked On

Things I Worked OnFacebook Connect (v1)

Things I Worked OnFacebook Connect (v1)OAuth Walk-Through

Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetﬂix Widgets

Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetﬂix WidgetsFirst API-Based Prototype

Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetﬂix WidgetsFirst API-Based PrototypeTrickplay in HTML

Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetﬂix WidgetsFirst API-Based PrototypeTrickplay in HTMLNetﬂix for iPhone

iPhone Chronology

iPhone ChronologyApril 1st: iPad ships with Netﬂix

iPhone ChronologyApril 1st: iPad ships with NetﬂixApril 4th: invited to lead iPhone

iPhone ChronologyApril 1st: iPad ships with NetﬂixApril 4th: invited to lead iPhoneApril 9th: working prototype

iPhone ChronologyApril 1st: iPad ships with NetﬂixApril 4th: invited to lead iPhoneApril 9th: working prototypeApril 23rd: ﬁrst design mocks

iPhone ChronologyApril 1st: iPad ships with NetﬂixApril 4th: invited to lead iPhoneApril 9th: working prototypeApril 23rd: ﬁrst design mocksAugust 26th: champagne in theWar Room!

Surprise the First April 19th: iPhone 4 on Gizmodo.

Surprise the Second June 7th: Reed shows the prototype at Apples Worldwide Developer Conference, commits to "summer" launch.

First Three Mistakes

First Three Mistakes I took on a ridiculous deadline.

First Three Mistakes I took on a ridiculous deadline. I let my manager (who wrote zero lines of code) make key architectural decisions.

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.

Why HTML?

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

Why HTML?Netﬂix does incrementalupdates and heavy A/B testing.Entire UI can be overhauledwithout requiring a trip to theApp Store.

Why HTML?Netflix does incrementalupdates and heavy A/B testing.Entire UI can be overhauledwithout requiring a trip to theApp Store.Bugs fix very quickly; the firstone we had was on launch day,and was handled in 15 minutes.

How To Tell HTML from HTML5

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

How To Tell HTML from HTML5Try it out on Internet Explorer.*Did it work?

How To Tell HTML from HTML5Try it out on Internet Explorer.*Did it work?No?

How To Tell HTML from HTML5Try it out on Internet Explorer.*Did it work?No?Its HTML5.

*Except IE9

*Except IE9IE9 launched the day after Igave this talk at SxSW.

*Except IE9IE9 launched the day after Igave this talk at SxSW.Everything I like to play with(shadows, round corners,gradients, canvas) works like achamp.

*Except IE9IE9 launched the day after Igave this talk at SxSW.Everything I like to play with(shadows, round corners,gradients, canvas) works like achamp.Now if we just had proper DOM-compatible JavaScript, lifewould be complete.

UI MistakeI tried to use native formcontrols.

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

Search Box

Search Boxinput type=search didnt work.

Search Boxinput type=search didnt work.Had to hand-whittle the borders,the little magnifying glass, andthe progress indicator.

Search Boxinput type=search didnt work.Had to hand-whittle the borders,the little magnifying glass, andthe progress indicator.Goofy timing issues on focus()and blur().

Search Boxinput type=search didnt work.Had to hand-whittle the borders,the little magnifying glass, andthe progress indicator.Goofy timing issues on focus()and blur().Blew up on Android.

The Damn Keyboard

The Damn KeyboardCould not be raised or loweredprogramatically.

The Damn KeyboardCould not be raised or loweredprogramatically.(Youd think focus() and blur()would do it, but youd be wrong.)

The Damn KeyboardCould not be raised or loweredprogramatically.(Youd think focus() and blur()would do it, but youd be wrong.)Shoved the UI up and failed toshove it all the way back down.

The Damn KeyboardCould not be raised or loweredprogramatically.(Youd think focus() and blur()would do it, but youd be wrong.)Shoved the UI up and failed toshove it all the way back down.Blew steaming chunks onAndroid.

Really Enormous MistakeI attempted to replicate nativescrolling using HTML, CSS, andJavaScript.

Scrolling

ScrollingHad to provide nativeperformance, with a ﬁxedheader and footer.

ScrollingHad to provide nativeperformance, with a ﬁxedheader and footer.Had to perform awesomely on a2G iPod Touch.

ScrollingHad to provide nativeperformance, with a ﬁxedheader and footer.Had to perform awesomely on a2G iPod Touch.Was tested by launching the app,immediately scrolling like crazybefore the data had loaded, anddeclaring that it sucked.

I Stole From:

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

I Stole From:PastryKit library (not public atthe time, hard to understand)TouchScroll (basic framework)

I Stole From:PastryKit library (not public atthe time, hard to understand)TouchScroll (basic framework)iScroll (excellent physics)

I Stole From:PastryKit library (not public atthe time, hard to understand)TouchScroll (basic framework)iScroll (excellent physics)Sencha Touch (did not ofﬁciallyexist)

How Scrolling Works

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

How Scrolling Works Kill touchmove default actions with preventDefault(). Listen and respond with CSS transitions, not JS positioning.

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.

Three Windows

Three WindowsMain list, gallery list, and detailspage.

Three WindowsMain list, gallery list, and detailspage.Try not to re-render lists, butalso try not to rely on the DOM.

Three WindowsMain list, gallery list, and detailspage.Try not to re-render lists, butalso 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 were backing into, sometimes we dont. Sometimes the entire gallery has changed, from instant queue to a category gallery.

position:ﬁxed?Yes, position:ﬁxed works onAndroid. http://bit.ly/aj8wylThis is good, because scrollingwith JavaScript is kinda busted.This is bad, because its buggy.http://bit.ly/cCTX6r

webOS position:ﬁxed?Yes, but I have a feeling thatthis wont roll out to everyone.

Webkit Scrolling?Position header and footerabsolutely.Listen for touchstart.Hide the header and footer,scroll the window, and replacewhen done.

Headers in the AppHeader and footer should bepart of the apps framework.Body should be a Web view;native scrolling will take care ofeverything.Throw title info over the wall tonative app using hackyJavaScript 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 ﬁrst 90% of the job takes the ﬁrst 90% of the time. The last 10% of the work takes the remaining 90% of the time.

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

Big MistakeI tried to make the samecodebase work for Android. (Seealso "I let my manager make keyarchitectural decisions.")

Um ... Android?

Um ... Android?When you view source you willdiscover multiple references to"android," so its an open secret.

Um ... Android?When you view source you willdiscover multiple references to"android," so its an open secret.I have absolutely no idea whenor if Netﬂix will launch forAndroid.

Um ... Android?When you view source you willdiscover multiple references to"android," so its an open secret.I have absolutely no idea whenor if Netﬂix will launch forAndroid.I will say this: it was very, veryhard to work on.

More Mistakes

More MistakesI did not push back hard enoughon the design.

More MistakesI did not push back hard enoughon the design.I ignored the applicationframework.

More MistakesI did not push back hard enoughon the design.I ignored the applicationframework.I failed to use some reallyimportant tools.

HTML5data:URIs for CSS backgrounds

HTML5data:URIs for CSS backgroundslocal storage to cache API calls(main list is regenerated daily)

HTML5data:URIs for CSS backgroundslocal storage to cache API calls(main list is regenerated daily)Multipart XHR for images thatnever change but may be servedup in different order (box art).

HTML5data:URIs for CSS backgroundslocal storage to cache API calls(main list is regenerated daily)Multipart XHR for images thatnever change but may be servedup in different order (box art).cache-manifest to store code &framework ofﬂine

Careful, Now:

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

Careful, Now:border-image was very slow torender at different widths.Scrolling using CSS transitionshit an absolute height limit oniPod Touch and iPhone 3

Careful, Now:border-image was very slow torender at different widths.Scrolling using CSS transitionshit an absolute height limit oniPod Touch and iPhone 3box-shadow slowed things downtremendously

Big but Unavoidable MistakeI 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 titleand one for the users rating.

Episodes andbookmarks 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 besigned with oAuth.Cannot be done on the ﬂy by theapplication; too slow.Using JavaScript exposes yourkey and secret.Hack to ﬁx: throw key/secretover the wall with the app onlaunch.

Good news: they may be ﬁxing the API. http://techblog.netﬂix.com

NQL?Netﬂix needs to build somethinglike Yahoo! Query Language.http://developer.yahoo.com/yqlGroup related endpointstogether. Developers need to beable to get everything Netﬂixknows about a customers frontpage, 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?

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

View Source?Netﬂix has taken great care toobfuscate this application.Id like to help you view source,but I cant.

View Source?Netﬂix has taken great care toobfuscate this application.Id like to help you view source,but I cant.I strongly recommend you doNOT do any of the following....

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

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

Dont get all stubborn and trynﬂ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 thisURL into desktop Safari.

Dont inspect or follow any links to JavaScript.

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

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

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

If You Accidentally Happen toGlimpse Some Source, Please Avert Your Eyes, and Assume the Following: Anything that looks broken or brain-damaged is my fault.

If You Accidentally Happen toGlimpse 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.

(awesome demo here)

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.usPlays only on devices with the Netﬂix app installed. Windows phone? Unknown....

Try It Yourself!Please be gentle:http://iﬂx.usRemember, its a two-hour hack.Plays only on devices with the Netﬂix app installed. Windows phone? Unknown....

Try It Yourself!Please be gentle:http://iflx.usRemember, its a two-hour hack.Fork Me On GitHub:https://github.com/kentbrew/iflxPlays only on devices with the Netflix app installed. Windows phone? Unknown....

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

Search LoopcheckSearch : 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 QueryrunSearch: 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-explorerhttp://kentbrewster.com/true-oauth-confessions

Launching a MoviePlays only on devices with the Netﬂix app installed. Windows phone? Unknown....

Launching a Movienflx://www.netflix.com/WiPlayerPlays only on devices with the Netflix app installed. Windows phone? Unknown....

Launching a Movienflx://www.netflix.com/WiPlayer?movieid=[box art movie ID]Plays only on devices with the Netflix app installed. Windows phone? Unknown....

Launching a Movienflx://www.netflix.com/WiPlayer?movieid=[box art movie ID]&episodeid=[episode ID]Plays only on devices with the Netflix app installed. Windows phone? Unknown....

Launching a Movienflx://www.netflix.com/WiPlayer?movieid=[box art movie ID]&episodeid=[episode ID]&returnUrl=[your page]Plays only on devices with the Netflix app installed. Windows phone? Unknown....

Launch Behaviorvar 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 Starbarsli { .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 JSvar 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 ★★★★★ ☆☆☆☆☆

Questions?

Randall Munroe alwayshas the last laugh.

http://blog.pinchzoom.com	844
http://kentbrewster.com	303
http://pinchzoom.com	135
http://freshandmobile.com	62
http://ribot.posterous.com	28
http://lanyrd.com	28
http://paper.li	9
http://twitter.com	6
http://static.slidesharecdn.com	6
http://www.pinchzoom.com	5
http://delvinialinks.posterous.com	3
http://feeds.feedburner.com	3
https://p.yammer.com	2
http://www.techgig.com	2
http://pz.local	1
https://twitter.com	1
http://webcache.googleusercontent.com	1
http://www.hanrss.com	1
http://pinchzoom.local	1
http://www.slideshare.net	1

Mistakes I Made Building Netflix for the iPhone

by kentbrew on Mar 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,442

Statistics

Mistakes I Made Building Netflix for the iPhone — Presentation Transcript