sammy.

js
sammy.js
Ben Hoskings
@ben_h
a javascript
framework
 by
Aaron Quint
@aq
client-side
client-side
sinatra
 "RESTful,
evented
JavaScript"
routes
callbacks
events
asynchronous
lightweight
 sammy
sinatra

single
single
function
file
beautiful
thelmamagazine.com
thelmamagazine.com
@kealey
@tckop
require 'sinatra'

get '/' do
'Sup?'
end
var app = $.sammy(function() {
this.get('#/', function() {
$('body').html('Sup?');
});
});

$(function() {
app.run();
});
app = $.sammy ->
this.get '#/', ->
$('body').html('Sup?')

$ ->
app.run()
 related:
coffee-script
is
awesome
 by
Jeremy Ashkenas
1. Beautiful
closure
syntax
function(some, args) {
return args;
}
(some, args) -> args
function() {
return $('nav a.current');
}
() -> $('nav a.current')
-> $('nav a.current')
this.get '#/issue-:issue/', (context) ->
render context.params['issue']
2. Implicit
best
practices
if (typeof elvis != "undefined"
&& elvis !== null) {
alert("I knew it!");
}
alert "I knew it!" if elvis?
lunch = eat food for food in
['toast', 'cheese', 'wine']
var food, lunch, _i, _len, _ref;
_ref = ['toast', 'cheese', 'wine'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
food = _ref[_i];
lunch = eat(food);
}
3. Things
rubyists
like
Everything
is an
expression
grade = (student) ->
if student.excellentWork
"A+"
else if student.okayStuff
if student.triedHard then "B" else "B-"
else
"C"
var grade;
grade = function(student) {
if (student.excellentWork) {
return "A+";
} else if (student.okayStuff) {
if (student.triedHard) {
return "B";
} else {
return "B-";
}
} else {
return "C";
}
};
String
interpolation
(str) ->
"This is #{str}ing awesome"
(function(str) {
return "This is " +
str +
"ing awesome";
});
 "It's
just
JavaScript"
ANY
HOW
app = $.sammy ->
this.get '#/', ->
$('body').html('Sup?')

$ ->
app.run()
routes
get '#/', -> ...
 match
+
callback
get '#/:name', ->
  this.render
    "/#{this.params['name']}.haml",
    {},
    (data) ->
      $('article')
.attr('class', name)
.html(data)
forms
<form action="#/form" method="PUT">
  <label>Email</label>
  <input type="text" name="email" />
  <input type="submit" value="Submit" />
</form>
put '#/form', ->
  $.put "/some/api",
{email: this.params['email']}, ->
     $.flash("Saved your address!")
  false
events
just like jQuery
 run

lookup-route

run-route

redirect

...
bind 'redirect', (data) ->
$('#flash .info').html(
"redirecting to #{data.to}"
)
bind 'location-changed', ->
updateSidebar this.path
custom ones too
get '#/profile', ->
  this.trigger 'refresh-stats'
  this.render "/profile.haml",
{},
(data) ->
     $('article')
.attr('class', 'profile')
.html(data)
bind 'refresh-stats', ->
  $.get "/profile/stats.json",
{},
(data) ->
     this.trigger 'update-stats', data

bind 'update-stats', (e, data) ->

  $('.followers').html data['followers']
  $('.followings').html data['followings']
self-contained
namespaced
drop it in anywhere
app = $.sammy ->
this.get '#/', -> ...

$ ->
app.run()
app = $.sammy '#new-bit', ->
this.get '#/', -> ...

$ ->
app.run()
content = $.sammy '#content', ->
this.get '#/', -> ...

compose = $.sammy '#compose', ->

this.get '#/', -> ...

$ ->
content.run()
compose.run()
realities
googlebot doesn't
know JavaScript
googlebot doesn't
know JavaScript

:(
server-side
+
sammy
decorations
app
app extras
Thanks
— @ben_h