Olgun Cakabey Inam Soomro April 2011 PLATFORM ARCHITECTURE
Face b ook at a Glance General Design Principles Facebook Platform Architecture Overview XML Webservice WebService Authentication Handshake FQL Applications on Facebook FBML FBJS What We’ve Learned Today/Conclusions Agenda
“ Show me your flowcharts and conceal your tables, and I shall continue to be mystified. Show me your tables, and I won’t usually need your flowcharts; they’ll be obvious.” -Fred Brooks, The Mythical Man-Month
Facebook Platform
Face b ook at a Glance THE SOCIAL GRAPH Facebook Platform  launched  in May 24, 2007 More than one million developers and entrepreneurs from more than 180 countries More than 550,000 active applications currently on Facebook Platform Every month, more than 70% of Facebook users engage with Platform applications More than 250,000 websites have integrated with Facebook Platform More than 100 million Facebook users engage with Facebook on external websites every month *  http://www.facebook.com/press/info.php?statistics
General Design Principles Open Source Unix Philosophy Keep individual component simple yet performant Concentrate on clean interface point Build everything for a scale Try to minimize failure points Simplicity, simplicity and simplicity…
Facebook Application Architecture Under the covers Get Profile data Get Friend connections In Parallel fetch photos Execute rendering logic in PHP Return Data and make users happy
Facebook Platform Facebook developer defines Facebook Platform as: “ A standard based web service with methods for accessing and contributing Facebook data.” It offers reliable and consistent methods to exchange ınformatıon between itself and thırd parties. Handle relationship between the facebook users. Offers methods of interactions between users
Facebook Platform What comes with Facebook Platform Facebook Platform Application Programming Interface (Facebook API) A query language - Facebook Query Language (FQL) A data-driven markup language – Facebook Markup Language (FBML) Facebook JavaScript (FBJS)
FB API FB API Provides a range of API methods for its application developers. Some API methods Method  Description Friends.getList Returns the identifier for the current user’s Facebook Friends List Pages.isFan Check whether a user is a fan of specified page Photos.addTag Adds a tag along with given information on to the photo Users.setStatus Updates a user’s Facebook Status
FQL A way to query Facebook Data Same syntax as Standard SQL Advantages of FQL More Efficient Can reduce the number of requests Language Independant FQL syntax: SELECT [fields] FROM [table] WHERE [condition] Example: SELECT Name, Pic, FROM users WHERE uid = 1234
FB Data as a Social Web Service FB data can be accessed through an externally accessible web service Application stack consumes the Facebook data as webservice
Web Service Authentication Handshake
Thrift: Enable Transparent interaction between   and some others too… Open Source Cross-Language inter process communication
Thrift Lightweight software framework for cross-language development S tatically generate code Supported bindings: C++, PHP, Python, Java, Ruby, Erlang, Perl, Haskell. Employing a beautiful tool like Thrift provides: Automatic type synchronization Automatic binding generation Automatic documentation Cross-language synchronization
Applications on Facebook Directly rendering HTML, CSS, and JS iFrames FBML as data-driven execution markup
Directly rendering HTML, CSS, and JS Using just two new fields names:  application_name and callback_url For example: application_name = tartuuniversity callback_url =  http://ut.ee/fbapp/ http://ut.ee   declares that it will service user requests to url like  http://apps.facebook.com/tartuuniversity/PATH?QUERY_STRING   on its own servers, at  http://ut.ee/fbapp/PATH?QUERY_STRING
iFrames http://apps.facebook.com/tartuuniversity/PATH?QUERY_STRING  results in HTML output like this: <iframe src=“ http://ut.ee/fbapp/PATH?GET_STRING ”></iframe>
FBML Acronym for Facebook Markup Language Variant-evolved subset of HTML br, div, li, span, etc. Facebook specific tags fb:create-button, fb:dashboard, fb:error, fb:message, etc. An instantiation of XML therefore it consists of tags, attributes and content.
FBML These tags fall into some conceptual categories: Direct HTML tags Exact HTML tags no difference with original ones Data-display tags <fb:profile-pic uid=“8055”> Data-execution tags <fb:-if-can-see> Design-only tags Look&Feel, <fb:tabs> Replacement HTML tags For modifying or restricting a certain set of parameters; <fb:flv> Functionality package tags <fb:friend-selector>
FBML
FBML vs. iFrame FBML iFrame Has a consistent look and feel Enables existing apps to get up and running quicker Uses FBML elements Makes it easier to maintain a common code base May offer improved performance
function foo(bar) { var obj = {property: bar}; return obj.property; }  becomes function   a12345_ foo( a12345_ bar) { var   a12345_ obj = {property:  a12345_ bar}; return   a12345_ obj.property; }   FBJS
What We’ve Learned Today/Conclusions FBML plays important role in building applications until.. * By the end of 2010, Facebook will no longer be accepting new FBML applications, but will continue to support existing FBML tabs and applications. Facebook recommends the use of iframes for new application development. *  http://developers.facebook.com/roadmap/
THANK YOU ANY QUESTIONS?

Facebook plateform architecture presentation

  • 1.
    Olgun Cakabey InamSoomro April 2011 PLATFORM ARCHITECTURE
  • 2.
    Face b ookat a Glance General Design Principles Facebook Platform Architecture Overview XML Webservice WebService Authentication Handshake FQL Applications on Facebook FBML FBJS What We’ve Learned Today/Conclusions Agenda
  • 3.
    “ Show meyour flowcharts and conceal your tables, and I shall continue to be mystified. Show me your tables, and I won’t usually need your flowcharts; they’ll be obvious.” -Fred Brooks, The Mythical Man-Month
  • 4.
  • 5.
    Face b ookat a Glance THE SOCIAL GRAPH Facebook Platform launched in May 24, 2007 More than one million developers and entrepreneurs from more than 180 countries More than 550,000 active applications currently on Facebook Platform Every month, more than 70% of Facebook users engage with Platform applications More than 250,000 websites have integrated with Facebook Platform More than 100 million Facebook users engage with Facebook on external websites every month * http://www.facebook.com/press/info.php?statistics
  • 6.
    General Design PrinciplesOpen Source Unix Philosophy Keep individual component simple yet performant Concentrate on clean interface point Build everything for a scale Try to minimize failure points Simplicity, simplicity and simplicity…
  • 7.
    Facebook Application ArchitectureUnder the covers Get Profile data Get Friend connections In Parallel fetch photos Execute rendering logic in PHP Return Data and make users happy
  • 8.
    Facebook Platform Facebookdeveloper defines Facebook Platform as: “ A standard based web service with methods for accessing and contributing Facebook data.” It offers reliable and consistent methods to exchange ınformatıon between itself and thırd parties. Handle relationship between the facebook users. Offers methods of interactions between users
  • 9.
    Facebook Platform Whatcomes with Facebook Platform Facebook Platform Application Programming Interface (Facebook API) A query language - Facebook Query Language (FQL) A data-driven markup language – Facebook Markup Language (FBML) Facebook JavaScript (FBJS)
  • 10.
    FB API FBAPI Provides a range of API methods for its application developers. Some API methods Method Description Friends.getList Returns the identifier for the current user’s Facebook Friends List Pages.isFan Check whether a user is a fan of specified page Photos.addTag Adds a tag along with given information on to the photo Users.setStatus Updates a user’s Facebook Status
  • 11.
    FQL A wayto query Facebook Data Same syntax as Standard SQL Advantages of FQL More Efficient Can reduce the number of requests Language Independant FQL syntax: SELECT [fields] FROM [table] WHERE [condition] Example: SELECT Name, Pic, FROM users WHERE uid = 1234
  • 12.
    FB Data asa Social Web Service FB data can be accessed through an externally accessible web service Application stack consumes the Facebook data as webservice
  • 13.
  • 14.
    Thrift: Enable Transparentinteraction between and some others too… Open Source Cross-Language inter process communication
  • 15.
    Thrift Lightweight softwareframework for cross-language development S tatically generate code Supported bindings: C++, PHP, Python, Java, Ruby, Erlang, Perl, Haskell. Employing a beautiful tool like Thrift provides: Automatic type synchronization Automatic binding generation Automatic documentation Cross-language synchronization
  • 16.
    Applications on FacebookDirectly rendering HTML, CSS, and JS iFrames FBML as data-driven execution markup
  • 17.
    Directly rendering HTML,CSS, and JS Using just two new fields names: application_name and callback_url For example: application_name = tartuuniversity callback_url = http://ut.ee/fbapp/ http://ut.ee declares that it will service user requests to url like http://apps.facebook.com/tartuuniversity/PATH?QUERY_STRING on its own servers, at http://ut.ee/fbapp/PATH?QUERY_STRING
  • 18.
    iFrames http://apps.facebook.com/tartuuniversity/PATH?QUERY_STRING results in HTML output like this: <iframe src=“ http://ut.ee/fbapp/PATH?GET_STRING ”></iframe>
  • 19.
    FBML Acronym forFacebook Markup Language Variant-evolved subset of HTML br, div, li, span, etc. Facebook specific tags fb:create-button, fb:dashboard, fb:error, fb:message, etc. An instantiation of XML therefore it consists of tags, attributes and content.
  • 20.
    FBML These tagsfall into some conceptual categories: Direct HTML tags Exact HTML tags no difference with original ones Data-display tags <fb:profile-pic uid=“8055”> Data-execution tags <fb:-if-can-see> Design-only tags Look&Feel, <fb:tabs> Replacement HTML tags For modifying or restricting a certain set of parameters; <fb:flv> Functionality package tags <fb:friend-selector>
  • 21.
  • 22.
    FBML vs. iFrameFBML iFrame Has a consistent look and feel Enables existing apps to get up and running quicker Uses FBML elements Makes it easier to maintain a common code base May offer improved performance
  • 23.
    function foo(bar) {var obj = {property: bar}; return obj.property; } becomes function a12345_ foo( a12345_ bar) { var a12345_ obj = {property: a12345_ bar}; return a12345_ obj.property; } FBJS
  • 24.
    What We’ve LearnedToday/Conclusions FBML plays important role in building applications until.. * By the end of 2010, Facebook will no longer be accepting new FBML applications, but will continue to support existing FBML tabs and applications. Facebook recommends the use of iframes for new application development. * http://developers.facebook.com/roadmap/
  • 25.
    THANK YOU ANYQUESTIONS?