Trellis Framework At RubyWebConf
0 likes1,127 views
The document discusses component-driven web development in Ruby using the Trellis framework, which emphasizes reusable components, event handling, and state management. It describes the framework's design intentions, including a lightweight structure for small applications, navigation through event handlers, and examples of simple games like Hi-Lo and Hangman. The Trellis framework, built on Rack, incorporates various features such as routing, component reusability, and testing support, while also contemplating future enhancements like AJAX functionality.
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
- 7. Hello World 7
- 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
- 13. Hello World 13
- 14. Application Navigation 14
- 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
- 43. Encapsulate Complexity 43
- 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
- 58. www.integrallis.com 58