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.

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>

4. BbnRoute
define

5. [

7. ‘backbone’

9. ‘models/speakers/’

11. ‘views/speakers’
],

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