Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chaplin.js in real life

7,059 views

Published on

My look on building ap

Published in: Technology

Chaplin.js in real life

  1. 1. Chaplin.js in real lifeby Yehor Nazarkinfollow: @nimnullfork: http://github.com/nimnull
  2. 2. BackboneAddict • It is fast • Pretty small (18.3 Kb, 1533 loc) • Template aware • Consumes underscore.js • J. Ashkenas did a great job!
  3. 3. BbnRoutes Page 1 <script type="text/javascript" src="workspace.js"> </script> Page 2 <script type="text/javascript" src="backoffice.js"> </script>
  4. 4. BbnRoutedefine
  5. 5.  [
  6. 6.  
  7. 7.  ‘backbone’
  8. 8.  
  9. 9.  ‘models/speakers/’
  10. 10.  
  11. 11.  ‘views/speakers’],
  12. 12.  (Backbone,
  13. 13.  Speakers,
  14. 14.  SpeakersView)
  15. 15.  - defined
  16. 16.  earlier
  17. 17.  or
  18. 18.  loaded
  19. 19.  cause of
  20. 20.  AMD Backoffice
  21. 21. BbnApp More routing paths? 1. Extend single route 2. Extend routes number
  22. 22. MissingPart controller /backoffice/#dashboard And single entry point called Application
  23. 23. InFact Chaplin.js consumes Backbone.js and a bit of magic and charm to provide us with classical MVC + Magic =
  24. 24. ChaplinApp Routes
  25. 25. YoDawg! OK, I lied to you. I’m a Python developer IRL With all those Django, Flask, SQLAlchemy, Tornado, MongoKit, Celery, whatever... SO...
  26. 26. Let’sMVC! model view controller Looks typical
  27. 27. LayoutSample API
  28. 28.  Resource signals model template view controllertemplate subView model Here comes asynchronous
  29. 29. LayoutReal API
  30. 30.  Resource mediator signals model template view controller router
  31. 31. Mediator
  32. 32. MoreComplex top
  33. 33.  bar login
  34. 34.  form1. persistent controller2. persistent view with event subscription3. mediator.user event + mediator.publish
  35. 35. ContentPages match ‘page/:slug’, ‘pages#show’ class PagesController extends Controller show: ({slug}) - model = new PageModel {slug}, {silent: true} @view = new Page {model} model.fetch() Overall layout class Page extends View template: require ‘...some_template’ initialize: - Per-action content super @modelBind ‘change’, @render view
  36. 36. MultiComponents /account/sharingclass AccountController .... initialize: - super @view = new Layer sharing: (options) - @title = “Sharing” @view.getSharing().render()class Layer extends View getSharing: (options) - sharingView = new SharingView container: @$ “[data=subview]” @subview ‘sharing’, sharingView sharingView
  37. 37. Plugins 1. Backbone plugins 2. jQuery plugins 3. ... 4. PROFIT!!1
  38. 38. Questions?by Yehor Nazarkinfollow: @nimnullfork: http://github.com/nimnull

×