Your SlideShare is downloading. ×
0
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
Intro To Sammy
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,608

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

    ×