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 <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" } }

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 <cesar@asseinfo.com.br> [?] 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 <cesar@asseinfo.com.br>' ], 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