Scribd
Upload
804 views71 pages

Lightweight JavaScript Framework: Sammy.js

Sammy.js is a JavaScript framework for building client-side single page applications. It uses RESTful routing and callbacks to handle asynchronous events. Sammy.js aims to provide a Sinatra-like experience for JavaScript applications, allowing routes, callbacks, and events to be defined similarly to how they are in Sinatra. The framework is lightweight, unobtrusive and can be dropped into any JavaScript project. It also supports namespacing to avoid collisions when using multiple instances.

Uploaded by

ben7229
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
804 views71 pages

Lightweight JavaScript Framework: Sammy.js

Sammy.js is a JavaScript framework for building client-side single page applications. It uses RESTful routing and callbacks to handle asynchronous events. Sammy.js aims to provide a Sinatra-like experience for JavaScript applications, allowing routes, callbacks, and events to be defined similarly to how they are in Sinatra. The framework is lightweight, unobtrusive and can be dropped into any JavaScript project. It also supports namespacing to avoid collisions when using multiple instances.

Uploaded by

ben7229
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

sammy.

js
[Link]
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
[Link]
[Link]
@kealey
@tckop
require 'sinatra'

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

$(function() {
[Link]();
});
app = $.sammy ->
[Link] '#/', ->
$('body').html('Sup?')

$ ->
[Link]()
related:
coffee-script
is
awesome
by
Jeremy Ashkenas
1. Beautiful
closure
syntax
function(some, args) {
return args;
}
(some, args) -> args
function() {
return $('nav [Link]');
}
() -> $('nav [Link]')
-> $('nav [Link]')
[Link] '#/issue-:issue/', (context) ->
render [Link]['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 [Link]
"A+"
else if [Link]
if [Link] then "B" else "B-"
else
"C"
var grade;
grade = function(student) {
if ([Link]) {
return "A+";
} else if ([Link]) {
if ([Link]) {
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 ->
[Link] '#/', ->
$('body').html('Sup?')

$ ->
[Link]()
routes
get '#/', -> ...
match
+
callback
get '#/:name', ->
  [Link]
    "/#{[Link]['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: [Link]['email']}, ->
     $.flash("Saved your address!")
  false
events
just like jQuery
run

lookup-route

run-route

redirect

...
bind 'redirect', (data) ->
$('#flash .info').html(
"redirecting to #{[Link]}"
)
bind 'location-changed', ->
updateSidebar [Link]
custom ones too
get '#/profile', ->
  [Link] 'refresh-stats'
  [Link] "/[Link]",
{},
(data) ->
     $('article')
.attr('class', 'profile')
.html(data)
bind 'refresh-stats', ->
  $.get "/profile/[Link]",
{},
(data) ->
     [Link] '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 ->
[Link] '#/', -> ...

$ ->
[Link]()
app = $.sammy '#new-bit', ->
[Link] '#/', -> ...

$ ->
[Link]()
content = $.sammy '#content', ->
[Link] '#/', -> ...

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


[Link] '#/', -> ...

$ ->
[Link]()
[Link]()
realities
googlebot doesn't
know JavaScript
googlebot doesn't
know JavaScript

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

You might also like