on
e
m b!
rk tHu
Fo Gi

Craig Condon
github.com/crcn

Wednesday, October 30, 13
Hi, I’m Craig
• Engineer for 12 years
• Focus on application architecture
Built browsertap.com, photomotr.com,
•
cloveapp....
ClassDojo
startup
•
One of the fastest growing ed-tech company in
•
history

•

Wednesday, October 30, 13

Backed by Jeff ...
Approaching ubiquity across the US

(Slide Redacted)

(teachers only)
Wednesday, October 30, 13
Why?
• Self directed—

able to pick whatever we
want to work on

•
Flexible work schedule
•

High impact & high growth

We...
History of JavaScript
at ClassDojo

Wednesday, October 30, 13
Stack
RequireJS

front-end:
view partials generated from backend

back-end:

testing:

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

Wednesday...
Why not an existing
MV* Framework?

Wednesday, October 30, 13
Framework
Requirements
•
• Compatible with existing libraries
• Strangles old code out
Testability
•
Not a lot of features...
Framework Fears
•
IE compatibility
•
• Modularity
Strangleability
•
Unforeseen consequences
•
Backbone compatibility

Wedn...
Wednesday, October 30, 13
Mojo.js
Inspired by
… and others!

• Built to phase out old code, and itself
Node.js philosophy
•
Module-based
•
Organizat...
Sketch

Wednesday, October 30, 13
Scaffold & Implement

Wednesday, October 30, 13
v0.1
•
Interchangeable parts
•
Bindable.js - inspired by ember bindings
•
• Usable anywhere in the application
Designed af...
Wednesday, October 30, 13
Wednesday, October 30, 13
Wednesday, October 30, 13
Phase in, Phase out

Dojo v1

Dojo v2
(Mojo)

Wednesday, October 30, 13
Phase in, Phase out

Dojo v1

Dojo v2
(Mojo)

Wednesday, October 30, 13
Phase in, Phase out

Dojo v2
Old Architecture
(Mojo)

Wednesday, October 30, 13
Phase in, Phase out

Dojo v2
(Mojo)
Old Architecture

Wednesday, October 30, 13
Challenges
• Evolution, refactoring
innerHTML browser inconsistencies
•
• Stack overflows
Feedback
•
• Wanted to dev faster...
v0.2
•
• Declarative two-way data-binding inspired
Paperclip module
by

• DOM shims
100% JavaScript, including templates
•...
Wednesday, October 30, 13
innerHTML vs appendChild

http://jsperf.com/dom-vsinnerhtml
Wednesday, October 30, 13
Framework Comparison

1. build HTML string

1. call innerHTML

2. call innerHTML

2. traverse and & bind

3. traverse and ...
Current Status
• Template Engine - declarative two-way databinding, similar to Handlebars

• Components - Ember-style comp...
Team Productivity
•
• Sketches > Scaffolding > Implementation
• Improved collaboration
• Reduced code bloat
• Rapid iterat...
Wednesday, October 30, 13
student.classdojo.com
• 3 weeks to design & develop
• 2.5K LOC
• Developed backend & front-end independently
• Easy to tes...
Demo

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

•

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

Wednesday, Octob...
Craig Condon
github.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
Upcoming SlideShare
Loading in …5
×

Mojo+presentation+1

1,708 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,708
On SlideShare
0
From Embeds
0
Number of Embeds
637
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mojo+presentation+1

  1. 1. on e m b! rk tHu Fo Gi Craig Condon github.com/crcn Wednesday, October 30, 13
  2. 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. 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. 4. Approaching ubiquity across the US (Slide Redacted) (teachers only) Wednesday, October 30, 13
  5. 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. 6. History of JavaScript at ClassDojo Wednesday, October 30, 13
  7. 7. Stack RequireJS front-end: view partials generated from backend back-end: testing: Wednesday, October 30, 13
  8. 8. Front-end Problems • Little structure, not maintainable • Hard to add new features • • 36,000 LOC Quickly built Wednesday, October 30, 13
  9. 9. Why not an existing MV* Framework? Wednesday, October 30, 13
  10. 10. Framework Requirements • • Compatible with existing libraries • Strangles old code out Testability • Not a lot of features Wednesday, October 30, 13
  11. 11. Framework Fears • IE compatibility • • Modularity Strangleability • Unforeseen consequences • Backbone compatibility Wednesday, October 30, 13
  12. 12. Wednesday, October 30, 13
  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. 14. Sketch Wednesday, October 30, 13
  15. 15. Scaffold & Implement Wednesday, October 30, 13
  16. 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. 17. Wednesday, October 30, 13
  18. 18. Wednesday, October 30, 13
  19. 19. Wednesday, October 30, 13
  20. 20. Phase in, Phase out Dojo v1 Dojo v2 (Mojo) Wednesday, October 30, 13
  21. 21. Phase in, Phase out Dojo v1 Dojo v2 (Mojo) Wednesday, October 30, 13
  22. 22. Phase in, Phase out Dojo v2 Old Architecture (Mojo) Wednesday, October 30, 13
  23. 23. Phase in, Phase out Dojo v2 (Mojo) Old Architecture Wednesday, October 30, 13
  24. 24. Challenges • Evolution, refactoring innerHTML browser inconsistencies • • Stack overflows Feedback • • Wanted to dev faster Wednesday, October 30, 13
  25. 25. v0.2 • • Declarative two-way data-binding inspired Paperclip module by • DOM shims 100% JavaScript, including templates • Wednesday, October 30, 13
  26. 26. Wednesday, October 30, 13
  27. 27. innerHTML vs appendChild http://jsperf.com/dom-vsinnerhtml Wednesday, October 30, 13
  28. 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. 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. 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. 31. Wednesday, October 30, 13
  32. 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. 33. Demo Wednesday, October 30, 13
  34. 34. Resources • Mojo.js - core framework • Mojo Starter - starter kit for building applications • Wednesday, October 30, 13 ClassDojo - Company
  35. 35. What’s next? • Node.js support (derby / meteor style) • Mojo Inspector More plugins • Plugin catalogue • Wednesday, October 30, 13
  36. 36. Craig Condon github.com/crcn github.com/classdojo/mojo.js Wednesday, October 30, 13
  37. 37. Thanks! Craig Condon github.com/crcn github.com/classdojo/mojo.js Wednesday, October 30, 13

×