6 ms·

Fun - a new programming language for the realtime web

122 points by marcuswestin 16y ago

"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."

AlphaPlus 16y ago
Sounds fun
parisba 16y ago
This is really awesome!
seanalltogether 16y ago
What they are describing is essentially data binding at the language level. The thing to keep in mind is that "out of sight, out of mind" data binding can result in very slow code, but it's a fantastic pattern for UI dev.
- marcuswestin 16y ago
  The bottleneck with Fun is going to be the network latency. Any piece of UI that needs extra care, e.g. a very long list of items, is implemented in javascript with appropriate lazy rendering.
Twisol 16y ago
Quote - "What if you could build realtime web apps with the same ease as you build static web pages in PHP today?" It's interesting how far we've come, no? PHP-based pages were once considered dynamic.
- Groxx 16y ago
  I'll play devil's advocate: Building static PHP pages is easy (and is demonstrated in the first block of code). So easy it's hard to beat by a significant margin, especially for small projects like this seems geared towards. Building dynamic - much less real-time - PHP pages is not-so-easy, and certainly not that easy. At absolute simplest you have to look into JavaScript as well.
  - xtho 16y ago
    What would be the devil's term for HTML pages? Chiseled in stone?
  - Twisol 16y ago
    I'll admit I was a bit cryptic with my remark. :D I was considering things from a server standpoint when I wrote that comment, and from that sandpoint it's extremely obvious that PHP is dynamic, since the page is constructed every time. But after a few minutes I realized that if you look at it from the client's point of view, the rendered page really is static. It's not always the same between requests, but once it's rendered, it's not likely to change. So you're right in that respect! What I got a kick out of is that my remark could be taken both with and without its tongue-in-cheek intent. It really is amazing that, once upon a time, PHP was considered dynamic. And now we want more!
bobbywilson0 16y ago
This certainly is an interesting idea. It seems to me though that all of your application logic is jammed into a single file at the presentation layer. This might suffice for very small apps, and that's fine if it is your goal. I can't imagine that you just define all of your logic in one file. How would you go about reusing code? Could you potentially separate out logic from your template? I would also like to see how this could be done more unobtrusively. It would also be good to show what the output html looks like after it is compiled to html.
- marcuswestin 16y ago
  Absolutely! You can declare something akin to a function, which takes arguments and emits HTML. Imagine e.g. let taskTemplate = template(task) { <div class="task"> <span class="title">task.title</span> </div> } for (task in tasks) { taskTemplate(task) } I'm not decided on syntax yet. You can definitely separate out logic from template this way. Fun outputs javascript, not HTML - the javascript then builds the DOM.
  - giantfuzzypanda 16y ago
    So if someone has javascript disabled what happens?
  - m0th87 16y ago
    But it still outputs something that is only consumable by web browsers. It seems to me like the potential productivity gains you'd get out of Fun would only be for tightly coupled systems where you're not worried about exposing an API, and all clients use web browsers.
    - narcvs 16y ago
      Web browsers are not so "only" :) pretty good platform to start with if you're going to pick one
      - 16y ago
mgrouchy 16y ago
Is it just me or does this seem like a "Fun" way to code up an unmaintainable mess? Some of the ideas such as the state synchronization stuff is neat, but would probably be better suited as part of another framework/template language.
- marcuswestin 16y ago
  Totally - remains to be seen! Someone should take the underlying realtime datastore (http://github.com/marcuswestin/fin http://github.com/marcuswestin/fin) and bundle it with mustache or <angular/>!
  - mgrouchy 16y ago
    I think that is a potentially fantastic idea.
  - gregwebs 16y ago
    http://github.com/ahe/choco http://github.com/ahe/choco bundles a different js datastore (js-model) with sammy and has mustache support
    - marcuswestin 16y ago
      Nice - the relevant fin API used under the hood by Fun is dead simple: fin.set(id, property, value) fin.observe(id, property, function callback(mutation){}) Would be rockin to see if we could hook up fin to js-model!
jackowayed 16y ago
I notice that you haven't technically OSSed it yet (not released under any license). Is this just an oversight?
- marcuswestin 16y ago
  Sorry about that - fixed in http://github.com/marcuswestin/fun/commit/05870f3f54fda430909dddc9ee47311987e5410b http://github.com/marcuswestin/fun/commit/05870f3f54fda43090...
wazoox 16y ago
Jemplate, anyone? This was already done.
- marcuswestin 16y ago
  Jemplate does not do the realtime stat synchronization across browsers I don't think
asnyder 16y ago
A similar sort of thing is already possible using the NOLOH PHP Framework (http://www.noloh.com http://www.noloh.com) using its Listener Control. Using a quick example similar to the post you can simply do something like: http://noloh.diffpaste.com/#/691/ http://noloh.diffpaste.com/#/691/. Furthermore, you can specify the various options, whether it's stream, short-poll, or long-polling. A video demonstrating it from this past March's Confoo web conference can be found here: http://www.youtube.com/phpframework#p/c/C102458C2FFD8ACF/7/8r0FR0Dx4zE http://www.youtube.com/phpframework#p/c/C102458C2FFD8ACF/7/8... We're also planning to add a more direct syntax in the future so that you can easily set properties of objects directly to a changing data source without having to handle the assignment in a controlled callback, which we initially mandate due to taking the cautious route, thus allowing you to handle for data and security issues. Disclaimer: I'm a co-founder of NOLOH
- Keyframe 16y ago
  Looks rather interesting. I'm not sure I follow licensing options. So it's a framework one cannot use for free in commercial projects? Also, are there any performance reviews of it and is that "Loading..." configurable or hardwired? Thanks. edit: I may be out of the loop a bit, but how does google and other spiders crawl pages like that?
  - asnyder 16y ago
    Loading is configurable, it's just an object like anything else. See LoadIndicator http://dev.noloh.com/#/api/WebPage/LoadIndicator/ http://dev.noloh.com/#/api/WebPage/LoadIndicator/. We're sorry about the confusion regarding licensing. Essentially free for anything non-commercial (open-source, educational, non-profit), and development. We offer free hosted sandboxes, in addition to free downloads for developing. Essentially, you only pay when you go live with a commercial product, and even then we offer affordable options. There will be a comprehensive performance review in an upcoming issue of php|architect magazine. Since the framework is built from the ground-up to be lightweight and on-demand the result is considerable. You can read more about that here: http://www.noloh.com/#/home/&expanded=performance http://www.noloh.com/#/home/&expanded=performance. In regards to the spidering question, see: http://dev.noloh.com/#/articles/Search-Engine-Friendly/ http://dev.noloh.com/#/articles/Search-Engine-Friendly/. You can also read a comprehensive article in this past May's cover story in php|architect, http://www.phparch.com/magazine/2010/may/ http://www.phparch.com/magazine/2010/may/.
necubi 16y ago
From a cursory reading, this isn't particularly new, even on the web. Essentially what he's done is implement bindings/key value observing, but with a new syntax instead of the one we already know (i.e., javascript). On the desktop Cocoa has done this very well, and on the web Cappuccino and SproutCore have copied the cocoa approach. There are also more lightweight libraries that provide binding support without a heavy framework.
- marcuswestin 16y ago
  The difference is the realtime synchronization across all clients. Fun comes with a complete network stack, ensuring that the state you're viewing is always up to date. Does that make sense? I actually do think that's a new value proposition.
  - wangwei 16y ago
    Still, creating a new language just for bindings (across all clients) still doesn't make sense to me. A good javascript library or framework should be good enough.
    - marcuswestin 16y ago
      There's a javascript library under the hood that does just that: http://github.com/marcuswestin/fin http://github.com/marcuswestin/fin
zokier 16y ago
"To bind an element that reflects a piece of state to a piece of data, all you do is set data attribute in the element." Reminds me bit of register globals. And generally blurring the line between clientside and serverside processing feels bit scary.
enduser 16y ago
For those of us who gravitate toward the code examples instead of the English it would be more clear to leave out the PHP example at the very beginning. Took me a moment to figure out what was going on.
- marcuswestin 16y ago
  Good feedback! I had the time to add a simple // PHP code and // Fun code comments at the top of the code examples. Not great but hopefully helpful :) This was meant to be a high-level intro. I'll be diving into explaining the nitty gritty of the language next month.
sshumaker_2 16y ago
Actually, there's a lot more to it than simple 'key/value' binding, depending on how it's implemented. It allows you to build very live pages that are driven directly off your data model. Normally, websites build dynamic content using a templating system on the backend, but live updates need to be done in a horribly awkward manner using a Javascript builder syntax or manually gluing together things in JS. This avoids this problem and unifies it into one nice syntax. I built a similar language like this powered a site of mine that was actually in production (well, Alpha) - and it was a huge productivity boost, resulting in far more interactive pages. (The site never got out of alpha, and never had designer love, so it's stale, but you can see it at http://www.magnifeast.com http://www.magnifeast.com - try entering a los angeles address). The downsides to this approach are compatibility (most libraries won't work out of the box), SEO, and performance problems for generating large pages (particularly in IE). (BTW: this is a secondary account, I'm normally sshumaker - noprocast rule and all).
- marcuswestin 16y ago
  Why not open source what you have?
Jach 16y ago
Reminds me of how Flex does data binding, but with the added feature of blurring server and client. I don't think I like this idea, and I'm not sure it would save me code or headache in the long run... Still neat though.
thomasfl 16y ago
The "Fun" language looks a lot like Ruby and the Camping web framework with inline Markaby templates created by Why (the lucky stiff): http://camping.rubyforge.org/ http://camping.rubyforge.org/ It's 4k of pure ruby art. Check it out.

122 points by marcuswestin 16y ago

AlphaPlus 16y ago

Sounds fun

parisba 16y ago

This is really awesome!

seanalltogether 16y ago

What they are describing is essentially data binding at the language level. The thing to keep in mind is that "out of sight, out of mind" data binding can result in very slow code, but it's a fantastic pattern for UI dev.

marcuswestin 16y ago
The bottleneck with Fun is going to be the network latency. Any piece of UI that needs extra care, e.g. a very long list of items, is implemented in javascript with appropriate lazy rendering.

Twisol 16y ago

Quote - "What if you could build realtime web apps with the same ease as you build static web pages in PHP today?" It's interesting how far we've come, no? PHP-based pages were once considered dynamic.

Groxx 16y ago
I'll play devil's advocate: Building static PHP pages is easy (and is demonstrated in the first block of code). So easy it's hard to beat by a significant margin, especially for small projects like this seems geared towards. Building dynamic - much less real-time - PHP pages is not-so-easy, and certainly not that easy. At absolute simplest you have to look into JavaScript as well.
- xtho 16y ago
  What would be the devil's term for HTML pages? Chiseled in stone?
- Twisol 16y ago
  I'll admit I was a bit cryptic with my remark. :D I was considering things from a server standpoint when I wrote that comment, and from that sandpoint it's extremely obvious that PHP is dynamic, since the page is constructed every time. But after a few minutes I realized that if you look at it from the client's point of view, the rendered page really is static. It's not always the same between requests, but once it's rendered, it's not likely to change. So you're right in that respect! What I got a kick out of is that my remark could be taken both with and without its tongue-in-cheek intent. It really is amazing that, once upon a time, PHP was considered dynamic. And now we want more!

bobbywilson0 16y ago

This certainly is an interesting idea. It seems to me though that all of your application logic is jammed into a single file at the presentation layer. This might suffice for very small apps, and that's fine if it is your goal. I can't imagine that you just define all of your logic in one file. How would you go about reusing code? Could you potentially separate out logic from your template? I would also like to see how this could be done more unobtrusively. It would also be good to show what the output html looks like after it is compiled to html.

marcuswestin 16y ago
Absolutely! You can declare something akin to a function, which takes arguments and emits HTML. Imagine e.g. let taskTemplate = template(task) { <div class="task"> <span class="title">task.title</span> </div> } for (task in tasks) { taskTemplate(task) } I'm not decided on syntax yet. You can definitely separate out logic from template this way. Fun outputs javascript, not HTML - the javascript then builds the DOM.
- giantfuzzypanda 16y ago
  So if someone has javascript disabled what happens?
- m0th87 16y ago
  But it still outputs something that is only consumable by web browsers. It seems to me like the potential productivity gains you'd get out of Fun would only be for tightly coupled systems where you're not worried about exposing an API, and all clients use web browsers.
  - narcvs 16y ago
    Web browsers are not so "only" :) pretty good platform to start with if you're going to pick one
    - 16y ago

mgrouchy 16y ago

Is it just me or does this seem like a "Fun" way to code up an unmaintainable mess? Some of the ideas such as the state synchronization stuff is neat, but would probably be better suited as part of another framework/template language.

marcuswestin 16y ago
Totally - remains to be seen! Someone should take the underlying realtime datastore (http://github.com/marcuswestin/fin http://github.com/marcuswestin/fin) and bundle it with mustache or <angular/>!
- mgrouchy 16y ago
  I think that is a potentially fantastic idea.
- gregwebs 16y ago
  http://github.com/ahe/choco http://github.com/ahe/choco bundles a different js datastore (js-model) with sammy and has mustache support
  - marcuswestin 16y ago
    Nice - the relevant fin API used under the hood by Fun is dead simple: fin.set(id, property, value) fin.observe(id, property, function callback(mutation){}) Would be rockin to see if we could hook up fin to js-model!

jackowayed 16y ago

I notice that you haven't technically OSSed it yet (not released under any license). Is this just an oversight?

marcuswestin 16y ago
Sorry about that - fixed in http://github.com/marcuswestin/fun/commit/05870f3f54fda430909dddc9ee47311987e5410b http://github.com/marcuswestin/fun/commit/05870f3f54fda43090...

wazoox 16y ago

Jemplate, anyone? This was already done.

marcuswestin 16y ago
Jemplate does not do the realtime stat synchronization across browsers I don't think

asnyder 16y ago

A similar sort of thing is already possible using the NOLOH PHP Framework (http://www.noloh.com http://www.noloh.com) using its Listener Control. Using a quick example similar to the post you can simply do something like: http://noloh.diffpaste.com/#/691/ http://noloh.diffpaste.com/#/691/. Furthermore, you can specify the various options, whether it's stream, short-poll, or long-polling. A video demonstrating it from this past March's Confoo web conference can be found here: http://www.youtube.com/phpframework#p/c/C102458C2FFD8ACF/7/8r0FR0Dx4zE http://www.youtube.com/phpframework#p/c/C102458C2FFD8ACF/7/8... We're also planning to add a more direct syntax in the future so that you can easily set properties of objects directly to a changing data source without having to handle the assignment in a controlled callback, which we initially mandate due to taking the cautious route, thus allowing you to handle for data and security issues. Disclaimer: I'm a co-founder of NOLOH

Keyframe 16y ago
Looks rather interesting. I'm not sure I follow licensing options. So it's a framework one cannot use for free in commercial projects? Also, are there any performance reviews of it and is that "Loading..." configurable or hardwired? Thanks. edit: I may be out of the loop a bit, but how does google and other spiders crawl pages like that?
- asnyder 16y ago
  Loading is configurable, it's just an object like anything else. See LoadIndicator http://dev.noloh.com/#/api/WebPage/LoadIndicator/ http://dev.noloh.com/#/api/WebPage/LoadIndicator/. We're sorry about the confusion regarding licensing. Essentially free for anything non-commercial (open-source, educational, non-profit), and development. We offer free hosted sandboxes, in addition to free downloads for developing. Essentially, you only pay when you go live with a commercial product, and even then we offer affordable options. There will be a comprehensive performance review in an upcoming issue of php|architect magazine. Since the framework is built from the ground-up to be lightweight and on-demand the result is considerable. You can read more about that here: http://www.noloh.com/#/home/&expanded=performance http://www.noloh.com/#/home/&expanded=performance. In regards to the spidering question, see: http://dev.noloh.com/#/articles/Search-Engine-Friendly/ http://dev.noloh.com/#/articles/Search-Engine-Friendly/. You can also read a comprehensive article in this past May's cover story in php|architect, http://www.phparch.com/magazine/2010/may/ http://www.phparch.com/magazine/2010/may/.

necubi 16y ago

From a cursory reading, this isn't particularly new, even on the web. Essentially what he's done is implement bindings/key value observing, but with a new syntax instead of the one we already know (i.e., javascript). On the desktop Cocoa has done this very well, and on the web Cappuccino and SproutCore have copied the cocoa approach. There are also more lightweight libraries that provide binding support without a heavy framework.

marcuswestin 16y ago
The difference is the realtime synchronization across all clients. Fun comes with a complete network stack, ensuring that the state you're viewing is always up to date. Does that make sense? I actually do think that's a new value proposition.
- wangwei 16y ago
  Still, creating a new language just for bindings (across all clients) still doesn't make sense to me. A good javascript library or framework should be good enough.
  - marcuswestin 16y ago
    There's a javascript library under the hood that does just that: http://github.com/marcuswestin/fin http://github.com/marcuswestin/fin

zokier 16y ago

"To bind an element that reflects a piece of state to a piece of data, all you do is set data attribute in the element." Reminds me bit of register globals. And generally blurring the line between clientside and serverside processing feels bit scary.

enduser 16y ago

For those of us who gravitate toward the code examples instead of the English it would be more clear to leave out the PHP example at the very beginning. Took me a moment to figure out what was going on.

marcuswestin 16y ago
Good feedback! I had the time to add a simple // PHP code and // Fun code comments at the top of the code examples. Not great but hopefully helpful :) This was meant to be a high-level intro. I'll be diving into explaining the nitty gritty of the language next month.

sshumaker_2 16y ago

Actually, there's a lot more to it than simple 'key/value' binding, depending on how it's implemented. It allows you to build very live pages that are driven directly off your data model. Normally, websites build dynamic content using a templating system on the backend, but live updates need to be done in a horribly awkward manner using a Javascript builder syntax or manually gluing together things in JS. This avoids this problem and unifies it into one nice syntax. I built a similar language like this powered a site of mine that was actually in production (well, Alpha) - and it was a huge productivity boost, resulting in far more interactive pages. (The site never got out of alpha, and never had designer love, so it's stale, but you can see it at http://www.magnifeast.com http://www.magnifeast.com - try entering a los angeles address). The downsides to this approach are compatibility (most libraries won't work out of the box), SEO, and performance problems for generating large pages (particularly in IE). (BTW: this is a secondary account, I'm normally sshumaker - noprocast rule and all).

marcuswestin 16y ago
Why not open source what you have?

Jach 16y ago

Reminds me of how Flex does data binding, but with the added feature of blurring server and client. I don't think I like this idea, and I'm not sure it would save me code or headache in the long run... Still neat though.

thomasfl 16y ago

The "Fun" language looks a lot like Ruby and the Camping web framework with inline Markaby templates created by Why (the lucky stiff): http://camping.rubyforge.org/ http://camping.rubyforge.org/ It's 4k of pure ruby art. Check it out.