from Hacker News

FOAM: New JavaScript Framework by Google Engineers

by oscarfr on 4/27/15, 8:43 AM with 109 comments

  • by jasim on 4/27/15, 10:56 AM

    This is a bold take on a problem that a lot of people have written away as reinventing the wheel. But color me impressed!

    Unlike almost every other Javascript framework we've so far seen, FOAM makes the data model the primary entity in the system, which is a good idea. In the typical UI-driven development of web applications, the data model often gets modified without much thought and causes cascading complexity across the rest of the system. A lot of the convoluted UI code that I've written could've been kept simple by keeping the data model sane by finding and utilizing equivalences, making implied meaning explicit by extracting names, and normalizing/denormalizing the data appropriately. A data-structure driven development approach should help a lot here.

    FOAM also implements another item from my wishlist: being able to see all the UI representation of any given piece of data in one place. It achieves this by keeping all possible templates for a piece of data directly in its object. (http://foam-framework.github.io/foam/tutorial/4-templates/)

    In general, this looks like the most declarative (as in, define your business requirements instead of writing imperative code) way of building web applications that I've seen yet. I would like to see what new ideas this library can bring into the 'Perfect UI Framework' conversation, but past experience makes me skeptical of any implementation that overly relies on metaprogramming. Metaprogramming can take us maybe 50% of the way home, but programming unfortunately is often an art in the minutiae. UI code is especially prone to this problem: things that have to deal with humans cannot be absolutely symmetrical all the time, which is where any overly declarative approach to building software breaks down. I often look back to this quote by DHH as a reminder of the dangers in generalization:

        On the surface, the dream of components sounds great 
    and cursory overviews of new projects also appear to be 
    "a perfect fit". But they never are. Reuse is hard. 
    Parameterized reuse is even harder. And in the end, 
    you're left with all the complexity of a swiss army 
    knife that does everything for no one at great cost 
    and pain.
    - DHH ca. 2005
    Also, template based UI frameworks are IMO a relic of the past, of which I'm convinced by the way templates are defined imperatively using code in React. In templating, the UI is a String, but UI should be Code because code is awesome.

  • by seizmo on 4/27/15, 9:26 AM

    One thing you notice right off the bat: Its very slow. It takes about 2s on my machine to load the TodoMVC example. Thats about as long as it takes to load my GMail inbox. Thats pretty horrible for whats supposed to be the "Hello World" of JS frameworks. I didnt dig in what actually takes so long, but it seems like it has still some way to go.

    I find it interesting that after Angular this would the second (3rd if you count GWT) JS framework released by Google with pretty bad performance characteristics (if it actually is made be Google).

  • by yedpodtrzitko on 4/27/15, 11:01 AM

    I use Google's Javascript framework. GWT? No, the other one. Polymer? No, the other one! AngularJS? No, the other one!!

  • by jreimers on 4/27/15, 10:56 AM

    > FOAM is a full-stack Reactive MVC Meta-Programming framework.

    Inevitably reminds me of this: http://html9responsiveboilerstrapjs.com/

    I understand MVC, but what is reactive meta-programming exactly?

  • by Rifu on 4/27/15, 9:25 AM

    Doesn't seem to actually be by Google. Perhaps the title could be changed to "by a Google Engineer"?

  • by forgottenacc56 on 4/27/15, 10:26 AM

    Just today I was thinking "there's not enough ajavaScript frameworks.", and BANG! Google solves my problem. Nice.

  • by peeyek on 4/27/15, 10:02 AM

    I'm not sure this framework is endorsed by Google. I can't find "by Google" on the home page nor about page.

  • by thomasfl on 4/27/15, 9:54 AM

    It's about time more people starts using ES6 class constructors instead of rolling their class definition hack. This is how it's done in the calculator demo:

       CLASS({
      name: 'Calc'
    With babeljs you can use ES6 syntax like this:

       class Calc {
   }

  • by rattray on 4/27/15, 9:56 AM

    Five clicks in and I'm still not sure what it really is/does...

  • by glutamate on 4/27/15, 10:35 AM

    On the demos page

    http://foam-framework.github.io/foam/foam/demos/DemoCat.html

    All the links to "Source" take me to GitHub 404.

    I would suggest this is the most important part of showcasing a new project.

  • by tacone on 4/27/15, 10:57 AM

    It does not seem a new thing, rather an old one just migrated it to Github.

    It has 8,474 commits. The first commit (and also the first issue on Google code) dates back to Jul 30th 2012. And it was just the first public release, not an empty commit (43 files).

    (first issue: https://code.google.com/p/foam-framework/issues/detail?id=1 )

  • by blitzprog on 4/27/15, 11:26 AM

    Regardless of how good it is, the presentation could and should be improved. Quick to grasp examples, an explanation telling me which problems this project solves and as a bonus how it compares to other frameworks. All of this should be on the GitHub readme frontpage. Poor presentation is like a 0.01 multiplier for your amount of potential users. It's easy to avert your eyes from this but it's almost as important as the quality of the product itself.

  • by some1else on 4/27/15, 9:27 AM

    A first glance of the docs I see the components aspire to a declarative style (being defined entirely in JSON). I'm wondering though, why not use composition[1] instead of inheritance? I need to take a better look to see how view composition would work in FOAM.. But I can tell from experience with Backbone, that using composition instead of inheritance improves code structure and increases maintainability. If composition was a first-class construct (like they made extendsModel), it would get a lot of issues out of the way.

    [1] http://en.wikipedia.org/wiki/Composition_over_inheritance

  • by staltz on 4/27/15, 10:13 AM

  • by exit on 4/27/15, 12:16 PM

    looking at the todo example, i was perplexed by the way templates are inlined through comments:

    https://github.com/foam-framework/foam/blob/master/apps/todo...

    it led me to discover that the full text of a function can be reflected through .toString() ...

    i'm not sure i'd be happy to see this approach widely adopted though. it feels like a language hack, like maybe js needs a multiline literal string..

  • by nicksellen on 4/27/15, 11:04 AM

    Use of ES6 classes would have been nice and I'd prefer to work with simple javascript objects to hold data vs rich model objects (http://foam-framework.github.io/foam/tutorial/2-model/).

    I don't think this is the framework for me.

  • by bootload on 4/28/15, 2:10 AM

    interesting look, example documentation a bit spotty (pages missing eg: http://foam-framework.github.io/foam/foam/demos/ & others), rest of the docs ok.

    What do I see? It's language centric, that's good and bad. The good bit is you can with a very small JS lib write code to generate a dynamic page. The bad bit: as the language grows and rusts, you have to chase down the removed features. Much easier to grasp in concept and execution than Angular.

    Loved this bit in the calc demo source, testing: https://github.com/foam-framework/foam/blob/master/apps/acal...

    Q. Is foam an attempt to create a framework for Mobile Apps?

  • by tn13 on 4/27/15, 9:44 AM

    Another "higher performance" framework! At least dont throw these phrases around.

  • by kgr on 5/6/15, 1:51 PM

    Video of the FOAM Empire.js presentation is now available at:

    https://www.youtube.com/watch?v=n699DWb2TUs

  • by wanda on 4/27/15, 9:26 PM

    Seems similar to this: http://jsblocks.com

  • by pekk on 4/27/15, 4:07 PM

    Would someone mind very simply explaining how this relates to (or differs from) Angular?

  • by electic on 4/27/15, 2:45 PM

    It seems every week there is a new javascript framework.

  • by brianhama on 4/27/15, 11:45 AM

    This sounds a lot like Microsoft's TypeScript.

  • by nthcolumn on 4/29/15, 12:07 PM

    Good God it's beautiful

  • by venomsnake on 4/27/15, 10:51 AM

    > FOAM is a full-stack Reactive MVC Meta-Programming framework.

    5 years ago I would have thought that this would have been the title of the tech section of Onion article ...

  • by elcct on 4/27/15, 12:26 PM

    It's been like 5 seconds since last new JavaScript framework was released. I really started to worry, so thanks for this post.