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

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
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
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
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
 
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
 
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
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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
 

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