Gerenciando dependências client-side com WebJars usando Maven

Nesse artigo será abordado como realizar a utilização de Webjars em uma aplicação Servlet 2 gerenciada pelo Maven. Para ilustração, será criada uma página simples que inclui o Bootstrap.

A ferramenta

WebJars é um projeto de James Ward lançado em outubro de 2012[1] cujo objetivo principal é empacotar bibliotecas client-side, como o Bootstrap e o jQuery, em um JAR. Dessa maneira é possível gerenciá-las como dependências convencionais, incluindo dependências transitivas[2].

Através do site é possível obter três tipos de WebJars (NPM, Bower e Clássico), sendo que todos estão disponíveis em várias ferramentas de build.

Abaixo um screenshot de uma busca realizada pelo Bootstrap e em destaque a dependência disponível para o Maven:

dependencias-webjars-screenshot-buscaFigura 1 – Busca no site do WebJars

É importante ressaltar que a inclusão e uso de cada componente da biblioteca à aplicação, sejam elas referenciadas direta ou transitivamente, continua sendo necessário. Por exemplo, o Bootstrap possui folhas de estilo CSS e scripts JS, sendo que seus scripts necessitam da inclusão do jQuery, assim a inclusão do jQuery é de responsabilidade do desenvolvedor.

Código fonte

Configuração da Build

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>com.matera.blog</groupId>
  <artifactId>webjars</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>

  <build>

    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
        <configuration>
          <path>/</path>
        </configuration>
      </plugin>
    </plugins>

  </build>

  <dependencies>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-servlet-2.x</artifactId>
      <version>1.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.3.6</version>
    </dependency>

  </dependencies>

</project>

Listagem 1- Código fonte do arquivo pom.xml

Nesse arquivo estão incluídas a configuração do plugin do Tomcat (Linhas 13 a 20), a dependência da biblioteca principal para uso dos WebJars (Linhas 28 a 30) e a dependência do Bootstrap (Linhas 34 a 36).

Web Descriptor

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>

  <servlet>
    <servlet-name>WebjarsServlet</servlet-name>
    <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>WebjarsServlet</servlet-name>
    <url-pattern>/webjars/*</url-pattern>
  </servlet-mapping>

</web-app>

Listagem 2 – Código fonte do arquivo src/main/webapp/WEB-INF/web.xml

Esse arquivo possui apenas a configuração do Servlet responsável pelas requisições de WebJars.

Conteúdo da Página

<html>
<head>
  <link rel="stylesheet" href="webjars/bootstrap/3.3.6/css/bootstrap.css">
  <link rel="stylesheet" href="webjars/bootstrap/3.3.6/css/bootstrap-theme.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 text-center">
        <a class="btn btn-success">Success</a>
        <a class="btn btn-warning">Warning</a>
        <a class="btn btn-danger">Danger</a>
      </div>
    </div>
  </div>
</body>

</html>

Listagem 3 – Código fonte do arquivo src/main/webapp/index.jsp

A página de exemplo irá incluir os arquivos do Bootstrap (Linhas 3 e 4) e exibirá um botão em cada estilo disponível (Linhas 11 a 13).

Execução

Após a configuração, o comando abaixo dispara a execução do plugin do Tomcat:

mvn tomcat7:run

Listagem 6 – Comando que inicia o Tomcat apontando para a aplicação

A aplicação estará acessível a partir da url http://localhost:8080 e terá a seguinte aparência:

dependencias-webjars-screenshotFigura 2 – Screenshot da aplicação

Conclusão

O uso de WebJars permite ao desenvolvedor controlar todas as dependências do seu projeto de maneira unificada em uma ferramenta que ele já utiliza no seu dia a dia.

Referências

  1. http://www.jamesward.com/2012/10/31/webjars-officially-launched
  2. https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html#Transitive_Dependencies

Por MARCO ANTONIO ROCHA

Pai, marido, nerd e programador (não necessariamente nessa ordem). Analista de Sistemas ancorado na MATERA desde 2008. Desenvolvedor Java na maior parte do tempo, fuçador em tempo integral.

Postado em: 26 de fevereiro de 2016

Confira outros artigos do nosso blog

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

Three laws that enable agile software development

09 de março de 2017

Celso Gonçalves Junior

Medindo performance de uma API REST

21 de fevereiro de 2017

Monise Costa

Deixe seu comentário