Animating Web UIs for Real-time Apps with Famo.us, AngularJS

In a previous tutorial (from our massive library of AngularJS walkthroughs), we built a real-time chat application using AngularJS.

In this blog post, we’re making our original AngularJS chat application extra beautiful with Famo.us integrated with AngularJS, enabling us to build smooth and lightweight UIs.

The project brings up a few questions:

• Will Angular wrestle with famous-angular for control of the DOM?
• Is this too much for a decent page load?

The one guarantee is that the PubNub-AngularJS library stays out of the struggle. It performs it’s duties silently in the background, exhilarating precision and speed as it distributes messages across the world.

Want to see it in action? Head over to our live AngularJS-Famo.us demo chat application. Notice how smoothly the UI animates as you navigate throughout the application.

AngularJS vs. AngularJS/Famo.us

In the two .gifs below, check out the difference in the UI, and how it animates when messages are sent.

AngularJS/Famo.us Chat App Code Walkthrough

In the index.html the following CDN links are added:

Famo.us is new, so there aren’t any common CDN links out there. To make the chat application, this app used GitHub. You can try out RawGit.com. It’s good for testing, but it’s not recommended to serve Amazon-like traffic at a production scale.

Next we need the correct dependency injections. This snippet is taken from app.coffee, which doubles as a router. Note that this is written in Coffeescript.

Let’s take a look at the html.haml. All html code from here is written in Haml markup language. The first portion initializes the famous-angular app with fa-app. Famous calls this a “context”. The Haml snippets are from chat.html.haml.

Note that the height has to be explicitly set.

The next portion uses a famous modifier like an html div. The modifier also translates the top message 5px over and 15px down. It also gets the properties of the modifier.

Next we specify the surface. Surfaces are how famous renders html elements.

The rest of the code is similar to the previous portion. It contains the rest of the messages, which don’t need any animation.

Coffeescript

The haml is not complete without the code, which actually sets the properties of the modifiers. The source file is main.coffee.

The poptext function is called everytime a new message is received from the channel.

Wrapping Up

The Famo.us – AngularJS integration play very well with one another. We know this because we can nest Angular directives within famous-angular directives. The page load is fast, even with custom CDNs. Most importantly, the animation runs at a noticeably respectable frame rate.

This is because Famo.us is designed to work on smaller screen sizes (think mobile). If you want more information on the technical side of Famo.us, I recommend reading this article from IBM.