Facebook Hack Day, Palo Alto, CA
October 28, 2011 by Lisa Oshima | Developers, Events, Mobile, Social MediaI’m at Facebook’s headquarters in Palo Alto, CA today to hear about Facebook’s new HTML5 platform… I’ll be updating my notes from the event throughout the day, below. Refresh regularly:
First up… Mark Zuckerberg.
- 350,000,000 people monthly are touching Facebook’s mobile apps. Facebook is pushing on mobile and thinks it’s going to be a big opportunity for developers.
- On mobile apps, social infrastructure has been missing. The app store model is a good way to get distribution, but developing your apps so that they’re fundamentally social will also give you better distribution through the social graph.
- The vision for Facebook’s mobile apps. Facebook thinks that all apps will eventually become social. Mark says he wants Facebook to be on every phone and as deeply integrated into many devices as possible.
- Apps need to be able to work everywhere. Facebook is investing in web technologies in HTML5 and Javascript so that your apps can work many places.
- It’s not just about a web platform that works across devices, in any of the places where Facebook can link to native apps – iphone, ipad, android apps, they support native development as well. Facebook is investing in both web and native.
- Facebook is sending millions of clicks to developers that are working with them on v1 and v2 of these mobile releases.
Luke Shepard, Mobile Platform Engineer, is going to give a technical talk next…
- Mobile users are twice as engaged on Facebook as other users.
- We have a large desktop ecosystem launched 4.5 years ago. We have many multimillion dollar companies built on that from scratch.
- These companies built themselves on the social graph, and this is great, but until now, mobile companies haven’t been able to do this.
- Social apps need to be cross platform, and users need to be able to communicate with friends – regardless of what platform they’re on – iphone, android, etc.
- Luke is going over the three ways you can improve viral growth in mobile development:
- “Requests” dialog, which has been launched on mobile. It works in any native apps as well as mobile web apps…. This is the social loop. You send a request, a user requests it and ends up in your app.
- They also introduced a “News Feed” dialog. This allows users to add comments, and personal insight into your app: Posting, view on wall, view on newsfeed….Facebook filters this so that this only works if you’ve configured your app to work on mobile.
- “Open Graph” stories from the web will turn up on mobile and mobile will turn up on web. They’ll turn up wherever your app is configured to work.
- Developer’s apps are now integrated into the Facebook experience in the form of “Bookmarks”. Your apps are now integrated into the experience.
- “Payments” is another pain point for developers. Mobile web payments can happen via Visa and Paypal.
- Facebook is encouraging developers to “build Social from the ground up” Users now authenticate with Facebook before they use your app, so that there’s no install process, no bouncing back and forth to Facebook.
- Social apps should work everywhere… Today, it’s expensive to make tons of different apps on different platforms. Facebook believes that you can have a unified code base by putting everything on the web – Javascript, CSS, HTML5… Facebook believes that in the future, the biggest businesses will be build on this seamless web technology.
Matt Kelly and Ragu (sp) are going through a code walkthrough. They’re going to build a social app from scratch in 10 minutes…
- Go to developers.facebook.com/apps… Now there’s additional checkbox so that you can add your web apps
- There’s a thing called authenticated referrals that allows the user to be immediately authenticated when they hit your app.
- They’re starting by building a simple HTML5 page… I’ll spare you the details… They’re opening the simulator, and building away…
- And, they built an app that allows you to find people with similar Facebook Likes. Fun app and very easy to build.
After lunch now…
The Senior Partner Manager for Wooga is now up.
- Founded in 2009.
- They’ve got 6 games out there.
- He’s talking about the time line of their launch for their game Magic Land: May 11- October 11, which uses HTML5
- For the first release they use “News Feed” and “Requests” from Facebook inside their app
- To set up this game, they used Amazon Web Servies and Scalarium. Their back-end stack is HAProxy, nodeJS, and riak
- Performance:
- Canvas: Their bet on the future
- Benchmark for your game’s specific needs – don’t rely on others’ benchmarks
- Buffer, don’t update: optimize drawing operations (dirty rectangles)
- Enforce native scale.
- Loading and Caching
- Save game state in local storage, synce with server for persistent game
- Throttle client-server requests to reduce network and server load
- Combine images into sprites
- Combine and minimize style sheets and scripts
- Use HTTP caching aggressively, but rename files when the content changes, so caching doesn’t get in the way.
- Prioritize list of files inside the Cache Manifest
- No dynamic pages – all files are delivered from the CDN
- Three sets of assets for different resolutions
- Summary of his thoughts:
- HTML5 on mobile is still young and documentation is sparse
- He thinks iOS WebKit is better than Android WebKit in features, tooling and performance
- Interaction design for touch devices is a challenge
- He gives us a glimpse into what’s coming in the future:
- Gameplay connections between Flash and HTML version
- Native Wrapper: getting onto the App Store
- More social features
- Pirates!
A couple of other developers came up to share technical best practice…
Dave Johonson from PhoneGap is now up. They were just acquired by Adobe. Visit: http://github.com/callback/
- Here’s how PhoneGap works:
- Embed a chromeless browser in a native app
- create a “bridge” between the browser and the antive code
- write a web app
- package the web app with the native code and deploy
- They support iOS, Android, BlackBerry, webOS, Symbian, Windows Phone, and Samsung Bada
- MIT/BSD/APACHE: Originally it was under MIT/BSD license… Now they’re moving to APACHE 2.0 license
- They have a large community – “better than a technicolor wolf with Eagle’s wings” (he’s showing a great graphic here)
- PhoneGap is doing very well with mindshare – largely because of the open sourced nature of the project
- Thousands of apps have been build with PhoneGap… 15-20,000 apps in the Apple App store made with PhoneGap
- Contributors to PhoneGap include: Adobe, Microsoft, IBM, RIM, HP/Palm
- Users of PhoneGap include: Alcatel-Lucent, Zynga, Microsoft, Travelocity, Vodafone, Wikipedia and others
- When you’re designing your app, think about mobile first… Look at use cases for mobile and don’t just tack on a mobile strategy at the end of your web strategy
- HTML(5) can be wrapped in PhoneGap to yield native apps
- He’s going over a lot of technical demos..
- @davejohnson @phonegap
And, we’re back from the break… If you’re interested in the hack day, you can join this group on Facebook: http://www.facebook.com/groups/249308791784214/
Now up… Jonathan Matus, Manager Mobile Platform Product Marketing and Christine Abernathy, Partner Engineer to talk about the Mobile Open Graph…
- Jonathan is talking about Nike Plus… He tried running once, and he is recalling how several years ago, he hit the 100 mile marker using Nike Plus, and he wanted to share this achievement through Facebook. At the time, he had to cut and paste an icon from Nike’s website, save it and then upload it to Facebook. These days, if Nike were to enable Open Graph, he could have just added the picture automagically to Facebook.
- Jonathan is also describing how music is shared… It’s not seamless. The Open Graph can help with this.
- There’s a focus on actions and objects in Open Graph… Developers should think through which objects users need on the go.
- He’s going through some examples of different apps that are using the Open Graph…
- There’s a book recommending app… Kobo (iOS). You can list your favorite books, and highlight your favorite quotes from a book and share those with your friends using Open Graph
- Another example app is Color – the way that they’re sharing pictures and videos leverages Open Graph.
- When you use color, you log in with Facebook, so all of your Facebook pictures are shown to you in a compelling way
- You can take a picture, and because it’s connected to Open Graph, your pictures show in your Facebook Ticker.
- Open Graph also allows you to share common experiences more easily
- You can also Host… The Facebook Ticker will show your friends where you are, and allow you to broadcast live video streams of events to your friends.
- How should you use Open Graph?
- Christine is demoing a gifting app…
We’re moving towards the very technical part of the agenda, so I’m jumping out…