Tutorial hero
Lesson icon

Getting Started with the Famo.us Mobile Framework

Originally published August 19, 2014 Time 5 mins

Famo.us is the exciting new player to the field of HTML5 mobile application development. Although it’s hyped up release was met with some disappointment, they’re continuing to make moves and get their name out there.

If you haven’t had a chance to check out Famo.us yet they have plenty of demos up on their site (I feel like half of the demos don’t actually work on a desktop though, is that just me?). Phil Merrell from my Beginners Guide to Sencha Touch eBook also created a pretty slick looking sliding menu demo with Famo.us.

Sencha Touch and PhoneGap have been my tools of choice for a couple of years now and I have become very proficient and comfortable with it. I still think Sencha Touch is the best and most stable framework available for general mobile development. But all of this is based off of research and the opinions of others, I want to expand out into other frameworks as well so I can have a better appreciation of the strengths and weaknesses of different frameworks.

Famo.us is a bit different to most other frameworks, so it makes it an interesting tool to play around with. Their approach has been to completely rewrite the layout engine.

Browser layout engines were designed in the 1990s to render text documents with links. The Famo.us layout engine was built from the ground up to render the apps and games of today. http://famo.us/

So if you want to create fancy looking applications with cool transitions, animations and 3D elements, Famo.us might just be the tool for the job. As Phil mentioned in his article linked above:

With libraries such as Famo.us and Google's Polymer web components, I think web UI will turn out to be every bit as beautiful and capable as native apps on Android and iOS. Phil Merrell

Although I’ve looked quite a bit into it, I’m yet to get my hands dirty with Famo.us. So alongside my usual Sencha Touch and PhoneGap content I’ll be writing a new series of articles focused around learning Famo.us!

Getting started with Famo.us

As someone with very little experience with the framework, I’ll be documenting my successes and failures as I go through the learning process. I’ll share whatever bits of information I think might be useful for others trying to learn as well. It’s certainly helpful to learn from someone who is an expert on the subject matter, but I think it can be just as useful or even more so to follow along with others who are going through the learning process themselves. What experts might take for granted as being easy or obvious, a beginner who’s just recently overcome some problem will probably be able to explain it much better.

So, I implore you to come along on this journey with me. If you’ve been considering giving Famo.us a crack or are just looking for a new challenge jump on board with us. Follow this series, comment with what you’re doing – what you’re succeeding with and what you’re struggling with. I’d love to be able to incorporate content from the community into future posts to share and discuss with everyone else.

First steps

So, here I am (and possibly you as well) completely new to the framework – where do we go first? Fortunately Famo.us has created some pretty extensive learning resources in at their Famo.us University. Here you’ll find a series of tutorials, which feature an embedded code editor and live example – this is a really nice way to jump right in.

To start off with I’ll be tackling their first few lessons including:

  • Hello Famo.us
  • Displaying Content
  • Positioning Elements
  • Creating Animations

After I’ve made my way through these, I’ll create a new blog post covering my progress and if you decide to give these a shot too I look forward to hearing how you go with it. If you’re reading this long after it’s been posted and other parts of this series are already up, feel free to give these a shot anyway before reading the next article!

Update: Part 2 is now available!

Learn to build modern Angular apps with my course