Friday, October 13th, 2006

Flapjax: Functional JavaScript

Category: JavaScript, Library

Flapjax is a new programming language designed around the demands of modern, client-based Web applications.

It sits on top of JavaScript, and you run the special syntax through a compiler.

You end up writing template code such as this example from the tutorial on setting up style based on behaviour:


  1. <div id="themouse"
  2.   style="{! {color: '#FFFFFF',
  3.              backgroundColor: '#000000',
  4.              position: 'absolute',
  5.              left: mouseLeft_b(document),
  6.              top: mouseTop_b(document),
  7.              padding: '10px'} !}">
  8. the mouse
  9. </div>

You can check out the compiler and play with the example. Note how the example that is already in the compiler states the mouse coordinates and handles updating it as you move the mouse (in the right frame only).


Finally, check out the demos such as Yaggle a Flapjax Yahoo/Google Mashup:


Posted by Dion Almaer at 11:21 am

3.4 rating from 29 votes


Comments feed TrackBack URI

Step backwards. Instead of separation of concerns it encourages spaghetti. Spaghetti is good for dinner with meatballs and a little parmesan. Keep it away from my projects.

Comment by Ryan Gahl — October 13, 2006

what the parent said.

pasta gives me gas.

Comment by Karl Moz — October 13, 2006

Love the name, hate the concept. We spend the last five years convincing people to separate presentation from markup, and someone comes along with a “great idea” that slops them back together.

Comment by Dave — October 13, 2006

Is this from the Onion? A programming language that compiles into script code that runs in a browser?

Comment by Doug — October 13, 2006

Visit the Flapjax Web site and look at the demos. You will see that
we always offer three modes. First, with templating (which you
don’t like). Second, in unobtrusive mode: strict separation of
separation from markup. Third, in raw JavaScript, because you can use
the language just as a JavaScript library (but the code’s a bit more
painful to write).

The tutorial also discusses this in detail. Search for “unobtrusive”
and see the discussion surrounding that point in the document.

Don’t conflate all of Flapjax with one of the three modes of use.
Don’t complain faster than you read. (-:

Comment by Shriram Krishnamurthi, for the Flapjax Team — October 13, 2006

Honeslty… I prefer the plain old Javascript powered by the YUI javascript library.

Comment by rodrigo — October 13, 2006

Flapjax is not functional javascript…it is functional _reactive_ javascript. This is a very interesting concepts which allows a programmer to easily write programs which deal with data which is continously changing.

Imagine displaying the result of “1+someVariable,” where someVariable is set to 1. The result will be “2.” Now imagine someVariable didn’t represent “1” but represented the most recent stock quote. Now “1+someVariable” will continously update the html variable with the most recent stock quote plus one!

Those who are not programmers, or only have experience with client-side javascript may not appreciate how interesting this is.

Comment by falcon — October 13, 2006

the plain old javascript with a few libraries would be my preference too. Google Web Toolkit is worth some time too.

Comment by Google Logs — October 13, 2006

Flapjax helps eliminate your spaghetti code, for both client and server tasks. As in JavaScript, you can provide behavioural advice to a page, except without all the spaghetti callbacks, by providing the functional (and therefor more declarative) behavioural specification. JavaScript is the eyesore – Flapjax is in the early stages of empowering it to support programming styles more natural for the browser environment.
GWT/YUI/Prototype/Mochikit are operating at a lower level than Flapjax. You can see this with Flapjax providing Mochikit style dom tags (ex: DIV(‘hello!’)), but without the ugliness of the event binding system.
To be more explicit, consider the live preview box on this website. In Flapjax, you could either use templating, which I would argue is still declarative in that it lets you purely define the graph of data dependencies:
<textarea id=’myTextareaID’/>
<div><b>Live Preview: <b> {! $B(‘myTextareaID’) !} <div>
Or, if you prefer a seperation between static html and dynamic html (which loses significance if you are ready to write a RIA instead of a flat webpage with a few frills):
insertValue($B(‘myTextareaID’), ‘livepreviewID’, ‘after’); /*the advice*/
<textarea id=’myTextareaID’/>
<div><b id=’livepreviewID’>live preview:</b></div>

Comment by Leo — October 14, 2006

[…] Presentado oficialmente Flapjax (anunciado en Ajaxian), un lenguaje que dice ser un clon de Javascript pero más moderno. Viene provisto de abundante documentación, un compilador online para que puedas practicar, una docena de programas listos para correr en cualquier navegador (excepto IExplorer, por ahora) y un tutorial. Esperemos que se pronuncien los entendidos para conocer las ventajas o especificidades de este nuevo lenguaje, de entrada un tanto difusas. […]

Pingback by despuesdegoogle » Archivo del weblog » Flapjax javascript, un nuevo lenguaje de programación — October 14, 2006

[…] Flapjax, es el palabro de moda en el mundo de la programación web. Pero, ¿que es? y ¿para que sirve? […]

Pingback by Flapjax, se nos viene otro pseudolenguaje - aNieto2K — October 14, 2006

Spaghetti code miam miam

Comment by Italian cook — October 15, 2006

[…] Flapjax, es el palabra de moda en el mundo de la programación web. Pero, ¿que es? y ¿para que sirve? […]

Pingback by gEEK tHE pLANET » Flapjax — October 15, 2006

The behaviour & event system looks really powerfull.

Comment by Philippe — October 16, 2006

I still think IE’s css:expression() was a fine idea. Wish other browsers/W3C agreed…

Comment by Marty — October 16, 2006

New Links (16 Oct)

Database Stuff dataFresh – a new database rollback library for unit tests MassDataHandler is available

Trackback by Hulkster — October 16, 2006

This idea is even better than css:expression().
This idea is like 8395 times better and IMHO other browsers/W3C should look at it.

For those who dont’ understadns this type of programming it will be alway “spaghetti code”. :-) Yes, if you want you can eat it. But I think there are better uses of this lib (-:

GreetZ : )

Comment by boczek — October 16, 2006

the fact that it can elliminate callbacks is enough to make me look closely at what flapjax is up to. the fact that it caters to live event streams without need to do polling like most to all ajaxified functions do…. is enough to make me experiment with this. the fact that i dont need to run a java pushlet to achieve the live dynamic data streams is sweet. there are other comet related libs out there too but none seem as innovative and potentially groundbreaking as flapjax…. as far as i can see.


Comment by sull — October 31, 2006

Jesus ! it’s incredible how people shoot from the hip! If you don’t understand what this is about, spare us your sarcasms… you won’t look like such idiots

Comment by Paul J — January 22, 2007

Let me just point out that I agree with the previous poster. I would even go as far as stating that all the people going on about spaghetti are stupid reactive naysayers who wouldn’t recognize a good abstraction if it bit them in the ass.

Comment by Marijn — February 27, 2007

Leave a comment

You must be logged in to post a comment.