How to build a realistic application using Famo.us?

Question

I agree that “Here are the pieces, now do something” that Famo.us introduced, but it would be nice to have a little guidance on how I want to customize my project, structure, modules, etc.

Why are there no demons on a real web page and not on a single iPhone screen (maybe even something like Famo.us University)?

Can Famo.us be used in bite size DOM elements such as web components? In the existing HTML structure?

As far as I understand, everything is in order to place everything that you want inside the render, but how to place it for several screen sizes? Should I start building a library of my own surfaces with different “breakpoint sizes” (sm-surface md-surface lg-surface) and create a script depending on the size of the viewport?

Answer 1

Im surprised that while writing this, you have -2 for your question, where, as I see it, this is a very important question. The slide show project and the Timbre project on famo.us are good starts. Although their website still remains for me sometimes when they are not handled properly, part of the scroll is minimized to large enough to read one or two lines at a time. So maybe you were not able to view them. Which for a long time I also could not.

John Traver, who, by the way, if you ask for help here, is very useful, has the message https://medium.com/@john_traver/prodigy-technology-ab94cf0bba7f , which gives some of his revelations after he used famo.us in your project. The part about using Famo.us only where you need to use Famo.us makes life easier.

His message is not going to answer all your questions. The great thing to learn from the two projects that I mentioned earlier that are on famo.us is how to use the views. For me, most of my pages are views, and if they have a similar structure, I can go through a few customizable options to make them work on multiple pages. Then on my main page there are functions that I call to show 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 this to create a render. This allows me to add the animation style that I want for each view. This is not the end, and all this will be his quick tool. Then after creating the renderController, I have several functions that call different views. Below is my menu for my current project, visible everywhere, but the login screen. It is called after login authorization.

  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 the pages in the menu there are buttons whose surfaces have an emit event at the output of the click: slideMenu._eventOutput.emit ('usage'); As you saw, I observe it in a function and call another function to show this page.

This gives an idea of ​​the general structure, or at least I hope so. If not to ask, and I could show more examples. To determine the size, I do 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); 

_width and _height are window.innerWidth and window.innerHeight. You have to be careful, this does not always work, but in the Android Android project Im now, well with the tested Ive, and my last iphone project, it did a great job. Im just setting the percentage of screen size. As long as it stays, cell size is a good solution. For projects that require several types of devices, I create a surface with content and classes or something else that should not be size and layout. Then you have several functions that contain .add, transform, set the size functions for each target device, check what relation or type of its use, then call the corresponding function.

I don’t know if Ive answered your questions, but I hope you are better. Famo.us is an amazing tool that I think will change the way we do it. He is not there yet, but I don’t think that this is a reason to get a knee in it and have fun and a little upset hair.

Also, this is not necessarily the best way to do this exactly the way I do it. There are much smarter people on these boards than me, so if there is a better way to stop giving him negative points for this question and explain.

Editted: In the company I work for, I also have two other developers creating applications / sites with famo.us, and starts to add some code fragments that solved some of the problems we encountered: https: // github .com / vizidrix / famous .