SlideShare une entreprise Scribd 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

Contenu connexe

Similaire à 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-compass
Chris Lee
 
Railswaycon 2009 - Summary
Railswaycon 2009 - SummaryRailswaycon 2009 - Summary
Railswaycon 2009 - Summary
daniel.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
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
Nico Hagenburger
 
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 Sass
Mediacurrent
 
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 Rails
Alisson 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
 

Similaire à 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
 

Plus de 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 ele
Ramon 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
 

Plus de 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
 

Dernier

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 

Dernier (20)

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 

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