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.

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