Tutorial hero
Lesson icon

GSWF #2: Introduction to the Famo.us University

Originally published August 23, 2014 Time 6 mins

This is the second post in my Getting Started with Famo.us (GSWF) series. If you’re a follower of this blog you’ll know my background is in Sencha Touch and PhoneGap and I write a lot of articles and tutorials in that area, but when it comes to Famo.us I’m a complete newbie. 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 check out the rest of the series below:

As I mentioned in my previous post, I’ll be starting by taking a look at some of the tutorials in the Famo.us University. The first few lessons all include an interactive live code editor, which outputs what the application looks like to the right and gives you some instructions to the left. This is a nice way to jump in and give it a shot right away (although I’d probably prefer to jump right into setting it up on my system).

I completed the following lessons which had a combined estimated completion time of 30 minutes:

Hello Famo.us

The introductory tutorial walks you through some very basic code in Famo.us that creates a simple slide show app. The first concept we come across is that of components in Famo.us, which can be everything from basic components to pre-assembled widgets. A ‘Surface’ is the most basic and commonly used component.

function createSurface() {
  var firstSurface = new Surface({
    size: [200, 100],
    content: 'Hello Famo.us',
    properties: {
      color: 'white',
      textAlign: 'center',
      backgroundColor: '#FA5C4F',
    },
  });

  mainContext.add(firstSurface);
}

We can supply a properties configuration to our surface defining things such as color, and text alignment. Interestingly these are exactly the same as CSS properties, except with camel case instead of hyphens. For example:

  • text-align in CSS would be textAlign in Famo.us
  • background-color would be backgroundColor

This certainly makes things easy to remember and I assume all other CSS properties are available in Famo.us in this way. As an experiment I tried:

fontSize: ‘0.3em’

which did indeed decrease the size of the font in the surface. I also tried adding:

position: ‘relative’,

left: ‘50px’

which also worked. I could not however change the opacity of the surface. In the next part we create an assembled widget instead of a new surface. We create a new device view which is set to be an iPhone – this renders an iPhone device on the screen. Pretty cool.

function createDevice() {
  var deviceOptions = {
    type: 'iphone',
    height: window.innerHeight - 100,
  };

  device = new DeviceView(deviceOptions);

  mainContext.add(device);
}

A common theme in each of these steps is the mainContext which is defined as:

var mainContext = Engine.createContext();

and components are added to this mainContext i.e:

mainContext.add(device);

I’m assuming that this is similar to the Viewport in Sencha Touch but this has not been explicitly explained as of yet (note: it is explained in the next lesson!). As well as the ability to add components to the mainContext, we soon find out that we can also create nested structures by adding components to other components. For example, we can create a device widget and add that to the mainContext and then create a surface and add that to the device. Now we would have a surface being displayed inside of the device.

We’re also introduced to the Lightbox widget, which is something like a card layout or carousel for you Sencha Touch guys. We can add multiple slides to this lightbox and display the appropriate slide by running:

lightbox.show(slides[slideIndex]);

The lightbox then adds nice transition animations when slides are switched. I won’t talk about all the additional lightbox options that are discussed in the tutorial but it introduces some pretty cool options for animations including physics options i.e:

inTransition: { method: 'spring', period: 500, dampingRatio: 0.3}

Lowering the dampingRatio to 0.1 makes for a pretty cool, if not nauseating, wobbly transition.

Displaying Content

I was pretty impressed with what I saw in the first lesson. It seems to be very easy to make some pretty fancy and smooth looking animations. The second lesson covers displaying content. The concept of a ’Context’ and a ’Renderable’ are introduced.

  • Renderable: Objects that map to an element on the screen that you can see i.e. a ‘surface’ which maps to a DIV element in the DOM.
  • Context: Isolated rendering environments that renderables live in. It’s possible to have multiple contexts but for mobile applications it is usually just one.

The Famo.us engine is used to create a new context:

var Engine = require('famous/core/Engine');
var mainContext = Engine.createContext();

Similarly a surface is created using:

var Surface = require('famous/core/Surface');
var firstSurface = new Surface({
  content: 'subscribe to my newsletter ;)',
});

So as I understand, the mainContext is a ’Context’ and the surface is a ’Renderable’. Now we place our ’Renderable’ inside our ’Context’ by running:

mainContext.add(firstSurface);

As well as using a string, our content can also be any HTML or DOM element, so for example the following would work if I wanted to be super obnoxious about you subscribing to my newsletter:

content: '<h1>subscribe to my newsletter!</h1>';

As well as setting our content when we instantiate the surface, we can also dynamically change it at any time by using:

firstSurface.setContent('something different');

The tutorial also talks a bit about sizing. By default, if no size is supplied, then the surface will inherit the size of the parent context. But size can also be defined in the following ways:

  • Size in pixels [x, y]
  • Size in one dimension only [undefined, y] or [x, undefined]
  • Auto size based on content with [true, true]

Finally at the end of this lesson we reach an example where our hand isn’t held completely! You’re tasked to create a surface with some specific properties and display your name – go ahead and try this yourself first but here’s my resulting code:

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var mySurface = new Surface({
  size: [200, undefined],
  content: 'Josh Morony',
  properties: {
    backgroundColor: '#FA5C4F',
    color: '#fff',
    textAlign: 'center',
    fontSize: '40px',
    borderRadius: '15px',
  },
});

mainContext.add(mySurface);

If you haven’t already, give those lessons a shot and tell us how you go in the comments. What are your first impressions? In the next post I’ll continue working through the rest of the tutorials. If you have any suggestions for some challenges a little later in this series, perhaps we should try develop a specific app for example, leave a comment below.

Learn to build modern Angular apps with my course