SlideShare una empresa de Scribd logo
1 de 90
View Components in Rails



                Harun Pathan
                @harunpathan
Component
render_component
render_component



     Deprecated
View Directory Structure
View Directory Structure
But what happens when you have
unrelated sections on your main
              view




                                  5
7
What if
CMS is
used?




          10
What if
CMS is
used?

          How do
          we Mash
            Up?

                    10
How do we handle this?
How do we handle this?



Consider only one page with one
       unrelated section
How do we handle this?
How do we handle this?
How do we handle this?
How do we handle this?

What if some unrelated sections
  are used on all the pages?
How do we handle this?

What if some unrelated sections
  are used on all the pages?



What if there are many unrelated
            sections?
What happens to Views?
What happens to Views?

 Partials
What happens to Views?

 Partials
What happens to Views?

 Partials

 Some more partials
What happens to Views?

 Partials

 Some more partials
What happens to Views?

 Partials

 Some more partials

 And some more partials and so on…
Options
Merb Parts

   Rails Parts


Cells and Apotomo
Cells
Cells
Cells
Cells
Cells
Generators
Cells
Generators
Cells
Generators
Caching
Caching
Caching




Expiration in Sweepers
Cells

 Nested Cells
Cells

 Nested Cells
Cells

 Nested Cells

 View inheritance
Cells

 Nested Cells

 View inheritance
Cells

 Nested Cells

 View inheritance

 No doubleRenderError
Cells

 Nested Cells

 View inheritance

 No doubleRenderError
Hold on… there is more
Hold on… there is more


      APOTOMO
Reusable
Persistent


              APOTOMO

                            Events
Independent



                                     29
 Dashboards

 Image galleries

 Auto-Completion boxes

 AddressBooks

 TabPanels

 Social Components like Ratings/Comments
Apotomo
Apotomo
Apotomo
Apotomo
Apotomo
Apotomo
Apotomo




git://github.com/hpathan/apotomo-examples.git
Apotomo




git://github.com/hpathan/apotomo-examples.git
Apotomo




git://github.com/hpathan/apotomo-examples.git
Apotomo




git://github.com/hpathan/apotomo-examples.git
Apotomo




git://github.com/hpathan/apotomo-examples.git
Apotomo
    Index.html.erb




git://github.com/hpathan/apotomo-examples.git
Apotomo - Events
Example

    => Create a new note and Update
    listing and counter

    => Filter notes on typing


git://github.com/hpathan/apotomo-examples.git
Apotomo - Events




git://github.com/hpathan/apotomo-examples.git
Apotomo - Events




git://github.com/hpathan/apotomo-examples.git
Apotomo - Events




git://github.com/hpathan/apotomo-examples.git
Apotomo - Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events




git://github.com/hpathan/apotomo-examples.git
Apotomo – Events & Widget
Apotomo – Events & Widget
                           Root




            Widget1               Widget2




Widget1.1             Widget1.2   Widget2.1
Apotomo – Events & Widget
                           Root




            Widget1               Widget2




Widget1.1             Widget1.2   Widget2.1
Apotomo – Events & Widget
                           Root




            Widget1               Widget2




Widget1.1             Widget1.2   Widget2.1
Apotomo – Events & Widget
                           Root




            Widget1               Widget2




Widget1.1             Widget1.2   Widget2.1
Thank You

Más contenido relacionado

Similar a Reusable View Components in Rails

Puppet at GitHub - PuppetConf 2013
Puppet at GitHub - PuppetConf 2013Puppet at GitHub - PuppetConf 2013
Puppet at GitHub - PuppetConf 2013Puppet
 
Git inter-snapshot public
Git  inter-snapshot publicGit  inter-snapshot public
Git inter-snapshot publicSeongJae Park
 
Reusando componentes Zope fuera de Zope
Reusando componentes Zope fuera de ZopeReusando componentes Zope fuera de Zope
Reusando componentes Zope fuera de Zopementtes
 
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019Ensar Basri Kahveci
 
Using spl tools in your code
Using spl tools in your codeUsing spl tools in your code
Using spl tools in your codeElizabeth Smith
 
Git Anti Patterns - XP Days Ukraine 2017
Git Anti Patterns - XP Days Ukraine 2017Git Anti Patterns - XP Days Ukraine 2017
Git Anti Patterns - XP Days Ukraine 2017Lemi Orhan Ergin
 
Search Engine Spiders
Search Engine SpidersSearch Engine Spiders
Search Engine SpidersCJ Jenkins
 
MongoDB & Machine Learning
MongoDB & Machine LearningMongoDB & Machine Learning
MongoDB & Machine LearningTom Maiaroto
 
Debugging Your Plone Site
Debugging Your Plone SiteDebugging Your Plone Site
Debugging Your Plone Sitecdw9
 
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...Lemi Orhan Ergin
 
Rules: Duct Tape for Drupal
Rules: Duct Tape for DrupalRules: Duct Tape for Drupal
Rules: Duct Tape for DrupalRyan Price
 
Robotlegs AS3 from Flash and the City 2010
Robotlegs AS3 from Flash and the City 2010Robotlegs AS3 from Flash and the City 2010
Robotlegs AS3 from Flash and the City 2010Joel Hooks
 
Puppet Camp Atlanta 2014: r10k Puppet Workflow
Puppet Camp Atlanta 2014: r10k Puppet WorkflowPuppet Camp Atlanta 2014: r10k Puppet Workflow
Puppet Camp Atlanta 2014: r10k Puppet WorkflowPuppet
 
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막선협 이
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git RightSven Peters
 

Similar a Reusable View Components in Rails (20)

Puppet at GitHub - PuppetConf 2013
Puppet at GitHub - PuppetConf 2013Puppet at GitHub - PuppetConf 2013
Puppet at GitHub - PuppetConf 2013
 
Git inter-snapshot public
Git  inter-snapshot publicGit  inter-snapshot public
Git inter-snapshot public
 
Reusando componentes Zope fuera de Zope
Reusando componentes Zope fuera de ZopeReusando componentes Zope fuera de Zope
Reusando componentes Zope fuera de Zope
 
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019
java.util.concurrent for Distributed Coordination, GeeCON Krakow 2019
 
Using spl tools in your code
Using spl tools in your codeUsing spl tools in your code
Using spl tools in your code
 
Introduce Django
Introduce DjangoIntroduce Django
Introduce Django
 
Git of Parts
Git of PartsGit of Parts
Git of Parts
 
Git Anti Patterns - XP Days Ukraine 2017
Git Anti Patterns - XP Days Ukraine 2017Git Anti Patterns - XP Days Ukraine 2017
Git Anti Patterns - XP Days Ukraine 2017
 
Search Engine Spiders
Search Engine SpidersSearch Engine Spiders
Search Engine Spiders
 
How to use git without rage
How to use git without rageHow to use git without rage
How to use git without rage
 
Cucaruba!
Cucaruba!Cucaruba!
Cucaruba!
 
MongoDB & Machine Learning
MongoDB & Machine LearningMongoDB & Machine Learning
MongoDB & Machine Learning
 
Debugging Your Plone Site
Debugging Your Plone SiteDebugging Your Plone Site
Debugging Your Plone Site
 
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...
Git Anti-Patterns - Extended Version With 28 Common Anti-Patterns) - SCTurkey...
 
Automate Yo' Self
Automate Yo' SelfAutomate Yo' Self
Automate Yo' Self
 
Rules: Duct Tape for Drupal
Rules: Duct Tape for DrupalRules: Duct Tape for Drupal
Rules: Duct Tape for Drupal
 
Robotlegs AS3 from Flash and the City 2010
Robotlegs AS3 from Flash and the City 2010Robotlegs AS3 from Flash and the City 2010
Robotlegs AS3 from Flash and the City 2010
 
Puppet Camp Atlanta 2014: r10k Puppet Workflow
Puppet Camp Atlanta 2014: r10k Puppet WorkflowPuppet Camp Atlanta 2014: r10k Puppet Workflow
Puppet Camp Atlanta 2014: r10k Puppet Workflow
 
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막
오픈소스를 여행하는 히치하이커를 위한 안내서 - 자막
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git Right
 

Último

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 

Último (20)

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 

Reusable View Components in Rails

Notas del editor

  1. \n
  2. For more details C2.com on component based development\n
  3. Talk about MVC after talking about render_component\n
  4. We all like views, we should take good care of them\n
  5. \n
  6. We all like views, we should take good care of them\n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. - Cells can be nested\n Cells can have as many render as possible there would be no double render_error\n
  34. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  35. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  36. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  37. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  38. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  39. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  40. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  41. Caching: No fragment cache, strictly view caching\n\nTest:UNIT\n\nTwo types of testing …. Unit testing both ways Cells:TestCase Or ActionControler::TestCase\n\nTest your cells in isolation\n
  42. Apotomo is based on cells\n
  43. \n
  44. Apotomo is based on cells\n
  45. Apotomo is based on cells\n
  46. Apotomo is based on cells\n
  47. Apotomo is based on cells\n
  48. Apotomo is based on cells\n
  49. Apotomo is based on cells\n
  50. Apotomo is based on cells\n
  51. Apotomo is based on cells\n
  52. Apotomo is based on cells\n
  53. Apotomo is based on cells\n
  54. Apotomo is based on cells\n
  55. Apotomo is based on cells\n
  56. Apotomo is based on cells\n
  57. Apotomo is based on cells\n
  58. Apotomo is based on cells\n
  59. Apotomo is based on cells\n
  60. Apotomo is based on cells\n
  61. Apotomo is based on cells\n
  62. Apotomo is based on cells\n
  63. Apotomo is based on cells\n
  64. Apotomo is based on cells\n
  65. Apotomo is based on cells\n
  66. Apotomo is based on cells\n
  67. Apotomo is based on cells\n
  68. Apotomo is based on cells\n
  69. Apotomo is based on cells\n
  70. Apotomo is based on cells\n
  71. Apotomo is based on cells\n
  72. Apotomo is based on cells\n