Assets on Rails na Prática

Entendendo, configurando e aplicando a estrutura de assets do Rails.

Transcript

1. RAMON BISPO
   http://ramonpage.com
   @ramonpage
   ASSETS ON RAILS NA
   PRÁTICA
   ENTENDENDO, CONFIGURANDO E APLICANDO
   

   View Slide

2. ASSET PACKAGING
   NO RAILS
   @RAMONPAGE
   

   View Slide

3. UM POUCO DE HISTÓRIA
   Rails < 3.1
   - Jammit http://documentcloud.github.com/jammit/
   - Asset Packager https://github.com/sbecker/asset_packager
   Rails 3.1+
   - Sprockets https://github.com/sstephenson/sprockets
   @RAMONPAGE
   

   View Slide

4. @RAMONPAGE
   RAILS 3.1+
   ASSET PIPELINE
   config.assets.enabled = true
   

   View Slide

5. @RAMONPAGE
   RAILS 3.1+
   ASSET PIPELINE FINGERPRINTING
   /stylesheets/styles.css?2509895876
   styles.css => styles-908e25f4bf641868d8683022a5b62f54.css
   

   View Slide

6. ESTRUTURA DOS
   ASSETS NO RAILS
   @RAMONPAGE
   ↳ app
   ↳ assets
   ↳ images
   - ...
   ↳ javascripts
   - application.js
   - ...
   ↳ stylesheets
   - application.css
   - ...
   ↳ ...
   

   View Slide

7. @RAMONPAGE
   ENTENDENDO OS
   MANIFESTOS
   application.js
   //= require jquery
   //= require jquery_ujs
   //= require_tree .
   application.css
   /*
   *= require_self
   *= require_tree .
   */
   

   View Slide

8. @RAMONPAGE
   MAIS SOBRE
   ASSET PIPELINE
   RAILS GUIDES
   http://guides.rubyonrails.org/asset_pipeline.html
   

   View Slide

9. ENTENDENDO
   PRÉ-PROCESSADORES
   @RAMONPAGE
   COFFEESCRIPT http://jashkenas.github.com/coffee-script/
   SASS http://sass-lang.com/
   COMPASS http://compass-style.org/
   

   View Slide

10. @RAMONPAGE
    SASS EM USO
    .CSS
    .content-navigation {
    border-color: #3bbfce;
    color: #2b9eab;
    }
    .border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
    }
    .SASS
    $blue: #3bbfce
    $margin: 16px
    .content-navigation
    border-color: $blue
    color: darken($blue, 9%)
    .border
    padding: $margin / 2
    margin: $margin / 2
    border-color: $blue
    

    View Slide

11. @RAMONPAGE
    NÃO GOSTOU?
    DÊ UMA OLHADA NO LESS
    http://lesscss.org/
    

    View Slide

12. SHOW ME
    THE CODE
    @RAMONPAGE
    

    View Slide

13. RAMON BISPO
    http://ramonpage.com
    @ramonpage
    OBRIGADO!
    

    View Slide