Ok, so Nuux is about real-time nightlife information. You can checkout live where friends are partying, checkin to locations and events, message your friends for free, see what’s the hottest venues and generally get insider information about a particular town. To get my motivation behind this project maybe I can explain how it all began:

I was going out with some friends and ended up in a place where we had already paid some cover charge but it was not good at all. How would it be to have some network to check-out what other places and events are like, right now? An app to see where your friends are right now, how they like it, see pics, and recommendations from people just like me?

The idea developed into what has become Nuux right now. Currently you can checkout Nuux as a web platform, a mobile site, and the mobile application. Nuux is tightly integrated into Facebook (Single Sign On, Friend Connect, Publish, Pictures Sharing etc.). This means that for example the there is no actual friend building process required you can just use your connections from Facebook if you like, which are sync’ed on a daily basis.

The Mobile App, which is actually the main part is a 2ME Client available for most of the phones from Nokia, Samsung, SE, LG, Moto (other clients are comming, Blackberry the soonest in about a months time, then iPhone, Android). The website currently only shows a small part of the functionality which is available in Nuux. For example you can let your friends know of your Weekend Plans by linking directly to a venue of your city. Venues can all be filled with user generated content – ratings, tags, comments, pics, and weekend plans. So you can find out what is going to be a popular venue in a particular city on all those attributes.

In the near future we will also offer an API, to enable fellow developers developing their own applications on the Nuux network. If you would like to be notified for an early access, please contact us on developers@nuux.net.

If you would like to get more info please check out the Nuux Blog, or follow Nuux on Twitter .

And yes, please let me know what you think about it either in the comments or on uservoice.

Thanks – and I promise this will be the first and only plug for Nuux, really!

When writing iFrame Apps, think of it like a Connect App. It is essentially the same.

I made the long way round trying to find out what are the specifics of a iFrame app in the Facebook Wiki, Forums, and Google. The Facebook Docs is very unclear about the concrete iFrame functionalities from my point of view. Start reading the Facebook docs substituting Connect with IFrame and you find it way easiert to get along, I found.

The only difference between a iFrame and a Facebook app are the size restrictments of 760px and some friend exchange functions, you probably will not be able to use as an app living inside FB. The other things are the same, since as an iFrame app you are technically another site living on a different server so all the cross-channel communication techniques and security models apply just like for an Connect app.

Also I would stay away from using XFBML whenever possible. XFBML works by parsing your HTML at runtime via Javascript and injecting iframes within your iframe when encountering a XFBML tag. When trying to use the XFBML language for display of Friend Selector, Permission dialogs etc. it tore my site apart and was generally unacceptable slow. I found that this architecture is probably not ready yet for production and it makes your site really slow at times.

$GLOBALS['facebook_config']['debug'] = true;

This will actually insert some script code to the header of every page served, in order to render the tracking code, if there is something to render:



<script type="text/javascript">
var types = ['params', 'xml', 'php', 'sxml'];
function getStyle(elem, style) {
  if (elem.getStyle) {
    return elem.getStyle(style);
  } else {
    return elem.style[style];
  }
}
function setStyle(elem, style, value) {
  if (elem.setStyle) {
    elem.setStyle(style, value);
  } else {
    elem.style[style] = value;
  }
}
function toggleDisplay(id, type) {
  for (var i = 0; i < types.length; i++) {
    var t = types[i];
    var pre = document.getElementById(t + id);
    if (pre) {
      if (t != type || getStyle(pre, 'display') == 'block') {
        setStyle(pre, 'display', 'none');
      } else {
        setStyle(pre, 'display', 'block');
      }
    }
  }
  return false;
}
</script>

The catch is that the script code is always inserted, even if there were no facebook api calls involved. So the script code renders at the top for every page, also when its a JSON AJAX response. This means of course that the JSON will not be parsed on the browse – not good.

I now use other tools to track what requests are being sent back and forth instead between my application and facebook.

Javascript one of the most popular language for web programming. Although it has been around for decades, – coming from Netscape 1995 – it was not until the advent of the Ajax and Web 2.0 when JavaScript came to the spotlight and brought more professional programming attention.

The OpenSource movement of JavaScript frameworks started in 2005 with prototype and script.aculo.us. Since then programming appealing JavaScript based Websites has become so much easier. Nowadays its litteraly possible to mash-up widgets with little to no JavaScript knowledge and set up a stunning page. I would however still recommend for someone not knowing JavaScript first to get the basics and maybe have some JS Reference & DOM Reference handy.

Looking at the core functionality of todays frameworks what do we have?

• DOM Traversal with CSS selectors to locate elements
• DOM Modification: Create/remove/modify elements
• Short syntax for adding/removing Events
• Short syntax for Ajax Request
• Animations (hide/show/toggle) & Transition
• User Interface Widgets (Drag & drop, Tree, Grid, Datepicker, Model Dialog, Menu / Toolbar, Slider, Tabbed Pane)
• Wide Browser Support

On the net you will find a mirrad of comparisons of popular frameworks. The most popular OpenSource and free JS Frameworks available today are:

* Prototype (&Scriptaculous for UI)
* Dojo
* jQuery
* YUI
* Mootools

I would say that all of those have their advantages and drawbacks and there’s not really an obvious winner. It really depends on what you use it for. Some helpful links that helped me choosing are:

Wikipedia – to get a feeling on the features
unbiased functional comparison
Stackoverflow comparing JQuery Dojo and more
Performance comparison

Choosing a framework, as mentioned, depends a bit on how you want to use JavaScript:

Plug-and-Play:

• Drop in a “calendar widget” or “tabbed navigation”
• Little, to no, JavaScript experience required.
• Just customize some options and go.
• No flexibility.

=> Widgets

Some Assembly Required

• Write common utilities
• Click a link, load a page via Ajax
• Build a dynamic menu
• Creating interactive forms
• Use pre-made code to distance yourself from browser bugs.
• Flexible, until you hit a browser bug.

=> Libraries

Down-and-Dirty

• Write all JavaScript code from scratch
• Deal, directly, with browser bugs
• Quirksmode is your lifeline
• Excessively flexible, to the point of hinderance.

=> Raw Java Script

Of course you can also mix different approaches, as you can also mix Frameworks but of course in terms of maintainability and productivity it would better if you don’t have to.

For my personal use case I had the following requirements:

1. Easy to learn with minimal intuitive syntax
2. Lightweight solution
3. Availability of some widgets: Datepicker, Grid, maybe more
4. Appealing Web 2.0 effects
5. Production quality

Right now I have choosen jQuery (incl. jQuery UI) and see how far I get with it. It was to me the most appealing in terms of the above criterias. I am not sure if I need a sophisticated data table, if so I might have another look at YUI data table which seems to me one of the best widgets for this (compare to e.g. this jQuery plugin).

For development i guess its essential to still have a good Javascript support in your IDE and a JavaScript debugger – I use Firebug and Netbeans for this. If you are into Eclipse I strongly suggest to take a look at Aptana, their IDE is really great for JavaScript and PHP, but unfortunately not optimal for Facebook development.

As a last hint: consider using Google Ajax Libs for speed up JS loading on your clients. However do not use it in local development. It just does not work reliable (loads too late etc.)

Netbeans 6.7 with PHP support
Aptana 1.5 (standalone or Eclipse plugin)
Zend Studio 6.1.2 (not free ;( )

My experiences:

• Code completion/parser in Netbeans better than Aptana (Aptana also crashes / gets in a endless loop at points when it cannot parse / code assist a file resulting in java heap exhaustion / cpu up 50%)
• Aptana browser integration & debugger integration is better. I like the tab away browser, and the debugger xdebug works more reliable than in Netbeans – however still has its times when it does just not attach
• Zend Studio: set up was not working ok for me, couldn’t get the debugger working. Script only debugging works.

After switching back and forth between Aptana, Netbeans and Zend studio I guess I settled now with Netbeans. I might startup Aptana occasionally if i have debugger issues. It would be really great if the xdebugger would just work on Netbeans…

What are the big differences to the Java (web) development experience?

• interpreted (no compiler to check for errors, just a parser)
• dynamically typed (->no “parse-time” type checking in the IDE ..)
• essential procedural, object handling completely rewrittten from version 4 to 5 now basic oo functionality
• hunderts of statically callable base function; e.g. very easy to download & store a file: $contents = file_get_contents($url). However you see that many things grew historically without a overall concept: how do you test the existence of a substring in a string strstr | strrpos | stripos (hint 0 equals false))
• Very “close” to the HTTP request-response model
• the script execution is determined by the HTTP request (e.g. check ignore_user_abort )
• MySQL and Postgres integration modules for persistence
• Caching, Pooling is different due to the fact that a PHP process in its pure form only lives during one Web request:3 ways a PHP can run in a Web Server:
  - as CGI wrapper: instance of the php interpreter created and destroyed for every page request
  - module (e.g. mod_php, mod_fastcgi) in a multiprocessor web server like Apache. Apache/FastCGI can reuse php instances
  - plugin to web server

  This means that connection pooling is not really possible.
  Caching:
  - page scope: not necessary in php. All variables within includes are acessible
  - request scope: not supported natively, but can be implemented via session
  - session scope: see PHP Session. Data stored within a text file in php/tmp or similar. Data must be serializable (It is not possible to serialize PHP built-in objects!)
  - application scope: does not exist

• Generally faster code-test iterations.
• Quick infrastructure setup: Apache, php, Apache-php integration (e.g. mod_php), Editor.
• More difficult to manage complex/larger projects because:
  - interpreted & dynamically typed: errors only found at runtime
  - Exception handling difficult
  - OO-shortcomings
  - …

This is just a short list of my thoughts, not striving to achive completeness.

What I am talking about is the testing. Its quite astonishing that this is not thought through at all: Facebook does not offer a Test environment (!). So this means developers have to test their apps in the real Facebook which means. Developers have to create 2 apps one for test one for prod with different configurations canvas urls etc. as well as create Testusers - or they want to annoy their friends with test apps.

If your like me you prefer debugging to changelogginguploadtestchangeuploadtest cycles. With Facebook Apps this was not straigthforward so therefore here is a easy end-to-end explanation for you how to setup your php facebook app for local debugging – which i didnt find on the net.

Prerequisistes: You have apache and php 5.x installed.

1. Set up your computer for portforwarding. Portworward.com has good explanations for all different kind of configurations and routers.
2. Get yourself a alias from dyndns.org, something like myfacebookapp.dyndns.org pointing to your ip. In order to update your dynamic ip if you have one, install the dyndns updater.
3. Try accessing your apache file via your dyndyns alias(myfacebookapp.dyndns.org). Keep in mind that many routers do not support ip loopback, therefore you might need to go through a proxy to do that. Also make sure to configure your firewall to open the ports your forwarding.
4. If this all worked you are ready to setup your php environment. Startup (or install) your php ide of choice with integrated xdebugging for php (like Netbeans 6.7 or Aptana 1.5)
5. You need to configure your php.ini file to support the xdebug. At the end of your php.ini file add:zend_extension_ts=”c:/php/ext/php_xdebug-2.0.5-5.2.dll”
   xdebug.remote_enable=on
   xdebug.remote_handler=dbgp
   xdebug.remote_mode=req
   xdebug.remote_host=localhost
   xdebug.remote_port=9000

   As you see I use windows change your path to the xdebug .dll / .so as you need. You might need to download it from xdebug.org

6. Now you should be ready to startup a debug session of a file locally. Test it
7. In order to debug HTTP Sessions its important that you have the parameter XDEBUG_SESSION_START= (for Netbeans its XDEBUG_SESSION_START=netbeans-xdebug) in your request url. So this gets a bit tricky for facebook apps since facebook is calling the canvas url I think that cannot contain query params (I guess ..) . Anyway no need to try or think either there is a nice firefox plugin that does that for us.

That’s it: Fire up a debugging session in your ide, add a breakpoint in your facebook app and try access your facebook app from facebook. You should end up in your local debugging session.

If you enjoyed this post consider sharing :