Pro Yearly is on sale from $80 to $50! »

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.

39faa5e8e938d2fbd92acc2e8ebdf65b?s=128

Stratos Pavlakis

February 02, 2013
Tweet

Transcript

  1. Core  Concepts  and  a  li/le  bit  more  

  2. Stratos  Pavlakis  

  3. •  C   •  PHP   •  Java   • 

    Javascript   •  Ruby   •  Scala                   purr-­‐programming   h/p://www.polyglotprogramminginc.com/purr-­‐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  
  10. PART 1 CORE  CONCEPTS  

  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://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!   pavlakis.stratos@gmail.com   @th3hunt