Hello Framework

The Famous Framework provides a structured API for controlling UI elements with the Famous Engine. As a framework, its goals are to bring composability, extensibility, and consistency to UI applications.

The basics

All Famous Framework projects begin with the following syntax:

FamousFramework.component('module-name',  { /* module definition /* });

The bulk of a project lives within the module definition, where we list our behaviors, events, states, and tree as members of an object (see Core Concepts for an intro to the BEST architectural pattern).

A simple project

Check out the 'Hello World' example below. When reading through the code, think of the tree as Famous-enhanced HTML and the behaviors as CSS styles on steroids.

*  hello-framework.js

FamousFramework.component('my-name:hello-framework',  {
    behaviors: {
        '#background': {
            'style': {
                'background': 'linear-gradient(to right, #00B9D7, #9783F2)'
        '#text': {
           'size': [400, 80],
           'align': [0.5, 0.5],
           'mount-point': [0.5, 0.5],
           'style': {
               'color': 'white',
               'font-family': 'Lato',
               'font-size': '60px',
               'text-align': 'center'
    events: {},
    states: {},
    tree: `
        <node id='background'>
        <node id='text'> 
            <div> Hello Framework! </div>

Note how we use CSS selectors (#background, #text) to target behaviors to elements that are declared in the tree.

While the tree sets up the structure of our app, the behaviors tell the module how each element should be displayed. The result: a 'Hello Framework!' message centered and styled in front of a CSS gradient background.

Creating your component

In a framework project, create a new component directory within lib/core-components called my-name.

Create a subdirectory within that one for your new component called hello-framework.

In that subdirectory, create the file hello-framework.js. The result should be like this:


In that file, add the framework boilerplate:

FamousFramework.component('my-name:hello-framework', {
    /* Your BEST code goes here */
    /* See example above */

Note how the string my-name:hello-framework matches the filename my-name/hello-framework/hello-framework.js. This matching is required.

If your local dev server is currently running, stop it now. The restart it with:

$ npm run dev -- -e my-name:hello-framework

Now surf to localhost:1618/?ff=my-name:hello-framework. (Note the query string in the URL.)

Changes you make to that file should trigger automatic reload.