9 ms·

FOAM: New JavaScript Framework by Google Engineers

145 points by oscarfr 11y ago

Rifu 11y ago
Doesn't seem to actually be by Google. Perhaps the title could be changed to "by a Google Engineer"?
- hosay123 11y ago
  They probably have rights to the project under the respective contracts they have with the employees. That aside, having "<new project> by ((Google(|rs))|<$big_corp>)" in the title has generally been a reliable filter for projects that do not stand on their own merit, and this one seems to be no exception.
  - justthistime_ 11y ago
    Exactly. Everyone should ask himself/herself "would this be newsworthy if they didn't name-drop Google?".
    - insin 11y ago
      As an experiment, I deliberately avoided adding "by Google" or similar when first submitting FOAM to HN while it was being tweeted about after yesterday's EmpireJS talk: https://news.ycombinator.com/item?id=9442943 https://news.ycombinator.com/item?id=9442943 Over on /r/javascript, my plain titled link has 2 points/23 comments while the "from Google" submission has 44 points/65 comments. Not of much use for direct comparison purposes (GitHub repo links vs. project site links, different times of day, weekend vs. weekday etc.) but mildly interesting.
- tomdale 11y ago
  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 11y ago
    Interesting. Can you offer any details on which production Google apps were presented?
- Bahamut 11y ago
  Check the COPYRIGHT file in the repo.
- kgr 11y ago
  FOAM is built by five Google engineers who are paid by Google to work on it full time. It is a Google "project" but not a Google "product". I lead the FOAM team at Google.
seizmo 11y ago
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).
- morenoh149 11y ago
  It reminded me a lot of R shiny clunky apps. But the goal is "fast apps fast" so yeh.
- stereosteve 11y ago
  Yeah, based on the Chrome network panel it is loading all the unminified view files separately. They should definitely combine and minify all the files to prevent a bad first impression.
- raggi 11y ago
  Try it over SPDY/HTTP2 and you'll have a very different experience.
- kgr 11y ago
  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.
some1else 11y ago
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 11y ago
  Actually it's one of their principles: http://foam-framework.github.io/foam/principles/#composition-is-better-than-inheritance http://foam-framework.github.io/foam/principles/#composition... 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
plainOldText 11y ago
Oh boy, yet another JavaScript framework. Colored me unimpressed; angular, backbone, ember, angular 2.0, react, etc. I feel like they're just reinventing the same wheel with a different spin. I wish people would actually spend their time creating a really revolutionary "framework" instead, better yet a programming environment, which would redefine how we write web programs. I'm envisioning a way to create software, where while having a conversation with another person, we could collaboratively draw some shapes on the screen, connect them, then my program comes to life, evolves, scales up, scales down, etc. I believe programming should not be an endeavor accessible only to those adept at manipulating text files. Telling computers what to do should be for everyone.
- peterhunt 11y ago
  React is pretty revolutionary. It turns rendering code into a simple pure function, which is a necessary step for where you want to end up.
  - seanmcdirmid 11y ago
    Rendering code is easy to express as pure functions...that is mostly how OpenGL and DirectX work, after all. React doesn't help very much with the state of your application (nor is it meant to). That being said, being able to treat the DOM as something to be rendered efficiently in immediate mode is quite useful.
    - eropple 11y ago
      OpenGL is a big ol' box of state in almost everything it does. I'm not sure how you get pure functions out of that.
      - seanmcdirmid 11y ago
        Immediate shader mode is fairly stateless, pixel and vertex shaders are as functional as one can get. Let's not talk about the fixed function APIs that no one uses anymore.
tn13 11y ago
Another "higher performance" framework! At least dont throw these phrases around.
- kgr 11y ago
  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/photo.js https://github.com/foam-framework/foam/blob/master/demos/pho... 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=foam.demos.empire.Preso http://foam-framework.github.io/foam/foam/index.html?model=f... 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.
thomasfl 11y ago
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 11y ago
  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&t=308 https://www.youtube.com/watch?v=PSGEjv3Tqo0&feature=youtu.be...
  - Demiurge 11y ago
    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 11y ago
      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 11y ago
        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?
      - zodiakzz 11y ago
        Doesn't support inheritance.
    - miralabs 11y ago
rattray 11y ago
Five clicks in and I'm still not sure what it really is/does...
- insin 11y ago
  This presentation might help a bit: https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qlehLFwtogssKbnaHBrZ26mWtk/pub#slide=id.g38d220eec_01236 https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qle... 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.
peeyek 11y ago
I'm not sure this framework is endorsed by Google. I can't find "by Google" on the home page nor about page.
- hackerboos 11y ago
  Two of the authors work at Google. I think you are right though, this doesn't look like an 'official' framework.
- peterhunt 11y ago
  https://github.com/foam-framework/foam/blob/master/core/BootstrapModel.js#L3 https://github.com/foam-framework/foam/blob/master/core/Boot...
  - insin 11y ago
    Curiouser: https://github.com/foam-framework/foam/blob/b75af78303f15826c71ee4a35d99208637838b82/js/node/dao/JSModelFileDAO.js#L138 https://github.com/foam-framework/foam/blob/b75af78303f15826...
  - tomwilde 11y ago
    2012?
staltz 11y ago
They say it's reactive, but this is how they explained "reactive": https://foam-framework.github.io/foam/foam/apps/overflow/Overflow.html#q12 https://foam-framework.github.io/foam/foam/apps/overflow/Ove... and https://github.com/foam-framework/foam/wiki/KeyConcepts#reactive-programming https://github.com/foam-framework/foam/wiki/KeyConcepts#reac...
forgottenacc56 11y ago
Just today I was thinking "there's not enough ajavaScript frameworks.", and BANG! Google solves my problem. Nice.
glutamate 11y ago
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 11y ago
  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
venomsnake 11y ago
> 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 ...
- deleted 11y ago
  [deleted]
  - debacle 11y ago
    What I'm wondering is if it's better to be reactive or responsive.
- ramblerman 11y ago
  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 11y ago
    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 11y ago
      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.
- deleted 11y ago
  [deleted]
  - reitzensteinm 11y ago
    Well I'll sheepishly raise my hand and say I don't have a bloody clue what the sentence is trying to say. Individually, the words make sense, but after trying to parse the combination I feel like I have less information than when I started.
jasim 11y ago
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.
- gasping 11y ago
  Bold, and beautiful!! Quick everyone, scrap all your existing frameworks and jump on the flavor of the week! Seriously though, I think it's borderline negligent to contribute any kind of hype to new javascript frameworks considering they are spraying out into the ecosystem like a broken fire hydrant. New javascript frameworks should be met with extreme skepticism, if not indifference, if we want this industry to be anything more than a joke.
jreimers 11y ago
> 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 11y ago
  Simplifying - Reactive: The display automatically changes when some data changes eg http://foam-framework.github.io/foam/foam/index.html?model=foam.demos.ReactiveClocks http://foam-framework.github.io/foam/foam/index.html?model=f... 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 11y ago
    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.
tacone 11y ago
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 )
yedpodtrzitko 11y ago
I use Google's Javascript framework. GWT? No, the other one. Polymer? No, the other one! AngularJS? No, the other one!!
- currysausage 11y ago
  Closure Library?
  - thanhquanky 11y ago
    No, the other one!
    - bradly 11y ago
      Google Gears?
      - colbyh 11y ago
        Google Dart?
- ahoge 11y ago
  GWT is a set of tools which allows you to write JS front-end applications in Java. Polymer is a library for creating Web Components.
nicksellen 11y ago
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.
blitzprog 11y ago
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.
brianhama 11y ago
This sounds a lot like Microsoft's TypeScript.
exit 11y ago
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/Todo.js 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..
- MrBuddyCasino 11y ago
  In case this is not already widely known, ES6 has that: var multiline = `line 1 line 2 line 3`;
- realityking 11y ago
  EcmaScript 6 has got us covered: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings https://developer.mozilla.org/de/docs/Web/JavaScript/Referen...
elcct 11y ago
It's been like 5 seconds since last new JavaScript framework was released. I really started to worry, so thanks for this post.
electic 11y ago
It seems every week there is a new javascript framework.
- matthuggins 11y ago
  http://xkcd.com/927/ http://xkcd.com/927/
pekk 11y ago
Would someone mind very simply explaining how this relates to (or differs from) Angular?
wanda 11y ago
Seems similar to this: http://jsblocks.com http://jsblocks.com
bootload 11y ago
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/acalc/Tests.js https://github.com/foam-framework/foam/blob/master/apps/acal... Q. Is foam an attempt to create a framework for Mobile Apps?
nthcolumn 11y ago
Good God it's beautiful
kgr 11y ago
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

145 points by oscarfr 11y ago

Rifu 11y ago

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

hosay123 11y ago
They probably have rights to the project under the respective contracts they have with the employees. That aside, having "<new project> by ((Google(|rs))|<$big_corp>)" in the title has generally been a reliable filter for projects that do not stand on their own merit, and this one seems to be no exception.
- justthistime_ 11y ago
  Exactly. Everyone should ask himself/herself "would this be newsworthy if they didn't name-drop Google?".
  - insin 11y ago
    As an experiment, I deliberately avoided adding "by Google" or similar when first submitting FOAM to HN while it was being tweeted about after yesterday's EmpireJS talk: https://news.ycombinator.com/item?id=9442943 https://news.ycombinator.com/item?id=9442943 Over on /r/javascript, my plain titled link has 2 points/23 comments while the "from Google" submission has 44 points/65 comments. Not of much use for direct comparison purposes (GitHub repo links vs. project site links, different times of day, weekend vs. weekday etc.) but mildly interesting.
tomdale 11y ago
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 11y ago
  Interesting. Can you offer any details on which production Google apps were presented?
Bahamut 11y ago
Check the COPYRIGHT file in the repo.
kgr 11y ago
FOAM is built by five Google engineers who are paid by Google to work on it full time. It is a Google "project" but not a Google "product". I lead the FOAM team at Google.

seizmo 11y ago

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

morenoh149 11y ago
It reminded me a lot of R shiny clunky apps. But the goal is "fast apps fast" so yeh.
stereosteve 11y ago
Yeah, based on the Chrome network panel it is loading all the unminified view files separately. They should definitely combine and minify all the files to prevent a bad first impression.
raggi 11y ago
Try it over SPDY/HTTP2 and you'll have a very different experience.
kgr 11y ago
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.

some1else 11y ago

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 11y ago
Actually it's one of their principles: http://foam-framework.github.io/foam/principles/#composition-is-better-than-inheritance http://foam-framework.github.io/foam/principles/#composition... 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

plainOldText 11y ago

Oh boy, yet another JavaScript framework. Colored me unimpressed; angular, backbone, ember, angular 2.0, react, etc. I feel like they're just reinventing the same wheel with a different spin. I wish people would actually spend their time creating a really revolutionary "framework" instead, better yet a programming environment, which would redefine how we write web programs. I'm envisioning a way to create software, where while having a conversation with another person, we could collaboratively draw some shapes on the screen, connect them, then my program comes to life, evolves, scales up, scales down, etc. I believe programming should not be an endeavor accessible only to those adept at manipulating text files. Telling computers what to do should be for everyone.

peterhunt 11y ago
React is pretty revolutionary. It turns rendering code into a simple pure function, which is a necessary step for where you want to end up.
- seanmcdirmid 11y ago
  Rendering code is easy to express as pure functions...that is mostly how OpenGL and DirectX work, after all. React doesn't help very much with the state of your application (nor is it meant to). That being said, being able to treat the DOM as something to be rendered efficiently in immediate mode is quite useful.
  - eropple 11y ago
    OpenGL is a big ol' box of state in almost everything it does. I'm not sure how you get pure functions out of that.
    - seanmcdirmid 11y ago
      Immediate shader mode is fairly stateless, pixel and vertex shaders are as functional as one can get. Let's not talk about the fixed function APIs that no one uses anymore.

tn13 11y ago

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

kgr 11y ago
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/photo.js https://github.com/foam-framework/foam/blob/master/demos/pho... 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=foam.demos.empire.Preso http://foam-framework.github.io/foam/foam/index.html?model=f... 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.

thomasfl 11y ago

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 11y ago
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&t=308 https://www.youtube.com/watch?v=PSGEjv3Tqo0&feature=youtu.be...
- Demiurge 11y ago
  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 11y ago
    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 11y ago
      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?
    - zodiakzz 11y ago
      Doesn't support inheritance.
  - miralabs 11y ago

rattray 11y ago

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

insin 11y ago
This presentation might help a bit: https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qlehLFwtogssKbnaHBrZ26mWtk/pub#slide=id.g38d220eec_01236 https://docs.google.com/presentation/d/1KQkRJOiEBDktgFSa3qle... 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.

peeyek 11y ago

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

hackerboos 11y ago
Two of the authors work at Google. I think you are right though, this doesn't look like an 'official' framework.
peterhunt 11y ago
https://github.com/foam-framework/foam/blob/master/core/BootstrapModel.js#L3 https://github.com/foam-framework/foam/blob/master/core/Boot...
- insin 11y ago
  Curiouser: https://github.com/foam-framework/foam/blob/b75af78303f15826c71ee4a35d99208637838b82/js/node/dao/JSModelFileDAO.js#L138 https://github.com/foam-framework/foam/blob/b75af78303f15826...
- tomwilde 11y ago
  2012?

staltz 11y ago

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

forgottenacc56 11y ago

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

glutamate 11y ago

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 11y ago
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

venomsnake 11y ago

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

deleted 11y ago
[deleted]
- debacle 11y ago
  What I'm wondering is if it's better to be reactive or responsive.
ramblerman 11y ago
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 11y ago
  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 11y ago
    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.
deleted 11y ago
[deleted]
- reitzensteinm 11y ago
  Well I'll sheepishly raise my hand and say I don't have a bloody clue what the sentence is trying to say. Individually, the words make sense, but after trying to parse the combination I feel like I have less information than when I started.

jasim 11y ago

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.

gasping 11y ago
Bold, and beautiful!! Quick everyone, scrap all your existing frameworks and jump on the flavor of the week! Seriously though, I think it's borderline negligent to contribute any kind of hype to new javascript frameworks considering they are spraying out into the ecosystem like a broken fire hydrant. New javascript frameworks should be met with extreme skepticism, if not indifference, if we want this industry to be anything more than a joke.

jreimers 11y ago

> 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 11y ago
Simplifying - Reactive: The display automatically changes when some data changes eg http://foam-framework.github.io/foam/foam/index.html?model=foam.demos.ReactiveClocks http://foam-framework.github.io/foam/foam/index.html?model=f... 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 11y ago
  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.

tacone 11y ago

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 )

yedpodtrzitko 11y ago

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

currysausage 11y ago
Closure Library?
- thanhquanky 11y ago
  No, the other one!
  - bradly 11y ago
    Google Gears?
    - colbyh 11y ago
      Google Dart?
ahoge 11y ago
GWT is a set of tools which allows you to write JS front-end applications in Java. Polymer is a library for creating Web Components.

nicksellen 11y ago

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.

blitzprog 11y ago

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.

brianhama 11y ago

This sounds a lot like Microsoft's TypeScript.

exit 11y ago

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/Todo.js 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..

MrBuddyCasino 11y ago
In case this is not already widely known, ES6 has that: var multiline = `line 1 line 2 line 3`;
realityking 11y ago
EcmaScript 6 has got us covered: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings https://developer.mozilla.org/de/docs/Web/JavaScript/Referen...

elcct 11y ago

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

electic 11y ago

It seems every week there is a new javascript framework.

matthuggins 11y ago
http://xkcd.com/927/ http://xkcd.com/927/

pekk 11y ago

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

wanda 11y ago

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

bootload 11y ago

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/acalc/Tests.js https://github.com/foam-framework/foam/blob/master/apps/acal... Q. Is foam an attempt to create a framework for Mobile Apps?

nthcolumn 11y ago

Good God it's beautiful

kgr 11y ago

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