Mobile Development: Create a Mobile App Using Famo.us and Angular

I love high-performance JavaScript, and I love sharing what I believe is its true potential. In this tutorial, I want to focus on Famo.us, which can allow you to maintain a silky-smooth 60 frames per second while having fluid animations on screen.

Famo.us does this by utilizing the CSS3 primitive -webkit-transform: matrix3d, which lets the framework compute the composite matrix and skip the browser’s renderer. No plug-in, no download, no hack. By appending this to each DIV, developers can render the composite matrix and go straight to the GPU.

I go more in-depth when discussing the ins and outs of Famo.us in this blogpost. Thanks to Zack Brown for all of his assistance with this! Let’s get started.

By the end of this project you will be able to:

understand how Angular works within the context of a Famo.us application
harness the true power of JavaScript and the good parts of HTML5
create smooth animations

My goal for this project is to illustrate how easily you can create HTML5 and JavaScript projects that work at near-native speeds on mobile applications.

Features

The mobile application runs on iOS and Android via Cordova.
The Windows 10 universal app runs natively on, well, Windows 10.
This project can also be run as a hosted website, although I have it scaled which is best for mobile devices.

Requirements

PC or Mac
Web server
Cross-platform test matrix (like a BrowserStack, IDE, or free virtual machines for Edge HTML, the rendering engine for Microsoft Edge and hosted web app content on Windows 10)

Setup

Download the source from GitHub.
Download and install a web server (I use MAMP on OS X, or the built-in IIS server with Visual Studio on Windows).

Open the Project

Start your web server.
Navigate to famous-angular-Pokemon/app/.

The project is designed to work on mobile devices, so use the mobile emulator in your browser to get the correct view. Here's what it would look like on an iPhone 6 inside the emulator via the Chrome desktop browser (375x667):

How It Works

Hitting the Database
I pull all of the information from the PokeAPI, which has a well-documented API, but it's missing images for each of the Pokémon. For the images, I just pull the name of the currently chosen Pokémon and append it to the end of this URL: http://img.pokemondb.net/artwork/. For example: http://img.pokemondb.net/artwork/venusaur.jpg will lead you to an image of Vanosaur. Nifty, right? Sadly, they do not have an API available.

Each time the user presses the Next button, a random number is generated between a min/max value that I've defined (say, 1 to 20), and it pulls a Pokémon from the database that matches that number. Here's what it looks like:

http://pokeapi.co/api/v1/pokemon/1/ returns a JSON object for Bulbasaur. You can play with their API.

Looping Through the Data
I then loop through that JSON object and set the properties I find to variables in Angular, using the $Scope object.

Here's an example:

/*
* Grab Pokemon from the DB
*/
$scope.getPokemon = function () {
// Generate a random num and use it for the next pokemon
getRandomInt($scope.minVal, $scope.maxVal);
// Retrieve data from DB and draw it to screen
$http.get($scope.dbURL + $scope.pokemonNum + "/")
.success(function(data) {
$scope.name = data.name;
$scope.imageUrl = $scope.imgDbURL + $scope.name.toLowerCase() + '.jpg';
/* 1) Empty out the current array to store the new items in there
* 2) Capitalize the first character for each ability from the database
* 3) Store that ability in a new abilityObj & add it into the abilities array
*/
$scope.abilities.length = 0;
for (var i = 0; i < data.abilities.length; i++){
var capitalizedString = capitalizeFirstLetter(data.abilities[i].name);
var abilityObj = {name: capitalizedString };
$scope.abilities.push(abilityObj);
}
$scope.hitPoints = data. hp;
var firstType = data.types[0].name;
$scope.types.name = capitalizeFirstLetter(firstType);
determineNewBgColor();
})
.error(function(status){
console.log(status);
$scope.name = "Couldn't get Pokemon from the DB";
});
};

You may notice that I also have a few other functions here, such as capitalizeFirstLetter, which does exactly that. I wanted the abilities and type (e.g. poison, grass, flying) to have the first letter capitalized, since they come back from the database in all lowercase characters.

I also loop through the abilities and push them to an ability object, which looks like this:

$scope.abilities = [
{ name: "Sleep"},
{ name: "Eat" }
];

The database also returns multiple types for certain Pokémon, such as Charizard, who is flying as well as fire. To keep things simple, though, I only wanted to return one from the database.

$scope.types = { name: "Grass" };
var firstType = data.types[0].name;

Drawing It to the Screen

Famo.us has two waves of drawing content to the screen by creating surfaces, which are the elements that contain your text, images, etc.:

JavaScript
FA-Directives (HTML)

I didn't use JavaScript to draw the surfaces in this app. Instead I chose to use only FA (Famous-Angular) Directives, such as:

<fa-modifier
fa-origin ="origin.center"
fa-align ="align.frontName"
fa-size ="size.frontName"
fa-translate ="trans.topLayer">
<fa-surface
class ="front-name-text">
{{name}}
</fa-surface>
</fa-modifier>

This is for the name above the Pokémon on the front screen.

You'll notice that the surface is wrapped by a fa-modifier. You can read about those in the Famo.us documentation, but they essentially adjust the properties of a surface, such as alignment, size, and origin. It took me a while to wrap my head around the difference between alignment and origin, so here's how I came to understand it.

Origin

This is the reference point on any surface. If I want to draw a rectangle and move it around the screen, I need to decide which point on that rectangle will be my starting point. The Famo.us docs explain it well. The values are laid out as follows:

$scope.origin = {
// X Y
topLeft: [0, 0 ],
topRight: [1, 0 ],
center: [0.5, 0.5],
bottomLeft: [0, 1 ],
bottomRight: [1, 1 ]
};

Alignment

This is a surface's location on the screen. When you make changes to the alignment, it is using the origin as the reference point to start from.