0

I've started using famo.us for a meteor app, and Famo.us seems to not "play nice" it takes over the main rendering of the app such that normal scrolling and other html like behavior is lost.

I disabled the famous.css but it seems deeper inside famo.us javascript, or maybe the shims. I was wondering if anyone can comment on a way to toggle famous?

for example it maybe great to use famo.us for a flashy topmenu, but then the internals of a site with texty views you don't want the interference. An example of an "all famous" site is their own university, where many docs pages would be more usable as plain html, just like Flash had its place.

tips appreciated!

dcsan
  • 11,333
  • 15
  • 77
  • 118

4 Answers4

1

Just like you mentioned, most technology has it's place. It's about finding the right tool for the right job. You are correct that the documentation on the site feels a little strange, but it could have been done better with either technology. Famo.us will stand out for building apps that look like desktop/mobile apps, and not apps that look like webpages. It will also be a wonderful choice for games.

Though I have little familiarity with how meteor rendering works, The ideas around using Famo.us for what you may need should be the same. The most important thing not to do in Famo.us is to battle the Context object. Battling is never good. I threw together a quick example that brought back the default browser scrollbars. You simply use a single surface as your 'body-wrapper' div, and set it's overflow property to scroll. Then inject the rest of the HTML into that surface.

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');

var context = Engine.createContext();
var context_size = context.getSize();

lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
content = "<div style='overflow:scroll;width:100%;height:100%'><div style='width:100%;height:200%;background-color:#aaffaa;font-size:72px;line-height:72px'>" + lorem + "</div></div>";
surface = new Surface({
  size: context_size,
  content: content
});
context.add(surface);

There are few other ways you could incorporate Famo.us elements into webpages. Similar to how Facebook widgets work, you could simply use an iframe.. This goes either way. You could host a Famo.us widget and inject it into an HTML website, or you could inject an html document into a Famo.us app.

Also remember Famo.us is still just a baby. They want to hear your feedback. I assume there will be a lot on using Famo.us for more fluid layouts similar to those that can be achieved with the box-model.

I hope some of this helped!

Good Luck!

johntraver
  • 3,612
  • 18
  • 17
  • this seemed to be the clue actually. i tried removing the `overflow:hidden` from famous.css without luck, so i guess you're right its deep in the guts and i'd end up fighting with Context manager. So I guess at this point i'm prevented from using famo.us unless i give up any type of normal html/bootstrap type content in the same app - piping all content into a famous surface isn't really a workable option (this is a meteor app and there's already enough complicated DOM hijinks going on) – dcsan May 13 '14 at 07:06
1

Partial duplicate of How do Meteor's blaze and Famo.us play together? My answer from there:

I just released a preview of famous-components, which is an attempt at a tight integration between Blaze and Famous. All the other approaches I've seen so far side step most of Blaze, and require writing large amounts of code in JavaScript, which felt very unnatural to me in Meteor. Meteor code should be small, concise and easy with powerful results. Here are a few examples of what it looks like: (each template forms a renderNode, any HTML gets put on a Surface. Modifiers/views/options are specified as a component attributes)

<template name="test">
  {{#Surface size=reactiveSizeHelper}}
    <p>hello there</p>
  {{/Surface}}

  {{#if loggedIn}}
    {{>SequentialView direction="X" template='userBar' translate="[0,50]"}}
  {{else}}
    {{>Surface template='pleaseLogIn' origin="[0.5,0.5]"}}
  {{/if}}
</template>

Scrollview (can be split into sub templates):

<template name="famousInit">
  {{#Scrollview size="[undefined,undefined]" items=items}}
    {{#famousEach items}}
      {{#Surface size="[undefined,100]"}} {{name}} {{/Surface}}
    {{/famousEach}}
  {{/Scrollview}}
</template>

Template.famousInit.items = function() { return Items.find() };

Events:

Template.blockSpring.events({
  'click': function(event, tpl) {
    var fview = FView.dataFromTemplate(tpl);
    fview.modifier.setTransform(
      Transform.translate(Math.random()*500,Math.random()*300),
      springTransition
    );
  }
});

It also works out the box with iron-router. Live demo with sample code:

http://famous-views.meteor.com/

Regarding scrolling, etc, as per johntraver's answer, you can change the CSS overflow property to scroll to get the scroll bars backs, and for everything inside that, use Meteor templates as usual. The package doesn't get in the way of Meteor's templates at all but rather just gives some extra helpers for declaring surfaces, views, etc from inside templates (e.g. a Scrollview for lists, which could run over a Meteor-coded infinite scrolling mechanism with no extra work).

Community
  • 1
  • 1
gadicc
  • 1,431
  • 15
  • 16
0

There's a plugin on Atmosphere that should help you with Famo.us and Meteor integration: it is called famono.

And there is this nice video on Youtube explaining some rational with a bit of codes that should also help you a lot: https://www.youtube.com/watch?feature=player_embedded&v=bmd-cXSGQAA

As you are, I'm in the plain middle of checking if Famo.us will suite my needs with Meteor. I'll post my progression on my blog: http://pem-musing.blogspot.fr/

PEM
  • 54
  • 3
  • fomono is a little old, and may not work at the moment. There will be updates soon though on Meteor integration. – Naman Goel May 12 '14 at 05:43
0

Previewing [Famous-Components with Meteor] (https://atmospherejs.com/package/famous-components) and so far its helped me reduce the CSS I would have to write.

But can it set surface properties like below?

var firstSurface = new Surface({
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

or

firstSurface.setproperties({color: 'red'})
ryeo
  • 135
  • 1
  • 1
  • 6