SlideShare a Scribd company logo
1 of 35
Download to read offline
A Little


For Your App
   Luca Mearelli
var Luca = (function(){
    var me = {};
     me.is = 'craftsman';
     me.twitter = '@lmea';
     me.did = ['http://miojob.repubblica.it',
               'http://kiaraservice.com',
               '...'];
    me.uses = function(tool){
         _.indexOf(['ruby', 'rails', 'javascript'], tool)>=0;
     }
    me.used = function(tool){
         _.indexOf(['c++', 'python', 'java'], tool)>=0;
     }
    return me;
})()




                                        @lmea #jsday     http://joind.in/3360
http://github.com/documentcloud/backbone/




                          @lmea #jsday   http://joind.in/3360
A quick poll




           Using DOM libraries?
           Using (end-to-end) frameworks?
           Know or used backbone.js?




                                  @lmea #jsday   http://joind.in/3360
Backbone.js: what is it?




           A lightweight collection of tools
           giving enough structure to help
           building apps in the browser
           without getting in the way



                                @lmea #jsday   http://joind.in/3360
Backbone.js: what is it for?




           Data heavy pages
           Frontends to (JSON) web services
           CRUD-kind web apps




                                @lmea #jsday   http://joind.in/3360
Backbone.js: Model-View-Controller




                                     model




                view                            controller




                                             @lmea #jsday    http://joind.in/3360
Elements of backbone




          Model
          Collection
          View
          Controller


                       @lmea #jsday   http://joind.in/3360
Elements of backbone (2)




          Event
          Sync
          History


                           @lmea #jsday   http://joind.in/3360
Model & Collection




          Representing the data
          Building the business logic
          Handling persistence




                                 @lmea #jsday   http://joind.in/3360
The simplest model




     var Talk = Backbone.Model.extend({})




                                            @lmea #jsday   http://joind.in/3360
Initializing & setting defaults




       var Talk = Backbone.Model.extend({

            // Default attributes for Talk
            defaults: {
               title: "a talk",
               speaker: "me",
               lenght: 60
            },

            intialize: function(){
              if (this.length>10) {
                 this.set({"lightining": false});
               }
            },
       })




                                                    @lmea #jsday   http://joind.in/3360
Assorted CRUD methods




     var my_talk = new Talk({title: "A Little Backbone"});

     my_talk.get("title");
     my_talk.set({"speaker":"Luca Mearelli"});

     if(my_talk.has("video")){
        //...
     };

     my_talk.unset("speaker")
     my_talk.id
     my_talk.cid




                                            @lmea #jsday     http://joind.in/3360
Custom functions




     var Talk = Backbone.Model.extend({

          full_info: function(){
            return this.get("title")+" by:"+this.get("speaker");
          },

          rate: function(stars){
            if(_.isUndefined(this.get("rating"))){
               this.save({rating: stars});
             }
          },

     })




                                               @lmea #jsday    http://joind.in/3360
Validating models



      var Talk = Backbone.Model.extend({

        validate: function(attrs) {
          if (_.isEmpty(attrs.title)) {
            return "The title should be defined";
          }
          if (attrs.lenght>60) {
            return "The maximum lenght is 60 minutes";
          }
        }

      });

      my_talk.bind("error", function(model, error) {
        alert(model.full_info() + " " + error);
      });
      my_talk.set({"lenght":120});




                                             @lmea #jsday   http://joind.in/3360
Saving models




      // delegates to Backbone.sync
      my_talk.save(); // if my_talk.isNew() -> ‘create’ (HTTP “POST”)
      my_talk.save({title:"ahah"}) // otherwise ‘update’ (HTTP “PUT”)

      my_talk.save({...},
                   {
                      success: function(model, resp, xhr){...},
                      error: function(model, errormsg){...}
                   });

      my_talk.url(); // /[collection.url]/[id] or /[urlRoot]/[id]
      Talk.urlRoot = '/talks';




                                             @lmea #jsday    http://joind.in/3360
Backbone.sync




   Backbone.sync = function(method, model, options) {

        switch   (method) {
          case   "read":    ...   break;   //   read !   GET    /collection[/id]
          case   "create": ...    break;   //   create   ! POST    /collection
          case   "update": ...    break;   //   update   ! PUT    /collection/id
          case   "delete": ...    break;   //   delete   ! DELETE    /collection/id
        }

   };

   // to emulate put & delete with post + parameter
   Backbone.emulateHTTP = true;




                                                          @lmea #jsday     http://joind.in/3360
Models collection




      var Track = Backbone.Collection.extend({
        model: Talk
      });

      var track_talks = new Track([talk1, talk2, talk3]);
      track_talks.get(talk2.id); // gets talk2
      track_talks.at(0); // gets talk1
      track_talks.lenght; // is 3




                                             @lmea #jsday   http://joind.in/3360
Collection: adding and removing models




   track_talks.add(
      {title:"JavaScript Survival Guide",speaker:"Giordano Scalzo " }
   );
   track_talks.add([
      {title: "Faster Web Sites 2.0", speaker: "Steve Souders" },
      {title: "HTML5, the current status", speaker:"Patrick H. Lauke"}
   ]);

   track_talks.remove(talk1);
   track_talks.remove([talk2, talk3]);

   track_talks.refresh([
     {title:"Javascript the New Parts",speaker: "Federico Galassi" }
   ]);




                                             @lmea #jsday    http://joind.in/3360
Fetching a collection from the server




      var Track = Backbone.Collection.extend({
        url: function(){
          return "/tracks/"+this.get("number");
        },
        // or simply url: "/talks"
      });

      var track_talks = new Track({number: 1})
      track_talks.fetch(); // calls model.parse(response)




                                             @lmea #jsday   http://joind.in/3360
Custom sorted collections




     track_talks.comparator = function(talk) {
       return talk.get("time");
     }

     track_talks.add(new Talk({time: 17,
                               title: "A Little Backbone"}));

     track_talks.add(new Talk({time: 9,
                               title: "Faster Web Sites 2.0"}));

     track_talks.add(new Talk({time: 10,
                               title: "JavaScript Survival Guide"}));

     alert(track_talks.pluck('title'));

     track_talks.sort();




                                             @lmea #jsday       http://joind.in/3360
Underscore.js goodies



     var Track = Backbone.Collection.extend({

       future: function() {
         return this.filter(function(talk){
                   return todo.get('time')>(new Date()).getHours();
                });
       },

       next: function() {
         return this.first.apply(this, this.future());
       }
       // forEach (each), map, reduce (foldl, inject),
       // reduceRight (foldr), find (detect), filter (select),
       // reject, every (all), some (any), include, invoke, max,
       // min, sortBy, sortedIndex, toArray, size, first, rest,
       // last, without, indexOf, lastIndexOf, isEmpty, chain
     });




                                                @lmea #jsday   http://joind.in/3360
Views




        is a small chunk of the page
        has declarative event handling
        acts like a view controller




                              @lmea #jsday   http://joind.in/3360
A basic view



     // The DOM element for a talk
     var TalkView = Backbone.View.extend({

       //... is a div tag.
       tagName: "div",
       className: "a-talk-row",

       render: function() {
         $(this.el).html(this.model.full_info());
         return this;
       },
     });

     v = new TalkView({
           model:my_talk,
           id: 'talk-'+my_talk.id
         });




                                             @lmea #jsday   http://joind.in/3360
Declarative event handling




     var TalkView = Backbone.View.extend({
       // The DOM events specific to a talk.
       events: {
          "click .title"          : "rateIt",
          "click span.edit"       : "edit",
          "keypress input.title"  : "saveOnEnter"
       },
       edit: function() {
         $(this.el).addClass("editing");
         this.$('input.title').focus();
       },
       saveOnEnter: function(e) { },
       rateIt: function(e) { },

     });




                                             @lmea #jsday   http://joind.in/3360
Sub-view element selection




    view.$(selector) // equivalent to $(selector, view.el)
    this.$(".title").text()
    this.$("li input[@name=email]")
    this.$("div #start")




                                            @lmea #jsday     http://joind.in/3360
Binding model events




    var TrackView = Backbone.View.extend({

       initialize: function() {
         _.bindAll(this, 'addOne', 'addAll', 'render');

          this.collection.bind('add',     this.addOne);
          this.collection.bind('refresh', this.addAll);
          this.collection.bind('all',     this.render);

         this.collection.fetch();
       },

    });

    var current_track = new Track(...);
    var track_view = new TrackView({collection: current_track })




                                              @lmea #jsday   http://joind.in/3360
Rendering templates




    <script type="text/template" id="talk-template">
    <div class="talk <%= lightining ? 'ltalk' : '' %>">
        <div class="talk-title"><%= title %></div>
        <span class="talk-speaker"><%= speaker %></span>
        <% for (i=0;i<rating;i++) { %><img src="star.png" /><% } %>
    </div>
    </script>

       render: function() {
         $(this.el).html(this.template(this.model.toJSON()));
         return this;
       },




                                             @lmea #jsday       http://joind.in/3360
Controllers




          intra-page action routing
          evented control flow
          stateful, bookmarkable sub-pages




                                @lmea #jsday   http://joind.in/3360
Controller example




     var ConferenceController = Backbone.Controller.extend({

       routes: {
          "!help":            "help",     // #!help
          "!track/:number":   "search",   // #!track/1
       },

       help: function() {
       },
       search: function(number) {
       }

     });

     new ConferenceController();
     Backbone.history.start();




                                               @lmea #jsday    http://joind.in/3360
Controller routes




     routes: {
       "help/:page":            "help",
       "slides/*path":          "downloadSlides",
       "talk/:track/:talk":     "showTalk",
       "speaker/:name/talks":   "speakerTalks"
       "speaker/:name":         "speaker"
     }

     // Matches #video/10, passing "10"
     this.route("video/:number",
                "video", function(number){ ... });

     // Matches #talk/203/rate/2, passing "203" and "5"
     this.route(/^talk/(.*?)/rate/([1-5])$/,
                "rate", function(id,vote){ ... });




                                               @lmea #jsday   http://joind.in/3360
Backbone.js: demo




          A mobile note taking app
          http://luca.github.com/jsday-demo/




                              @lmea #jsday   http://joind.in/3360
In the end, what does it do?




           JS data models
           Event based
           RESTful (JSON)
           Intra page control flow



                               @lmea #jsday   http://joind.in/3360
And, why should I use it?




           avoids spaghetti code
           cleanly separates concerns
           simple to integrate




                                 @lmea #jsday   http://joind.in/3360
thanks!

http://spazidigitali.com
@lmea

http://www.slideshare.net/lucamea/a-little-backbone-for-your-app



                                       @lmea #jsday      http://joind.in/3360

More Related Content

What's hot

Advanced symfony Techniques
Advanced symfony TechniquesAdvanced symfony Techniques
Advanced symfony TechniquesKris Wallsmith
 
An Introduction to Celery
An Introduction to CeleryAn Introduction to Celery
An Introduction to CeleryIdan Gazit
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsIgnacio Martín
 
Python RESTful webservices with Python: Flask and Django solutions
Python RESTful webservices with Python: Flask and Django solutionsPython RESTful webservices with Python: Flask and Django solutions
Python RESTful webservices with Python: Flask and Django solutionsSolution4Future
 
Filling the flask
Filling the flaskFilling the flask
Filling the flaskJason Myers
 
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreSymfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreRyan Weaver
 
The effective use of Django ORM
The effective use of Django ORMThe effective use of Django ORM
The effective use of Django ORMYaroslav Muravskyi
 
Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3makoto tsuyuki
 
A Functional Guide to Cat Herding with PHP Generators
A Functional Guide to Cat Herding with PHP GeneratorsA Functional Guide to Cat Herding with PHP Generators
A Functional Guide to Cat Herding with PHP GeneratorsMark Baker
 
Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Kris Wallsmith
 
With a Mighty Hammer
With a Mighty HammerWith a Mighty Hammer
With a Mighty HammerBen Scofield
 
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017Ryan Weaver
 
symfony on action - WebTech 207
symfony on action - WebTech 207symfony on action - WebTech 207
symfony on action - WebTech 207patter
 

What's hot (20)

Advanced symfony Techniques
Advanced symfony TechniquesAdvanced symfony Techniques
Advanced symfony Techniques
 
An Introduction to Celery
An Introduction to CeleryAn Introduction to Celery
An Introduction to Celery
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
 
Python RESTful webservices with Python: Flask and Django solutions
Python RESTful webservices with Python: Flask and Django solutionsPython RESTful webservices with Python: Flask and Django solutions
Python RESTful webservices with Python: Flask and Django solutions
 
Filling the flask
Filling the flaskFilling the flask
Filling the flask
 
New in php 7
New in php 7New in php 7
New in php 7
 
Practical Celery
Practical CeleryPractical Celery
Practical Celery
 
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreSymfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
 
The effective use of Django ORM
The effective use of Django ORMThe effective use of Django ORM
The effective use of Django ORM
 
Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3
 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
 
A Functional Guide to Cat Herding with PHP Generators
A Functional Guide to Cat Herding with PHP GeneratorsA Functional Guide to Cat Herding with PHP Generators
A Functional Guide to Cat Herding with PHP Generators
 
Django
DjangoDjango
Django
 
Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)
 
With a Mighty Hammer
With a Mighty HammerWith a Mighty Hammer
With a Mighty Hammer
 
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
The Coolest Symfony Components you’ve never heard of - DrupalCon 2017
 
Symfony2 revealed
Symfony2 revealedSymfony2 revealed
Symfony2 revealed
 
Play!ng with scala
Play!ng with scalaPlay!ng with scala
Play!ng with scala
 
symfony on action - WebTech 207
symfony on action - WebTech 207symfony on action - WebTech 207
symfony on action - WebTech 207
 
Getting Started-with-Laravel
Getting Started-with-LaravelGetting Started-with-Laravel
Getting Started-with-Laravel
 

Similar to A Little Backbone For Your App

Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Scala & sling
Scala & slingScala & sling
Scala & slingmichid
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
Fun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksFun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksMongoDB
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
Progressive Enhancment with Rails and React
Progressive Enhancment with Rails and ReactProgressive Enhancment with Rails and React
Progressive Enhancment with Rails and ReactTyler Johnston
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup PerformanceJustin Cataldo
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers StealBen Scofield
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
Summer - The HTML5 Library for Java and Scala
Summer - The HTML5 Library for Java and ScalaSummer - The HTML5 Library for Java and Scala
Summer - The HTML5 Library for Java and Scalarostislav
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's CodeWildan Maulana
 
Speed up your developments with Symfony2
Speed up your developments with Symfony2Speed up your developments with Symfony2
Speed up your developments with Symfony2Hugo Hamon
 
03 form-data
03 form-data03 form-data
03 form-datasnopteck
 
Express Presentation
Express PresentationExpress Presentation
Express Presentationaaronheckmann
 
Design and Development performance considerations
Design and Development performance considerationsDesign and Development performance considerations
Design and Development performance considerationsElaine Van Bergen
 
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...PROIDEA
 

Similar to A Little Backbone For Your App (20)

Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Scala & sling
Scala & slingScala & sling
Scala & sling
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Fun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksFun Teaching MongoDB New Tricks
Fun Teaching MongoDB New Tricks
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Progressive Enhancment with Rails and React
Progressive Enhancment with Rails and ReactProgressive Enhancment with Rails and React
Progressive Enhancment with Rails and React
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Summer - The HTML5 Library for Java and Scala
Summer - The HTML5 Library for Java and ScalaSummer - The HTML5 Library for Java and Scala
Summer - The HTML5 Library for Java and Scala
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's Code
 
Speed up your developments with Symfony2
Speed up your developments with Symfony2Speed up your developments with Symfony2
Speed up your developments with Symfony2
 
03 form-data
03 form-data03 form-data
03 form-data
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
 
Design and Development performance considerations
Design and Development performance considerationsDesign and Development performance considerations
Design and Development performance considerations
 
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...
4Developers 2018: Pyt(h)on vs słoń: aktualny stan przetwarzania dużych danych...
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
 

More from Luca Mearelli

More from Luca Mearelli (9)

And Now You Have Two Problems
And Now You Have Two ProblemsAnd Now You Have Two Problems
And Now You Have Two Problems
 
The anatomy of an infographic
The anatomy of an infographicThe anatomy of an infographic
The anatomy of an infographic
 
L'altra meta del web
L'altra meta del webL'altra meta del web
L'altra meta del web
 
WorseSoftware
WorseSoftwareWorseSoftware
WorseSoftware
 
Open Web
Open WebOpen Web
Open Web
 
Capistrano2
Capistrano2Capistrano2
Capistrano2
 
Wikierp
WikierpWikierp
Wikierp
 
Introduzione a Ruby On Rails
Introduzione a Ruby On RailsIntroduzione a Ruby On Rails
Introduzione a Ruby On Rails
 
Integrating services with OAuth
Integrating services with OAuthIntegrating services with OAuth
Integrating services with OAuth
 

Recently uploaded

Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiRaviKumarDaparthi
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfOverkill Security
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...caitlingebhard1
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 

Recently uploaded (20)

Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 

A Little Backbone For Your App

  • 1. A Little For Your App Luca Mearelli
  • 2. var Luca = (function(){ var me = {}; me.is = 'craftsman'; me.twitter = '@lmea'; me.did = ['http://miojob.repubblica.it', 'http://kiaraservice.com', '...']; me.uses = function(tool){ _.indexOf(['ruby', 'rails', 'javascript'], tool)>=0; } me.used = function(tool){ _.indexOf(['c++', 'python', 'java'], tool)>=0; } return me; })() @lmea #jsday http://joind.in/3360
  • 3. http://github.com/documentcloud/backbone/ @lmea #jsday http://joind.in/3360
  • 4. A quick poll Using DOM libraries? Using (end-to-end) frameworks? Know or used backbone.js? @lmea #jsday http://joind.in/3360
  • 5. Backbone.js: what is it? A lightweight collection of tools giving enough structure to help building apps in the browser without getting in the way @lmea #jsday http://joind.in/3360
  • 6. Backbone.js: what is it for? Data heavy pages Frontends to (JSON) web services CRUD-kind web apps @lmea #jsday http://joind.in/3360
  • 7. Backbone.js: Model-View-Controller model view controller @lmea #jsday http://joind.in/3360
  • 8. Elements of backbone Model Collection View Controller @lmea #jsday http://joind.in/3360
  • 9. Elements of backbone (2) Event Sync History @lmea #jsday http://joind.in/3360
  • 10. Model & Collection Representing the data Building the business logic Handling persistence @lmea #jsday http://joind.in/3360
  • 11. The simplest model var Talk = Backbone.Model.extend({}) @lmea #jsday http://joind.in/3360
  • 12. Initializing & setting defaults var Talk = Backbone.Model.extend({ // Default attributes for Talk defaults: { title: "a talk", speaker: "me", lenght: 60 }, intialize: function(){ if (this.length>10) { this.set({"lightining": false}); } }, }) @lmea #jsday http://joind.in/3360
  • 13. Assorted CRUD methods var my_talk = new Talk({title: "A Little Backbone"}); my_talk.get("title"); my_talk.set({"speaker":"Luca Mearelli"}); if(my_talk.has("video")){ //... }; my_talk.unset("speaker") my_talk.id my_talk.cid @lmea #jsday http://joind.in/3360
  • 14. Custom functions var Talk = Backbone.Model.extend({ full_info: function(){ return this.get("title")+" by:"+this.get("speaker"); }, rate: function(stars){ if(_.isUndefined(this.get("rating"))){ this.save({rating: stars}); } }, }) @lmea #jsday http://joind.in/3360
  • 15. Validating models var Talk = Backbone.Model.extend({ validate: function(attrs) { if (_.isEmpty(attrs.title)) { return "The title should be defined"; } if (attrs.lenght>60) { return "The maximum lenght is 60 minutes"; } } }); my_talk.bind("error", function(model, error) { alert(model.full_info() + " " + error); }); my_talk.set({"lenght":120}); @lmea #jsday http://joind.in/3360
  • 16. Saving models // delegates to Backbone.sync my_talk.save(); // if my_talk.isNew() -> ‘create’ (HTTP “POST”) my_talk.save({title:"ahah"}) // otherwise ‘update’ (HTTP “PUT”) my_talk.save({...}, { success: function(model, resp, xhr){...}, error: function(model, errormsg){...} }); my_talk.url(); // /[collection.url]/[id] or /[urlRoot]/[id] Talk.urlRoot = '/talks'; @lmea #jsday http://joind.in/3360
  • 17. Backbone.sync Backbone.sync = function(method, model, options) { switch (method) { case "read": ... break; // read ! GET /collection[/id] case "create": ... break; // create ! POST /collection case "update": ... break; // update ! PUT /collection/id case "delete": ... break; // delete ! DELETE /collection/id } }; // to emulate put & delete with post + parameter Backbone.emulateHTTP = true; @lmea #jsday http://joind.in/3360
  • 18. Models collection var Track = Backbone.Collection.extend({ model: Talk }); var track_talks = new Track([talk1, talk2, talk3]); track_talks.get(talk2.id); // gets talk2 track_talks.at(0); // gets talk1 track_talks.lenght; // is 3 @lmea #jsday http://joind.in/3360
  • 19. Collection: adding and removing models track_talks.add( {title:"JavaScript Survival Guide",speaker:"Giordano Scalzo " } ); track_talks.add([ {title: "Faster Web Sites 2.0", speaker: "Steve Souders" }, {title: "HTML5, the current status", speaker:"Patrick H. Lauke"} ]); track_talks.remove(talk1); track_talks.remove([talk2, talk3]); track_talks.refresh([ {title:"Javascript the New Parts",speaker: "Federico Galassi" } ]); @lmea #jsday http://joind.in/3360
  • 20. Fetching a collection from the server var Track = Backbone.Collection.extend({ url: function(){ return "/tracks/"+this.get("number"); }, // or simply url: "/talks" }); var track_talks = new Track({number: 1}) track_talks.fetch(); // calls model.parse(response) @lmea #jsday http://joind.in/3360
  • 21. Custom sorted collections track_talks.comparator = function(talk) { return talk.get("time"); } track_talks.add(new Talk({time: 17, title: "A Little Backbone"})); track_talks.add(new Talk({time: 9, title: "Faster Web Sites 2.0"})); track_talks.add(new Talk({time: 10, title: "JavaScript Survival Guide"})); alert(track_talks.pluck('title')); track_talks.sort(); @lmea #jsday http://joind.in/3360
  • 22. Underscore.js goodies var Track = Backbone.Collection.extend({ future: function() { return this.filter(function(talk){ return todo.get('time')>(new Date()).getHours(); }); }, next: function() { return this.first.apply(this, this.future()); } // forEach (each), map, reduce (foldl, inject), // reduceRight (foldr), find (detect), filter (select), // reject, every (all), some (any), include, invoke, max, // min, sortBy, sortedIndex, toArray, size, first, rest, // last, without, indexOf, lastIndexOf, isEmpty, chain }); @lmea #jsday http://joind.in/3360
  • 23. Views is a small chunk of the page has declarative event handling acts like a view controller @lmea #jsday http://joind.in/3360
  • 24. A basic view // The DOM element for a talk var TalkView = Backbone.View.extend({ //... is a div tag. tagName: "div", className: "a-talk-row", render: function() { $(this.el).html(this.model.full_info()); return this; }, }); v = new TalkView({ model:my_talk, id: 'talk-'+my_talk.id }); @lmea #jsday http://joind.in/3360
  • 25. Declarative event handling var TalkView = Backbone.View.extend({ // The DOM events specific to a talk. events: { "click .title" : "rateIt", "click span.edit" : "edit", "keypress input.title" : "saveOnEnter" }, edit: function() { $(this.el).addClass("editing"); this.$('input.title').focus(); }, saveOnEnter: function(e) { }, rateIt: function(e) { }, }); @lmea #jsday http://joind.in/3360
  • 26. Sub-view element selection view.$(selector) // equivalent to $(selector, view.el) this.$(".title").text() this.$("li input[@name=email]") this.$("div #start") @lmea #jsday http://joind.in/3360
  • 27. Binding model events var TrackView = Backbone.View.extend({ initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.collection.bind('add', this.addOne); this.collection.bind('refresh', this.addAll); this.collection.bind('all', this.render); this.collection.fetch(); }, }); var current_track = new Track(...); var track_view = new TrackView({collection: current_track }) @lmea #jsday http://joind.in/3360
  • 28. Rendering templates <script type="text/template" id="talk-template"> <div class="talk <%= lightining ? 'ltalk' : '' %>"> <div class="talk-title"><%= title %></div> <span class="talk-speaker"><%= speaker %></span> <% for (i=0;i<rating;i++) { %><img src="star.png" /><% } %> </div> </script> render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; }, @lmea #jsday http://joind.in/3360
  • 29. Controllers intra-page action routing evented control flow stateful, bookmarkable sub-pages @lmea #jsday http://joind.in/3360
  • 30. Controller example var ConferenceController = Backbone.Controller.extend({ routes: { "!help": "help", // #!help "!track/:number": "search", // #!track/1 }, help: function() { }, search: function(number) { } }); new ConferenceController(); Backbone.history.start(); @lmea #jsday http://joind.in/3360
  • 31. Controller routes routes: { "help/:page": "help", "slides/*path": "downloadSlides", "talk/:track/:talk": "showTalk", "speaker/:name/talks": "speakerTalks" "speaker/:name": "speaker" } // Matches #video/10, passing "10" this.route("video/:number", "video", function(number){ ... }); // Matches #talk/203/rate/2, passing "203" and "5" this.route(/^talk/(.*?)/rate/([1-5])$/, "rate", function(id,vote){ ... }); @lmea #jsday http://joind.in/3360
  • 32. Backbone.js: demo A mobile note taking app http://luca.github.com/jsday-demo/ @lmea #jsday http://joind.in/3360
  • 33. In the end, what does it do? JS data models Event based RESTful (JSON) Intra page control flow @lmea #jsday http://joind.in/3360
  • 34. And, why should I use it? avoids spaghetti code cleanly separates concerns simple to integrate @lmea #jsday http://joind.in/3360