$30 off During Our Annual Pro Sale. View Details »

Intro to BackboneJS and a little bit more

Intro to BackboneJS and a little bit more

This is the first 2 parts of a series of presentations demonstrating the usage of Backbone and Backbone.Marionette towards building "large scale" JS apps. Presented on 02/02/2013 for #GreeceJS.

Stratos Pavlakis

February 02, 2013
Tweet

More Decks by Stratos Pavlakis

Other Decks in Programming

Transcript

  1. Core  Concepts  and  a  li/le  bit  more  

    View Slide

  2. Stratos  Pavlakis  

    View Slide

  3. •  C  
    •  PHP  
    •  Java  
    •  Javascript  
    •  Ruby  
    •  Scala  
     
     
     
     
     
     
     
     
    purr-­‐programming  
    h/p://www.polyglotprogramminginc.com/purr-­‐programming-­‐2-­‐0/  
     

    View Slide

  4. Part 0
    IntroducDons  

    View Slide

  5. BackboneJS
    •  Created by Jeremy Ashkenas
    •  Originally extracted from a Rails app
    •  Most popular member of the larger family of MV(C) Javascript Frameworks
    •  Large ecosystem of extensions and plugins
    •  Not AMD compatible itself but there are AMD compatible forks
    Created  By  

    View Slide

  6. BackboneJS
    Classic  JS  development  
    relied  on  DOM  manipulaDon  
    …well  and  a  bunch  of  plugins  
     
    •  No real structure in place
    •  Domain objects or business logic state
    in the DOM
    •  Globals to share state
    •  Deep nested piles of jQuery callbacks
    Created  for  
    Help you get your truth
    out of the DOM!

    View Slide

  7. BackboneJS Defined  As  
    “Backbone.js  is  a  
    lightweight  JavaScript  
    framework  for  adding  
    structure  to  your  client-­‐
    side  code.”  
    Addy  Osmani  
    “Backbone  is  a  JavaScript  
    library  with  a  RESTful  
    JSON  interface,  and  is  
    based  on  the  model–
    view–presenter  (MVP)  
    applicaDon  design  
    paradigm.”  
    Wikipedia  
    “Backbone  is  a  library  that  
    provides  a  set  of  
    structures  to  help  you  
    organize  your  JavaScript  
    code”  
    Thoughtbot  
    Backbone.js  gives    
    “structure  to  web  applicaDons  by  
    providing  models  with  key-­‐value  binding  
    and  custom  events,  collecDons  with  a  
    rich  API  of  enumerable  funcDons,views  
    with  declaraDve  event  handling,  and  
    connects  it  all  to  your  exisDng  API  over  a  
    RESTful  JSON  interface”  
    Jeremy  Ashkenas  

    View Slide

  8. BackboneJS
    ...  the  building  blocks  for  bringing  the  MV*  
    paradigm  to  your  app  
     
    •  Models  
    •  CollecDons  
    •  Views  
    •  Events  
    •  Router(s)  
     
    “Whatever  business  you  did  using  only  jQuery  /  
    Mootools  /  Prototype  can  be  extracted  into  pure  
    JavaScript  structures”  
     
    “JavaScript  objects  are  the  core  and  the  DOM  is  
    merely  a  representa>on  of  that  data”  
    Provides  

    View Slide

  9. BackboneJS
    •  ApplicaDon  level  Infrastructure  
    •  ApplicaDon  level  Architecture  
    •  Modules  
    •  Component  Build  Pa/ern  
    “BackboneJS  is  not  opinionated!”  
     
    “You  are  given  complete  control  over  the  
    way  you  build  your  app”  
    Provides  NOT  

    View Slide

  10. PART 1
    CORE  CONCEPTS  

    View Slide

  11. Events
    Module  that  can  be  mixed  in  
     
    Ability  to  bind  and  trigger  custom  events  
     
    •  on  
    •  off  
    •  trigger  
    And  since  0.9.9:  
    •  listenTo  
    •  stopListening  
    •  once  
     
    Mixed  in  everywhere  

    View Slide

  12. Models that  wrap  JSON  data  
    •  Hold  business  logic  
    •  Sync  Layer  (CRUD  via  Ajax)  
    •  Inheritance  via  prototype  chaining  
    About  the  word  Model  now...  
    •  No  schema!  
    •  No  built-­‐in  relaDonal  associaDons.  
    •  No  built-­‐in  traversing  of  nested  
    properDes  support.  

    View Slide

  13. Models
    Define  model  types  with  Model#extend  
    Get  to  know  prototype  chaining  
    Observe  Models  
    •  change  
    •  change:  a/r  
    •  invalid  
    •  destroy  
    •  sync  
    •  error  
    •  all  
    Defining  and  Observing  

    View Slide

  14. Models
    #id  
    #cid  
    #set()  
    #validate()  
    #toJSON()  
    #save()  
    #fetch()  
    #destroy()  
    Tell  me  more!  

    View Slide

  15. Collections
    •  Can  have  a  model  type  
    •  Propagate  model  events  
    •  Mixed  in  UnderscoreJS  collecDon  
    methods  
    Ordered  sets  of  models  
    Chainable  API  

    View Slide

  16. Collections Ordered  sets  of  models  

    View Slide

  17. Views
    •  A  view  renders  the  display  of  a  logical  
    element  on  the  page  
    •  Defines  the  logic*  for  how  a  model  
    should  be  presented  to  the  user  
    OpDons  directly  a/ached  to  the  view  
     
    •  model  
    •  collecDon  
    •  el    
    •  id  
    •  className  
    •  tagName  
    •  a/ributes  
     
    A  few  words  

    View Slide

  18. Views
    •  Both  logic  and  actual  representaDon  
    defined  inside  the  view  
    •  Usually  used  with  a  template    engine  
    but  sDll  BOILERPLATE  CODE  
     
    #render  
    cle  id="todo-­‐view"  class="todo">cle>  
    cle  id="todo-­‐view"  class="todo">  
    Prepare  BackboneJS  slides  #!@#!  
    cle>  

    View Slide

  19. Views
    el  can:  
    •  Be  already  aRached  to  the  DOM  upon  
    creaDon  of  the  view  instance  
    •  ARached  manually  later  
    •  $el  =  $(el)  
    •  el  isn’t  on  the  page  unDl  placed  there  
    by  you.  
     
    •  All  view  contents  are  inserted  at  once  
     
    element  

    View Slide

  20. Views
    •  DeclaraDvely  a/ach  DOM  event  
    listeners  to  el  or  its  contents  
     
    Under  the  hood:  
    •  jQuery's  on  /  delegate  is  used  to  provide  instant  
    support  for  event  delegaDon.  
    •  this  inside  all  DOM  event  handlers  always  refers  to  
    the  view  instance!  
    •  Manually  a/ach  all  other  listeners  
    as  event  listeners  
    "  ":  ""  

    View Slide

  21. Views
    DOM  events  are  handled  by  
    default,  but  that’s  it!  
    0.9.9  came  to  the  rescue  for  all  the  rest:  
     
    #listenTo  
    #stopListening  
     
     
     
     
     
     
     
    Can  leak  memory.  Lots  of  it!  
    They  get  cleaned  up  for  you  by  
    jQuery  /  Zepto.  
    Stores  bindings  on  “this”  
    Unbinds  stored  bindings  

    View Slide

  22. Templates #render  should  !=  template  

    View Slide

  23. Templates
    •  HTML  with  JS  :  _,  EJS    
    •  HTML  with  other  EL  :  Mustache,  
    Handlebars,  Hamlc  
    •  Selector  based  :  PURE  
     
    Too  many  opDons  !  
    IteraDng  a  collecDon  inside  the  
    template  ?  Seems  ok  doesn’t  it?    

    View Slide

  24. Routers
    •  Can  have  >  1  Routers  
    •  URL  =>  1  route  triggered  across  
    Routers  
    •  Backbone.history.start();  
    •  PushState,  hashChange,  polling  
     
    •  PushState  =  URLs  should  be  
    bookmarkable  (no  404!)  
    =  Backbone.history  Handlers  
    Parameter,  splat  &  opDonal  parts  
    Create  routes  manually  with    
    #route(route,  name,  [callback])  

    View Slide

  25. Routers
    •  No  page  state  support  out  of  the  
    box  
    •  but  you  can  roll  out  your  own  1st  
    class  route  =>  components  state  
    mapper.  
    •  or  use  a  subrouDng  extension  
    •  or  override  so  that  1  route  
    triggered  per  Router  
    /dashboard/todos/2/news/5  
    and  Page  State  

    View Slide

  26. Controller The  disputed  one  

    View Slide

  27. MVC
    •  Model2  
    •  Servlets  (Dispatcher  Servlet)  
    •  Struts,  Spring  MVC,  RAILS  
    As  we  know  it  on  the  WEB  
    Request   Front  
    Controller  
    Controller  
    View  
    Model  
    Response  
    DB  

    View Slide

  28. MVC
    •  Before  MVC  =  void?  
    •  Smalltalk  
    •  N  widgets  =  N  controllers  
    •  Domain  vs  PresentaDon  objects  
    •  Observer  pa/ern  origin  
    •  TradiDonal  =  Event  Based  
    Back  in  the  late  70s  
    View  
    Controller  
    Model  
    Updated  through        
    observaDon  

    View Slide

  29. MVP
    •  Appeared  in  IBM,  Taligent  
    •  MVC  +  Forms  &  Controls  
    •  Commands  
    •  Passive  Views  
    •  Easier  tesDng  
    •  Overcomes  code  like  
    model.borderColor
    •  GWT,  ASP.NET  
     
     
    Controller  gets  closer  to  the  View  
    View  
    Model  
    Presenter  

    View Slide

  30. Backbone MVC
    •  Could  be  actual  MVC  
    •  Model  fits  model  
    •  View  subscribes  to  Model  
    •  …BUT  
    •  View  handles  events  
    •  View  handles  templaDng  
    •  Controller  split  between  Router  
    &  View  
     
    •  What  about  MVP?  
    •  Model  fits  model  
    •  Backbone.View  ?=  Presenter  
    •  Template  =  View  
    •  …BUT  
     
    •  Backbone.View  can  be  an  actual  
    view  
     
    =  unique  MV*  flavor  

    View Slide

  31. PART 2
    AdopDng  BackboneJS  

    View Slide

  32. Using Backbone
    •  Adopt  it  right  away  
    •  Just  replace  in  place!  
    to  replace  boilerplate  

    View Slide

  33. File Structure
    •  Rails  style  won’t  fit  
    •  Big  buckets  of  hell!  
    •  …INSTEAD  your  file  structure  
    •  should  SCREAM  your  domain  
    (Derick  Bailey)  
    javascript  
    components  
    appController.js  
    appSelector.js  
    contacts  
    contacts.js  
    contactsView.js  
    contactsApp.js  
    router.js  
    mail  
    categories  
    categories.js  
    categoryView.js  
    mailbox  
    mail.js  
    mailItemView.js  
    mailListView.js  
    mailapp.js  
    router.js  
    bbclonemail.js  
    u>ls  
    vendor  
    Single  Page  Apps  

    View Slide

  34. File Structure
    •  Rails  kind  of  style  fits  again  
    •  Sharing  across  modules  
    •  OpDonally  recursive  for  closed/
    big  modules  
    javascript  
    collec>ons  
    customers.js  
    order.js  
    products.js  
    offers.js  
    models  
    customer.js  
    …  
    views  
    orders  
    searchView.js  
    historyView.js  
    faqView.js  
    trackingView.js  
    customerView.js  
    productView.js  
    offerView.js  
    pages  
    orders.js  
    products.js  
    u>ls  
    vendor  
    MulD  Page  Apps  

    View Slide

  35. Using Backbone and  going  large  scale  
    Façade  
    /  
    Sandbox  
    Mediator  
    Module  
    Module  
    Module  
    Module  
    Submodule  
    Submodule  
    Publish  noDficaDon  
    Publish  noDficaDon  
    Start  module  
    Publish  noDficaDon  
    broadcast  
    call  method  
    •  AbstracDon  of  the  core  
    •  Consistent  Interface  
    •  Sole  Survivor  for  modules  
    •  Security  Guard  
    •  Exposes  event  bus  
    •  Core  
    •  Event  Bus  
    •  Independent  
    •  Can  depend  on  DOM  
    •  Do  not  access  DOM  outside  their  boxes  
    •  Do  not  create  globals  
    •  Do  not  tell,  but  ask  the  facade  
    Mail  
    Chat  
    Contacts  
    News  
    Addy  Osmani  
    Nicholas  Zakas  

    View Slide

  36. How exactly? Coming  up  next  with…  

    View Slide

  37. The END
           References  
    •  h/p://www.slideshare.net/nzakas/scalable-­‐javascript-­‐applicaDon-­‐architecture  
    •  h/p://backbonejs.org/  
    •  h/ps://learn.thoughtbot.com/products/1-­‐backbone-­‐js-­‐on-­‐rails  
    •  h/p://marDnfowler.com/eaaDev/SeparatedPresentaDon.html  
    •  h/p://marDnfowler.com/eaaDev/uiArchs.html  
    •  h/p://addyosmani.com/largescalejavascript/  
    •  h/p://addyosmani.com/resources/essenDaljsdesignpa/erns/book  
    •  h/p://addyosmani.github.com/backbone-­‐fundamentals/  
    •  h/ps://speakerdeck.com/derickbailey/scaling-­‐backbone-­‐dot-­‐js-­‐applicaDons-­‐with-­‐marione/e-­‐dot-­‐js  
     
    Thank  YOU!  
    [email protected]  
    @th3hunt  

    View Slide