Your SlideShare is downloading. ×
Intro To Sammy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro To Sammy

6,499

Published on

A brief introduction to Sammy.js.

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,499
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
82
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/

    ×