App

The App class is the protagonist of your Arva App. Here you set the default entry controller that will have initial control over the application, configure routes, specify animation between screens, and setup whatever you want to do on an initial stage.

A minimal, clean App class will look something like this:

import firebase                     from 'firebase';

import {FirebaseDataSource}         from 'arva-js/data/datasources/FirebaseDataSource.js';
import {provide}                    from 'arva-js/utils/di/Decorators.js';
import {Injection}                  from 'arva-js/utils/Injection.js';
import {DataSource}                 from 'arva-js/data/DataSource.js';
import {App as ArvaApp}             from 'arva-js/core/App.js';

/* Importing CSS in jspm bundled builds injects them into the DOM automagically */
import './famous.css';
import './fonts.css';

/* Here we import all controllers we want to use in the app */
import {HomeController}             from './controllers/HomeController.js';

export class App extends ArvaApp {

    /* References to Dependency Injection created App and Controller instances, so they are not garbage collected. */
    static references = {};

    /* The controllers that will be used in the app. */
    static controllers = [HomeController];


    /* Define which DataSource to use */
    @provide(DataSource)
    static defaultDataSource() {
        /* Firebase initialization */
        firebase.initializeApp({
            apiKey: '<api-key>',
            authDomain: '<subdomain>.firebaseapp.com',
            databaseURL: 'https://<subdomain>.firebaseio.com',
            storageBucket: '<subdomain>.appspot.com'
        });
        return new FirebaseDataSource('/', {});
    }

    /**
     *  Called before the App is constructed and before the basic components (Router, Famous Context, Controllers,
     *  DataSource) have loaded.
     */
    static initialize(){
        /* Change initial route, view animation or something needed before we start */
        this.start();
    }

    /**
     * Called after the Router, Famous Context, and Controllers have been instantiated,
     * but before any Controller method is executed by the Router.
     */
    static loaded(){
        /* Instantiate things you need before the router is executed here. For example:
         *
         * this.references.menu = Injection.get(Menu); */
    }

    /**
     * Called by super class after all components (routing, controllers, views, etc.) have been loaded and the
     * app is up and running.
     */
    static done(){
    }
}

document.addEventListener('deviceready', App.initialize.bind(App));

If you won't be using Firebase or any external data, you can just omit the defaultDataSource out of the app. Basically there are three stages of the initialization:

• initialize: before any other initialization is done besides waiting for the device to be ready.
• loaded: When the Router, controllers, and Famous context are all setup
• done: After the controller has fired and the app is running