Começando

Pré-requisitos

Antes de você começar a usar o Realize.js para criar aplicações incríveis, recomendamos algumas coisas:

Se familiarize um pouco com o React.js

O Realize.js utiliza é construido sobre o framework React.js desenvolvido pelo Facebook, o que nos proporciona uma enorme flexibilidade e controle quando falamos de front-end.

A maior vantagem que vemos no uso do React é que podemos encapsular todo o comportamento e apresentação de um componente "de tela" em um único local e de forma organizada, podendo focar no que realmente é importante.

A documentação do React é bem extensa e cobre praticamente tudo que você precisa saber para começar a criar aplicações rapidamente e embora você não precise ser um expert em React para utilizar o Realize.js, um conhecimento dos conceitos básicos irá lhe ajudar muito!

Escolha seu gestor de pacotes

Você pode obter o Realize.js pelo Bower ou como um npm package, que você pode usar em conjunto com o Webpack ou Browserify, por exemplo.

Instalação

Bower + Grunt

Assumimos que você possui o Bower, o Grunt e suas dependências instalados. Caso não tenha, siga os guias em:

Com ambos instalados, comece inicializando o bower. Abra seu terminal e execute os comandos abaixo:

$ 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
...

forneça o nome da sua app
e uma descrição
determine o nome do arquivo que será gerado

Em seguida, adicione o Realize.js

$ bower install realizejs --save

Seu arquivo bower.json deve se parecer com o conteúdo abaixo:

{
  "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"
  }
}

Ao final deste processo, você estará com todas as dependências necessárias instaladas na sua aplicação. Agora basta criar uma tarefa do Grunt para consolidar todos esses recursos.

Para tal, vamos começar declarando exports no arquivo 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/realize.js",
      "css": "dist/css/realize.css"
    },
    "string":{
      "js": ["dist/string.js"]
    }
  }
}

insira esse bloco no seu bower.json

Agora é necessário configurar o Grunt. Crie um arquivo chamado package.json com o seguinte conteúdo:

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

  }
}

Use o mesmo nome dado em bower.json
a fim de não fixar as versões no momento em que escrevemos a documentação, deixamos o "devDependencies" vazio e vamos adicionar as referencias pelo shell

Crie também um arquivo chamado Gruntfile.js com o seguinte conteúdo:

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']);
};

Informe aqui a pasta de destino para onde os recursos deverão ser copiados. No exemplo, usamos a pasta vendor/assets, no padrão do Rails.

Para mais informações sobre tasks do Grunt, acesse o site do Grunt mencionado acima.

Agora execute no shell:

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

Nesse ponto, todas as dependencias do Grunt estarão instaladas
Executa a cópia dos arquivos exportados em exportsOverride do bower.json

Ao término, todos os arquivos estarão disponíveis na pasta especificada em targetDir, no exemplo acima, ./vendor/assets.

Configuração HTML

Apos instalação, certifique-se que os arquivos do RealizeJS estão sendo referenciados corretamente em seu cabeçalho e no corpo do HTML. Segue um exemplo de como pode ser feito a referência.

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

    <!--Adicione para informar o browser que o site é otimizado para dispositivos móveis-->
    <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>

Guias

Disponibilizaremos em breve alguns guias no nosso site para você começar a implementar suas aplicações com o Realize.js bem rápido caso você utilize Ruby on Rails ou Spring, mas você pode utilizá-lo com qualquer back-end que desejar.