Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Fun - A Programming Language for the Realtime Web

August 31st 2010

Marcus Westin has been working on a programming language called Fun that specifically targets the realtime web.

What if you could build realtime web apps with the same ease as you build static web pages in PHP today? Without long polling, event handling and state synchronization, the engineering complexity of realtime web applications would drop by an order of magnitude. There would be a fundamental shift in the way we build the realtime web. This is the future of Fun.

Fun, much like PHP, is a template language that merges markup and logic into a single file.  However, in Fun, unlike PHP, markup is a first class citizen that can be included in the file without quoting it or creating <?php ... ?> blocks.  Fun also automatically updates your UI when data changes, so:

In Fun, when you say “Hello ” user.name, you don’t mean just “render the value of user.name right now”. Rather, you mean “display the value of user.name here, and any time user.name changes update the UI.” In other words, when someone edits their name you see the changes keystroke by keystroke. And you don’t need to write any code for networking, event handling, state synchronization, or DOM manipulation! Fun takes care of all that for you, all you do is map state to UI. Fun, eh?

That realtime data synchronization works for lists as well.  When a new item is added, it will automatically appear in the UI as well!  If you bind an HTML input to a piece of data using the data attribute, it will be synchronized in real time with all other users on the site as well as the data storage layer if there is one keystroke by keystroke.

The Fun language is written in JavaScript on top of Node.js and the PEG.js parser generator.  Once the code has been parsed, pure JavaScript code is generated for both the server and client side.  Fun uses Fin and js.io to synchronize data between the browser and the server in realtime.

To show the simplicity of Fun, and how powerful it can be with only a few lines of code, here is the entirety of a chat app written using the new language.

<div class="compose">
    <input data=Local.newMessage />
    <button clickHandler=sendMessage>Send</button>
</div>

let sendMessage = handler() {
    Global.messages.push({ user: Session.User, text: Local.newMessage })
}

<div class="messages">
    for (message in Global.messages) {
        <div class="message">
            <img src=message.user.pictureURL />
            message.user.name " says:"
            <span class="text"> message.text </span>
        </div>
    }
</div>

Because of the realtime nature of the language, everything will stay in sync across all of the browsers connected!  If you’d like a breakdown on how that code works, you can read this entry on Marcus Westin’s blog.

Amazing work!  You can read an introduction to Fun here, how the chat demo works here, and the code on Github.  Have Fun!