AngularJS/ Bower/ HTML5 / CSS3/ Javascript

Gravação do hangout criando Web Apps com AngularJS

angular-hangout

Agradeço aos mais de 167 participantes de assistiram ao vivo o Hangout e aos mais de 760 que já assistiram a gravação até o momento da escrita desse post.

Quem perdeu, pode assistir no youtube a gravação.

Mesmo com uma forte gripe que me arrastou para uma bronquite aguda, consegui explicar em um estilo de aula, como você pode se tornar produtivo com o AngularJS, assim como, usando o Bower, Yeoman e Grunt para automatizar as tarefas.

AngularJS/ Bower/ HTML5 / CSS3/ Javascript

A quebra do build automático e o Bower no meio do caminho

bower_header

Quem usa algum esquema de integração contínua como o Jenkins por exemplo, sabe que é horrível ter a foto do Chuck Norris e saber que foi você quem quebrou o build.

O Bower geralmente é o culpado, acontece isso sempre e tem acontecido comigo nos últimos 9 builds gerados em um dos softwares que estamos fazendo.

Qual a principal causa disso?

Bom, acontece quando nós usamos diversas bibliotecas, componentes de terceiros e vem com diferentes versões do software principal que você está usando, por exemplo: Angular, JQuery e faz o Jenkins quebrar, já que o bower fica sem saber qual versão instalar.

+ bower install --silent
bower                        ECONFLICT Unable to find suitable version for angular
Build step 'Execute shell' marked build as failure
Finished: FAILURE

Mesmo eu tentando colocar via –silent, ele ignora e continua quebrando o build.

Entendendo o caso:

O Bower tem uma configuração para lá de prática e acabei descobrindo isso na quebra do build, ele possui uma conversão chamada “resolutions”, onde força você à usar a versão que você realmente quer.

{
  "name": "Seu Produto",
  "version": "0.0.1",
  "dependencies": {
    "angular": "1.2.16",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~2.1.1",
    "jQuery-Mask-Plugin": "1.6.4",
    "jquery-ui": "~1.10.4",
    "bootstrap": "~3.1.1",
    "angular-resource": "1.2.16",
    "angular-cookies": "1.2.16",
    "angular-sanitize": "1.2.16",
    "angular-route": "1.2.16",
    "angular-animate": "~1.2.16",
    "angular-collection": "~0.5.0",
    "angular-bootstrap": "0.11.0",
    "angular-strap": "~2.0.2",
    "momentjs": "~2.6.0",
    "ng-grid": "~2.0.11",
    "textAngular": "~1.2.1",
    "fontawesome": "~4.1.0",
    "angular-ui-utils": "~0.1.1",
    "cpf_cnpj": "~0.0.3",
    "angular-intro.js": "~1.1.2"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16",
    "angular-ui-utils": "~0.1.1",
    "jquery-ui": "~1.10.4"
  },
  "resolutions":{ "angular": "1.2.16" }
}

O “resolutions” acaba configurando implicitamente a versão do software que você quer e isso por final evita a quebra do build e o Chuck no telão na sala de desenvolvimento.