Sample Project: Use Famo.us and Angular to Create a Mobile Application
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
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 – it 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 blog post. Thanks again to Zack Brown for all of your 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 to illustrate how easily you can create HTML5 / JS projects which work at near native speeds on mobile applications.
Features
- The mobile applications 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 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 & install a web server (I use MAMP on OS X, or the built-in IIS server with Visual Studio on Windows)
Opening 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 (375×667):
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 pokemon and appending 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-20), and it pulls a Pokémon from the database which 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 here.
Continue reading %Sample Project: Use Famo.us and Angular to Create a Mobile Application%
LEAVE A REPLY
You must be logged in to post a comment.