This is the fifth post in my Getting Started with Famo.us (GSWF) series. This series will cover my attempt at learning the Famo.us framework and hopefully provide useful information to anybody else trying to learn. You can follow along from the start by clicking the link below:
Last time we focused on the ‘Handling Events’ tutorial. This tutorial talked about how to fire and listen to events within a Famo.us application. Now we’re going to tackle the next lesson in the Famo.us University which takes a look at the Famo.us Starter Kit.
Up until now we’ve been using the live code editor provided within the Famo.us University to try some things out, but now we’re going to get it up and running on our own computer. The Starter Kit provides everything you need to get started including:
- a boilerplate example application
- documentation
- guides
- faqs
- tutorial material
- examples
- mobile interface demos
Let’s take a closer look at each of these…
1. Boilerplate example application
Open up the index.html file in the ‘starter-project’ folder in your browser and you should see the Famo.us logo, smoothly flipping around and around.
The code is very basic and does little more than include the core Famo.us code. The important file in here is the main.js file – this contains the application code which in this case adds our little spinner:
/*global famous*/
// import dependencies
var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
var ImageSurface = famous.surfaces.ImageSurface;
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.png',
classes: ['double-sided'],
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
transform: function () {
return Transform.rotateY(0.002 * (Date.now() - initialTime));
},
});
mainContext.add(centerSpinModifier).add(logo);For a little bit of fun I made of a copy of the starter project (best not to edit that one at all since you’ll be using it as the basis for all your future projects) and put a photo of me in place of the Famo.us logo.
Now’s probably a good time to have a little play around with the code and see if you can implement something cool from what you’ve learned so far.
2. Documentation
Under the ‘docs’ folder you will find some very detailed documentation. Of course I haven’t had time to go through all of it just yet but it looks to be very detailed, especially for a new framework. The documentation is split in categories including:
- core
- events
- inputs
- math
- modifiers
- physics
- physics/bodies
- physics/constraints
- physics/forces
- physics/integrators
- surfaces
- transitions
- utilities
- views
- widgets
3. Guides
The ‘guides’ folder contains some more in depth tutorials covering:
- The Famo.us Render Tree
- Positioning, Layout and Sizing
- Animation & Transitions
- Events
There is also a FAQ style guide that covers some common questions and pitfalls.
4. Tutorial Material
Under the ‘reference-tutorials’ folder you will find the source code to two examples: slideshow and timbre. These will be used in later Famo.us University tutorials – they’re separated out since we’re starting to get a little too advanced to keep coding in the live editor.
5. Examples
The docs and guides are great but this is really cool. Under the ‘examples’ folder you can find an example implementation of just about everything. Open up the index.html file of individual folders to check out how to implement different Famo.us features.
We’re starting to move past the baby steps now and get into the serious stuff. In the next tutorial we’ll be looking at building our very first app with Famo.us. In the mean time, I’d suggest really deep diving into this starter kit and playing around with all the bits and bobs supplied.