Hello Famous!

Before we begin creating the carousel itself, let's display a basic "Hello World" message, just to establish the foundations for our application.

Throughout the app, we'll use the JavaScript "class" pattern to organize our code. It's a good idea to familiarize yourself with this pattern, since many Famous applications use it for structure.

A basic structure

Copy and paste the code snippets below into the files ../index.js and Carousel.js, which are included in the carousel starter kit that you downloaded in the getting started section.

 * ../index.js

var FamousEngine = require('famous/core/FamousEngine');


// App Code
var Carousel = require('./carousel/Carousel');
var imageData = require('./data/data');
var carousel = new Carousel('body', { pageData: imageData });

 * Carousel.js

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');

function Carousel(selector, data) {
    // Create a new Scene instance. Scenes are
    // the starting point for all Famous apps
    this.context = FamousEngine.createScene(selector);

    // Add the first scene graph node to the
    // context. This is the 'root' node
    this.root = this.context.addChild();

    // Decorate the node with a DOMElement
    // component, and use the component to apply
    // content and styling
    this.el = new DOMElement(this.root);
    this.el.setContent('Hello Famous!');
    this.el.setProperty('font-size', '40px');

module.exports = Carousel;


In the code above, note how the carousel constructor calls .createScene() on the Famous component and passes it a CSS selector for the specific DOM element (in this case, the 'body') that we want to mount our app to.

The scene object (returned from .createScene) forms the base of the Famous scene graph and handles attaching our app to the DOM. Adding child nodes to the scene -- extending the scene graph -- is the process by which we add visual elements to our app.

Pay attention to how the root scene graph node gets passed as an argument to the DOMElement component's constructor. This is how we decorate our scene graph nodes with visual components.

Next steps

Now that we understand how to put together a basic Famous scene, let's move on to architecting our more-complex carousel app.

Modified files: ../index.js | Carousel.js

Section recap: Code for this step

Up next: Architecture »