NNO

JS

Começando

Você pode instalar o Unno via bower para começar.

   $ bower install unno
            

Modulos

O ponto de entrada é module. Você deve definir um ponto de entrada da sua aplicação e você pode criar um módulo chamado main ou app. Unno irá trata-los como ponto de entrada, isso é uma convenção do Unno.

   Unno.module('main', [/* deps */], function() {
     // code here
   });
            

Como você pode ver, a sintaxe do Unno foi inspirada no Requirejs. Para definir um módulo você deve informar três parametros: o nome do módulo, array de dependências e a função de definição do módulo. O módulo de entrada não precisa retornar nada, mas o demais módulos devem retornar um objeto, que será injetado em outro módulo, componente ou store.

   Unno.module('app', ['$react', 'App'], function(React, App) {
      React.render(App({}), document.getElementById('app'));
   });
            

Como podemos ver, criamos um módulo chamado app com duas dependências. A primeira é o próprio React e a segunda é o componente principal App. Após isso usamos o React para renderizar o componente dentro da página. O runtime do React é tratado como um componente especial que pode ser injetado em qualquer outro como você quiser. Nós falaremos sobre Addons mais a frente.

Componentes

Componentes são o núcleo do toolkit do Unno e nós usamos o React para construir todos os componentes. Caso você não saiba como React funciona, por favor veja o link React da página do projeto. Unno nos permite criar componentes sem nos preocuparmos com detalhes de baixo nível da API React. Você precisa apenas criar um objeto literal e retorná-lo, não precisa usar React.createClass ou React.createElement no código do seu componente.

   Unno.component('App', ['$dom'], function(DOM) {
      'use strict';

      var div = DOM.div;

      var App = {
         render: function() {
            return div({}, 'Application Component')
         }
      };

      return App;
   });
            

Nós criamos um componente simples chamado App e este componente depende do $dom. A dependência $dom é um alias para React.DOM. Nosso componente de aplicação renderiza apenas um elemento div na página. Neste exemplo estamos usando a sintaxe sem JSX.

Stores

O Store é responsável por manter dados entre componentes alem de compartilhá-los. Cada método do Store pode ser disparado como um evento. De fato, esta funcionalidade é levemente diferente de outras implementação do Flux, que usam uma Ação para invocar métodos do Store.

   Unno.store('SimpleStore', [], function() {
      'use strict';

      var SimpleStore = {
         add: function(item) {
            var data = this.getData();
            data.push(item);
            this.setData(data);
            this.notify();
         }
      };

      return SimpleStore;
   });
            

Neste exemplo, criamos um Store chamado SimpleStore. Este Store possui um método add que adiciona um objeto item. Após sofrer alguma mudança no Store nós devemos chamar o método notify. Este método notifica todos os componentes que estivem escutando o evento SimpleStoreChange. Aqui temos outra convenção do Unno, o padrão adotado para nome de evento é: nome do Store + sufixo 'Change'. Em nosso caso o nome do evento é 'SimpleStoreChange'.

Para registrar um escutador do evento no componente, devemos fazer:

   Unno.component('Simple', ['$dom'], function(DOM) {
      'use strict';

      var div = DOM.div,
          span = DOM.span,
          button = DOM.button;

      var Simple = {
         // trata o clique do botoa
         handleClick: function(e) {
            e.preventDefault();
            // dispara o metodo como um evento, passando um objeto como parametro
            Unno.trigger('SimpleStore.add', { id:1, name:'UnnoJS' });
         },

         // metodo que sera chamado após a notificacao do Store
         handleAddEvent: function(err, data) {
            if (err) return;
            console.log(data);
         },

         // registra o escutador do evento para 'SimpleStoreChange'
         componentWillMount: function() {
            this.simpleEventAdd = Unno.listen('SimpleStoreChange', this.handleAddEvent);
         },

         // desregistra o escutador do evento
         componentWillUnmount: function() {
            Unno.unlisten(this.simpleEventAdd);
         },

         render: function() {
            return div({},
               span({}, 'Simple Component'),
               button({ type:'button', onClick: this.handleClick }, 'Click Me!')
            )
         }
      };

      return Simple;
   });
            

Este código de componente é um pouco mais complexo que o último. Neste componente usamos a API do Unno para trabalhar com evento e disparar métodos do Store dinamicamente. Nós usamos métodos do ciclo de vida da API React, tais como componentWillMount para registrar o escutador do evento e componentWillUnmount para remover o escutador do evento.

Se você notar, o componente Simple não possui nenhuma dependência com o SimpleStore. O subsistema de eventos do Unno trata toda complexidade para nós. Neste caso, quando o usuário clica no botão, o Unno invoca o método add do SimpleStore passando um objeto como parâmetro. O Store adiciona este item e notifica todos os componente que estão escutando. Nós registramos o método handleAddEvent do componente como um escutador.

O método escutador possui uma convenção de assinatura também. Nós usamos a convenção de tratamento de erro do NodeJS, onde o primeiro parâmetro é sempre um objeto de erro (se houver ou null) e o segundo parâmetro é o dado do Store.

Addons

Unno fornece a você extensões, chamadas de Addons. Muitas dessas extensões são do core do próprio React. Cada addon possui seu próprio alias, prefixado com símbolo '$'. Algumas já foram usadas em nossos exemplos, ex. $react e $dom. Aqui está uma lista de todos os addons disponíveis no runtime do Unno.

   $react: biblioteca React
   $dom: Apenas um alias para React.DOM
   $storage: Uma abstração para trabalhar com a API LocalStorage
   $addons: Apenas alias para addons nativo do React
   $router: O componente ReactRouter ja empacotado.
            

Por favor veja os exemplos para maiores detalhes.

Utilities

Unno não possui dependência externa e ele fornece algumas funções utilitárias que podemos usar em nosso código. O namespace interno util fornece:

   Unno.util.each(lista, callback)
      Utiliza o 'callback' para iterar sobre a 'lista'.

   Unno.util.merge(from, target)
      Copia as propriedades do objeto 'from' para o objeto 'target'.

   Unno.util.isNull(value)
      Retorna true se o 'value' é nulo ou false caso contrário.

   Unno.util.isObject(value)
      Retorna true se o 'value' é um objeto ou false caso contrário.

   Unno.util.isArray(value)
      Retorna true se 'value' é um array ou false caso contrário.

   Unno.util.isFunction(value)
      Retorna true se 'value' é uma função ou false caso contrário.