O documento discute o uso de Bower e RubyGems para gerenciamento de pacotes front-end e back-end respectivamente. Ele explica que Bower é uma ferramenta para gerenciar dependências front-end em JavaScript e CSS, enquanto RubyGems é usada para código Ruby. O documento também apresenta comandos básicos do Bower como iniciar, procurar, instalar pacotes e customizar frameworks como Bootstrap.

1. Bower
&
RubyGems
cada um no seu quadrado!
@cezinha_anjos
1

2. @cezinha_anjos
• Programo há 25 anos.
• Passei por diversas linguagens
e paradigmas de programação.
• Atualmente focado em Ruby on
Rails e Javascript.
• Gosto de OO, Clean Code,
Design Patterns, BDD e Lean.
• Diretor da ASSEINFO.
2

3. Pacotes são geniais!
3

4. 4
apt-get / homebrew

5. RubyGems são
geniais!
5

6. É o conceito de pacotes
empregado em uma linguagem de
programação.
6

7. 7
rubygems

8. As RubyGems permitem um alto
reaproveitamento de código ruby.
8

9. • Olhe para seus projetos
• Procure o que se repete entre eles
• Extraia para gems
DRY: don’t repeat yourself!
9

10. RubyGems & front-end
10

11. Você pode encapsular CSS e JS
em RubyGems.
11

12. O core team do Rails usa isso!
• jquery-rails
• jquery-ui-rails
• jquery-ujs
12

13. Então… qual é o problema?
13

14. Você passa a ser dependente de
mais um intermediário no
processo.
14

15. Exemplo: Twitter Bootstrap
15

16. 16
1
github.com/twbs lança uma nova versão
2
github/seyhunak adapta para o Rails a nova versão do Bootstrap e
coloca na gem
3
Você usa a gem no seu aplicativo

17. Problemas?
• Quanto tempo pode demorar para o vendor
atualizar a gem?
• Todo o CSS / JS envolvido fica transparente?
• E se você quiser usar só uma parte do framework?
17

18. Solução?
18

19. Usar
RubyGems
exclusivamente
para código
ruby e Bower
para front-end.
19

20. Bower
• Feito em node.js
• Ridículo de instalar
$ npm install -g bower
20

21. Arquivos do projeto
Ficam na raiz da pasta do projeto
21

22. .bowerrc
22
• Arquivo de configuração do projeto
• Você pode definir o destino do download
$ vim .bowerrc
!
{
"directory": "vendor/assets/bower"
}

23. bower.json
• O arquivo bower.json descreve os pacotes que
você está usando.
• O bower.json está para o Bower assim como o
Gemfile está para o Bundler.
23

24. 24
{
"name": “meu app",
"version": "0.0.0",
"homepage": "https://github.com/asseinfo/meuapp",
"authors": [
"Cezinha <cesar@asseinfo.com.br>"
],
"private": true,
"dependencies": {
"jquery": "2.0.3",
"jquery-ujs": "*",
"jquery-ui": "1.10.3",
"font-awesome": "4.0.3",
"bootstrap-sass-official": "3.1.0+2"
}
}

25. Principais comandos
25

26. Inicializar um projeto
$ bower init
26

27. 27
cezinha@machine:~/dev/tdc2014$ bower init
[?] name: tdc2014
[?] version: 0.0.0
[?] description:
[?] main file:
[?] what types of modules does this package expose?
[?] keywords:
[?] authors: Cezinha <cesar@asseinfo.com.br>
[?] license: MIT
[?] homepage:
[?] set currently installed components as
dependencies? Yes
[?] add commonly ignored files to ignore list? Yes

28. 28
{
name: 'tdc2014',
version: '0.0.0',
authors: [
'Cezinha <cesar@asseinfo.com.br>'
],
license: 'MIT',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
!
[?] Looks good? (Y/n)

29. Procurar um pacote
$ bower search bootstrap
29

30. 30
cezinha@machine:~/dev/tdc2014$ bower search bootstrap
Search results:
!
bootstrap git://github.com/twbs/bootstrap.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
sass-bootstrap git://github.com/jlong/sass-bootstrap.git
bootstrap-sass git://github.com/jlong/sass-twitter-bootstrap
bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git
bootstrap-select git://github.com/silviomoreto/bootstrap-select.git
bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker
angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git
angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower
bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git

31. Instalar um pacote
$ bower install bootstrap --save
31

32. 32
cezinha@machine:~/dev/tdc2014$ bower install bootstrap --save
bower cached git://github.com/twbs/bootstrap.git#3.1.1
bower validate 3.1.1 against git://github.com/twbs/bootstrap.git#*
bower cached git://github.com/jquery/jquery.git#2.1.0
bower validate 2.1.0 against git://github.com/jquery/jquery.git#>= 1.9.0
bower new version for git://github.com/jquery/jquery.git#>= 1.9.0
bower resolve git://github.com/jquery/jquery.git#>= 1.9.0
bower download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
bower extract jquery#>= 1.9.0 archive.tar.gz
bower resolved git://github.com/jquery/jquery.git#2.1.1
bower install bootstrap#3.1.1
bower install jquery#2.1.1
!
bootstrap#3.1.1 bower_components/bootstrap
└── jquery#2.1.1
!
jquery#2.1.1 bower_components/jquery

33. Checkout do projeto
33

34. Checkout do projeto
$ git clone meu-projeto
$ cd meu-projeto
$ bundle install
$ bower install
O bower install baixará suas dependências de front-
end.
34

35. bower + sass = flexibilidade
35

36. $ bower install bootstrap-
sass-official --save
36

37. Você pode customizar o
bootstrap em ambiente
“development”
37

38. 38
$ vim meu-bootstrap-personalizado.css.scss!
!
$grid-columns: 36;
$grid-gutter-width: 10px;
!
$navbar-height: 50px;
$navbar-default-bg: #4D6B82;
$navbar-default-link-color: #FFF;
!
$navbar-default-link-active-color: #FFF;
$navbar-default-link-active-bg: #E77817;
$navbar-default-link-hover-bg: #E77817;
$navbar-default-link-hover-color: #FFF;
!
@import "bootstrap-sass-official/vendor/assets/stylesheets/
bootstrap/bootstrap.scss";

39. CMD + R / CTRL + F5
mostra as modificações
em development
39

40. Sass é genial!
40

41. Muito obrigado!
@cezinha_anjos
cezinha.info
asseinfo.com.br
41