SlideShare a Scribd company logo
1 of 14
Sammy.js
RESTful Evented JavaScript
Brandon Aaron
 jQuery Core Contributor
Senior Developer at Simpli.fi



    http://brandonaaron.net/
http://twitter.com/brandonaaron
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 '/list/' do
    @list = List.create(params['list'])
    redirect "/list/#{@list.name}"
  end

end
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);
      });

});
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/:var)
 • callback (function() {…})
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);
       });

 });
Events

• Event driven apps with custom events and
  namespaces
• Looks like jQuery’s event API
• Some built-in life-cycle events
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 });
});
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
      });

});
Sammy’s Todos Demo
  http://sammystodos.brandonaaron.net/
Resources


• http://code.quirkey.com/sammy/

More Related Content

What's hot

Auto tools
Auto toolsAuto tools
Auto tools
祺 周
 
Building Awesome Apps with Angular and Firebase
Building Awesome Apps with Angular and FirebaseBuilding Awesome Apps with Angular and Firebase
Building Awesome Apps with Angular and Firebase
Ben Drucker
 
PowerShell with SharePoint 2013 and Office 365 - EPC Group
PowerShell with SharePoint 2013 and Office 365 - EPC GroupPowerShell with SharePoint 2013 and Office 365 - EPC Group
PowerShell with SharePoint 2013 and Office 365 - EPC Group
EPC Group
 

What's hot (20)

Auto tools
Auto toolsAuto tools
Auto tools
 
Introduce cucumber
Introduce cucumberIntroduce cucumber
Introduce cucumber
 
Mojolicious
MojoliciousMojolicious
Mojolicious
 
OttawaJS: angular accessibility
OttawaJS: angular accessibilityOttawaJS: angular accessibility
OttawaJS: angular accessibility
 
前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session前后端mvc经验 - webrebuild 2011 session
前后端mvc经验 - webrebuild 2011 session
 
Building Awesome Apps with Angular and Firebase
Building Awesome Apps with Angular and FirebaseBuilding Awesome Apps with Angular and Firebase
Building Awesome Apps with Angular and Firebase
 
Rails::Engine
Rails::EngineRails::Engine
Rails::Engine
 
Rails + Sencha = Netzke
Rails + Sencha = NetzkeRails + Sencha = Netzke
Rails + Sencha = Netzke
 
Intro To Bebo Applications by Thought Labs
Intro To Bebo Applications by Thought LabsIntro To Bebo Applications by Thought Labs
Intro To Bebo Applications by Thought Labs
 
Active Admin
Active AdminActive Admin
Active Admin
 
WordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JSWordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JS
 
Story Driven Development With Cucumber
Story Driven Development With CucumberStory Driven Development With Cucumber
Story Driven Development With Cucumber
 
Build a Better Editing Experience with Advanced Custom Fields
Build a Better Editing Experience with Advanced Custom FieldsBuild a Better Editing Experience with Advanced Custom Fields
Build a Better Editing Experience with Advanced Custom Fields
 
Renegades Guide to Hacking Rails Internals
Renegades Guide to Hacking Rails InternalsRenegades Guide to Hacking Rails Internals
Renegades Guide to Hacking Rails Internals
 
Rails-3-app-auto-generator-20100817
Rails-3-app-auto-generator-20100817Rails-3-app-auto-generator-20100817
Rails-3-app-auto-generator-20100817
 
AngularJS Google Extended I/O Ensenada
AngularJS Google Extended I/O EnsenadaAngularJS Google Extended I/O Ensenada
AngularJS Google Extended I/O Ensenada
 
Outside-in Development with Cucumber and Rspec
Outside-in Development with Cucumber and RspecOutside-in Development with Cucumber and Rspec
Outside-in Development with Cucumber and Rspec
 
Theming Wordpress with Adobe
Theming Wordpress with AdobeTheming Wordpress with Adobe
Theming Wordpress with Adobe
 
Sinatra
SinatraSinatra
Sinatra
 
PowerShell with SharePoint 2013 and Office 365 - EPC Group
PowerShell with SharePoint 2013 and Office 365 - EPC GroupPowerShell with SharePoint 2013 and Office 365 - EPC Group
PowerShell with SharePoint 2013 and Office 365 - EPC Group
 

Similar to Intro To Sammy

Emberjs building-ambitious-web-applications
Emberjs building-ambitious-web-applicationsEmberjs building-ambitious-web-applications
Emberjs building-ambitious-web-applications
ColdFusionConference
 
Keeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro FrameworkKeeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro Framework
Jeremy Kendall
 
Cakefest 2010: API Development
Cakefest 2010: API DevelopmentCakefest 2010: API Development
Cakefest 2010: API Development
Andrew Curioso
 
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQueryJAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
Zigotto Tecnologia
 

Similar to Intro To Sammy (20)

JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
 
Emberjs building-ambitious-web-applications
Emberjs building-ambitious-web-applicationsEmberjs building-ambitious-web-applications
Emberjs building-ambitious-web-applications
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Keeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro FrameworkKeeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro Framework
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack Support
 
Express JS
Express JSExpress JS
Express JS
 
Cakefest 2010: API Development
Cakefest 2010: API DevelopmentCakefest 2010: API Development
Cakefest 2010: API Development
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuery
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
 
Magento Live Australia 2016: Request Flow
Magento Live Australia 2016: Request FlowMagento Live Australia 2016: Request Flow
Magento Live Australia 2016: Request Flow
 
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQueryJAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 

Intro To Sammy

  • 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
  • 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/

Editor's Notes

  1. 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