mojo+presentation+1

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