JavaScriptMVC

Colocado por Fábio Batista da Silva na(s) categoria(s): 1, 2.0, 6, action, Ajax, Aplicativos, app, AR, back, backend, BI, C#, class, classe, classes, código, Componente, Componentes, configuração, control, CRUD, css, dados, demo, Desenvolvimento, Design Patterns, development, Dica, dispatchEvent, Download, email, err, erro, error, Estilo, event, Evento, Eventos, Ferramenta, Flex, fonte, for, Formulário, formulario de contato, framework, function, gestão, git, Google, html, html5, IE, if, image, int, Java, Javascript, JQuery, label, labs, lista, map, mg, mvc, O, on, padrão, PHP, Plugin, pt, rails, RIA, Ria’s Geral, RoR, S+S, serviço, Serviços, string, tag, TAT, Tecnologia, template, Teste, tv, UI, uint, update, UX, web em 05 13th, 2011 | Sem comentários

Olá,

Com a chegada eminente do HTML5 e outras tecnologias baseadas em javascript como MongoDB e node.js
tenho deixado o Flex o meio de lado e me dedicado um pouco mais ao javascript.
Porem fica a questão, Como ter um front-end com a mesma performance, escalabilidade e desacoplamento que o flex permite ?
Realmente nesses termos ainda não encontrei nada que me proporcione o que o Flex proporciona.

Nesse Post vou falar um pouco sobre Framework JavaScriptMVC
Me perece uma das melhores alternativas para manter um frond-end JavaScript/HTML

JavaScriptMVC é formado por uma seria de ferramentas para construção de aplicativos JavaScript e consiste nos seguintes componentes:

StealJS -Gestão de Dependência
FuncUnit – Testes Unitários
jQueryMX – Biblioteca de Componentes
DocumentJS – Geração de JSDoc

O JavaScriptMVC pode ser utilizado com qualquer back-end , java,php,rails, etc…
Ele pode ser instalado baixando diretamente aqui ou instalando cada componente individualmente atreves do github.

Os componentes devem ficar nas raiz do diretório web da sua aplicação, nesse caso a pasta public.
Então as estrutura da aplicação fica assim.

public
  /documentjs
  /funcunit
  /jquery
  /steal
  /js

O JavaScriptMVC tem ferramentas de geração de código para auxiliar na criação da aplicação.
Vamos começar criando a aplicação pelo terminal, então o JavaScriptMVC vai gerar toda a estrutura do projeto.

    cd path-to-application/public/
   ./js jquery/generate/app contacts

Assim como o rails o JavaScriptMVC possui scaffolds que podem gerar seu CRUD.
Para isso basta executar o comando scaffold passando como parâmetro o nome do modelo.
Os nomes das classes seguem o seguinte padrão : ..
então temos o model “Contacts.Models.Contact”

     ./js jquery/generate/scaffold Contacts.Models.Contact

O JavaScriptMVC vai gerar o controlador, modelos, views e testes unitários da aplicação.
Porem o único arquivo que sera incluído na aplicação é o steal.js ele é responsável por gerenciar as dependências da aplicação.
No ambiente de desenvolvimento ele vai incluir individualmente todos os controladores, modelos, etc..

 type='text/javascript'  src='../steal/steal.js?contacts,development'>>

O parâmetro “?contacts” na tag de inclusão indica o nome do arquivo de configuração que tem o mesmo nome da aplicação nesse caso contacts.js
nele ficam mapeados todas dependências do projeto que serão gerenciadas pelo StealJS
contacts/contacts.js – Arquivo de configuração

steal.plugins(
    'jquery/controller',
    'jquery/controller/subscribe',
    'jquery/view/ejs',
    'jquery/controller/view',
    'jquery/model',
    'jquery/lang/json',
    'jquery/dom/form_params')

.css('contacts')

.resources()
.models('contact')
.controllers('contact')
.views();

Depois de fazer uma refatoração a aplicação ficou assim :

contacts/view/contact/contacts.html – Tela inicial da aplicação

>
    >
        >JS - MVC>
         type='text/javascript'  src='../steal/steal.production.js?contacts'>>
    >
    >
        
 id='contacts'>
            
>Contacts>
            
 id='contact'>>
        >
    >
>

contacts/view/contact/list_view.ejs – Template para a listagem de contatos


 class="link">
     href="javascript://" class='text_button create' >Create>
    
/>
>

 class="table">
    
>
        
>
            
>Name>
            
>E-Mail>
            
> >
        >
    >
    
>
        <%for(var i = 0; i < contacts.length ; i++)%>
        
 <%= contacts[i]%>>
            
><%= contacts[i].name%>>
            
><%= contacts[i].email%>>
            
 class="last">
                 href='javascript://' class='edit'>edit>%>
    >
>

contacts/view/contact/list_view.ejs – Template para o formulario de contatos


 <%= contact%> >
    
 action="#" class="form">
        
>
             class="label">Name>
            
 type="text" class="text_field" id="name" name="name" value="<%= contact.name%>" />
             class="label">E-Mail>
            
 type="text" class="text_field" id="email" name="email" value="<%= contact.email%>" />
        >
        
 class="link">
             href="javascript://" class="text_button save">Save>
             href="javascript://" class="text_button cancel">Cancel>
        >
    >
>

contacts/models/contact.js – Classe ‘Contacts.Models.Contact’ Reponsavel pela abstração do acesso aos serviços

$.Model.extend('Application.Models.Contact',
/* @Static */

    /**
     * Service url.
     */
    url: 'http://localhost/patho-to-app/contacts/',

    /**
     * Recupera os dados dos contacts do serviço no backend.
     * @param Object params
     * @param Function success
     * @param Function error
     */
    findAll: function( params, success, error )
        $.ajax(
            url     : this.url,
            type    : 'get',
            dataType: 'json',
            data    : params,
            success : this.callback(['wrapMany',success]),
            error   : error
        );
    },
    /**
     * Cria um novo contacto
     * @param Object attrs
     * @param Function success
     * @param Function error
     */
    create: function( attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success,
            data    : contact:attrs
        });
    }
    /**
     * Altera os dados de um contacto
     * @param String id
     * @param Object attrs
     * @param Function success
     * @param Function error
    */
    update: function( id, attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            data    : contact:attrs,
            success : success,
            error   : error
        });
    },
    /**
     * Remove um contacto
     * @param String id
     * @param Function success
     * @param Function error
     */
    destroy: function( id, success, error )
        $.ajax(
            url     : this.url + 'destroy/id/'+id,
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success
        );
    },
},
);

contacts/controllers/contact_controller.js – Classe ‘Contacts.Controllers.Contact’ Responde a eventos da view e do modelo

$.Controller.extend('Contacts.Controllers.Contact',onDocument: true,

     /**
     * Função chamada quando a página é carregada
     */
     load: function()
        this.findAll();
     ,

     /**
     * Função que renderiza a listagem de contatos apartir do template /contacts/views/list_view.ejs
     * @param Array contacts
     */
     listView: function( contacts )
        $('#contact').html(this.view('list_view', contacts:contacts ));
     },

     /**
     * Função que renderiza o formulario de contatos apartir do template /contacts/views/form_view.ejs
     * @param Contacts.Models.Contact contact
     */
     formView: function(contact)
        $('#contact').html(this.view('form_view', contact:contact));
     },

     /**
     * Função que lista os contatos atraves do model e renderiza a tela quando obtem resultado
     */
     findAll: function(){
        Contacts.Models.Contact.findAll(, this.callback('listView'));
     },

    /**
     * Listener para o evento 'click' no link create
     */
    '.create click': function()
        // cria um novo contato e monta o formulario
        var contact = new Contacts.Models.Contact();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link edit
     * @param jQuery el
     */
    '.edit click': function( el )
        // Recupera o contato selecionado e monta o formulario
        var contact = el.closest('.contact').model();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link destroy
     * @param jQuery el
     */
    '.destroy click': function( el )
        if(confirm("Are you sure you want to destroy?"))
            // Recupera o contato selecionado e o remove
            var contact = el.closest('.contact').model();
            contact.destroy();
        
     },

    /**
     * Listener para o evento 'click' no link save
     * @param jQuery el
     */
    '.save click': function(el)
        // Recupera o contato selecionado
        var contact = el.closest('.contact').model();
        // Recupera os dados do formulario
        var attrs   = $('.form').formParams();
        // Atualiza os dados no "objeto"
        contact.attrs(attrs);
        // Salva
        contact.save();      	// a função save é erdada do objeto Model
                               // ela verifica se o objeto ja existe e chama o metodo create ou update
    ,

    /**
     * Listener para o evento 'click' no link cancel
     */
    '.cancel click': function()
        this.findAll();
    ,

    /**
     * Listener para o evento 'created' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.created subscribe': function( called, contact )
        this.findAll();
    ,

    /**
     * Listener para o evento 'updated' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.updated subscribe': function( called, contact )
        this.findAll();
    ,

     /**
     * Listener para o evento 'destroyed' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    "contact.destroyed subscribe": function(called, contact)
        this.findAll();
     
});

Agora antes de colocar a aplicação em ambiente de produção podemos compactar todos os arquivos .js e .css gerando uma versão final.

 ./js contacts/scripts/build.js

O StealJS utiliza o Google Closure para compactar todos os arquivos
e gerar arquivos compactados/concatenados que serão usados em produção contacts/production.js e contacts/production.css .

Com isso reduzimos todos os arquivos da aplicação, estilos, plugins, etc.. são reduzidos a apenas um arquivo .js e um arquivo .css.
E para mudar as configuração do ambiente temos apelas que mudar o tag de inclusão do StealJS

<script type='text/javascript'  src='../steal/steal.production.js?contacts'>script>

Esse foi apenas uma pequena amostra do JavaScriptMVC.
Com essa estrutura ele nos permite construir grandes aplicações de forma modular
com um bom ambiente de teste, velocidade no desenvolvimento e performance no ambiente de produção.

Essa aplicação esta rodando aqui : http://flexria.com.br/labs/js-mvc/
E os fontes estão disponíveis no github : https://github.com/FabioBatSilva/js-mvc

Abraço e até a próxima….