TDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
-
Upload
cezinha-anjos -
Category
Documents
-
view
134 -
download
1
Transcript of TDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
Bower&
RubyGemscada um no seu quadrado!
@cezinha_anjos1
@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
• 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
Pacotes são geniais!
4
5
apt-get / homebrew
RubyGems são geniais!
6
É o conceito de pacotes empregado em uma linguagem de
programação.
7
8
rubygems
As RubyGems permitem um alto reaproveitamento de código ruby.
9
• Olhe para seus projetos
• Procure o que se repete entre eles
• Extraia para gems
DRY: don’t repeat yourself!
10
RubyGems & front-end
11
Você pode encapsular CSS e JS em RubyGems.
12
O core team do Rails usa isso!
• jquery-rails
• jquery-ui-rails
• jquery-ujs
13
Então… qual é o problema?
14
Você passa a ser dependente de mais um intermediário no
processo.
15
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
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.
Solução?
20
Usar RubyGems exclusivamente para código ruby e Bower para front-end.
21
Bower
• Feito em node.js
• Ridículo de instalar $ npm install -g bower
22
Arquivos do projetoFicam na raiz da pasta do projeto
23
.bowerrc
24
• Arquivo de configuração do projeto • Você pode definir o destino do download
$ vim .bowerrc !{ "directory": "vendor/assets/bower" }
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 <[email protected]>" ], "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" } }
Principais comandos
27
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 <[email protected]> [?] license: MIT [?] homepage: [?] set currently installed components as dependencies? Yes [?] add commonly ignored files to ignore list? Yes
30
{ name: 'tdc2014', version: '0.0.0', authors: [ 'Cezinha <[email protected]>' ], license: 'MIT', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ![?] Looks good? (Y/n)
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
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
Checkout do projeto
35
Checkout do projeto
$ git clone meu-projeto $ cd meu-projeto$ bundle install $ bower installO bower install baixará suas dependências de front-end.
36
bower + sass = flexibilidade
37
$ bower install bootstrap-sass-official --save
38
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";
CMD + R / CTRL + F5 mostra as modificações
em development
41
Sass é genial!
42
So long, and thanks for all the fish!
@cezinha_anjos
cezinha.info
asseinfo.com.br
43