mojo+presentation+1
DESCRIPTION
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.TRANSCRIPT
Craig Condongithub.com/crcn
Fork me on
GitHub!
Wednesday, October 30, 13
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
ClassDojo
• startup
•One of the fastest growing ed-tech company in history
•Backed by Jeff Clavier, Ron Conway and Paul Graham
Wednesday, October 30, 13
Approaching ubiquity across the US
(teachers only)
(Slide Redacted)
Wednesday, October 30, 13
Why?
•Self directed— able to pick whatever we want to work on
•High impact & high growth
•Flexible work schedule
Wednesday, October 30, 13
History of JavaScript at ClassDojo
Wednesday, October 30, 13
StackRequireJSfront-end:
view partials generated from backend
back-end:
testing:
Wednesday, October 30, 13
Front-end Problems
•Quickly built
•Little structure, not maintainable
•Hard to add new features
•36,000 LOC
Wednesday, October 30, 13
Why not an existing MV* Framework?
Wednesday, October 30, 13
Framework Requirements
•Not a lot of features
•Compatible with existing libraries
•Strangles old code out
•Testability
Wednesday, October 30, 13
Framework Fears
•Backbone compatibility
•IE compatibility
•Modularity
•Strangleability
•Unforeseen consequences
Wednesday, October 30, 13
Wednesday, October 30, 13
•Built to phase out old code, and itself
•Node.js philosophy
•Module-based
•Organization
Mojo.js
Inspired by
… and others!
Wednesday, October 30, 13
Sketch
Wednesday, October 30, 13
Scaffold & Implement
Wednesday, October 30, 13
v0.1
•Designed after Backbone.js, and jQuery
•Interchangeable parts
•Bindable.js - inspired by ember bindings
•Usable anywhere in the application
Wednesday, October 30, 13
Wednesday, October 30, 13
Wednesday, October 30, 13
Wednesday, October 30, 13
Dojo v1
Dojo v2(Mojo)
Phase in, Phase out
Wednesday, October 30, 13
Dojo v1
Dojo v2(Mojo)
Phase in, Phase out
Wednesday, October 30, 13
Old ArchitectureDojo v2(Mojo)
Phase in, Phase out
Wednesday, October 30, 13
Old Architecture
Dojo v2(Mojo)
Phase in, Phase out
Wednesday, October 30, 13
Challenges
•Evolution, refactoring
•innerHTML browser inconsistencies
•Stack overflows
•Feedback
•Wanted to dev faster
Wednesday, October 30, 13
v0.2
•Paperclip module
•Declarative two-way data-binding inspired by
•DOM shims
•100% JavaScript, including templates
Wednesday, October 30, 13
Wednesday, October 30, 13
http://jsperf.com/dom-vs-innerhtml
innerHTML vs appendChild
Wednesday, October 30, 13
Framework Comparison
1. build HTML string 2. call innerHTML 3. traverse and & bind
1. call innerHTML 2. traverse and & bind
1. build DOM & bind
Wednesday, October 30, 13
Current Status• Template Engine - declarative two-way data-
binding, similar to Handlebars
• Components - Ember-style components in templates - <div> {{#chart}} </div>
• Models - bindable objects / collections - communicates with API
• Router - HTTP router
• Mediator - Abstracts communication between parts of the application
• Testing - Testing Framework
Wednesday, October 30, 13
Team Productivity
•Build on top of existing code base
•Sketches > Scaffolding > Implementation
• Improved collaboration
•Reduced code bloat
•Rapid iterations
Wednesday, October 30, 13
Wednesday, October 30, 13
student.classdojo.com
• 3 weeks to design & develop
• 2.5K LOC
• Developed backend & front-end independently
• Easy to test
Wednesday, October 30, 13
Demo
Wednesday, October 30, 13
Resources
•Mojo.js - core framework
•Mojo Starter - starter kit for building applications
•ClassDojo - Company
Wednesday, October 30, 13
•Node.js support (derby / meteor style)
•Mojo Inspector
•More plugins
•Plugin catalogue
What’s next?
Wednesday, October 30, 13
Craig Condongithub.com/crcn
github.com/classdojo/mojo.js
Wednesday, October 30, 13
Thanks!Craig Condon
github.com/crcn
github.com/classdojo/mojo.js
Wednesday, October 30, 13