Mistakes I MadeBuilding Netflix for the iPhone      Kent Brewster        @kentbrew http://kentbrewster.com
In This TalkAbout MeAbout Life at NetflixMistakes 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 GamingGe...
My Qualifications
My QualificationsNo Degree or Training inAnything Remotely Relevant
My QualificationsNo Degree or Training inAnything Remotely RelevantIn the Right Place at the RightTime, with the Right Amou...
My QualificationsNo Degree or Training inAnything Remotely RelevantIn the Right Place at the RightTime, with the Right Amou...
Even More About Me WebMD, 1984-2003. (Yeah, seriously, nineteen years.) Yahoo, 2004-2009. Netflix, 2009-2010. These days? V...
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 wi...
Um ... "Vurve?"Vurve makes the process ofadvertising online suck a wholelot less for small businesses.Currently playing wi...
Vurve, if IE < 8
Life at Netflix
Life at NetflixThey pay you what youre worth.
Life at NetflixThey pay you what youre worth.They dont track your vacation.
Life at NetflixThey 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 you...
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-ThroughNetflix Widgets
Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetflix WidgetsFirst API-Based Prototype
Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetflix WidgetsFirst API-Based PrototypeTrickplay in HTML
Things I Worked OnFacebook Connect (v1)OAuth Walk-ThroughNetflix WidgetsFirst API-Based PrototypeTrickplay in HTMLNetflix fo...
iPhone Chronology
iPhone ChronologyApril 1st: iPad ships with Netflix
iPhone ChronologyApril 1st: iPad ships with NetflixApril 4th: invited to lead iPhone
iPhone ChronologyApril 1st: iPad ships with NetflixApril 4th: invited to lead iPhoneApril 9th: working prototype
iPhone ChronologyApril 1st: iPad ships with NetflixApril 4th: invited to lead iPhoneApril 9th: working prototypeApril 23rd:...
iPhone ChronologyApril 1st: iPad ships with NetflixApril 4th: invited to lead iPhoneApril 9th: working prototypeApril 23rd:...
Surprise the First       April 19th: iPhone 4       on Gizmodo.
Surprise the Second       June 7th: Reed shows       the prototype at       Apples Worldwide       Developer Conference,  ...
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 architectur...
First Three Mistakes I took on a ridiculous deadline. I let my manager (who wrote zero lines of code) make key architectur...
Why HTML?
Why HTML?Netflix does incrementalupdates and heavy A/B testing.
Why HTML?Netflix does incrementalupdates and heavy A/B testing.Entire UI can be overhauledwithout requiring a trip to theAp...
Why HTML?Netflix does incrementalupdates and heavy A/B testing.Entire UI can be overhauledwithout requiring a trip to theAp...
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,gradie...
*Except IE9IE9 launched the day after Igave this talk at SxSW.Everything I like to play with(shadows, round corners,gradie...
UI MistakeI tried to use native formcontrols.
Ratings Selector      I liked this, but the      designer hated the      checkmark, and really      wanted red and gold   ...
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 indica...
Search Boxinput type=search didnt work.Had to hand-whittle the borders,the little magnifying glass, andthe progress indica...
Search Boxinput type=search didnt work.Had to hand-whittle the borders,the little magnifying glass, andthe progress indica...
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 wron...
The Damn KeyboardCould not be raised or loweredprogramatically.(Youd think focus() and blur()would do it, but youd be wron...
The Damn KeyboardCould not be raised or loweredprogramatically.(Youd think focus() and blur()would do it, but youd be wron...
Really Enormous     MistakeI attempted to replicate nativescrolling using HTML, CSS, andJavaScript.
Scrolling
ScrollingHad to provide nativeperformance, with a fixedheader and footer.
ScrollingHad to provide nativeperformance, with a fixedheader and footer.Had to perform awesomely on a2G iPod Touch.
ScrollingHad to provide nativeperformance, with a fixedheader and footer.Had to perform awesomely on a2G iPod Touch.Was tes...
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 ...
I Stole From:PastryKit library (not public atthe time, hard to understand)TouchScroll (basic framework)iScroll (excellent ...
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 ...
How Scrolling Works Kill touchmove default actions with preventDefault(). Listen and respond with CSS transitions, not JS ...
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 i...
Home Position      #viewport {        position: absolute;        top: 0; left: 0;        height: 480px;        width: 320p...
Drag to Scroll      #main {        -webkit-transition:        -webkit-transform        2000ms ease-in;        -webkit-tran...
Tap to Slide     #page {       -webkit-transition:       -webkit-transform       500ms ease-in;       -webkit-transform:  ...
Scroll Gallery Up        #gallery {          -webkit-transition:          -webkit-transform          2000ms ease-in;      ...
Tap to Open Details         #page {           -webkit-transition:           -webkit-transform           500ms ease-in;    ...
Going Back is Hard        Sometimes we need to        reset the list were        backing into, sometimes        we dont.  ...
position:fixed?Yes, position:fixed works onAndroid. http://bit.ly/aj8wylThis is good, because scrollingwith JavaScript is ki...
webOS  position:fixed?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, ...
Headers in the AppHeader and footer should bepart of the apps framework.Body should be a Web view;native scrolling will ta...
Why We Quit Working  On The Scrolling
Why We Quit Working  On The Scrolling The first 90% of the job takes the first 90% of the time.
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 tak...
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 tak...
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 absolut...
Um ... Android?When you view source you willdiscover multiple references to"android," so its an open secret.I have absolut...
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 reallyim...
HTML5
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...
HTML5data:URIs for CSS backgroundslocal storage to cache API calls(main list is regenerated daily)Multipart XHR for images...
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...
Careful, Now:border-image was very slow torender at different widths.Scrolling using CSS transitionshit an absolute height...
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 ...
Episodes andbookmarks are hard. For each episode in a series, create a stand-alone call for that episode and append it to ...
All calls must besigned with oAuth.Cannot be done on the fly by theapplication; too slow.Using JavaScript exposes yourkey a...
Good news: they may  be fixing the API. http://techblog.netflix.com
NQL?Netflix needs to build somethinglike Yahoo! Query Language.http://developer.yahoo.com/yqlGroup related endpointstogethe...
Really happening?Yep, looks like like it might be.http://techblog.netflix.com
View Source?
View Source?Netflix has taken great care toobfuscate this application.
View Source?Netflix has taken great care toobfuscate this application.Id like to help you view source,but I cant.
View Source?Netflix has taken great care toobfuscate this application.Id like to help you view source,but I cant.I strongly...
Do not searchhttp://developer.netflix.com    for "ipad open app."
Should you discover the nflx://protocol, dont mess around with it.
Dont get all stubborn and trynflx:// calls on an iPhone or iPad with the Netflix app installed.
If you try to hit an invalid nflx:// 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://jsbeautifier.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: Anythi...
If You Accidentally Happen toGlimpse Some Source, Please Avert     Your Eyes, and Assume the             Following: Anythi...
(awesome demo here)
Try It Yourself!Plays only on devices with the Netflix app installed. Windows phone? Unknown....
Try It Yourself!Please be gentle:http://iflx.usPlays only on devices with the Netflix app installed. Windows phone? Unknown....
Try It Yourself!Please be gentle:http://iflx.usRemember, its a two-hour hack.Plays only on devices with the Netflix app inst...
Try It Yourself!Please be gentle:http://iflx.usRemember, its a two-hour hack.Fork Me On GitHub:https://github.com/kentbrew/...
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...
Search QueryrunSearch: function(q) {  var n = $.f.fn.length;  var id = $.a.k + .f.fn[ + n + ];  var url = $.a.search + ?ex...
OAuth?http://kentbrewster.com/netflix-api-explorerhttp://kentbrewster.com/true-oauth-confessions
Launching a MoviePlays only on devices with the Netflix 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 install...
Launching a Movienflx://www.netflix.com/WiPlayer?movieid=[box art movie ID]&episodeid=[episode ID]Plays only on devices with...
Launching a Movienflx://www.netflix.com/WiPlayer?movieid=[box art movie ID]&episodeid=[episode ID]&returnUrl=[your page]Play...
Launch Behaviorvar playUrl = nflx://www.netflix.com/WiPlayer?;playUrl += movieid= + id;playUrl += &returnUrl=http://yourpage...
ASCII-art Starbarsli {                                 .fullStars, .emptyStars  text-shadow: 0 1px 1px #fff;              ...
Starbar JSvar starContainer = $.f.create({P:{  className:starContainer}});var fullStars = $.f.create({SPAN:{  className:fu...
Starbar, Rendered<p class="starContainer">  <span class="fullStars" style="width:70%">    ★★★★★  </span>  <span class="emp...
Questions?
Randall Munroe  alwayshas the last  laugh.
Upcoming SlideShare
Loading in …5
×

Big but Unavoidable MistakeI used Mistakes I Made Building Netflix for the iPhone

19,760 views

Published on

Big but Unavoidable MistakeI used an inadequate API.

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,760
On SlideShare
0
From Embeds
0
Number of Embeds
1,943
Actions
Shares
0
Downloads
199
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×