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