
FOAM: New JavaScript Framework by Google Engineers - oscarfr
https://github.com/foam-framework/foam
======
jasim
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/](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.

~~~
richmarr
I'd love to see a mature app written this way (and I mean that genuinely,
without sarcasm) and look at their project timeline, war stories, etc.

My gut feeling is that the 'frameworks are for prototypes, libraries are for
production' camp is closest to the money, but (a) I have no actual data and
(b) different approaches to frameworks will have different outcomes.

~~~
aflinik
Just compare number of well-known production apps written using React &
Angular.

~~~
sanderjd
How? Where can I see such a comparison? Is it obvious to you which there are
more of? It isn't to me.

------
seizmo
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).

~~~
kgr
If you load it off of the TodoMVC site, it loads much faster than the
AngularJS version. If you load it from GitHub then it is slow because that
isn't a packaged/built version (it's just loading directly from the
repository) and is loading all of the individual models separately. We have a
'BuildApp' tool which can package applications for production, which doesn't
happen when you load directly from GitHub.

FOAM doesn't require a build step, which is why it can be run directly out of
the Git repository, but that method isn't representative of production
performance.

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

~~~
currysausage
Closure Library?

~~~
thanhquanky
No, the other one!

~~~
bradly
Google Gears?

~~~
colbyh
Google Dart?

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

Inevitably reminds me of this:
[http://html9responsiveboilerstrapjs.com/](http://html9responsiveboilerstrapjs.com/)

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

~~~
tim333
Simplifying -

Reactive:

The display automatically changes when some data changes

eg [http://foam-
framework.github.io/foam/foam/index.html?model=f...](http://foam-
framework.github.io/foam/foam/index.html?model=foam.demos.ReactiveClocks)

the one clock moves when you move the other

Meta-programming:

The writing of computer programs with the ability to treat programs as their
data. Examples of meta-programming include Lisp-macros and C++ Templates. FOAM
does this through code-generation, but for Javascript, it does this mainly by
dynamically creating prototypes as maps of functions.

The above is a bit cut and pasted - I have not fully figured what FOAM does

The reactive bit is quite cool in Meteor.js because if you change something in
the database then any page displaying it updates on all clients simplifying
things like chat apps. I have not figured if FOAM does that of if the "full-
stack" bit includes the server side and database code like it does on Meteor.
Anyone know?

~~~
nthcolumn
It is very 'batteries included'. The demos use data islands and localstorage.
You'd hook your DAO to something like Firebase instead. The Tutorial has a bug
where it refers to DetailView it should be foam.ui.DetailView or something
like that.

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

~~~
tomdale
I was at EmpireJS where this was announced and they said they had a team of
Googlers working on it, and showed a few production Google apps built using
it.

~~~
ahochhaus
Interesting. Can you offer any details on which production Google apps were
presented?

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

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

~~~
peterhunt
[https://github.com/foam-
framework/foam/blob/master/core/Boot...](https://github.com/foam-
framework/foam/blob/master/core/BootstrapModel.js#L3)

~~~
insin
Curiouser: [https://github.com/foam-
framework/foam/blob/b75af78303f15826...](https://github.com/foam-
framework/foam/blob/b75af78303f15826c71ee4a35d99208637838b82/js/node/dao/JSModelFileDAO.js#L138)

------
thomasfl
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 {
       }

~~~
miralabs
Crockford talks about the bad features added to ES6, one of them class which
he said is most requested by Java developers programming javascript.At the end
of the talk he show way how to move out of classes/new in javascript
[https://www.youtube.com/watch?v=PSGEjv3Tqo0&feature=youtu.be...](https://www.youtube.com/watch?v=PSGEjv3Tqo0&feature=youtu.be&t=308)

~~~
Demiurge
Can you give a short gist of why they're bad and why should one move out of
classes/new? What is the alternative?

~~~
davej
From the video:

    
    
        function constructor(spec) {
          let {member} = spec,
              {other}  = other_constructor(spec),
              method   = function () {
                // accesses member, other, method, spec
              };
    
          return Object.freeze({
              method,
              other,
          });
        }

~~~
Demiurge
That looks pretty interesting and flexible on one hand, on the other, I don't
see why it's better than classes. Is it just more explicit?

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

~~~
insin
This presentation might help a bit:
[https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qle...](https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qlehLFwtogssKbnaHBrZ26mWtk/pub#slide=id.g38d220eec_01236)

There is so much stuff in the source tree - including what looks like a
complete UI layer - that I'm having a hard time grokking it from that
direction.

Phrases like "can be used to generate code for any language or platform" and
"FOAM is “written in itself”" make me want to understand what's going on first
and how it solves whatever problems it sets out to solve rather than trashing
it out of hand based on initial aesthetic impressions.

------
glutamate
On the demos page

[http://foam-framework.github.io/foam/foam/demos/DemoCat.html](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.

~~~
michaelx386
Until this is fixed, the source files for the demos are available here:
[https://github.com/foam-
framework/foam/tree/master/demos](https://github.com/foam-
framework/foam/tree/master/demos)

------
tacone
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](https://code.google.com/p/foam-
framework/issues/detail?id=1) )

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

------
some1else
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](http://en.wikipedia.org/wiki/Composition_over_inheritance)

~~~
EugeneOZ
Actually it's one of their principles: [http://foam-
framework.github.io/foam/principles/#composition...](http://foam-
framework.github.io/foam/principles/#composition-is-better-than-inheritance)

Currently all I see in demos is lonely rendered "f" symbol and slow as hell
loading... [https://github.com/foam-
framework/foam/issues/295](https://github.com/foam-framework/foam/issues/295)

------
staltz
They say it's reactive, but this is how they explained "reactive":
[https://foam-
framework.github.io/foam/foam/apps/overflow/Ove...](https://foam-
framework.github.io/foam/foam/apps/overflow/Overflow.html#q12) and
[https://github.com/foam-
framework/foam/wiki/KeyConcepts#reac...](https://github.com/foam-
framework/foam/wiki/KeyConcepts#reactive-programming)

------
exit
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...](https://github.com/foam-
framework/foam/blob/master/apps/todo/Todo.js)

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

~~~
MrBuddyCasino
In case this is not already widely known, ES6 has that:

    
    
        var multiline = `line 1
        line 2
        line 3`;

------
nicksellen
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/](http://foam-
framework.github.io/foam/tutorial/2-model/)).

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

------
bootload
interesting look, example documentation a bit spotty (pages missing eg:
[http://foam-framework.github.io/foam/foam/demos/](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...](https://github.com/foam-
framework/foam/blob/master/apps/acalc/Tests.js)

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

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

~~~
kgr
We have benchmarks (using queries extracted from real Google apps) that show
that our query-optimizing caching layer speeds up IndexedDB performance by a
factor of 100.

See: [https://github.com/foam-
framework/foam/blob/master/demos/pho...](https://github.com/foam-
framework/foam/blob/master/demos/photo.js)

Also, load the Empire.js presentation and then press the '+' button on the
bottom right. This will load and run all 25 slides at once, at which point
you'll have over 20k data-bindings, both one- and two-way, 7k objects, 6k of
which are currently being animated.

See: [http://foam-
framework.github.io/foam/foam/index.html?model=f...](http://foam-
framework.github.io/foam/foam/index.html?model=foam.demos.empire.Preso)

We are capable of handling this many data-bindings efficiently because we
don't rely on a digest/diff cycle. Since we generate the JS prototypes from
our models, we are able to install hooks into the generated property getters
and setters so that we can receive update notifications.

Also notice that our GMail client can perform searches on the keystroke.

I lead the FOAM project at Google.

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

[https://www.youtube.com/watch?v=n699DWb2TUs](https://www.youtube.com/watch?v=n699DWb2TUs)

------
wanda
Seems similar to this: [http://jsblocks.com](http://jsblocks.com)

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

------
electic
It seems every week there is a new javascript framework.

~~~
matthuggins
[http://xkcd.com/927/](http://xkcd.com/927/)

------
brianhama
This sounds a lot like Microsoft's TypeScript.

------
nthcolumn
Good God it's beautiful

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

~~~
ramblerman
And hackernews wasn't full of snarky one liners. Did you even read further
than that before you just had to get your comedy 'out there'?

~~~
venomsnake
I did. After reading the whole page I was not able to determine what it does
...

Edit: Also 5 years ago HN was even fuller with snarky one liners and eyebrow
dismissals.

~~~
ramblerman
My apologies. I had a knee jerk reaction to what I though was wanton
pessimism.

Having read the docs now I'm more inclined to subscribe to your initial onion
theory.

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

