How would one build a realistic application using Famo.us?

Question

I'm okay with the "Here's the pieces, now go make something" way Famo.us has presented itself but it would be nice to have a little guidance as to how I would want to set up my project, structure, modules, etc.

Why are there no demos of an actual webpage, rather than one-screen iPhone views (maybe even something like Famo.us University)?

Is it possible to use Famo.us in bite-size DOM elements, like web components? In an existing HTML structure?

To my understanding it's okay to put whatever you want inside of a renderable, but how does one accommodate for multiple screen sizes? Should I begin building a library of my own surfaces at different "breakpoint sizes" (sm-surface md-surface lg-surface) and create a script include based on the viewport size?

Answer 1

I’m surprised at the time of writing this you have -2 for your question where as I see it as a very valid question. The slideshow project and the Timbre project on the famo.us site are good starts. Although their website is still iffy for me sometimes those don’t render properly, the scroll portion gets minimized to just big enough to read one or two lines at a time. So maybe you’ve been unable to view those. Which for quite a while I couldn’t either.

John Traver, who by the way if you ask for help on here is quite helpful, has a post https://medium.com/@john_traver/prodigy-technology-ab94cf0bba7f , which gives some of his revelations after having used famo.us on his project. The part about using ‘Famo.us only where Famo.us needs to be used’ makes life easier.

His post isn’t going to answer all of your questions though. The big thing to learn from the two projects I mentioned earlier, that are on the famo.us site, is how to use views. For me most of my pages are views and if they have a similar structure I can pass through a few custom options to make them work for multiple pages. Then my main page has functions I call to show the views.

            var makeSnapRenderController = function(widthIn, widthOut, heightIn, heightOut, durationIn, durationOut) {
                if (!durationIn) {
                    durationIn = 300;
                }
                if (!durationOut) {
                    durationOut = 300;
                }
                var renderer = new RenderController({
                    inTransition: {curve: Easing.inOutQuart, duration: durationIn},
                    outTransition: {curve: Easing.inOutQuart, duration: durationOut},
                    overlap: true,
                });
                renderer.inTransformFrom(function(progress) {
                    return Transform.translate(widthIn * (1.0 - progress), heightIn * (1.0 - progress), 1); // 10
                });

                renderer.outTransformFrom(function(progress) {
                    return Transform.translate(widthOut * progress - widthOut, heightOut * progress - heightOut, 1-progress); // -10
                });
                // No opacity change
                renderer.inOpacityFrom(function(progress) { return 1.5 * progress; });
                renderer.outOpacityFrom(function(progress) { return 1.5 * progress; });

                return renderer;
            };

I use that to create my renderControllers. It lets me add the animation style I want for each view. It is not the end all be all but it’s a quick tool. Then after creating the renderController I have multiple functions that call the different views. The following is my slide out menu for my current project thats visible everywhere but the login screen. It gets called after login is authenticated.

            var showMenu = function() {
                var SlideOutMenuView = require('Views/SlideOutMenuView');
                var slideOutMenuView = new SlideOutMenuView();
                menuRenderer.show(slideOutMenuView);

                slideOutMenuView.on('usage', function(){
                    console.log('usage was clicked');
                    showStatisticsPage();
                    slideOutMenuView.close();
                });
                slideOutMenuView.on('profiles', function(){
                    console.log('profiles was clicked');
                    showProfilesPage();
                    slideOutMenuView.close();
                });
                slideOutMenuView.on('component', function(){
                    console.log('component was clicked');
                    showComponentDataPage();
                    slideOutMenuView.close();
                });

            };

To change pages the menu has buttons well surfaces that have on click output an emit event: slideMenu._eventOutput.emit('usage'); As you saw I watch for it in the function and call another function to show that page.

That gives an idea of general structure or at least I hope it does. If not ask and I could show more examples. For sizing I do things like this:

                var remove = new Surface({
                    size: [_width * 0.24, _height * 0.049],
                    content: 'Remove',
                    properties: {
                        fontSize: Math.round(_height * 0.03) + 'px',
                    },
                    classes:['remove','btn'],
                });
                this.mainNode.add(new StateModifier({
                    transform: Transform.translate(_width * 0.74, _height * 0.144, 2)
                })).add(remove);

The _width and _height are window.innerWidth and window.innerHeight. You have to be careful it doesn’t always work but on the android project I’m on now, well with the phones I’ve tested, and my last iphone project it worked great. I’m just setting percentages of the screen size. As long as it stays cell sized it’s a good solution. For projects that require multiple device types I create the surface, with contents and classes or anything else that doesn’t pretain to size and layout. Then have several functions that hold the .add, transform, set size functions each for a different target device check for what ratio or type it’s using then call the appropriate function.

I don’t know if I’ve answered your questions but hopefully you're better off. Famo.us is an amazing tool that I really think will change the way we do things. It’s not there yet but I don’t think thats not a reason to get knee deep in it and have fun and a little hair pulling frustration.

Also this is not necessarily the best way its just the way I’m doing it. There are much smarter people on these boards than I, so if there is a better way stop giving him negative points for the question and explain.

Editted: The company I work for has me and two other developers making applications / sites with famo.us and is starting to put some code snippets up that have solved some of the problems we've run into: https://github.com/vizidrix/famous.