SlideShare a Scribd company logo
1 of 18
Download to read offline
CLIENT-SIDE MVC
                         A brief introduction by Thomas Gorissen

Freitag, 11. März 2011
ME?
                         1996
                                • <blink>Hello World</blink>

                                • “WebMaster”

                                • JS/PHP
                         1999

                                • Starcraft




                                                               http://thomasgorissen.com
                                • C#   .NET / Forms
                         2005


                                • Ruby

                                • ASP   MVC
                         2010   • JS

Freitag, 11. März 2011
is
    • Model/View/Controller                    • Structure   provider
        Javascript Framework
                                               • RESTful   JSON Connector
    • Released           13th Oct 2010
                                               • Hash-Routing    Engine
    • @DocumentCloud
        project                                • Event-driven

    • MIT            licensed and on GitHub    • Lightweight   (6.9kb)


Freitag, 11. März 2011
is not


                         • DOM Accessor

                         • Animation   toolkit

                         • Control   suite

                         • All   in wonder package



Freitag, 11. März 2011
WHAT IS IT FOR?


                            All Client-Side
                         Rendered Applications



Freitag, 11. März 2011
AHA, HOW IS THAT?
     • If  you do a lot of
         JavaScript, things tend to   Model          Controller
         get messy!

     • Backbone    provides a way
         to organize your code, by            View
         using the MVC pattern

     • Only   the View accesses
         the DOM (e.g. with                   DOM

         jQuery, Zepto, ...)

Freitag, 11. März 2011
ALTHOUGH...

                                                                   outi neng-
                                                                  R Controller
                                                                     ngi
                                                    Model
    • ... it’s           a bit wrongly labeled
                                                 + Collection
                                                                   E

    •I     call it a “dirty” MVC                        ConViewoller
                                                            tr


                                                                 iew
                                                                VDOM

Freitag, 11. März 2011
THE MODEL
                         var Tweet = Backbone.Model.extend({

                         !     // Overrides
                         !     initialize: function(params) {
                         !     !       if(params.id && !params.text)
                         !     !       !    this.fetch();
                         !     },
                         !
                         !     url: function() {
                         !     !      return "http://twitter.com/statuses/show/" + this.id +".json";
                         !     },
                         !
                         !     defaults: {!
                         !     !    highlighted: false
                         !     },
                         !
                         !     // Custom function
                         !     highlight: function() {
                         !     !     this.set({
                         !     !     !     highlighted: !this.get("highlighted")
                         !     !     });
                         !     }

                         });


Freitag, 11. März 2011
THE MODEL
                                                 Functions/Params
    • Easy               to auto generate        •
                                                 •
                                                     – extend
                                                     – constructor / initialize
                                                 •   – get
                                                 •   – escape
                                                 •   – set

    • Holds               data better then the   •
                                                 •
                                                     – unset
                                                     – clear


        DOM                                      •
                                                 •
                                                 •
                                                     – id
                                                     – cid
                                                     – attributes
                                                 •   – defaults
                                                 •   - toJSON

    • Throws                change events        •
                                                 •
                                                     – fetch
                                                     – save
                                                 •   – destroy
                                                 •   – validate
                                                 •   – url

    • Can    connect to a URL to                 •
                                                 •
                                                     – parse
                                                     – clone


        populate from or persist to              •   – isNew
                                                 •   – change
                                                 •   – hasChanged

        the server                               •
                                                 •
                                                     – changedAttributes
                                                     – previous
                                                 •   – previousAttributes




Freitag, 11. März 2011
THE COLLECTION

                         var UserTweets = Backbone.Collection.extend({

                         !         // Overrides
                         !         model: Tweet,
                         !
                         !         url: function() {
                         !         !      return "http://twitter.com/statuses/user_timeline/" + this.user + ".json?count=10";
                         !         },
                         !
                         !         // Custom function
                         !         highlighted: function() {
                                   !     return this.filter(function(tweet) {
                                   !     !    return tweet.get('highlighted');
                                   !     });
                               }

                         });




Freitag, 11. März 2011
THE COLLECTION
    • Easy               to auto generate, as well   Functions/Params
                                                     •   – extend                     ◦   forEach (each)
                                                     •   – model                      ◦   map
                                                     •                                ◦   reduce (foldl, inject)
    • For    bulk handling model
                                                         – constructor / initialize
                                                     •   – models                     ◦   reduceRight (foldr)
                                                     •   – toJSON                     ◦   find (detect)

         objects                                     •
                                                     •
                                                         – Underscore Methods (25)
                                                         – add
                                                                                      ◦
                                                                                      ◦
                                                                                          filter (select)
                                                                                          reject
                                                     •   – remove                     ◦   every (all)
                                                     •   – get                        ◦   some (any)
                                                     •   – getByCid                       include
    • Throws                change events
                                                                                      ◦
                                                     •   – at
                                                                                      ◦   invoke
                                                     •   – length
                                                                                      ◦   max
                                                     •   – comparator
                                                                                      ◦   min
                                                     •   – sort
                                                                                      ◦   sortBy
                                                     •
    • Can    connect to a URL to
                                                         – pluck
                                                                                      ◦   sortedIndex
                                                     •   – url
                                                                                      ◦   toArray
                                                     •   – parse

         populate from the server
                                                                                      ◦   size
                                                     •   – fetch
                                                     •   – refresh                    ◦   first
                                                     •   – create                     ◦   rest
                                                                                      ◦   last
                                                                                      ◦   without

    • Tons               of query functions                                           ◦
                                                                                      ◦
                                                                                          indexOf
                                                                                          lastIndexOf
                                                                                      ◦   isEmpty
                                                                                      ◦   chain



Freitag, 11. März 2011
THE VIEW
                                                   or th                        e cont roller

                         var TweetView = Backbone.View.extend({
                         !
                         ! initialize: function() {
                         ! !       _.bindAll(this, "render");
                         ! !       this.model.bind("change", this.render);
                         ! },
                         ! !
                         ! events: {
                         ! !       "click": "highlight"
                         ! },
                         !
                         ! render: function() {
                         ! !       this.el = this.make("li", {
                         ! !       !     className: this.model.get("highlighted") ? "highlighted" : "normal"
                         ! !       }, this.model.get("text"));
                         ! !       return this;
                         ! },
                         !
                         ! highlight: function() {
                         ! !       this.model.highlight();
                         ! }
                         !
                         });


Freitag, 11. März 2011
THE VIEWe cont
                                        or th
                                                  roller




    • Changes            the DOM           Functions/Params
                                             •
    • Delegates          DOM events
                                                 – extend
                                             •   – constructor / initialize
                                             •   – el
                                             •   – $ (jQuery or Zepto)
                                             •   – render

    • Subscribes  Model/Collection           •   – remove
                                             •   – make
                                             •   – delegateEvents

        change events




Freitag, 11. März 2011
THE CONTROLLER ngine
                                      e rou t i n g- e
                                                                   or t h

                         var Workspace = Backbone.Controller.extend({

                         !     routes: {
                         !     !    "help":! !  !     !   !    "help",! !   // #help
                         !     !    "search/:name":! !    !    "search",!
                                                                        !   // #search/serrynaimo
                                 !  "search/:name/t:tweet":!   "search"!!   // #search/serrynaimo/t36732
                             ! },
                         !
                          ! help: function() {
                         ! !      ...
                          ! },

                          ! search: function(name, tweet) {
                         ! !     ...
                          ! }

                         });

                         new Workspace();
                         Backbone.history.start(); ! !    !    !   !    !   // Start url-change listener



Freitag, 11. März 2011
THE CONTROLLER ngine
                                    e rou t i n g- e
                                           or t h


    • Useful     to initiate application
         states like
         window.location.hash = "help";             Functions/Params
                                                     •   - extend
                                                     •
    • Enables   go back/forward
                                                         – routes
                                                     •   – constructor / initialize
                                                     •   – route

         browser functionality                       •   – saveLocation




    • Makes   application states
         bookmarkable


Freitag, 11. März 2011
DEMO


                         Download files here



Freitag, 11. März 2011
WHAT ELSE?

             • Make      many small JavaScript files for big dev teams

             • Comment       your code (e.g. yDoc compatible)

             • Works      absolutely great with html5boilerplate.com




Freitag, 11. März 2011
WE’RE HIRING!
                Mail me: thomas@adzcentral.com




                          @SERRYNAIMO
                         for JavaScript related fuzziness



Freitag, 11. März 2011

More Related Content

Recently uploaded

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Backbone.js - A brief introduction

  • 1. CLIENT-SIDE MVC A brief introduction by Thomas Gorissen Freitag, 11. März 2011
  • 2. ME? 1996 • <blink>Hello World</blink> • “WebMaster” • JS/PHP 1999 • Starcraft http://thomasgorissen.com • C# .NET / Forms 2005 • Ruby • ASP MVC 2010 • JS Freitag, 11. März 2011
  • 3. is • Model/View/Controller • Structure provider Javascript Framework • RESTful JSON Connector • Released 13th Oct 2010 • Hash-Routing Engine • @DocumentCloud project • Event-driven • MIT licensed and on GitHub • Lightweight (6.9kb) Freitag, 11. März 2011
  • 4. is not • DOM Accessor • Animation toolkit • Control suite • All in wonder package Freitag, 11. März 2011
  • 5. WHAT IS IT FOR? All Client-Side Rendered Applications Freitag, 11. März 2011
  • 6. AHA, HOW IS THAT? • If you do a lot of JavaScript, things tend to Model Controller get messy! • Backbone provides a way to organize your code, by View using the MVC pattern • Only the View accesses the DOM (e.g. with DOM jQuery, Zepto, ...) Freitag, 11. März 2011
  • 7. ALTHOUGH... outi neng- R Controller ngi Model • ... it’s a bit wrongly labeled + Collection E •I call it a “dirty” MVC ConViewoller tr iew VDOM Freitag, 11. März 2011
  • 8. THE MODEL var Tweet = Backbone.Model.extend({ ! // Overrides ! initialize: function(params) { ! ! if(params.id && !params.text) ! ! ! this.fetch(); ! }, ! ! url: function() { ! ! return "http://twitter.com/statuses/show/" + this.id +".json"; ! }, ! ! defaults: {! ! ! highlighted: false ! }, ! ! // Custom function ! highlight: function() { ! ! this.set({ ! ! ! highlighted: !this.get("highlighted") ! ! }); ! } }); Freitag, 11. März 2011
  • 9. THE MODEL Functions/Params • Easy to auto generate • • – extend – constructor / initialize • – get • – escape • – set • Holds data better then the • • – unset – clear DOM • • • – id – cid – attributes • – defaults • - toJSON • Throws change events • • – fetch – save • – destroy • – validate • – url • Can connect to a URL to • • – parse – clone populate from or persist to • – isNew • – change • – hasChanged the server • • – changedAttributes – previous • – previousAttributes Freitag, 11. März 2011
  • 10. THE COLLECTION var UserTweets = Backbone.Collection.extend({ ! // Overrides ! model: Tweet, ! ! url: function() { ! ! return "http://twitter.com/statuses/user_timeline/" + this.user + ".json?count=10"; ! }, ! ! // Custom function ! highlighted: function() { ! return this.filter(function(tweet) { ! ! return tweet.get('highlighted'); ! }); } }); Freitag, 11. März 2011
  • 11. THE COLLECTION • Easy to auto generate, as well Functions/Params • – extend ◦ forEach (each) • – model ◦ map • ◦ reduce (foldl, inject) • For bulk handling model – constructor / initialize • – models ◦ reduceRight (foldr) • – toJSON ◦ find (detect) objects • • – Underscore Methods (25) – add ◦ ◦ filter (select) reject • – remove ◦ every (all) • – get ◦ some (any) • – getByCid include • Throws change events ◦ • – at ◦ invoke • – length ◦ max • – comparator ◦ min • – sort ◦ sortBy • • Can connect to a URL to – pluck ◦ sortedIndex • – url ◦ toArray • – parse populate from the server ◦ size • – fetch • – refresh ◦ first • – create ◦ rest ◦ last ◦ without • Tons of query functions ◦ ◦ indexOf lastIndexOf ◦ isEmpty ◦ chain Freitag, 11. März 2011
  • 12. THE VIEW or th e cont roller var TweetView = Backbone.View.extend({ ! ! initialize: function() { ! ! _.bindAll(this, "render"); ! ! this.model.bind("change", this.render); ! }, ! ! ! events: { ! ! "click": "highlight" ! }, ! ! render: function() { ! ! this.el = this.make("li", { ! ! ! className: this.model.get("highlighted") ? "highlighted" : "normal" ! ! }, this.model.get("text")); ! ! return this; ! }, ! ! highlight: function() { ! ! this.model.highlight(); ! } ! }); Freitag, 11. März 2011
  • 13. THE VIEWe cont or th roller • Changes the DOM Functions/Params • • Delegates DOM events – extend • – constructor / initialize • – el • – $ (jQuery or Zepto) • – render • Subscribes Model/Collection • – remove • – make • – delegateEvents change events Freitag, 11. März 2011
  • 14. THE CONTROLLER ngine e rou t i n g- e or t h var Workspace = Backbone.Controller.extend({ ! routes: { ! ! "help":! ! ! ! ! "help",! ! // #help ! ! "search/:name":! ! ! "search",! ! // #search/serrynaimo ! "search/:name/t:tweet":! "search"!! // #search/serrynaimo/t36732 ! }, ! ! help: function() { ! ! ... ! }, ! search: function(name, tweet) { ! ! ... ! } }); new Workspace(); Backbone.history.start(); ! ! ! ! ! ! // Start url-change listener Freitag, 11. März 2011
  • 15. THE CONTROLLER ngine e rou t i n g- e or t h • Useful to initiate application states like window.location.hash = "help"; Functions/Params • - extend • • Enables go back/forward – routes • – constructor / initialize • – route browser functionality • – saveLocation • Makes application states bookmarkable Freitag, 11. März 2011
  • 16. DEMO Download files here Freitag, 11. März 2011
  • 17. WHAT ELSE? • Make many small JavaScript files for big dev teams • Comment your code (e.g. yDoc compatible) • Works absolutely great with html5boilerplate.com Freitag, 11. März 2011
  • 18. WE’RE HIRING! Mail me: thomas@adzcentral.com @SERRYNAIMO for JavaScript related fuzziness Freitag, 11. März 2011