Getting Started with Facebook JS (FBJS)

I’ve only recently started developing Facebook Apps and being a strong front-end developer I was very confident that I would be able to pickup FBJS quickly like I have with many other Javascript Frameworks. My confidence what short-lived however, once I discovered that Facebook had a very restricting framework and cache system that would make JS programming something quite a bit less desirable than awesome frameworks like jQuery or Prototype

What you CAN’T do in FBJS

I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:

window.onload in FBJS

Instead of using window.onload to initialize your functions, use setTimeout.

setTimeout( function(){  }, 10 );

Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).

alert alternative for FBJS

Since you can’t use alert or document.write, use Facebook’s dialog box:

new Dialog().showMessage('Dialog', 'This is text');

document.write alternative for FBJS

Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:

<script>
function logOutput(){
    var text = "This will be inserted into my log div";
    document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>

Trouble with JS Arrays in Facebook

For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:

// new Array() is not supported in FBJS
var myarray = [];
myarray[0] = 'stuff';
 
// or
myarray['foo'] = 'bar';
 
// or 
myarray.push('another example');

More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!