Tag Archives for Famo.us UI

Famo.us UI framework: Elements

Famo.us: near native experiences on mobile, 60FPS, works across all screen sizes, browsers, operating systems, and is entirely in Javascript. Everyone wants the advantages of Famo.us, but nobody wants to learn it. And for good reason, it’s a burgeoning framework, it has a steep learning curve (what in the world are surfaces and modifiers), and is still pretty buggy.

Over the past month, I’ve been working with 3 other software engineers from Hack Reactor. And with the help from the VP of product at Famo.us, we have designed a framework on top of Famo.us that provides a low level abstraction layer to lower the barrier to entry for developers.

Famo.us UI

We call it Famo.us UI. There are no more surfaces and modifiers. There are no more syncs for each input (scroll, touch, mouse). And there is less code to write, a LOT of less code to write. In this post, I’ll discuss the high level overview of what Famo.us UI is, specifically the role of elements. There won’t be much code in this post.

Elements

Elements are the best of surfaces and modifiers put together. You interact with them like surfaces but they behave like modifiers. In the standard Famo.us, creating something as simple as creating and centering a button on the screen went something like this.

Standard Famo.us

  • Create a button surface
  • Set the size, content, and CSS properties on the button surface
  • Create a button modifier
  • Set the align and origin on the modifier to [0.5, 0.5]
  • Add the button modifier to the main context
  • Add the button surface to the main context

Famo.us UI

  • Create a button element
  • Set the size, content, CSS properties, align, and origin on the element
  • Add the button element to the main context

Problems Solved

We have reduced the number of required steps in half and the mental load of working with Famo.us UI is much lower. We have reduced the code by about 40-60% and have completely abstracted away surfaces and modifiers into something much more intuitive – elements.

Some of you might have seen us at the last Famo.us meetup where we had a demo booth alongside Adobe, Intel, Facebook and Angular. Famo.us UI is currently in the private Famo.us Gitlabs. More to come later, with code samples as well.