Trellis Framework At RubyWebConf

58
Component-Driven Web Development in Ruby Brian Sam-Bodden 1

description

Trellis is a component-based, event-driven Web micro-framework that provides a DSL to describe web applications in terms of pages, components and events. It combines the best features of desktop application development and modern MVC frameworks like Rails and Sinatra. Trellis pushes the complexity of building web applications onto components allowing you to build simple lightweight applications or complex, feature-rich applications.

Transcript of Trellis Framework At RubyWebConf

Page 1: Trellis Framework At RubyWebConf

Component-Driven Web Development in Ruby

Brian Sam-Bodden

1

Page 2: Trellis Framework At RubyWebConf

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

Page 3: Trellis Framework At RubyWebConf

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

Page 4: Trellis Framework At RubyWebConf

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

Page 5: Trellis Framework At RubyWebConf

A lot of ideas (stolen) from...

✓Tapestry

✓Rails✓Camping

✓Sinatra

✓Seaside✓WebObjects

✓Iowa

✓Wee

What is Trellis?

5

Page 6: Trellis Framework At RubyWebConf

Built on Rack!

What is Trellis?

6

Page 7: Trellis Framework At RubyWebConf

Hello World

7

Page 8: Trellis Framework At RubyWebConf

✓1 Ruby File

✓1 XHTML Template

Hello World

8

Page 9: Trellis Framework At RubyWebConf

9

Page 10: Trellis Framework At RubyWebConf

✓1 Ruby File

✓Inline Template using Markaby

All Ruby - Single File

10

Page 11: Trellis Framework At RubyWebConf

✓ 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

Page 12: Trellis Framework At RubyWebConf

It’s a Ruby program, just run it!

Application#start() launches the Trellis application w/ Mongrel on port 3000

Launching

12

Page 14: Trellis Framework At RubyWebConf

Application Navigation

14

Page 15: Trellis Framework At RubyWebConf

In Trellis page navigation is controlled by the return value of

an event handler method

15

Page 16: Trellis Framework At RubyWebConf

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

Page 17: Trellis Framework At RubyWebConf

The Hi-Lo Web Application structure consists of 1 Ruby file and

3 XHTML templates

HILO

17

Page 18: Trellis Framework At RubyWebConf

The HiLoGame Trellis Application class defines the home page and any

other available pages

HILO

18

Page 19: Trellis Framework At RubyWebConf

✓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

Page 20: Trellis Framework At RubyWebConf

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

HILO

20

Page 21: Trellis Framework At RubyWebConf

✓The ActionLink generates URLs in the form

Trellis’ default routing scheme is:

HILO

21

Page 22: Trellis Framework At RubyWebConf

✓ 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

Page 23: Trellis Framework At RubyWebConf

✓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

Page 24: Trellis Framework At RubyWebConf

The guess’ page two states

24

Page 25: Trellis Framework At RubyWebConf

✓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

Page 27: Trellis Framework At RubyWebConf

Hangman

27

Page 28: Trellis Framework At RubyWebConf

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

Hangman

28

Page 29: Trellis Framework At RubyWebConf

Static resources can be mounted using the map_static method

Hangman

29

Page 30: Trellis Framework At RubyWebConf

Hangman

30

Page 32: Trellis Framework At RubyWebConf

Templates

32

Page 33: Trellis Framework At RubyWebConf

Designer friendly HTML Templates

The Remove (<trellis:remove>) component allows for preview elements

HTML Templates

33

Page 34: Trellis Framework At RubyWebConf

Inline or external (.haml) templates:

HAML

34

Page 35: Trellis Framework At RubyWebConf

The Skinny on Components

35

Page 36: Trellis Framework At RubyWebConf

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

Page 37: Trellis Framework At RubyWebConf

FlickrInterestingness

A Stateless Component

37

Page 38: Trellis Framework At RubyWebConf

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

reusable package

A Stateful Component

38

Page 39: Trellis Framework At RubyWebConf

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

Page 40: Trellis Framework At RubyWebConf

A Stateful Counter

Component

A Stateful Component

40

Page 41: Trellis Framework At RubyWebConf

{{

Reuse: The defining characteristic of a Component

A Stateful Component

41

Page 42: Trellis Framework At RubyWebConf

Yes, I stole this demo from Seaside!

A Stateful Component

42

Page 43: Trellis Framework At RubyWebConf

Encapsulate Complexity

43

Page 44: Trellis Framework At RubyWebConf

A Model Grid Component

Encapsulate Complexity

44

Page 45: Trellis Framework At RubyWebConf

Routing

45

Page 46: Trellis Framework At RubyWebConf

Trellis supports routing at the page level

Clean Routes

46

Page 47: Trellis Framework At RubyWebConf

Routes are sorted according to their “matchability”

Route Sorting

47

Page 48: Trellis Framework At RubyWebConf

Filters

48

Page 49: Trellis Framework At RubyWebConf

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

✓ Filters are defined at the Application level

✓ and applied at the Page level

Filters

49

Page 50: Trellis Framework At RubyWebConf

Testing

50

Page 51: Trellis Framework At RubyWebConf

Trellis can use Rack::Test w/ RSpecTesting

51

Page 52: Trellis Framework At RubyWebConf

Open Questions & What’s Next

52

Page 53: Trellis Framework At RubyWebConf

✓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

Page 54: Trellis Framework At RubyWebConf

✓ 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

Page 55: Trellis Framework At RubyWebConf

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

Page 56: Trellis Framework At RubyWebConf

http://www.trellisframework.orgBlog

56

Page 57: Trellis Framework At RubyWebConf

Come to the South West

Proof of Residence Not Required :-)57