Bower
&
RubyGems
cada um no seu quadrado!
@cezinha_anjos
1
@cezinha_anjos
• Programo há 25 anos.
• Passei por diversas linguagens
e paradigmas de programação.
• Atualmente focado em...
Pacotes são geniais!
3
4
apt-get / homebrew
RubyGems são
geniais!
5
É o conceito de pacotes
empregado em uma linguagem de
programação.
6
7
rubygems
As RubyGems permitem um alto
reaproveitamento de código ruby.
8
• Olhe para seus projetos
• Procure o que se repete entre eles
• Extraia para gems
DRY: don’t repeat yourself!
9
RubyGems & front-end
10
Você pode encapsular CSS e JS
em RubyGems.
11
O core team do Rails usa isso!
• jquery-rails
• jquery-ui-rails
• jquery-ujs
12
Então… qual é o problema?
13
Você passa a ser dependente de
mais um intermediário no
processo.
14
Exemplo: Twitter Bootstrap
15
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 ge...
Problemas?
• Quanto tempo pode demorar para o vendor
atualizar a gem?
• Todo o CSS / JS envolvido fica transparente?
• E se...
Solução?
18
Usar
RubyGems
exclusivamente
para código
ruby e Bower
para front-end.
19
Bower
• Feito em node.js
• Ridículo de instalar

$ npm install -g bower
20
Arquivos do projeto
Ficam na raiz da pasta do projeto
21
.bowerrc
22
• Arquivo de configuração do projeto
• Você pode definir o destino do download
$ vim .bowerrc
!
{
"directory": "...
bower.json
• O arquivo bower.json descreve os pacotes que
você está usando.
• O bower.json está para o Bower assim como o
...
24
{
"name": “meu app",
"version": "0.0.0",
"homepage": "https://github.com/asseinfo/meuapp",
"authors": [
"Cezinha <cesar...
Principais comandos
25
Inicializar um projeto
$ bower init
26
27
cezinha@machine:~/dev/tdc2014$ bower init
[?] name: tdc2014
[?] version: 0.0.0
[?] description:
[?] main file:
[?] what...
28
{
name: 'tdc2014',
version: '0.0.0',
authors: [
'Cezinha <cesar@asseinfo.com.br>'
],
license: 'MIT',
private: true,
ign...
Procurar um pacote
$ bower search bootstrap
29
30
cezinha@machine:~/dev/tdc2014$ bower search bootstrap
Search results:
!
bootstrap git://github.com/twbs/bootstrap.git
a...
Instalar um pacote
$ bower install bootstrap --save
31
32
cezinha@machine:~/dev/tdc2014$ bower install bootstrap --save
bower cached git://github.com/twbs/bootstrap.git#3.1.1
bo...
Checkout do projeto
33
Checkout do projeto
$ git clone meu-projeto

$ cd meu-projeto

$ bundle install

$ bower install



O bower install baixar...
bower + sass = flexibilidade
35
$ bower install bootstrap-
sass-official --save
36
Você pode customizar o
bootstrap em ambiente
“development”
37
38
$ vim meu-bootstrap-personalizado.css.scss!
!
$grid-columns: 36;
$grid-gutter-width: 10px;
!
$navbar-height: 50px;
$nav...
CMD + R / CTRL + F5
mostra as modificações
em development
39
Sass é genial!
40
Muito obrigado!
@cezinha_anjos
cezinha.info
asseinfo.com.br
41
Upcoming SlideShare
Loading in …5
×

Bower & Robygems - Cada um no seu quadrado

598 views

Published on

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
598
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Bower & Robygems - Cada um no seu quadrado

  1. 1. Bower & RubyGems cada um no seu quadrado! @cezinha_anjos 1
  2. 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. 3. Pacotes são geniais! 3
  4. 4. 4 apt-get / homebrew
  5. 5. RubyGems são geniais! 5
  6. 6. É o conceito de pacotes empregado em uma linguagem de programação. 6
  7. 7. 7 rubygems
  8. 8. As RubyGems permitem um alto reaproveitamento de código ruby. 8
  9. 9. • Olhe para seus projetos • Procure o que se repete entre eles • Extraia para gems DRY: don’t repeat yourself! 9
  10. 10. RubyGems & front-end 10
  11. 11. Você pode encapsular CSS e JS em RubyGems. 11
  12. 12. O core team do Rails usa isso! • jquery-rails • jquery-ui-rails • jquery-ujs 12
  13. 13. Então… qual é o problema? 13
  14. 14. Você passa a ser dependente de mais um intermediário no processo. 14
  15. 15. Exemplo: Twitter Bootstrap 15
  16. 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. 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. 18. Solução? 18
  19. 19. Usar RubyGems exclusivamente para código ruby e Bower para front-end. 19
  20. 20. Bower • Feito em node.js • Ridículo de instalar
 $ npm install -g bower 20
  21. 21. Arquivos do projeto Ficam na raiz da pasta do projeto 21
  22. 22. .bowerrc 22 • Arquivo de configuração do projeto • Você pode definir o destino do download $ vim .bowerrc ! { "directory": "vendor/assets/bower" }
  23. 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. 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. 25. Principais comandos 25
  26. 26. Inicializar um projeto $ bower init 26
  27. 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. 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. 29. Procurar um pacote $ bower search bootstrap 29
  30. 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. 31. Instalar um pacote $ bower install bootstrap --save 31
  32. 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. 33. Checkout do projeto 33
  34. 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. 35. bower + sass = flexibilidade 35
  36. 36. $ bower install bootstrap- sass-official --save 36
  37. 37. Você pode customizar o bootstrap em ambiente “development” 37
  38. 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. 39. CMD + R / CTRL + F5 mostra as modificações em development 39
  40. 40. Sass é genial! 40
  41. 41. Muito obrigado! @cezinha_anjos cezinha.info asseinfo.com.br 41

×