+ All Categories
Home > Technology > Washington Post Social Reader: FB Hack Preso 01-18-2012

Washington Post Social Reader: FB Hack Preso 01-18-2012

Date post: 25-Dec-2014
Category:
Upload: charles-covey-brandt
View: 1,630 times
Download: 3 times
Share this document with a friend
Description:
Deck from FB Hackathon NYC, January 18 2012
53
by
Transcript
Page 1: Washington Post Social Reader: FB Hack Preso 01-18-2012

by

Page 2: Washington Post Social Reader: FB Hack Preso 01-18-2012

september launch

8 million installs

18-35 demographic

Page 3: Washington Post Social Reader: FB Hack Preso 01-18-2012

mobile HTML5

double digit traffic

native (coming soon)

Page 4: Washington Post Social Reader: FB Hack Preso 01-18-2012
Page 5: Washington Post Social Reader: FB Hack Preso 01-18-2012

FB.api(‘/me/news.reads’, {method: ‘POST’})

Page 6: Washington Post Social Reader: FB Hack Preso 01-18-2012
Page 7: Washington Post Social Reader: FB Hack Preso 01-18-2012
Page 8: Washington Post Social Reader: FB Hack Preso 01-18-2012

mobile HTML5

double digit traffic

native (coming soon)

Page 9: Washington Post Social Reader: FB Hack Preso 01-18-2012

1. coding for the futures

Page 10: Washington Post Social Reader: FB Hack Preso 01-18-2012

1. coding for the futures

“<coding for the futures” +

Page 11: Washington Post Social Reader: FB Hack Preso 01-18-2012

everything you write effects possible futures

“coding for the futures” +

Page 12: Washington Post Social Reader: FB Hack Preso 01-18-2012

be deliberate when you have to do it wrong

“coding for the futures” +

Page 13: Washington Post Social Reader: FB Hack Preso 01-18-2012

architect for the foreseeable futures

“coding for the futures” +

Page 14: Washington Post Social Reader: FB Hack Preso 01-18-2012

short term futures

Page 15: Washington Post Social Reader: FB Hack Preso 01-18-2012

window.FB.api(‘/me’, callback)

Page 16: Washington Post Social Reader: FB Hack Preso 01-18-2012

window.Auth = {getMe: function(callback){

FB.api(‘/me’, callback);}}

Page 17: Washington Post Social Reader: FB Hack Preso 01-18-2012

window.Auth = {getMe: function(callback){

$.get(GRAPH_URI+‘/me?’+ ‘access_token=’+at, callback)

}}

Page 18: Washington Post Social Reader: FB Hack Preso 01-18-2012

and long term futures

Page 19: Washington Post Social Reader: FB Hack Preso 01-18-2012

backbone.js and REST JSON api before we could even support

single page

Page 20: Washington Post Social Reader: FB Hack Preso 01-18-2012

closed off the fewest future options

Page 21: Washington Post Social Reader: FB Hack Preso 01-18-2012

conceived, design, built, and shipped mobile in 6 weeks

Page 22: Washington Post Social Reader: FB Hack Preso 01-18-2012

coding for the futures

“coding for the futures />”

Page 23: Washington Post Social Reader: FB Hack Preso 01-18-2012

2. building mobile second

Page 24: Washington Post Social Reader: FB Hack Preso 01-18-2012

2. building mobile second

“<building mobile second” +

Page 25: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second” +

makes us (me) feel better =)

Page 26: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second” +

but we learned a lot, too

Page 27: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second” +

mobile and web are facets of the same

product

Page 28: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second” +

it will probably be multiplatform at the end of

the day no matter what

Page 29: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second” +

use <platform> second as a chance to rethink the core of

your experience

Page 30: Washington Post Social Reader: FB Hack Preso 01-18-2012

social reading had no conventions or

boundaries

Page 31: Washington Post Social Reader: FB Hack Preso 01-18-2012

screen shot of first app implementation

Page 32: Washington Post Social Reader: FB Hack Preso 01-18-2012

used mobile to rethink boundaries

Page 33: Washington Post Social Reader: FB Hack Preso 01-18-2012
Page 34: Washington Post Social Reader: FB Hack Preso 01-18-2012
Page 35: Washington Post Social Reader: FB Hack Preso 01-18-2012

we’ll roll mobile learning back into web app

Page 36: Washington Post Social Reader: FB Hack Preso 01-18-2012

and then do the whole thing again

Page 37: Washington Post Social Reader: FB Hack Preso 01-18-2012

“building mobile second />”

building mobile second

Page 38: Washington Post Social Reader: FB Hack Preso 01-18-2012

some tips and tricks

for HTML5 and single page apps

Page 39: Washington Post Social Reader: FB Hack Preso 01-18-2012

avoid these two

Page 40: Washington Post Social Reader: FB Hack Preso 01-18-2012

HTML in your views

View.render = function(name){return ‘<span>’+name+‘<span>’}

Page 41: Washington Post Social Reader: FB Hack Preso 01-18-2012

lots of keys in localStorage

window.localStorage.length > 1000

Page 42: Washington Post Social Reader: FB Hack Preso 01-18-2012

‘tis good stuff

Page 43: Washington Post Social Reader: FB Hack Preso 01-18-2012

black box your js templates

$(‘.fp’).html(Templates.facepile(peopleJSON))

Page 44: Washington Post Social Reader: FB Hack Preso 01-18-2012

get javascript weekly

javascriptweekly.com/

Page 45: Washington Post Social Reader: FB Hack Preso 01-18-2012

don’t wait for the FB js sdk

fbQueue = $.Deferred();fbAsyncInit = function(){fbQueue.resolve()}

Page 46: Washington Post Social Reader: FB Hack Preso 01-18-2012

for native SSO around HTML5, try passing the tokens

if(access_token && user_id){_startApp()} else {Auth.getUserAuth(_startApp)}

Page 47: Washington Post Social Reader: FB Hack Preso 01-18-2012

consolidate you data structures around spec

ActivityStreamsArticle = {objectType: ‘article’,id: ‘x6hf3’,url: ‘https://myapp.com/a/x6hf3’}

Page 48: Washington Post Social Reader: FB Hack Preso 01-18-2012

/* clowntown */

Page 49: Washington Post Social Reader: FB Hack Preso 01-18-2012

handwritten templates

template = function(data){return ‘<div></div>’};

Page 50: Washington Post Social Reader: FB Hack Preso 01-18-2012

our stack

Page 51: Washington Post Social Reader: FB Hack Preso 01-18-2012

on ye old client

requirejsjQueryunderscoreBackboneamplify.storetypekit.js

RESTful routescoffeescriptless

Page 52: Washington Post Social Reader: FB Hack Preso 01-18-2012

on ye old backend

AWS Cloud Services

pythonpyramid

groovygrails

MySQL, SimpleDB, Redis, Memcache

Page 53: Washington Post Social Reader: FB Hack Preso 01-18-2012

questions

[email protected]


Recommended