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.
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 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.
- 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
- Create a button element
- Set the size, content, CSS properties, align, and origin on the element
- Add the button element to the main context
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.