TOC

Introdução aos WebJars

Introdução aos WebJars

1. Visão geral

Este tutorial apresenta os WebJars e como usá-los em um aplicativo Java.

Simplificando, os WebJars são dependências do lado do cliente empacotadas em arquivos JAR. Eles trabalham com a maioria dos contêineres da JVM e estruturas da web.

Aqui estão alguns WebJars populares:Twitter Bootstrap,jQuery,Angular JS,Chart.js etc; uma lista completa está disponível emofficial website.

2. Por que usar WebJars?

Esta pergunta tem uma resposta muito simples - porque é fácil.

Manually adding and managing client side dependencies often results in difficult to maintain codebases.

Além disso, a maioria dos desenvolvedores Java prefere usar o Maven e Gradle como ferramentas de gerenciamento de compilação e dependência.

O principal problema que o WebJars resolve é disponibilizar dependências do lado do cliente no Maven Central e utilizá-lo em qualquer projeto Maven padrão.

Aqui estão algumas vantagens interessantes dos WebJars:

  1. Podemos gerenciar de forma explícita e fácil as dependências do lado do cliente em aplicativos da Web baseados em JVM

  2. Podemos usá-los com qualquer ferramenta de construção comumente usada, por exemplo: Maven, Gradle, etc

  3. Os WebJars se comportam como qualquer outra dependência do Maven - o que significa que também obtemos dependências transitivas

3. A dependência do Maven

Vamos pular direto para ele e adicionar Twitter Bootstrap e jQuery apom.xml: __ 


    org.webjars
    bootstrap
    3.3.7-1


    org.webjars
    jquery
    3.1.1

Agora, o Twitter Bootstrap e o jQuery estão disponíveis no caminho de classe do projeto; podemos simplesmente referenciá-los e usá-los em nosso aplicativo.

Observação: você pode verificar a versão mais recente das dependênciasTwitter BootstrapejQuery no Maven Central.

4. O aplicativo simples

Com essas duas dependências WebJar definidas, vamos agora configurar um projeto Spring MVC simples para poder usar as dependências do lado do cliente.

Antes de chegarmos a isso, no entanto, é importante entender queWebJars have nothing to do with Spring, e só estamos usando o Spring aqui porque é uma maneira muito rápida e simples de configurar um projeto MVC.

Here’s a good place to start para configurar o projeto Spring MVC e Spring Boot.

E, com o projeto simples configurado, vamos definir alguns mapeamentos para nossas novas dependências de cliente: 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/webjars/**")
          .addResourceLocations("/webjars/");
    }
}

É claro que também podemos fazer isso via XML:

5. Dependências independentes de versão

Ao usar o Spring Framework versão 4.2 ou superior, ele detectará automaticamente a bibliotecawebjars-locator no classpath e a usará para resolver automaticamente a versão de quaisquer ativos WebJars.

Para ativar esse recurso, adicionaremos a bibliotecawebjars-locator como uma dependência do aplicativo: 


    org.webjars
    webjars-locator
    0.30

Nesse caso, podemos fazer referência aos ativos WebJars sem usar a versão; veja a próxima seção para ver alguns exemplos reais.

6. WebJars no cliente

Vamos adicionar uma página de boas-vindas simples em HTML ao nosso aplicativo (isto éindex.html): 


    
        WebJars Demo

Agora podemos usar Twitter Bootstrap e jQuery no projeto - vamos usar ambos em nossa página de boas-vindas, começando com Bootstrap:

Para uma abordagem independente de versão:

Adicione jQuery:

E a abordagem independente de versão:

7. Teste

Agora que adicionamos Twitter Bootstrap e jQuery em nossa página HTML, vamos testá-los.

Vamos adicionar um bootstrapalert em nossa página: 



    

        Success! It is working as we expected.

Observe que algum conhecimento básico do Twitter Bootstrap é assumido aqui; aqui está ogetting started guides no oficial.

Isso mostrará umalert conforme mostrado abaixo, o que significa que adicionamos o Twitter Bootstrap ao nosso classpath.

Vamos usar o jQuery agora. Adicionaremos um botão Fechar a este alerta: 

×

Agora precisamos adicionarjQueryebootstrap.min.js para a funcionalidade do botão Fechar, então adicione-os dentro da tag do corpo deindex.html, como abaixo:

Nota: Se você estiver usando uma abordagem independente de versão, remova apenas a versão do caminho, caso contrário, as importações relativas poderão não funcionar:

É assim que nossa página final de boas-vindas deve ficar: 


    
        
        
        WebJars Demo
        
    
    
        


            

                ×
                Success! It is working as we expected.

É assim que o aplicativo deve ser. (E o alerta deve desaparecer ao clicar no botão Fechar.)

webjarsdemo

8. Conclusão

Neste artigo rápido, focamos nos conceitos básicos do uso de WebJars em um projeto baseado em JVM, o que facilita muito o desenvolvimento e a manutenção.

Implementamos um projeto apoiado pelo Spring Boot e usamos o Twitter Bootstrap e o jQuery em nosso projeto usando WebJars.

O código-fonte do exemplo usado acima pode ser encontrado emGithub project - este é um projeto Maven, portanto, deve ser fácil de importar e construir.

Related