Chaplin.js in real life
11 likes5,921 views
Chaplin.js is a JavaScript MVC framework that consumes Backbone.js and provides additional magic and charm. It uses classical MVC patterns with routes, models, views, and controllers. The document discusses how Chaplin.js implements these patterns and additional features like mediators, layouts, and multiple components within views. It also mentions using plugins and extending routing functionality.
![‘views/speakers’
],](https://image.slidesharecdn.com/chaplin-121117001914-phpapp02/85/Chaplin-js-in-real-life-11-320.jpg)
Chaplin.js in real life
- 1. Chaplin.js in real life by Yehor Nazarkin follow: @nimnull fork: http://github.com/nimnull
- 2. BackboneAddict • It is fast • Pretty small (18.3 Kb, 1533 loc) • Template aware • Consumes underscore.js • J. Ashkenas did a great job!
- 3. BbnRoutes Page 1 <script type="text/javascript" src="workspace.js"> </script> Page 2 <script type="text/javascript" src="backoffice.js"> </script>
- 5. [
- 7. ‘backbone’
- 12. (Backbone,
- 13. Speakers,
- 14. SpeakersView)
- 15. - defined
- 16. earlier
- 17. or
- 18. loaded
- 19. cause of
- 20. AMD Backoffice
- 21. BbnApp More routing paths? 1. Extend single route 2. Extend routes number
- 22. MissingPart controller /backoffice/#dashboard And single entry point called Application
- 23. InFact Chaplin.js consumes Backbone.js and a bit of magic and charm to provide us with classical MVC + Magic =
- 24. ChaplinApp Routes
- 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. Let’sMVC! model view controller Looks typical
- 27. LayoutSample API
- 28. Resource signals model template view controller template subView model Here comes asynchronous
- 29. LayoutReal API
- 30. Resource mediator signals model template view controller router
- 31. Mediator
- 32. MoreComplex top
- 33. bar login
- 34. form 1. persistent controller 2. persistent view with event subscription 3. mediator.user event + mediator.publish
- 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. MultiComponents /account/sharing class 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. Plugins 1. Backbone plugins 2. jQuery plugins 3. ... 4. PROFIT!!1
- 38. Questions? by Yehor Nazarkin follow: @nimnull fork: http://github.com/nimnull