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


  1. Core  Concepts  and  a  li/le  bit  more  

  2. Stratos  Pavlakis  

  3. •  C   •  PHP   •  Java   • 

    Javascript   •  Ruby   •  Scala                   purr-­‐programming   h/p://­‐programming-­‐2-­‐0/    
  4. Part 0 IntroducDons  

  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  
  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!
  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  
  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  
  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  

  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  
  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.  
  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  
  14. Models #id   #cid   #set()   #validate()   #toJSON()

      #save()   #fetch()   #destroy()   Tell  me  more!  
  15. Collections •  Can  have  a  model  type   •  Propagate

     model  events   •  Mixed  in  UnderscoreJS  collecDon   methods   Ordered  sets  of  models   Chainable  API  
  16. Collections Ordered  sets  of  models  

  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  
  18. Views •  Both  logic  and  actual  representaDon   defined  inside

     the  view   •  Usually  used  with  a  template    engine   but  sDll  BOILERPLATE  CODE     #render   <ar>cle  id="todo-­‐view"  class="todo"></ar>cle>   <ar>cle  id="todo-­‐view"  class="todo">   <h3>Prepare  BackboneJS  slides  #!@#!</h3>   </ar>cle>  
  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  
  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   "<event>  <selector>":  "<method>"  
  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  
  22. Templates #render  should  !=  template  

  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?    
  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])  
  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  
  26. Controller The  disputed  one  

  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  
  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  
  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  
  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  
  31. PART 2 AdopDng  BackboneJS  

  32. Using Backbone •  Adopt  it  right  away   •  Just

     replace  in  place!   to  replace  boilerplate  
  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  
  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  
  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  
  36. How exactly? Coming  up  next  with…  

  37. The END        References   •  h/p://­‐javascript-­‐applicaDon-­‐architecture  

    •  h/p://   •  h/ps://­‐backbone-­‐js-­‐on-­‐rails   •  h/p://   •  h/p://   •  h/p://   •  h/p://   •  h/p://­‐fundamentals/   •  h/ps://­‐backbone-­‐dot-­‐js-­‐applicaDons-­‐with-­‐marione/e-­‐dot-­‐js     Thank  YOU!   @th3hunt