NPDD/Baobáxia/Infra Interface

Infraestrutura da Interface

Backbone.js

Backbone.js (http://backbonejs.org/ é uma biblioteca de Javascript para construção de interfaces, toda baseada em leitura de dados em arquivos .json, oferecida por uma API REST.

Por isso, ela está pegada na estrutura da API REST

Estrutura básica do Backbone

/base
  index
  /js
    app.js
    main.js
    router.js
    /collections
      /media
        MediaCollection.js
      /mocambola
        ...
      /mucua
        ...
      /repository
        ...
    /lib
      backbone-amd.js
      jquery-min.js
      require.js
      underscore-amd.js
    /models
      MediaModel.js
      Mocambola.js
      Mucua.js
      Repository.js
    /views
      /media
      /mocambola
      /mucua
      /repository
  /templates

Fluxo do funcionamento do backbone

Funcionamento das rotas

1) index.html Carrega o main.js (inicializador do backbone) e a biblioteca require.js (biblioteca de carregador de bibliotecas) <script data-main="js/main" src="js/lib/require.js"></script>

2) main.js Seta as configurações do require, e define os caminhos das bibliotecas utilizadas (jquery, underscore, backbone etc), e inicializa a aplicação (app.js)

3) app.js Chamado pelo main.js, diz quais libs serão usadas (jquery, underscore, backbone e router.js) e chama o router.js

4) router.js Configuração do mapa de rotas (routes) e funções de ativação das rotas

Funcionamento das rotas

1) Ao receber uma rota, encaminha para a função. Ex.:

a) http://localhost/baobaxia_2/baobaxia/tests/backbone-requirejs_0/#redemocambos/dandara

-> enviará para a rota getMucua

b) http://localhost/baobaxia_2/baobaxia/tests/backbone-requirejs_0/#redemocambos/dandara/bbx

-> enviará para rota listBbxCommands

etc...

Funcionamento de uma visualização

http://localhost/baobaxia_2/baobaxia/tests/backbone-requirejs_0/#redemocambos/dandara/bbx/medias:uuid'

a) chama MediaModel e pega dados da API REST (Django)

b) chama MediaView, e renderiza resultados na template

c) MediaView instancia templates e prepara saída HTML, compila e aplica via Jquery