31. History.js PJAX
github.com/balupton/History.js github.com/defunkt/jquery-pjax
• Very extensive • Very simple to implement
• Fixes many browser bugs • Notmuch control on what
happens
• Complex to implement
• No support for IE
• Supports IE with hash-bang
urls
• Continuously improved
32. Rolled out my own based on History.js but
with a PJAX feel to it.
CJAX
Source at gist.github.com/2008643
34. fb-canvas-rails
github.com/cmer/fb-canvas-rails
All the concepts from this presentation
bundled in a demo app!
See it in action at http://apps.facebook.com/fb-canvas-rails
- My name is Carl\n- Prog for 25 years :(\n- Defensio, security suite for the social web\n- first time in a long time i don’t talk about D\n- Working on a new project\n - FB app\n - Social Craigslist on Facebook\n - People interact and communicate around items for sale\n - Not ready to disclose more\n - Still testing a bunch of things before I call this a startup\n\n- While Defensio Defensio\n - Facebook app for protecting pages\n - Little exposure to the FB API\n - Just heard about it mostly\n\n- Been working on this new project for ~3 months\n- And one thing I found is that working with...\n
with Facebook API\n\n
IS A PAIN IN THE ASS\n- API constantly changes\n- API is slow\n- API breaks\n- API is buggy and they don’t care\n- etc\n\n
- However, the fact is that INTERNET LIFE IS FACEBOOK\n\n- 10 years ago, going on the Internet meant the blue E\n- Now it’s FB\n\n
The truth is\n- Most people visit few other websites \n- Spend hours/day on FB, more than on any other sites.\n- Probably more than every other sites combined\n- How people use it:\n - Photo sharing\n - Email\n - Chat\n - Romance\n - Bragging\n - Stalking\n\n- See why FB is very powerful\n\n- Dave McClure says that for a product to be successful, it has to: Make you famous, Get you laid or Make you rich\n - Facebook is all 3\n - Famous: bragging, showing off, self publicity\n - Laid: people hook on (and break up) on FB all the time\n - Rich: FB is the perfect medium for businesses to engage with their customers\n\n- I don’t know of any other platform that can do all 3 so well.\n- Anybody here ever got laid on Twitter? Yeah. I rest my case.\n\n- That’s why having your web presence inside of Facebook or at least well integrating with FB makes sense.\n - everybody’s there\n - Ppl don’t want to leave Facebook\n - Free eyeballs and traffic\n \nBut it’s a pain in the ass.\n\n\n
The project I’m working on is a CANVAS APP\n\nJust an iFrame\n\nThis is the biggest problem I’ve encountered, causing most of the issues\n\nBrowsers react differently\n\nVery few social interaction so far\n\n\n
- FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
- FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
- FB does this for security reasons, mainly to remove the http-referrer header\n- Very problematic for RESTful apps\n- Rails: HTTP verbs are meaningful\n- How many familiar with Rails?\n\n- Path will be useful later\n\n\n- Might be tempted to resort to all kinds of hacks\n- Solution is pretty simple.\n
- Ruby Gem\n- Takes POSTs and convert them to GETs for Rails\n- Also useful for authentication\n\n- My fork\n\n
- When FB post to our app, a signed JSON data structure is sent to our app\n- every single time\n- This info contains info about authenticated user (on FB, and/or with your app)\n\n- but not if our links don’t have target = _top\n- url in url bar never changes\n\n\n
GEM CODE\n\nrack-facebook-signed-request gem exposes the signed_request to our Rails app\n\n- original in facebook.signed_request\n- decrypted in facebook.params\n\n
Explain code\n\n- facebook.params is a hash containing\n - fb uid\n - oauth_token\n - user full name\n - etc depending on permissions given by user\n\n- original in facebook.signed_request\n\nAlso use OmniAuth for FB permissions\n\n
- Can’t rely on cookies in iFrames\n--- click troll ----\n- Mostly on IE. Third-party cookies DISABLED for most users\n - Explain 3rd party cookies\n\n- Doesn’t seem to be the default, so don’t know why\n\n- Impossible to keep a client-based session open\n- Authentication becomes painful\n\n
- Another reason for no cookie in iframe: P3P\n- Again, IE\n\n
One of those things that will take you days to figure out if you’re not familiar with it\n\n
*autotroll*\n\n- Explain P3P (header, privacy related)\n- This is the thing Google and Facebook got in “trouble” for recently.\n- P3P such a stupid broken security mechanism that I personally have NO problem working around it. like most people do.\n\n- After writing a canvas app, you’ll hate IE at least 576% more. guaranteed.\n\n
- Sets the P3P header for every requests\n- Removes it on 304 Not Modified, and remove cookies\n\n- Used it for Defensio for a few years and it worked pretty well\n\n\n
- I do keep a session to make things easier when cookies are enabled\n\n\n\n\n\n---------- NO -----------\n- But when not I do:\n - redirect to apps.facebook.com/my-app \n - session in javascript variable\n \n
- I do keep a session to make things easier when cookies are enabled\n\n\n\n\n\n---------- NO -----------\n- But when not I do:\n - redirect to apps.facebook.com/my-app \n - session in javascript variable\n \n
- When no session and need to figure out who the user is\n\n- Redirecting to the iframe will cause Facebook to POST a signed request to our app\n\n- Very slow\n - reloads the iframe every time\n\n- The workaround for the workaround is to\n
Similar to PJAX (github)\n\n- Explain PJAX\n\nAjax requests won’t send session cookie if cookies are not enabled\n
The biggest hack in the history of mankind\n\nEncrypted session in javascript hash\n\nJust like Rails does CookieStore, but instead of passing the session around in a cookie, we pass it around with Javascript\n\nWhen a page loads, it has its cookie data in the <head> of the page\n\nThis is transparent for the server-side\n\n
The biggest hack in the history of mankind\n\nEncrypted session in javascript hash\n\nJust like Rails does CookieStore, but instead of passing the session around in a cookie, we pass it around with Javascript\n\nWhen a page loads, it has its cookie data in the <head> of the page\n\nThis is transparent for the server-side\n\n
- one of the most annoying problems\n- back button always goes back to previous page on FB\n- only way around that. AJAX! Use PushState\n- Explain pushstate\n- click troll --- Not supported in IE\n\n\n
- one of the most annoying problems\n- back button always goes back to previous page on FB\n- only way around that. AJAX! Use PushState\n- Explain pushstate\n- click troll --- Not supported in IE\n\n\n
\n
CJAX, as in Carl JAX :)\n\n- History.js and hash-bang urls are very broken in iframes and IE\n- Can&#x2019;t really rely on that.\n- On IE, each CJAX link actually in window.top.location \n- Slower but works. Punishment for using a crappy browser.\n\n- To make this work, just add the .cjax class on A tags\n\n\n\n
- haven&#x2019;t done much frontend development in the last few years\n- bug bite me in the ass\n- ie fails when developer toolbar is not open\n\n
