Introducing Famo.us-Angular

Zack Brown | 28 Apr 2014

Famo.us and AngularJS Logos
Thomas Street is developing Famo.us-Angular, a library that lets you use Famo.us in Angular and Angular in Famo.us. This post is a quick walkthrough of what that means, why we're doing it, and when you can use it.

What is Famo.us?

If you haven't followed Famo.us over the last couple of years, it's probably worth starting out with a quick overview of what and who they are.

Famo.us is a start-up based in San Francisco, led by Steve Newcomb. Their core product is a brand-spanking-new front-end (JavaScript, browser) framework offering a powerful and novel rendering engine. In short, this rendering engine lets you create sweet animations. Why is this exciting, though? For me, at least, (and for many developers) this is exciting because these animations perform with a native and smooth feel across platforms, especially on mobile.

Let's make sure that sinks in: Famo.us lets you write a JavaScript app that you can run on iOS and Android (AND any other standards-compliant modern browsers) that is as responsive and high performance as a native app that you would download on the App Store or Google Play. In the past, the single biggest problem that anyone has faced when wanting to create a cross-platform, single-codebase app with web technologies is that out-of-the-box JavaScript animations just... well, suck on mobile. And Famo.us is the answer to that problem.

Check out some demos. (I think you'll have to register to see them.)

It's also worth clarifying right now that everything written in this post is a product of the opinions and thoughts of Thomas Street, not of Famo.us. None of the content of this post is officially endorsed by Famo.us.

Famo.us is young

Famo.us has been under development for over two years--so it's been carefully developed--but given that it was just released, there's no way around the fact that it's young. Don't get me wrong, though: if it's a kid, it's a 9-year-old violin prodigy. That kid has potential. You send that kid to Juilliard; you invest in it. Plus, you don't need to wait for it to grow up! In the meantime, it'll still play Tchaikovsky's Violin Concerto for you. (And to sort-of step back out of this awkward metaphor, who doesn't want a standing ovation from clients and customers?)

What does 'young' look like, though? Well, Famo.us as it stands right now is really just a rendering engine. It offers a full-blown physics engines, several different kinds of views and layouts, excellent animation tooling, and tie-ins to traditional HTML snippets--but for those of us steeped in the ways of the MVC, it's really just the V right now.

In fact, it's so view-y that the prescribed workflow for vanilla Famo.us authoring is to create a nested series of "Views." There are no models or controllers. There's no declarative process for creating your UIs, either. A View will instantiate its children somewhere in its JavaScript, and then those children will instantiate their children inside their JavaScript. This is one of the pain-points I've found with vanilla Famo.us--tracking down the hierarchy of your views requires digging through several files. This has very serious implications for maintainability, accessibility, and refactoring, too.

Example of nested Famo.us views

This is not a fundamental problem with Famo.us, though--it's simply a symptom of not yet having the support of a fully featured MVC (etc) framework to lean on for structure. Several of the developers I've seen using Famo.us have been building out their own organizational support in systems like Backbone and Marionette. A great thing about Famo.us, and something that is promising about its future (and probably required for its success) is that it integrates with these systems really well.

Enter Angular

What about AngularJS, though? Angular is among the most powerful client-side MVC frameworks available today. It offers first-class testing support, module organization, and template management, and it scales and extends remarkably well (if properly managed.) At Thomas Street, we've been working with Angular for a couple of years now across many projects, and it's one of the first tools we reach for when approaching a new web application. So a natural question for us to ask when we started with Famo.us was: "is there a way to leverage the organizational strengths of Angular as well as the performance strengths of Famo.us to create awesome apps?"

As things used to stand, the official answer was "no."

In partnership with the production agency Royale, Thomas Street had an opportunity to jump aboard the Famo.us private beta a couple of months before Famo.us launched. As I was learning Famo.us initially, I heard about two previous attempts to integrate Famo.us and Angular, both of which simply didn't work out. Most people had concluded that Famo.us and Angular are too different in approach--especially in that they both want total control of the DOM--and that they just weren't compatible.

After spending a couple of weeks on site at Famo.us, though, and getting a chance to wrap my head around the Famo.us concepts, I started to wonder if there wasn't some way they could play nicely together, after all.

It turns out, there was. And after a fair bit of work, Famo.us-Angular was born. (And, while the library is already functional, we have still have a lot of work ahead. Thomas Street has been working directly with Famo.us to roll this out right--and we're targeting a May 19th, 2014 release.) In short, Famo.us-Angular gives you the best of both worlds: notably, the organizational tools of AngularJS with the cross-platform, animation-rich rendering strength of Famo.us. I discussed this in a little more detail on-stage at the Famo.us launch event--here's a video, starting with Steve Newcomb introducing us:

We will save the rest of the juicy technical details, though, for upcoming blog posts. In particular, we will dive into our technical approach, our road map, and some feature highlights of Famo.us-Angular (not to mention, of course, some demos.) We are beyond excited about what the combination of these technologies means for the future of mobile and web development.

In the meantime, feel free to reach out to us at hello@thomasstreet.com if you have any questions, feedback, or ideas.

Or discuss on Hacker News.

Who are you, anyways?

Thomas Street is a web and mobile Design/Build group based in San Francisco and Seattle. We specialize in creative interaction design, boundary-pushing front-end development, and scalable back-end services.