Getting Started

Prerequisites

Before you start using Realize.js to create amazing applications, we recommend a few things:

Familiarize yourself a little with React.js

The Realize.js uses is built on the framework React.js developed by Facebook, which gives us tremendous flexibility and control when it comes to front-end.

The biggest advantage we see in the use of the React can we encapsulate all behavior and presentation of a component "screen" in one place and in an organized manner and can focus on what’s really important.

The React documentation is quite extensive and covers just about everything you need to know to start creating applications quickly and although you do not need to be an expert in React to use Realize.js a knowledge of the basics will help you a lot!

Choose your package manager

You can get the Realize.js by Bower or as a npm package, you can use together with Webpack or Browserify, for example.

Setup

Bower + Grunt

We assume that you have the Bower, Grunt and its dependencies installed. If not, follow the guides on:

With both installed, start booting the bower. Open your terminal and run the following commands:

$ bower init
? name: realize-bower (1)
? version: 0.0.1
? description: Using Realize.js with bower (2)
? main file: app.js (3)
? what types of modules does this package expose?
❯◉ globals
...

  1. provide the name of your app

  2. and a description

  3. determine the file name that will be generated

Then add the Realize.js

$ bower install realizejs --save

Your file bower.json should resemble the contents below:

{
  "name": "realize-bower",
  "version": "0.0.1",
  "authors": [
    "Ariel Lindgren <ariel@wkm.com.br>"
  ],
  "description": "Using Realize.js with bower",
  "main": "app.js",
  "moduleType": [
    "globals"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "realizejs": "~0.8.33"
  }
}

At the end of this process you will be with all the necessary dependencies installed in your application. Now just create a Grunt task to consolidate all of these features.

To this end, we will start exports declaring the file bower.json:

{
  "name": "realize-bower",
  "version": "0.0.1",
  "authors": [
    "Ariel Lindgren <ariel@wkm.com.br>"
  ],
  "description": "Using Realize.js with bower",
  "main": "app.js",
  "moduleType": [
    "globals"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "realizejs": "~0.8.33"
  },

  "exportsOverride": {  (1)
    "jquery": {
      "js": "dist/jquery.js"
    },
    "jquery-serialize-object": {
      "js": "jquery.serialize-object.js"
    },
    "jquery.inputmask":{
      "js": ["dist/jquery.inputmask.bundle.js"]
    },
    "materialize": {
      "js": "dist/js/materialize.js",
      "css": "dist/css/materialize.css",
      "fonts": ["dist/font/material-design-icons/*", "dist/font/roboto/*"]
    },
    "realizejs": {
      "js": "dist/js/realizejs.js",
      "css": "dist/css/realizejs.css"
    },
    "string":{
      "js": ["dist/string.js"]
    }
  }
}

  1. insert this block in your bower.json

Now you must configure the Grunt. Create a file called package.json with the following content:

{
  "name": "realize-bower", (1)
  "version": "0.0.1",
  "devDependencies": { (2)

  }
}

  1. Use the same name given in bower.json

  2. to not fix the versions at the time of writing documentation, leave the "devDependencies" empty and we’ll add the references by the shell

We also need to create a file named Gruntfile.js with the following content:

var path = require('path');

module.exports = function(grunt) {

  grunt.initConfig({
    bower: {
      install: {
        options: {
          targetDir: './vendor/assets', (1)
          install: true,
          verbose: true,
          cleanTargetDir: false,
          cleanBowerDir: false,

          layout: function(type, component, source) {
            var renamedType = type;
            console.log(renamedType);
            if (type == 'js') renamedType = 'javascripts';
            else if (type == 'css') renamedType = 'stylesheets';


            return path.join(renamedType, component);
          }
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.registerTask('default', ['bower:install']);
};

  1. Set here the target folder where the assets will be copied to. In the example we are using the vendor/assets folder, used on most Rails applications.

For more information on Grunt tasks, go to the Grunt website mentioned above.

Now run the shell:

$ npm install grunt grunt-bower-task  --save-dev
# ... node output ...
$ npm install --save-dev
# ... node ... (1)
$ grunt (3)

  1. At that point, all the dependencies of the Grunt will be installed

  2. Copy the exported files specified in exportsOverride on the bower.json file to the target folder.

HTML Setup

After setup, make sure that RealizeJS files are included on your Header and Body HTML tags. The following example shows how to make the inclusion of those files.

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import realizejs.css-->
    <link type="text/css" rel="stylesheet" href="css/realizejs.min.css"  media="screen,projection"/>

    <!--Add to let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>
    <script type="text/javascript" src="js/realizejs.min.js"></script>
  </body>
</html>

Guides

We are working on some guides for you to get started implementing your applications with Realize.js real quick if you use Ruby on Rails and Spring, but you can use it with any back-end you want.