Intro To Sammy

  • 6,236 views
Uploaded on

A brief introduction to Sammy.js.

A brief introduction to Sammy.js.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,236
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
78
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. Sammy.js RESTful Evented JavaScript
  • 2. Brandon Aaron jQuery Core Contributor Senior Developer at Simpli.fi http://brandonaaron.net/ http://twitter.com/brandonaaron
  • 3. Sammy is a tiny JavaScript framework, built on top of jQuery, inspired by Ruby's Sinatra
  • 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. 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. What for? • Single page apps • Total JavaScript apps • A controller for widgets
  • 7. Basics • Routes • Events • Plugins
  • 8. Routes • Events triggered on hash change • Composed of: • verb (get, post, put, del) • path (#/, test/path/, #/my_path/:var) • callback (function() {…})
  • 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. Events • Event driven apps with custom events and namespaces • Looks like jQuery’s event API • Some built-in life-cycle events
  • 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. 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. Sammy’s Todos Demo http://sammystodos.brandonaaron.net/
  • 14. Resources • http://code.quirkey.com/sammy/