0
Sammy.js
RESTful Evented JavaScript
Brandon Aaron
 jQuery Core Contributor
Senior Developer at Simpli.fi



    http://brandonaaron.net/
http://twitter.com/bra...
Sammy is a tiny JavaScript framework,
      built on top of jQuery,
    inspired by Ruby's Sinatra
Sinatra

class MyApp < Sinatra::Base

  get '/list/:id' do
    @list = List.get(params['id'])
    haml :list
  end

  post...
Sammy

var app = $.sammy(function() {

      this.get('#/list/:id', function() {
          var list = List.get(this.params...
What for?


•   Single page apps

•   Total JavaScript apps

•   A controller for widgets
Basics

• Routes
• Events
• Plugins
Routes

• Events triggered on hash change
• Composed of:
 • verb (get, post, put, del)
 • path (#/, test/path/, #/my_path/...
Routes Examples

 var app = $.sammy(function() {

       this.get('#/list/:id', function() {
           var list = List.ge...
Events

• Event driven apps with custom events and
  namespaces
• Looks like jQuery’s event API
• Some built-in life-cycle...
Events Example

var app = $.sammy(function() {

      this.bind('markDone', function(e, data) {
          // mark the todo...
Plugins
var MyPlugin = function(app) {

      this.helpers({
          alert: function(message) {
              this.log("...
Sammy’s Todos Demo
  http://sammystodos.brandonaaron.net/
Resources


• http://code.quirkey.com/sammy/
Upcoming SlideShare
Loading in...5
×

Intro To Sammy

6,656

Published on

A brief introduction to Sammy.js.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,656
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

  • Contributing since Aug 2006
    Contribute number of plugins like Live Query and bgiframe
    Maintain a blog to share knowledge

    Nokia in March as a senior technologist to explore the mobile web
    Nokia investing significantly in web technologies












  • Transcript of "Intro To Sammy"

    1. 1. Sammy.js RESTful Evented JavaScript
    2. 2. Brandon Aaron jQuery Core Contributor Senior Developer at Simpli.fi http://brandonaaron.net/ http://twitter.com/brandonaaron
    3. 3. Sammy is a tiny JavaScript framework, built on top of jQuery, inspired by Ruby's Sinatra
    4. 4. Sinatra class MyApp < Sinatra::Base get '/list/:id' do @list = List.get(params['id']) haml :list end post '/list/' do @list = List.create(params['list']) redirect "/list/#{@list.name}" end end
    5. 5. Sammy var app = $.sammy(function() { this.get('#/list/:id', function() { var list = List.get(this.params['id']); this.partial('list.haml', { list: list }); }); this.post('#/list/', function() { var list = List.create(this.params['list']); this.redirect('#/list/' + list.id); }); });
    6. 6. What for? • Single page apps • Total JavaScript apps • A controller for widgets
    7. 7. Basics • Routes • Events • Plugins
    8. 8. Routes • Events triggered on hash change • Composed of: • verb (get, post, put, del) • path (#/, test/path/, #/my_path/:var) • callback (function() {…})
    9. 9. Routes Examples var app = $.sammy(function() { this.get('#/list/:id', function() { var list = List.get(this.params['id']); this.partial('list.haml', { list: list }); }); this.post('#/list/', function() { var list = List.create(this.params['list']); this.redirect('#/list/' + list.id); }); });
    10. 10. Events • Event driven apps with custom events and namespaces • Looks like jQuery’s event API • Some built-in life-cycle events
    11. 11. Events Example var app = $.sammy(function() { this.bind('markDone', function(e, data) { // mark the todo as done }); }); // trigger the markDone event later on $('...').click(function(e) { app.trigger('markDone', { id: this.id }); });
    12. 12. Plugins var MyPlugin = function(app) { this.helpers({ alert: function(message) { this.log("ALERT! " + message); } }); }; var app = $.sammy(function() { this.use(MyPlugin); this.get('#/', function() { this.alert("I'm home"); //=> logs: ALERT! I'm home }); });
    13. 13. Sammy’s Todos Demo http://sammystodos.brandonaaron.net/
    14. 14. Resources • http://code.quirkey.com/sammy/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×