Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gerenciando Front-End vendors no Rails

Gerenciando Front-End vendors no Rails

Sérgio Vilar

July 07, 2016
Tweet

More Decks by Sérgio Vilar

Other Decks in Programming

Transcript

  1. GERENCIANDO
    FRONT-END VENDORS
    No Rails

    View Slide

  2. SÉRGIO VILAR
    Senior Software Engineer

    View Slide

  3. PORQUE NÃO
    VERSIONAR VENDORS?

    View Slide

  4. • Difícil upgrade e downgrade
    • Arquivos no projeto que não serão alterados (ou pelo
    menos não deveriam)
    • Permite desenvolvedores escreverem monkey-patchs
    nos vendors fora do processo fork-PR-release
    • Atualizar dependências das dependências se torna
    um pesadelo

    View Slide

  5. View Slide

  6. • Já faz parte do rails-way
    • Não é necessário adicionar uma dependência para
    versionar apenas os vendors do front-end
    • Pouca variedade de front-end vendors
    • Geralmente são ports com frequência de atualização
    duvidosa

    View Slide

  7. View Slide

  8. • Gerenciador de pacotes do node.js
    • Contém a maioria do front-end vendors
    • Tendência absoluta na comunidade para
    gerenciamento de pacotes node e front-end vendors
    • Os que ainda não estão no npm estão sendo
    migrados aos poucos do Bower
    • Permite usar npm scripts
    • Tem como dependência o node.js

    View Slide

  9. NPM + ASSET
    PIPELINE

    View Slide

  10. $ npm init

    View Slide

  11. $ npm i --save jquery
    $ npm i --save backbone

    View Slide

  12. package.json

    1 {
    2 "name": "jampa-ruby",
    3 "version": "1.0.0",
    4 "description": "Jampa Ruby App",
    5 "main": "index.js",
    6 "scripts": {
    7 "test": "echo \"Error: no test specified\" && exit 1"
    8 },
    9 "author": "Sergio Vilar",
    10 "license": "ISC",
    11 "dependencies": {
    12 "backbone": "^1.3.3",
    13 "jquery": "^3.0.0"
    14 }
    15 }

    View Slide

  13. $ npm i --save-dev concat-files

    View Slide

  14. package.json
    1 {
    2 "name": "jampa-ruby",
    3 "version": "1.0.0",
    4 "description": "Jampa Ruby App",
    5 "main": "index.js",
    6 "js-vendor": [
    7 "jquery/dist/jquery",
    8 "backbone/backbone"
    9 ],
    10 "scripts": {
    11 "test": "echo \"Error: no test specified\" && exit 1"
    12 },
    13 "author": "Sergio Vilar",
    14 "license": "ISC",
    15 "dependencies": {
    16 "backbone": "^1.3.3",
    17 "jquery": "^3.0.0"
    18 },
    19 "devDependencies": {
    20 "concat-files": "^0.1.0"
    21 }
    22 }

    View Slide

  15. concat.js

    1 var concat = require('concat-files')
    2 , path = require('path')
    3 , pkg = require('./package.json')
    4 , target_dir = path.resolve('app/assets/javascripts/bundle.js')
    5 , fixed_directories = pkg['js-vendor'].map(function(file){
    6 return 'node_modules/' + file + '.js'
    7 })
    8
    9 concat(fixed_directories, target_dir, function(err) {
    10 if(err) throw new Error(err)
    11 })

    View Slide

  16. package.json
    1 {
    2 "name": "jampa-ruby",
    3 "version": "1.0.0",
    4 "description": "Jampa Ruby App",
    5 "main": "index.js",
    6 "js-vendor": [
    7 "jquery/dist/jquery",
    8 "backbone/backbone"
    9 ],
    10 "scripts": {
    11 "install": "node concat.js"
    12 },
    13 "author": "Sergio Vilar",
    14 "license": "ISC",
    15 "dependencies": {
    16 "backbone": "^1.3.3",
    17 "jquery": "^3.0.0"
    18 },
    19 "devDependencies": {
    20 "concat-files": "^0.1.0"
    21 }
    22 }

    View Slide

  17. SÓ SUCESSO

    View Slide

  18. VALEU!
    vilar.cc
    twitter.com/feelsen
    github.com/sergiovilar

    View Slide