Switch Chaplin app to Exoskeleton.

labs/dependency-examples/chaplin-brunch/app/initialize.coffee

@@ -2,6 +2,7 @@ Application = require 'application'
 routes = require 'routes'
 
 # Initialize the application on DOM ready event.
-$ ->
+document.addEventListener 'DOMContentLoaded', ->
   new Application
     controllerSuffix: '-controller', pushState: false, routes: routes
+, false

labs/dependency-examples/chaplin-brunch/app/lib/utils.coffee

+# Application-specific utilities
+# ------------------------------
+
+# Delegate to Chaplin’s utils module.
+utils = Chaplin.utils.beget Chaplin.utils
+
+Backbone.utils.extend utils,
+  toggle: (elem, visible) ->
+    elem.style.display = (if visible then '' else 'none')
+
+# Prevent creating new properties and stuff.
+Object.seal? utils
+
+module.exports = utils

labs/dependency-examples/chaplin-brunch/app/views/footer-view.coffee

 View = require './base/view'
+utils = require 'lib/utils'
 
 module.exports = class FooterView extends View
   autoRender: true
@@ -16,23 +17,24 @@ module.exports = class FooterView extends View
 
   updateFilterer: (filterer) ->
     filterer = '' if filterer is 'all'
-    @$('#filters a')
-      .removeClass('selected')
-      .filter("[href='#/#{filterer}']")
-      .addClass('selected')
+    selector = "[href='#/#{filterer}']"
+    cls = 'selected'
+    @findAll('#filters a').forEach (link) =>
+      link.classList.remove cls
+      link.classList.add cls if Backbone.utils.matchesSelector link, selector
 
   renderCounter: ->
     total = @collection.length
     active = @collection.getActive().length
     completed = @collection.getCompleted().length
 
-    @$('#todo-count > strong').html active
+    @find('#todo-count > strong').textContent = active
     countDescription = (if active is 1 then 'item' else 'items')
-    @$('.todo-count-title').text countDescription
+    @find('.todo-count-title').textContent = countDescription
 
-    @$('#completed-count').html "(#{completed})"
-    @$('#clear-completed').toggle(completed > 0)
-    @$el.toggle(total > 0)
+    @find('#completed-count').textContent = "(#{completed})"
+    utils.toggle @find('#clear-completed'), completed > 0
+    utils.toggle @el, total > 0
 
   clearCompleted: ->
     @publishEvent 'todos:clear'

labs/dependency-examples/chaplin-brunch/app/views/header-view.coffee

@@ -9,7 +9,7 @@ module.exports = class HeaderView extends View
 
   createOnEnter: (event) ->
     ENTER_KEY = 13
-    title = $(event.currentTarget).val().trim()
+    title = event.delegateTarget.value.trim()
     return if event.keyCode isnt ENTER_KEY or not title
     @collection.create {title}
-    @$('#new-todo').val ''
+    @find('#new-todo').value = ''

labs/dependency-examples/chaplin-brunch/app/views/todo-view.coffee

@@ -4,8 +4,8 @@ module.exports = class TodoView extends View
   events:
     'click .toggle': 'toggle'
     'dblclick label': 'edit'
-    'keypress .edit': 'save'
-    'blur .edit': 'save'
+    'keyup .edit': 'save'
+    'focusout .edit': 'save'
     'click .destroy': 'clear'
 
   listen:
@@ -21,13 +21,13 @@ module.exports = class TodoView extends View
     @model.toggle().save()
 
   edit: ->
-    @$el.addClass 'editing'
-    @$('.edit').focus()
+    @el.classList.add 'editing'
+    @find('.edit').focus()
 
   save: (event) ->
     ENTER_KEY = 13
-    title = $(event.currentTarget).val().trim()
+    title = event.delegateTarget.value.trim()
     return @model.destroy() unless title
-    return if event.type is 'keypress' and event.keyCode isnt ENTER_KEY
+    return if event.type is 'keyup' and event.keyCode isnt ENTER_KEY
     @model.save {title}
-    @$el.removeClass 'editing'
+    @el.classList.remove 'editing'

labs/dependency-examples/chaplin-brunch/app/views/todos-view.coffee

 CollectionView = require './base/collection-view'
+TodoView = require './todo-view'
+utils = require 'lib/utils'
 
 module.exports = class TodosView extends CollectionView
   container: '#main'
   events:
     'click #toggle-all': 'toggleCompleted'
-  itemView: require './todo-view'
+  itemView: TodoView
   listSelector: '#todo-list'
   listen:
     'all collection': 'renderCheckbox'
@@ -16,11 +18,11 @@ module.exports = class TodosView extends CollectionView
     @renderCheckbox()
 
   renderCheckbox: ->
-    @$('#toggle-all').prop 'checked', @collection.allAreCompleted()
-    @$el.toggle(@collection.length isnt 0)
+    @find('#toggle-all').setAttribute 'checked', @collection.allAreCompleted()
+    utils.toggle @el, @collection.length isnt 0
 
   toggleCompleted: (event) ->
-    isChecked = event.currentTarget.checked
+    isChecked = event.delegateTarget.checked
     @collection.each (todo) -> todo.save completed: isChecked
 
   clear: ->

labs/dependency-examples/chaplin-brunch/readme.md

@@ -2,6 +2,9 @@
 
 > Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices.
 
+In this case, Backbone is replaced with [Exoskeleton](http://exosjs.com),
+faster and leaner Backbone without dependencies on jQuery and underscore.
+
 > _[Chaplin - chaplinjs.org](http://chaplinjs.org)_