Create a Mobile App Using Famo.us and Angular

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 EdgeHTML, the rendering
    engine for Microsoft Edge and hosted web app content on Windows 10)

Setup

  1. Download
    the source from GitHub.
  2. 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

  1. Start
    your web server.
  2. 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):

Mobile app were creating displayed on iPhone 6 emulator

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:

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:

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.

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:

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:

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.

Where
Angular Finally Comes In

Now
here's where you can put all of your Angular skills and data binding to work
with the Angular implementation. If you're already experienced with
Angular, then it's not radically different here.

This
button appears on the first screen and simply pulls another Pokémon from the
database. All of the ng (Angular) directives you are familiar with are here,
such as ng-click. I have multiple functions
here. Notice that they are not comma-separated.

I am
also binding the value of $scope.nextBtn to {{nextBTn}} in HTML.

To
allow Famo.us and Angular to work together, we need to include $Famo.us at the
top of our JavaScript file. Here's how you do it:

Animations

What
would a high-performance app be without animations? Famo.us is packed with
them, which makes it easy to get started. Here's one for animating the image on
the front.

There
are several curve types you can use here. Checkout the docs for more info. I'm
also using a callback function, returnToOrigSize, to have the image grow
and then shrink back to the original size.

Points
of Frustration

I ran
into a few issues along the way.

FA-Directives Have Their Properties Set as Strings

If you
have a spelling error, the app will just use the default values for that
property. This snagged me several times, which is why you see I set all of my
properties as an object, such as align.frontName, to
make it easier to read.

Adding
Classes

In
FA-Directives you add multiple classes as strings and they are not comma-separated.

If you
try to add classes by creating surfaces in JavaScript, you pass in an array of
strings.

It took
me a while to understand that, as I only found the solution in thisthread.

Famo.us
+ Angular Seems to Be Deprecated (For Now)

Midway
through this project, I saw that Famo.us was working on an improved version of
the framework that includes Mixed Mode. Famo.us + Angular doesn't
take advantage of these additions (yet) at least. That doesn't mean FA is going
anywhere, as it works perfectly fine—it's just that you won't be getting the
latest features.

Resources

More Hands-On With JavaScript

This article is
part of the web development series from Microsoft tech evangelists on practical
JavaScript learning, open-source projects, and interoperability best practices, including Microsoft
Edge
browser and the new EdgeHTML rendering engine

We encourage
you to test across browsers and devices including Microsoft Edge—the default
browser for Windows 10—with free tools on dev.modern.IE:

In-depth tech
learning on Microsoft Edge and the Web Platform from our engineers and
evangelists:

More free
cross-platform tools and resources for the web platform:

Source: Tuts Plus

About the Author

Comments

  1. … [Trackback]

    […] Read More here: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  2. … [Trackback]

    […] There you will find 67024 more Infos: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  3. … [Trackback]

    […] Read More Infos here: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  4. … [Trackback]

    […] Find More Informations here: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  5. … [Trackback]

    […] Read More: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  6. … [Trackback]

    […] Read More: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  7. lawyer says:

    … [Trackback]

    […] Read More: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  8. … [Trackback]

    […] There you will find 92484 more Infos: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  9. eshopex says:

    … [Trackback]

    […] Read More here: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]

  10. … [Trackback]

    […] Read More here: designncode.in/create-a-mobile-app-using-famo-us-and-angular/ […]