SlideShare a Scribd company logo
FRONT-END COM RAILS

        RAMON BISPO
     http://ramonpage.com
          @ramonpage
O HAML E AS RAZÕES
   PARA USÁ-LO
      http://haml-lang.com/




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




                    @RAMONPAGE
DICA N. 1

  NÃO SE PRENDA A MODISMOS. USE-OS QUANDO
NECESSÁRIO OU SE ASSIM VOCÊ / SUA EQUIPE DECIDIR




                   @RAMONPAGE
DICA N. 2

SASS AJUDA BASTANTE NO TRABALHO EM WEBAPPS.

  JÁ EM PROJETOS SIMPLES, O SEU USO ACABA SE
           TORNANDO INDIFERENTE.



                  @RAMONPAGE
DICA N. 3

CUIDADO: COFFESCRIPT PODE SER UMA FORMA
 LINDAMENTE DESNECESSÁRIA DE ESCREVER JS.




                @RAMONPAGE
ASSET PACKAGING NO RAILS



         @RAMONPAGE
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
RAILS 3.1+

     ASSET PIPELINE

config.assets.enabled = true




        @RAMONPAGE
RAILS 3.1+
         ASSET PIPELINE FINGERPRINTING

           /stylesheets/styles.css?2509895876

styles.css => styles-908e25f4bf641868d8683022a5b62f54.css




                      @RAMONPAGE
MAIS SOBRE ASSET PIPELINE

                 RAILS GUIDES
      http://guides.rubyonrails.org/asset_pipeline.html




                     @RAMONPAGE
OBRIGADO!


   RAMON BISPO
http://ramonpage.com
     @ramonpage

More Related Content

Similar to Rock'n Rails - Front-end com Rails

Sass tooling!
Sass tooling!Sass tooling!
Sass tooling!
Flip Stewart
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
 
Railswaycon 2009 - Summary
Railswaycon 2009 - SummaryRailswaycon 2009 - Summary
Railswaycon 2009 - Summarydaniel.mattes
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrap
leondu
 
Sinatra Rack And Middleware
Sinatra Rack And MiddlewareSinatra Rack And Middleware
Sinatra Rack And Middleware
Ben Schwarz
 
Sprockets
SprocketsSprockets
Sprockets
Tim Novinger
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
Plagger the duct tape of internet
Plagger the duct tape of internetPlagger the duct tape of internet
Plagger the duct tape of internet
Tatsuhiko Miyagawa
 
Vivendo No Mundo Rails
Vivendo No Mundo RailsVivendo No Mundo Rails
Vivendo No Mundo RailsAlisson Sales
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
Award-winning technology: Oxid loves the query cache
Award-winning technology: Oxid loves the query cacheAward-winning technology: Oxid loves the query cache
Award-winning technology: Oxid loves the query cache
Ulf Wendel
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
BalaKrishna Kolliboina
 

Similar to Rock'n Rails - Front-end com Rails (14)

Sass tooling!
Sass tooling!Sass tooling!
Sass tooling!
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
Railswaycon 2009 - Summary
Railswaycon 2009 - SummaryRailswaycon 2009 - Summary
Railswaycon 2009 - Summary
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrap
 
Sinatra Rack And Middleware
Sinatra Rack And MiddlewareSinatra Rack And Middleware
Sinatra Rack And Middleware
 
Sprockets
SprocketsSprockets
Sprockets
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Plagger the duct tape of internet
Plagger the duct tape of internetPlagger the duct tape of internet
Plagger the duct tape of internet
 
Vivendo No Mundo Rails
Vivendo No Mundo RailsVivendo No Mundo Rails
Vivendo No Mundo Rails
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Award-winning technology: Oxid loves the query cache
Award-winning technology: Oxid loves the query cacheAward-winning technology: Oxid loves the query cache
Award-winning technology: Oxid loves the query cache
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
 

More from Ramon Bispo

SCTI 2014 - Dicas para tomadas de decisão seguras em front-end
SCTI 2014 - Dicas para tomadas de decisão seguras em front-endSCTI 2014 - Dicas para tomadas de decisão seguras em front-end
SCTI 2014 - Dicas para tomadas de decisão seguras em front-end
Ramon Bispo
 
Café22: Just Like Music
Café22: Just Like MusicCafé22: Just Like Music
Café22: Just Like Music
Ramon Bispo
 
Mercado front-end: esteja preparado para ele
Mercado front-end: esteja preparado para eleMercado front-end: esteja preparado para ele
Mercado front-end: esteja preparado para eleRamon Bispo
 
Café22: Community-a-holic
Café22: Community-a-holicCafé22: Community-a-holic
Café22: Community-a-holic
Ramon Bispo
 
FLISOL RJ - Você tem medo de quê?
FLISOL RJ - Você tem medo de quê?FLISOL RJ - Você tem medo de quê?
FLISOL RJ - Você tem medo de quê?
Ramon Bispo
 
Semana da Computação UFF - Você tem medo de quê?
Semana da Computação UFF - Você tem medo de quê?Semana da Computação UFF - Você tem medo de quê?
Semana da Computação UFF - Você tem medo de quê?
Ramon Bispo
 
Community-a-holic
Community-a-holicCommunity-a-holic
Community-a-holic
Ramon Bispo
 
A Mágica dos Css Sprites
A Mágica dos Css SpritesA Mágica dos Css Sprites
A Mágica dos Css Sprites
Ramon Bispo
 

More from Ramon Bispo (8)

SCTI 2014 - Dicas para tomadas de decisão seguras em front-end
SCTI 2014 - Dicas para tomadas de decisão seguras em front-endSCTI 2014 - Dicas para tomadas de decisão seguras em front-end
SCTI 2014 - Dicas para tomadas de decisão seguras em front-end
 
Café22: Just Like Music
Café22: Just Like MusicCafé22: Just Like Music
Café22: Just Like Music
 
Mercado front-end: esteja preparado para ele
Mercado front-end: esteja preparado para eleMercado front-end: esteja preparado para ele
Mercado front-end: esteja preparado para ele
 
Café22: Community-a-holic
Café22: Community-a-holicCafé22: Community-a-holic
Café22: Community-a-holic
 
FLISOL RJ - Você tem medo de quê?
FLISOL RJ - Você tem medo de quê?FLISOL RJ - Você tem medo de quê?
FLISOL RJ - Você tem medo de quê?
 
Semana da Computação UFF - Você tem medo de quê?
Semana da Computação UFF - Você tem medo de quê?Semana da Computação UFF - Você tem medo de quê?
Semana da Computação UFF - Você tem medo de quê?
 
Community-a-holic
Community-a-holicCommunity-a-holic
Community-a-holic
 
A Mágica dos Css Sprites
A Mágica dos Css SpritesA Mágica dos Css Sprites
A Mágica dos Css Sprites
 

Recently uploaded

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 

Rock'n Rails - Front-end com Rails

  • 1. FRONT-END COM RAILS RAMON BISPO http://ramonpage.com @ramonpage
  • 2. O HAML E AS RAZÕES PARA USÁ-LO http://haml-lang.com/ @RAMONPAGE
  • 3. ENTENDENDO PRÉ-PROCESSADORES COFFEESCRIPT http://jashkenas.github.com/coffee-script/ SASS http://sass-lang.com/ COMPASS http://compass-style.org/ @RAMONPAGE
  • 4. DICA N. 1 NÃO SE PRENDA A MODISMOS. USE-OS QUANDO NECESSÁRIO OU SE ASSIM VOCÊ / SUA EQUIPE DECIDIR @RAMONPAGE
  • 5. DICA N. 2 SASS AJUDA BASTANTE NO TRABALHO EM WEBAPPS. JÁ EM PROJETOS SIMPLES, O SEU USO ACABA SE TORNANDO INDIFERENTE. @RAMONPAGE
  • 6. DICA N. 3 CUIDADO: COFFESCRIPT PODE SER UMA FORMA LINDAMENTE DESNECESSÁRIA DE ESCREVER JS. @RAMONPAGE
  • 7. ASSET PACKAGING NO RAILS @RAMONPAGE
  • 8. 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
  • 9. RAILS 3.1+ ASSET PIPELINE config.assets.enabled = true @RAMONPAGE
  • 10. RAILS 3.1+ ASSET PIPELINE FINGERPRINTING /stylesheets/styles.css?2509895876 styles.css => styles-908e25f4bf641868d8683022a5b62f54.css @RAMONPAGE
  • 11. MAIS SOBRE ASSET PIPELINE RAILS GUIDES http://guides.rubyonrails.org/asset_pipeline.html @RAMONPAGE
  • 12. OBRIGADO! RAMON BISPO http://ramonpage.com @ramonpage