Mojo.js is a JavaScript framework for building Single Page Applications, or static websites in Node.js. It's inspired by Angular.js, Derby.js, Knockout.js, Meteor.js, Ember.js, jQuery, Backbone.js, and many other JavaScript, and non-JavaScript frameworks. Much of the design was inspired by Backbone.js, and Node.js. The core is small, while third-party modules allow you to customize Mojo depending on your requirements. Mojo was built initially to phase out old code, and itself - hence the modularity. The philosophy behind Mojo is to allow you to build on top of your old code base, and slowly strangle out your old application until you have a new, highly maintainable application.

1. on
e
m b!
rk tHu
Fo Gi
Craig Condon
github.com/crcn
Wednesday, October 30, 13

2. Hi, I’m Craig
• Engineer for 12 years
• Focus on application architecture
Built browsertap.com, photomotr.com,
•
cloveapp.com
• Full stack engineer at ClassDojo
Wednesday, October 30, 13

3. ClassDojo
startup
•
One of the fastest growing ed-tech company in
•
history
•
Wednesday, October 30, 13
Backed by Jeff Clavier, Ron Conway and Paul Graham

4. Approaching ubiquity across the US
(Slide Redacted)
(teachers only)
Wednesday, October 30, 13

5. Why?
• Self directed—
able to pick whatever we
want to work on
•
Flexible work schedule
•
High impact & high growth
Wednesday, October 30, 13

6. History of JavaScript
at ClassDojo
Wednesday, October 30, 13

7. Stack
RequireJS
front-end:
view partials generated from backend
back-end:
testing:
Wednesday, October 30, 13

8. Front-end Problems
•
Little structure, not maintainable
•
Hard to add new features
•
• 36,000 LOC
Quickly built
Wednesday, October 30, 13

9. Why not an existing
MV* Framework?
Wednesday, October 30, 13

10. Framework
Requirements
•
• Compatible with existing libraries
• Strangles old code out
Testability
•
Not a lot of features
Wednesday, October 30, 13

11. Framework Fears
•
IE compatibility
•
• Modularity
Strangleability
•
Unforeseen consequences
•
Backbone compatibility
Wednesday, October 30, 13

12. Wednesday, October 30, 13

13. Mojo.js
Inspired by
… and others!
• Built to phase out old code, and itself
Node.js philosophy
•
Module-based
•
Organization
•
Wednesday, October 30, 13

14. Sketch
Wednesday, October 30, 13

15. Scaffold & Implement
Wednesday, October 30, 13

16. v0.1
•
Interchangeable parts
•
Bindable.js - inspired by ember bindings
•
• Usable anywhere in the application
Designed after Backbone.js, and jQuery
Wednesday, October 30, 13

17. Wednesday, October 30, 13

18. Wednesday, October 30, 13

19. Wednesday, October 30, 13

20. Phase in, Phase out
Dojo v1
Dojo v2
(Mojo)
Wednesday, October 30, 13

21. Phase in, Phase out
Dojo v1
Dojo v2
(Mojo)
Wednesday, October 30, 13

22. Phase in, Phase out
Dojo v2
Old Architecture
(Mojo)
Wednesday, October 30, 13

23. Phase in, Phase out
Dojo v2
(Mojo)
Old Architecture
Wednesday, October 30, 13

24. Challenges
• Evolution, refactoring
innerHTML browser inconsistencies
•
• Stack overflows
Feedback
•
• Wanted to dev faster
Wednesday, October 30, 13

25. v0.2
•
• Declarative two-way data-binding inspired
Paperclip module
by
• DOM shims
100% JavaScript, including templates
•
Wednesday, October 30, 13

26. Wednesday, October 30, 13

27. innerHTML vs appendChild
http://jsperf.com/dom-vsinnerhtml
Wednesday, October 30, 13

28. Framework Comparison
1. build HTML string
1. call innerHTML
2. call innerHTML
2. traverse and & bind
3. traverse and & bind
Wednesday, October 30, 13
1. build DOM & bind

29. Current Status
• Template Engine - declarative two-way databinding, similar to Handlebars
• Components - Ember-style components in
templates - <div> {{#chart}} </div>
• Models - bindable objects
communicates with API
/ collections -
• Router - HTTP router
• Mediator - Abstracts communication between
parts of the application
• Testing - Testing Framework
Wednesday, October 30, 13

30. Team Productivity
•
• Sketches > Scaffolding > Implementation
• Improved collaboration
• Reduced code bloat
• Rapid iterations
Build on top of existing code base
Wednesday, October 30, 13

31. Wednesday, October 30, 13

32. student.classdojo.com
• 3 weeks to design & develop
• 2.5K LOC
• Developed backend & front-end independently
• Easy to test
Wednesday, October 30, 13

33. Demo
Wednesday, October 30, 13

34. Resources
• Mojo.js - core framework
• Mojo Starter - starter kit for building
applications
•
Wednesday, October 30, 13
ClassDojo - Company

35. What’s next?
• Node.js support (derby / meteor style)
• Mojo Inspector
More plugins
•
Plugin catalogue
•
Wednesday, October 30, 13

36. Craig Condon
github.com/crcn
github.com/classdojo/mojo.js
Wednesday, October 30, 13

37. Thanks!
Craig Condon
github.com/crcn
github.com/classdojo/mojo.js
Wednesday, October 30, 13