Desde as primeiras aplicações web começarem a ser criadas, o processo de seleção das tecnologias que seriam usadas num projeto bem como as definições arquiteturais que envolviam tais cenários sempre foram alvo de muita discussão sobre preferências. Levando em consideração um paralelo entre duas das mais usadas tecnologias para web (cliente + servidor), temos:

· No PHP, todo o desenvolvimento se dá através da sua linguagem que mistura código HTML entrelaçado entre códigos PHP. Do ponto de vista de design, isso nunca foi uma boa prática, inclusive adotada por outras plataformas e abandonada futuramente, como o Java, por exemplo.

· No Java, inicialmente usavam-se as JSPs que se assemelhavam às páginas PHP citadas quando códigos Java eram criados em forma de scripts diretamente dentro das páginas web. Atualmente, soluções alternativas e mais elegantes já existem como as tags customizadas (JSTL, JSF, etc.), além de vários frameworks de integração como Spring, GWT e o Apache Tiles.

Essa complicação toda aumenta quando, as mesmas tecnologias que antes eram focadas quase que completamente no servidor (salvos os casos em que precisávamos criar alguma validação de campos ou regras básicas de navegação via JavaScript no próprio browser), agora precisam dividir espaço com os diversos frameworks front-end que surgiram, muitos deles, inclusive, para substituir implementações inteiras que antes só eram possíveis no respectivo servidor.

Podemos citar vários dos quais jQuery, Bootstrap, AngularJS ou Prototype se encaixam e hoje demandam cargos em empresas que focam exclusivamente nesse universo: tecnologias front-end.

Tudo isso, atrelado ao já sucesso do Node.js com a possibilidade de ter uma “mão” no lado do servidor que é totalmente JavaScript, fez com que empresas migrasses tudo para front-end, que é mais leve, rápido e performático.

Mas para os que ainda precisam fazer uso de todo o potencial acumulado de tecnologias como JEE, ASP.NET, Ruby, etc. é muito importante entender como fazer a integração das mesmas com os referidos frameworks client side.

Este artigo trata de expor essa faceta da fase de desenvolvimento de um sistema web. Criaremos uma aplicação de agenda completa, que fará a integração de um módulo no servidor escrito em JEE + Spring (e seus módulos dependentes, como Security, Data e MVC) com os frameworks Bootstrap (para organização da responsividade e design nas páginas), AngularJS (para lidar com os serviços e comunicação com o servidor) e jQuery (para funções utilitárias e ajuda na seleção/manipulação dos campos da página).

Também faremos uso do popular framework de templates para Java da Apache, o Tiles, que se integrará às nossas páginas JSP fornecendo simplicidade e produtividade na exibição dos valores dinâmicos.

O banco de dados usado para salvar as informações será o MySQL, mas você pode usar qualquer um (lembrando que não será foco do artigo expor detalhes de banco, por não caber no escopo).

Montagem do ambiente

Para o artigo será necessário ter o conjunto de tecnologias/ferramentas instaladas no seu ambiente (vide seção Links):

· JDK 6 ou superior;

· IDE Eclipse Luna ou superior;

· Servidor Tomcat 7 ou superior (ou qualquer outro servidor de preferência);

· MySQL e MySQL Workbench (ou qualquer outros SGBD de preferência);

· Plugin do JBoss Tools para facilitar na criação dos tipos de projeto.

· Browser (de preferência uma versão recente do Chrome, que tem boas ferramentas de console e depuração client side).

Após baixar o zip do Eclipse, extraia todos os arquivos e execute o Eclipse.exe. Selecione um diretório para salvar o projeto e, uma vez dentro da IDE, vá até o menu Help > Eclipse Marketplace... e na caixa de buscas Find digite “JBoss Tools”. Nesse passo, atente para a versão da sua IDE e procure pelo plugin do JBoss Tools correspondente (pois ele tem uma versão para cada Eclipse diferente, o nome fica entre parênt ...