O documento discute o uso de Bower e RubyGems para gerenciamento de pacotes front-end e back-end respectivamente. Ele explica que Bower é melhor para pacotes front-end como CSS e JavaScript, enquanto RubyGems deve ser usado para código Ruby. O documento também fornece exemplos de como configurar e usar Bower em projetos Rails.

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. • Estamos localizados em Tijucas - SC
- 40 km de Florianópolis.
• Somos em torno de 20 pessoas.
• Quase nenhum verticalização
hierárquica. Quem tem chefe é índio!
• Desde 2001 no mercado de
automação comercial.
• Trabalhamos com ERP.
• Foco em qualidade.
• Já nascemos agile, mesmo antes de
conhecer o manifesto ágil.
3

4. Pacotes são geniais!
4

5. apt-get / homebrew
5

6. RubyGems são
geniais!
6

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

8. 8
rubygems

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

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

11. RubyGems & front-end
11

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

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

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

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

16. Exemplo: Twitter Bootstrap
16

17. 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

18. 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?
18

19. Sensação de colocar quadrado em buraco redondo.
19

20. Solução?
20

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

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

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

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

25. 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.
25

26. {
"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"
}
}
26

27. Principais comandos
27

28. Inicializar um projeto
$ bower init
28

29. 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
29

30. 30
{
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)

31. Procurar um pacote
$ bower search bootstrap
31

32. 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
32

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

34. 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
34

35. Checkout do projeto
35

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

37. bower + sass = flexibilidade
37

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

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

40. $ 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";
40

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

42. Sass é genial!
42

43. So long, and thanks for all
the fish!
@cezinha_anjos
cezinha.info
asseinfo.com.br
43