Ionic and Famo.us are Javascript frameworks that aim to bridge the gap between the web and native app world, so that web technologies can compete with the native experience.
Ionic
Ionic is focused on on creating beautiful hybrid mobile apps in HTML/CSS, and their ecosystem, tooling and library provide a great experience that allows web developers to leverage their skills quickly and effectively in the mobile app space. But despite the cohesive and rich experience they can provide, extending their framework solely relies on the use of HTML5 and CSS3 - without their internal focus on performance and native feel, components you extend it with may not be the same quality or seamlessness as what the Ionic team can provide.
Famo.us
Famo.us is a framework obsessively concerned with making the browser interactive UI experience fluid, effortless, and fast. They haven't provided the same kind of ecosystem and tooling that Ionic has (yet), but their competitive edge is definitely in the power their layout engine provides. Where Ionic has lots of built-in, native feeling components, Famo.us instead provides all of the tools you need to build a native feel yourself on a foundation that is designed to perform. They've worried about what makes the browser experience as fluid as possible, so if you manipulate it through their API, you don't have to.
Working together
Most articles you see only want to compare the two and claim which is 'better'. I think a more interesting and beneficial path is to see if we can use the two to play off each other: Use Ionic to scaffold your applications and easily achieve a native theme and feel, while using Famo.us to power more complex interactions that Ionic doesn't provide an easy capability for.
Getting Setup
For this tutorial, we're going to use the Ionic Beta 14 framework/tooling, and Famo.us 0.3.2. Since Ionic is an AngularJS project, we'll use the Famo.us/Angular project which provides easy-to-use directives for controlling Famo.us from your HTML views.
To install the ionic tools, you'll need npm. We're also going to throw in bower for installing famo.us.
npm install -g ionic bower
Now that we have the ionic cli installed, we'll use one of their starter templates as the base of our project. The sidemenu template provides a sliding side menu with routing and a modal example.
ionic start famously-ionic sidemenu cd famously-ionic
You can run ionic serve to make sure everything installed correctly, and have a live-reloadable version of your code running in the browser.
ionic serve
Now to install famo.us and the angular integration, and save it to our bower.json file
bower install famous-angular --save
If asked which angular version to choose, choose from the 1.3.x releases.
In your www/index.html file, add in references to the famous code you installed with bower.
Go into www/js/app.js, and add famous.angular as a dependency.
angular.module('starter', ['ionic', 'starter.controllers', 'famous.angular'])
Now we're ready to embed Famo.us content into our views. For this example, all we will do is embed a Famo.us Surface, which is the most basic piece of renderable content in the Famo.us layout engine.
Go into www/templates/playlists.html, and replace the entire content with this
<ion-view view-title="Famo.us">
<ion-content>
<fa-app style="height: 200px">
<fa-surface fa-background-color="'red'">
Famo.us, deep in the heart of Ionic.
</fa-surface>
</fa-app>
</ion-content>
</ion-view>
What we've done here is setup one of the simplest Famo.us examples you can create. Each snippet of Famo.us content you display using their angular integration begins with the fa-app directive.
<fa-app>...</fa-app>
To display any actual content to the screen, it must be wrapped in a Surface. Using the fa-surface directive makes that very easy to do, and in our example simply contains a small snippet of text which will be rendered in the browser.
<fa-surface>...Content to render...</fa-surface>
Following these steps, you should have an embedded Famo.us surface in your Ionic app!
Conclusion
This hardly scratches the surface of what could be possible in using these two frameworks together, and i'll be exploring each individually and combined in future posts. For now, head over to my Famo.us/Ionic Demo project on Github to get a fully working version of what you've read here with some additional examples. Feel free to comment if you have any suggestions or thoughts on what an Ionic/Famo.us combination could mean for you!