SlideShare a Scribd company logo
Component-Driven Web Development in Ruby



           Brian Sam-Bodden




                                           1
Components on the Web
   1   Reusable Components
       ➡More that just reusable output generators, true OO constructs
       ➡Reuse views and logic in a convenient bundle
       ➡Composable: Components made of Components

   2   Events and Event Handlers
       ➡Communication between components is in the form of events
       ➡Components interested in an event provide a handler


   3   Transparent State Management
       ➡Minimize explicit interaction with the HTTP session
       ➡Components are full-blow objects with rich behavior and state


                                                                        2
What is Trellis?
1   Magic Like Rails!
    ➡A DSL for Component-Oriented Ruby Web Development
    ➡Some new concepts and many old ones (done the Ruby way!)


                       2    A Micro-Framework
                            ➡Small like Camping and Sinatra
                            ➡Designed for Small Apps, Many Mounts, Complex Pages


3   Components
    ➡Easy to build, easy to reuse
    ➡Encapsulate complexity in components, keep application simple
    ➡MVC all the way!

                                                                                   3
What is Trellis?
✓declares pages used
✓declares a home page
✓dispatches request to pages




                                 ✓defines a template
                                 ✓handles events
                                 ✓dispatches events to components




     ✓provides reusable logic
     ✓responds to events
     ✓stateless or stateful




                                ✓means of communication
                                ✓point to point
                                ✓publish / subscribe
                                                                    4
What is Trellis?
   A lot of ideas (stolen) from...
                ✓ WebObjects
   ✓ Tapestry                  ✓ Seaside
✓ Sinatra                           ✓ Iowa

   ✓ Camping                    ✓ Rails
                   ✓ Wee
                                             5
What is Trellis?
   Built on Rack!




                    6
Hello World


              7
Hello World



      ✓1 XHTML Template

      ✓1 Ruby File



                          8
9
All Ruby - Single File
              ✓1 Ruby File
              ✓ Inline Template
               using Markaby




                                  10
✓   1 Application class with an
                                          entry point (a “home” page)



                                        ✓   1 Page class with an instance
                                             variable @current_time




✓   Template has access to page instance variables
                                                            ✓ 1 Page template
                                                              embedded in the
                                                                page class

                                                      ✓ Template using 2	
  Trellis
                                                            components:
                                                        Value and PageLink




                          ✓ PageLink creates a hyperlink to an application Page
                                                                                  11
Launching
Application#start() launches the Trellis
application w/ Mongrel on port 3000


    It’s a Ruby program, just run it!



                                        12
Hello World




              13
Application
Navigation


              14
In Trellis page navigation is
controlled by the return value of
   an event handler method




                                    15
HILO

 The Hi-Lo Web Application is the
  simple number guessing game

       Start                 Guess             GameOver
An opening/welcoming page                   Number correctly guessed


                            Pick a number




                                                                       16
HILO
    The Hi-Lo Web Application
structure consists of 1 Ruby file and
        3 XHTML templates




                                       17
HILO
 The HiLoGame Trellis Application
class defines the home page and any
        other available pages




                                     18
HILO




✓ The Start declares the pages it can navigate to (:guess	
  is the symbol for the	
  Guess	
  page)
✓ It provides an event handler called on_select() that sets the target value on the guess page
✓ Injected pages get their own instance variable (:guess	
  -­‐>	
  @guess	
  -­‐>	
  Guess)
✓If the return value of the method is a Page instance then navigate to that page


                                                                                                       19
HILO
Ok, so far so good. But, where does
the on_select event come from?




                                      20
HILO
Trellis’ default routing scheme is:

       ✓ The ActionLink generates URLs in the form




                                                     21
✓ The Guess page can only navigate to the GameOver page , see	
  pages	
  :game_over
✓ It provides an event handler called on_select_from_link(value)
✓ on_select_from_link	
  implements a simple state machine navigation. If the guessed value:
   ➡ ...matches the target value then navigate to the GameOver page
   ➡ ...does not match the target value then navigate to the Guess page

                                                                                               22
✓ The Guess page uses several components to generate the HTML:
➡ Value (<trellis:value>): outputs the value of the Page instance variable @message
➡ Loop (<trellis:loop>) that repeats from 1..10 and makes the local variable guess available inside the loop
➡ActionLink (<trellis:action_link>): “link” which creates a hyperlink passing the guess as a parameter
➡ Value (<trellis:value>) outputs the value of the guess local variable as the contents of the ActionLink

                                                                                                               23
The guess’ page two states




                             24
✓The GameOver outputs a message with how many tries it took to guess the number
✓ The GameOver page uses the value of @count in the message
✓The GameOver page uses 1 component:
  ➡ PageLink (<trellis:page_link>): which creates a hyperlink to navigate back to the Start page



                                                                                                   25
HILO




       26
Hangman


          27
Hangman
Hangman is similar to Hi-Lo but it
uses a few more features of Trellis




                                      28
Hangman
Static resources can be mounted
using the map_static method




                                  29
Hangman




          30
Hangman




          31
Templates


            32
HTML Templates
Designer friendly HTML Templates




The Remove (<trellis:remove>) component
        allows for preview elements
                                          33
HAML
Inline or external (.haml) templates:




                                        34
The Skinny on
 Components


                35
A Stateless Component
   The Loop component is a typical
stateless component, a.k.a a simple tag




   The Loop component is a Trellis
         core component                   36
A Stateless Component
    FlickrInterestingness




                            37
A Stateful Component

  Components become full
 blown OO citizens when they
 combine state and logic in a
     reusable package



                                38
A Stateful Component
         The Counter components keeps a count
                            page
view                            on_add source=counter_1
                                                          on_add
<trellis:counter tid="one" />


<trellis:action_link tid="reset">
                                                                          @counter_1
                                                          on_subtract



                                                                               reset



                                                                        @counter_2
                                                                           reset
              reset


                                                                        @counter_3
                                                                           reset



                                                                                       39
A Stateful Component



 A Stateful
 Counter
Component


                       40
A Stateful Component
Reuse: The defining characteristic
        of a Component

               {
     {


                                    41
A Stateful Component
Yes, I stole this demo from Seaside!




                                       42
Encapsulate
 Complexity


              43
Encapsulate Complexity
   A Model Grid Component




                            44
Routing


          45
Clean Routes
Trellis supports routing at the page level




                                         46
Route Sorting
Routes are sorted according to their
           “matchability”




                                       47
Filters


          48
Filters
Trellis supports “before”, “around”
          and “after” filters

       ✓ Filters are defined at the Application level




             ✓ and applied at the Page level

                                                       49
Testing


          50
Testing
Trellis can use Rack::Test w/ RSpec




                                      51
Open Questions &
  What’s Next


               52
Open Questions
  ✓ Testing: Rack provides Rack::MockRequest

    ✓ Sessions: Anything that Rack can support

✓ CRUD: Either dynamically generated Pages (like old
  Rails scaffold) or a code generator. But always using
                       components!

✓ AJAX: Planning a JQuery-based set of components

                                                          53
Open Questions
 ✓ Persistence: You pick. I’m developing data-aware
          components with a pluggable ORM

           ✓ Deployment: Hey is Rack!
✓ Is it ready?: Trellis is an infant (on version 0.1.1)




                                                          54
Resources
Rack: http://rack.rubyforge.org
Radius: http://radius.rubyforge.org
Nokogiri: http://nokogiri.org
REXML: http://www.germane-software.com/software/rexml
Builder: http://builder.rubyforge.org
Paginator: http://paginator.rubyforge.org
Trellis
  Trellis @ GitHub: http://github.com/bsbodden/trellis
  Trellis @ RubyForge: http://rubyforge.org/projects/trellis
  Trellis Website: http://www.trellisframework.org


                                                               55
Blog
http://www.trellisframework.org




                                  56
Come to the South West




Proof of Residence Not Required :-)
                                      57
www.integrallis.com




                      58
Ad

More Related Content

Similar to Trellis Framework At RubyWebConf (20)

73 Less Fugly Epicenter
73 Less Fugly   Epicenter73 Less Fugly   Epicenter
73 Less Fugly Epicenter
Romans Malinovskis
 
Windows phone and azure
Windows phone and azureWindows phone and azure
Windows phone and azure
★ Dovydas Navickas
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
kaven yan
 
Surviving a Plane Crash, a NU.nl case-study
Surviving a Plane Crash, a NU.nl case-studySurviving a Plane Crash, a NU.nl case-study
Surviving a Plane Crash, a NU.nl case-study
peter_ibuildings
 
mvcExpress training course : part1
mvcExpress training course : part1mvcExpress training course : part1
mvcExpress training course : part1
Raimundas Banevičius
 
Wireframes
WireframesWireframes
Wireframes
Peter Kaleta
 
Wireframes
WireframesWireframes
Wireframes
Peter Kaleta
 
Wireframes
WireframesWireframes
Wireframes
Peter Kaleta
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in React
Talentica Software
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
Bin Chen
 
Viridians on Rails
Viridians on RailsViridians on Rails
Viridians on Rails
Viridians
 
Pure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign Breakfast Presentations - Drupal FieldAPIPure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign
 
Tipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - WixTipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - Wix
Eyal Eizenberg
 
Django in the Real World
Django in the Real WorldDjango in the Real World
Django in the Real World
Jacob Kaplan-Moss
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
Grails & the World of Tomorrow
Grails & the World of TomorrowGrails & the World of Tomorrow
Grails & the World of Tomorrow
Peter Ledbrook
 
A intro to (hosted) Shiny Apps
A intro to (hosted) Shiny AppsA intro to (hosted) Shiny Apps
A intro to (hosted) Shiny Apps
Daniel Koller
 
Ruby Metaprogramming - OSCON 2008
Ruby Metaprogramming - OSCON 2008Ruby Metaprogramming - OSCON 2008
Ruby Metaprogramming - OSCON 2008
Brian Sam-Bodden
 
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Paris Android User Group
 
Fly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using AngularFly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using Angular
Vacation Labs
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
kaven yan
 
Surviving a Plane Crash, a NU.nl case-study
Surviving a Plane Crash, a NU.nl case-studySurviving a Plane Crash, a NU.nl case-study
Surviving a Plane Crash, a NU.nl case-study
peter_ibuildings
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in React
Talentica Software
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
Bin Chen
 
Viridians on Rails
Viridians on RailsViridians on Rails
Viridians on Rails
Viridians
 
Pure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign Breakfast Presentations - Drupal FieldAPIPure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign Breakfast Presentations - Drupal FieldAPI
Pure Sign
 
Tipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - WixTipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - Wix
Eyal Eizenberg
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
Grails & the World of Tomorrow
Grails & the World of TomorrowGrails & the World of Tomorrow
Grails & the World of Tomorrow
Peter Ledbrook
 
A intro to (hosted) Shiny Apps
A intro to (hosted) Shiny AppsA intro to (hosted) Shiny Apps
A intro to (hosted) Shiny Apps
Daniel Koller
 
Ruby Metaprogramming - OSCON 2008
Ruby Metaprogramming - OSCON 2008Ruby Metaprogramming - OSCON 2008
Ruby Metaprogramming - OSCON 2008
Brian Sam-Bodden
 
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Introduction to Honeycomb APIs - Android Developer Lab 2011 Q3
Paris Android User Group
 
Fly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using AngularFly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using Angular
Vacation Labs
 

More from Brian Sam-Bodden (9)

Baruco 2014 - Rubymotion Workshop
Baruco 2014 - Rubymotion WorkshopBaruco 2014 - Rubymotion Workshop
Baruco 2014 - Rubymotion Workshop
Brian Sam-Bodden
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Brian Sam-Bodden
 
RailsConf 2013: RubyMotion
RailsConf 2013: RubyMotionRailsConf 2013: RubyMotion
RailsConf 2013: RubyMotion
Brian Sam-Bodden
 
Rspec and Capybara Intro Tutorial at RailsConf 2013
Rspec and Capybara Intro Tutorial at RailsConf 2013Rspec and Capybara Intro Tutorial at RailsConf 2013
Rspec and Capybara Intro Tutorial at RailsConf 2013
Brian Sam-Bodden
 
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and MustacheRoad to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Brian Sam-Bodden
 
Integrallis groovy-cloud
Integrallis groovy-cloudIntegrallis groovy-cloud
Integrallis groovy-cloud
Brian Sam-Bodden
 
Ferret
FerretFerret
Ferret
Brian Sam-Bodden
 
Bitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRuby
Brian Sam-Bodden
 
Ruby Metaprogramming 08
Ruby Metaprogramming 08Ruby Metaprogramming 08
Ruby Metaprogramming 08
Brian Sam-Bodden
 
Baruco 2014 - Rubymotion Workshop
Baruco 2014 - Rubymotion WorkshopBaruco 2014 - Rubymotion Workshop
Baruco 2014 - Rubymotion Workshop
Brian Sam-Bodden
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Brian Sam-Bodden
 
RailsConf 2013: RubyMotion
RailsConf 2013: RubyMotionRailsConf 2013: RubyMotion
RailsConf 2013: RubyMotion
Brian Sam-Bodden
 
Rspec and Capybara Intro Tutorial at RailsConf 2013
Rspec and Capybara Intro Tutorial at RailsConf 2013Rspec and Capybara Intro Tutorial at RailsConf 2013
Rspec and Capybara Intro Tutorial at RailsConf 2013
Brian Sam-Bodden
 
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and MustacheRoad to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Road to mobile w/ Sinatra, jQuery Mobile, Spine.js and Mustache
Brian Sam-Bodden
 
Bitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRuby
Brian Sam-Bodden
 
Ad

Recently uploaded (20)

IT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information TechnologyIT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information Technology
SHEHABALYAMANI
 
Q1 2025 Dropbox Earnings and Investor Presentation
Q1 2025 Dropbox Earnings and Investor PresentationQ1 2025 Dropbox Earnings and Investor Presentation
Q1 2025 Dropbox Earnings and Investor Presentation
Dropbox
 
May Patch Tuesday
May Patch TuesdayMay Patch Tuesday
May Patch Tuesday
Ivanti
 
AI 3-in-1: Agents, RAG, and Local Models - Brent Laster
AI 3-in-1: Agents, RAG, and Local Models - Brent LasterAI 3-in-1: Agents, RAG, and Local Models - Brent Laster
AI 3-in-1: Agents, RAG, and Local Models - Brent Laster
All Things Open
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
Lorenzo Miniero
 
Unlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web AppsUnlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web Apps
Maximiliano Firtman
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
fennec fox optimization algorithm for optimal solution
fennec fox optimization algorithm for optimal solutionfennec fox optimization algorithm for optimal solution
fennec fox optimization algorithm for optimal solution
shallal2
 
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Christian Folini
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Build With AI - In Person Session Slides.pdf
Build With AI - In Person Session Slides.pdfBuild With AI - In Person Session Slides.pdf
Build With AI - In Person Session Slides.pdf
Google Developer Group - Harare
 
Dark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanizationDark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanization
Jakub Šimek
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
Top-AI-Based-Tools-for-Game-Developers (1).pptx
Top-AI-Based-Tools-for-Game-Developers (1).pptxTop-AI-Based-Tools-for-Game-Developers (1).pptx
Top-AI-Based-Tools-for-Game-Developers (1).pptx
BR Softech
 
Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)
Kaya Weers
 
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient CareAn Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
Cyntexa
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 
IT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information TechnologyIT488 Wireless Sensor Networks_Information Technology
IT488 Wireless Sensor Networks_Information Technology
SHEHABALYAMANI
 
Q1 2025 Dropbox Earnings and Investor Presentation
Q1 2025 Dropbox Earnings and Investor PresentationQ1 2025 Dropbox Earnings and Investor Presentation
Q1 2025 Dropbox Earnings and Investor Presentation
Dropbox
 
May Patch Tuesday
May Patch TuesdayMay Patch Tuesday
May Patch Tuesday
Ivanti
 
AI 3-in-1: Agents, RAG, and Local Models - Brent Laster
AI 3-in-1: Agents, RAG, and Local Models - Brent LasterAI 3-in-1: Agents, RAG, and Local Models - Brent Laster
AI 3-in-1: Agents, RAG, and Local Models - Brent Laster
All Things Open
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
Lorenzo Miniero
 
Unlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web AppsUnlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web Apps
Maximiliano Firtman
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
fennec fox optimization algorithm for optimal solution
fennec fox optimization algorithm for optimal solutionfennec fox optimization algorithm for optimal solution
fennec fox optimization algorithm for optimal solution
shallal2
 
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Crazy Incentives and How They Kill Security. How Do You Turn the Wheel?
Christian Folini
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Dark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanizationDark Dynamism: drones, dark factories and deurbanization
Dark Dynamism: drones, dark factories and deurbanization
Jakub Šimek
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
Top-AI-Based-Tools-for-Game-Developers (1).pptx
Top-AI-Based-Tools-for-Game-Developers (1).pptxTop-AI-Based-Tools-for-Game-Developers (1).pptx
Top-AI-Based-Tools-for-Game-Developers (1).pptx
BR Softech
 
Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)
Kaya Weers
 
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient CareAn Overview of Salesforce Health Cloud & How is it Transforming Patient Care
An Overview of Salesforce Health Cloud & How is it Transforming Patient Care
Cyntexa
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 
Ad

Trellis Framework At RubyWebConf

  • 1. Component-Driven Web Development in Ruby Brian Sam-Bodden 1
  • 2. Components on the Web 1 Reusable Components ➡More that just reusable output generators, true OO constructs ➡Reuse views and logic in a convenient bundle ➡Composable: Components made of Components 2 Events and Event Handlers ➡Communication between components is in the form of events ➡Components interested in an event provide a handler 3 Transparent State Management ➡Minimize explicit interaction with the HTTP session ➡Components are full-blow objects with rich behavior and state 2
  • 3. What is Trellis? 1 Magic Like Rails! ➡A DSL for Component-Oriented Ruby Web Development ➡Some new concepts and many old ones (done the Ruby way!) 2 A Micro-Framework ➡Small like Camping and Sinatra ➡Designed for Small Apps, Many Mounts, Complex Pages 3 Components ➡Easy to build, easy to reuse ➡Encapsulate complexity in components, keep application simple ➡MVC all the way! 3
  • 4. What is Trellis? ✓declares pages used ✓declares a home page ✓dispatches request to pages ✓defines a template ✓handles events ✓dispatches events to components ✓provides reusable logic ✓responds to events ✓stateless or stateful ✓means of communication ✓point to point ✓publish / subscribe 4
  • 5. What is Trellis? A lot of ideas (stolen) from... ✓ WebObjects ✓ Tapestry ✓ Seaside ✓ Sinatra ✓ Iowa ✓ Camping ✓ Rails ✓ Wee 5
  • 6. What is Trellis? Built on Rack! 6
  • 8. Hello World ✓1 XHTML Template ✓1 Ruby File 8
  • 9. 9
  • 10. All Ruby - Single File ✓1 Ruby File ✓ Inline Template using Markaby 10
  • 11. 1 Application class with an entry point (a “home” page) ✓ 1 Page class with an instance variable @current_time ✓ Template has access to page instance variables ✓ 1 Page template embedded in the page class ✓ Template using 2  Trellis components: Value and PageLink ✓ PageLink creates a hyperlink to an application Page 11
  • 12. Launching Application#start() launches the Trellis application w/ Mongrel on port 3000 It’s a Ruby program, just run it! 12
  • 15. In Trellis page navigation is controlled by the return value of an event handler method 15
  • 16. HILO The Hi-Lo Web Application is the simple number guessing game Start Guess GameOver An opening/welcoming page Number correctly guessed Pick a number 16
  • 17. HILO The Hi-Lo Web Application structure consists of 1 Ruby file and 3 XHTML templates 17
  • 18. HILO The HiLoGame Trellis Application class defines the home page and any other available pages 18
  • 19. HILO ✓ The Start declares the pages it can navigate to (:guess  is the symbol for the  Guess  page) ✓ It provides an event handler called on_select() that sets the target value on the guess page ✓ Injected pages get their own instance variable (:guess  -­‐>  @guess  -­‐>  Guess) ✓If the return value of the method is a Page instance then navigate to that page 19
  • 20. HILO Ok, so far so good. But, where does the on_select event come from? 20
  • 21. HILO Trellis’ default routing scheme is: ✓ The ActionLink generates URLs in the form 21
  • 22. ✓ The Guess page can only navigate to the GameOver page , see  pages  :game_over ✓ It provides an event handler called on_select_from_link(value) ✓ on_select_from_link  implements a simple state machine navigation. If the guessed value: ➡ ...matches the target value then navigate to the GameOver page ➡ ...does not match the target value then navigate to the Guess page 22
  • 23. ✓ The Guess page uses several components to generate the HTML: ➡ Value (<trellis:value>): outputs the value of the Page instance variable @message ➡ Loop (<trellis:loop>) that repeats from 1..10 and makes the local variable guess available inside the loop ➡ActionLink (<trellis:action_link>): “link” which creates a hyperlink passing the guess as a parameter ➡ Value (<trellis:value>) outputs the value of the guess local variable as the contents of the ActionLink 23
  • 24. The guess’ page two states 24
  • 25. ✓The GameOver outputs a message with how many tries it took to guess the number ✓ The GameOver page uses the value of @count in the message ✓The GameOver page uses 1 component: ➡ PageLink (<trellis:page_link>): which creates a hyperlink to navigate back to the Start page 25
  • 26. HILO 26
  • 27. Hangman 27
  • 28. Hangman Hangman is similar to Hi-Lo but it uses a few more features of Trellis 28
  • 29. Hangman Static resources can be mounted using the map_static method 29
  • 30. Hangman 30
  • 31. Hangman 31
  • 32. Templates 32
  • 33. HTML Templates Designer friendly HTML Templates The Remove (<trellis:remove>) component allows for preview elements 33
  • 34. HAML Inline or external (.haml) templates: 34
  • 35. The Skinny on Components 35
  • 36. A Stateless Component The Loop component is a typical stateless component, a.k.a a simple tag The Loop component is a Trellis core component 36
  • 37. A Stateless Component FlickrInterestingness 37
  • 38. A Stateful Component Components become full blown OO citizens when they combine state and logic in a reusable package 38
  • 39. A Stateful Component The Counter components keeps a count page view on_add source=counter_1 on_add <trellis:counter tid="one" /> <trellis:action_link tid="reset"> @counter_1 on_subtract reset @counter_2 reset reset @counter_3 reset 39
  • 40. A Stateful Component A Stateful Counter Component 40
  • 41. A Stateful Component Reuse: The defining characteristic of a Component { { 41
  • 42. A Stateful Component Yes, I stole this demo from Seaside! 42
  • 44. Encapsulate Complexity A Model Grid Component 44
  • 45. Routing 45
  • 46. Clean Routes Trellis supports routing at the page level 46
  • 47. Route Sorting Routes are sorted according to their “matchability” 47
  • 48. Filters 48
  • 49. Filters Trellis supports “before”, “around” and “after” filters ✓ Filters are defined at the Application level ✓ and applied at the Page level 49
  • 50. Testing 50
  • 51. Testing Trellis can use Rack::Test w/ RSpec 51
  • 52. Open Questions & What’s Next 52
  • 53. Open Questions ✓ Testing: Rack provides Rack::MockRequest ✓ Sessions: Anything that Rack can support ✓ CRUD: Either dynamically generated Pages (like old Rails scaffold) or a code generator. But always using components! ✓ AJAX: Planning a JQuery-based set of components 53
  • 54. Open Questions ✓ Persistence: You pick. I’m developing data-aware components with a pluggable ORM ✓ Deployment: Hey is Rack! ✓ Is it ready?: Trellis is an infant (on version 0.1.1) 54
  • 55. Resources Rack: http://rack.rubyforge.org Radius: http://radius.rubyforge.org Nokogiri: http://nokogiri.org REXML: http://www.germane-software.com/software/rexml Builder: http://builder.rubyforge.org Paginator: http://paginator.rubyforge.org Trellis Trellis @ GitHub: http://github.com/bsbodden/trellis Trellis @ RubyForge: http://rubyforge.org/projects/trellis Trellis Website: http://www.trellisframework.org 55
  • 57. Come to the South West Proof of Residence Not Required :-) 57