Elevate your webapps with Scala & Lift
@Sander_Mak

About
Coding at
Writing Blog @
branchandbound.net
Speaking

What should a
webframework
do?

Webframeworks
should...
Provide templating
Show dynamic content
Handle user input
Abstract from request/response
cycle?
Be highly interactive?
Preferably: concise, performant, secure

Webframeworks
should...
Provide templating
Lift is view-first
Templates pure HTML5 or XHTML
Embed and surround to compose
default.html with:
<lift:bind name=”content” />
signup.html with:
<lift:surround with=”default”
name=”content”>
<form>
... signup form ...
</form>
<lift:surround />

Webframeworks
should...
Show dynamic content
Pure templates: no code in
templates
Problem?

Webframeworks
should...
Show dynamic content
Pure templates: no code in
templates
Problem?

Webframeworks
should...
Show dynamic content
Snippets transform DOM to DOM
NodeSeq => NodeSeq
Guarantee: well-formedness,
sanitized
Use {request, session, database}
state

Webframeworks
should...
Show dynamic content
Snippet View
class IndexSnippet { .. surrounding html ..
def date(in: NodeSeq): NodeSeq = <lift:indexSnippet.date>
Helpers.bind("b", in, <div>Current date:
"date" -> new Date()) <b:date>
10:00:00 1/1/2012
} </b:date>
</div>
</lift:indexSnippet.date>

Webframeworks
should...
Show dynamic content
‘Operators’ and implicit conversions:
“date”.->(new Date())
results in a tuple:
(“date”, new Date())
Snippet View
class IndexSnippet { .. surrounding html ..
def date(in: NodeSeq): NodeSeq = <lift:indexSnippet.date>
Helpers.bind("b", in, <div>Current date:
"date" -> new Date()) <b:date>
10:00:00 1/1/2012
} </b:date>
</div>
</lift:indexSnippet.date>

Webframeworks
should...
Show dynamic content
Snippet (CSS binding) View
class CssSnippet { .. surrounding html ..
<div class="lift:cssSnippet.date">
def date: NodeSeq => NodeSeq = Current date:
"#date" #> currentDate <span id="date">10:00:00
1/1/2012</span>
} </div>
.. surrounding html ..

Webframeworks
should...
Show dynamic content
Constructs a function
NodeSeq => NodeSeq
Snippet (CSS binding) View
class CssSnippet { .. surrounding html ..
<div class="lift:cssSnippet.date">
def date: NodeSeq => NodeSeq = Current date:
"#date" #> currentDate <span id="date">10:00:00
1/1/2012</span>
} </div>
.. surrounding html ..

Webframeworks
should...
Show dynamic content
Implicit conversion from
String to ToCssBindPromoter
Snippet (CSS binding) View
class CssSnippet { .. surrounding html ..
<div class="lift:cssSnippet.date">
def date: NodeSeq => NodeSeq = Current date:
"#date" #> currentDate <span id="date">10:00:00
1/1/2012</span>
} </div>
.. surrounding html ..

Webframeworks
should...
Show dynamic content
With HTML5 may also be
data-lift=”cssSnippet.date”
Snippet (CSS binding) View
class CssSnippet { .. surrounding html ..
<div class="lift:cssSnippet.date">
def date: NodeSeq => NodeSeq = Current date:
"#date" #> currentDate <span id="date">10:00:00
1/1/2012</span>
} </div>
.. surrounding html ..

Webframeworks
should...
Show dynamic content
No MVC: MenuSnippet
View <=> Snippet
NewsSnippet
Many <=> Many
FormSnippet

Webframeworks
should...
Handle user input
Add server-side behavior to DOM
... with snippets
Behavior captured in closures
... managed by Lift, executed after
submit
Plain and Ajax requests unified
Primarily
stateful!

Webframeworks
should...
Handle user input
Snippet View
class FormSnippet {
def nameForm = { .. surrounding html ..
var name = "" <form method="POST"
def processForm() = class="lift:FormSnippet.nameForm">
println(name) <input id="nameField"
type="text"/>
"#nameField" #> <input id="submitButton"
type="submit"/>
SHtml.text(name, name = _) </form>
&
"#submitButton" #> .. surrounding html ..
SHtml.submit("Click",
processForm)
}
}

Webframeworks
should...
Handle user input
Method within method:
Snippet View
references name in outer scope
class FormSnippet {
def nameForm = { .. surrounding html ..
var name = "" <form method="POST"
def processForm() = class="lift:FormSnippet.nameForm">
println(name) <input id="nameField"
type="text"/>
"#nameField" #> <input id="submitButton"
type="submit"/>
SHtml.text(name, name = _) </form>
&
"#submitButton" #> .. surrounding html ..
SHtml.submit("Click",
processForm)
}
}

Webframeworks
should...
Handle user input
Equivalent to:
(inputName: String) => name = inputName
Snippet View
Closure in shorthand format
class FormSnippet {
def nameForm = { .. surrounding html ..
var name = "" <form method="POST"
def processForm() = class="lift:FormSnippet.nameForm">
println(name) <input id="nameField"
type="text"/>
"#nameField" #> <input id="submitButton"
type="submit"/>
SHtml.text(name, name = _) </form>
&
"#submitButton" #> .. surrounding html ..
SHtml.submit("Click",
processForm)
}
}

Webframeworks
should...
Handle user input
Combine 2 CSS transforms
into single aggregated transformation
Snippet View
def &(other: CssSel): CssSel
class FormSnippet {
def nameForm = { .. surrounding html ..
var name = "" <form method="POST"
def processForm() = class="lift:FormSnippet.nameForm">
println(name) <input id="nameField"
type="text"/>
"#nameField" #> <input id="submitButton"
type="submit"/>
SHtml.text(name, name = _) </form>
&
"#submitButton" #> .. surrounding html ..
SHtml.submit("Click",
processForm)
}
}

Webframeworks
should...
Handle user input
SHtml components: powerful but low-
level
abstractions:
LiftScreen Wizard
Declarative Multipage wizards
forms Backbutton
Validation support
Strongly typed ‘Conversations’

Webframeworks
should...

Comet
‘Reverse Ajax’ or ‘server push’
Realtime webapps
How to model
this?

Comet
... with actors!
Asynchronous
Mailbox serializes processing
Lightweight
Event-driven execution Local state
Behavior
mailbox

Comet
... with actors!
Asynchronous
Mailbox serializes processing
Lightweight
Event-driven execution Local state
Send message to actor: Behavior
actor ! MyMessage(“payload”)
mailbox

Comet
Chat demo setup
Actor
ChatServer
CometActor CometActor CometActor
ChatClient ChatClient ChatClient
...
Browser Browser Browser
...

Scala + Lift =
Abstraction

Scala + Lift =
Abstraction
Wiring UI:
Functional/reactive
programming

Scala + Lift =
Abstraction
Other abstractions:
Mapper (ORM)
Record (NoSQL)
REST Helper (sync/async)
Javascript & JSON DSL

Lift vs Play
Powertool
vs
Polished product

Who uses Lift?

Wrapping up
Designer friendly, logic free views
Concise; leverages Scala
Comet/Ajax integration second to none
Mature framework with great community
Relatively steep learning curve
Documentation slowly improving
Stateful, but no session replication

Questions
Code @ bit.ly/jeeconf-lift
branchandbound.ne
@Sander_Mak