Size Goals

[justinbmeyer]

I'd like to keep JMVC as small as possible. Here are some size-ish goals:

$.Class

currently: .985 KB
wanted: < .900 KB

$.Controller

currently: 1.74 KB
wanted : < 1.7 KB

$.Model

currently: 2.82 KB > 2.74KB
wanted: 2.5 KB

$.View

currenty: 1.62 KB
wanted: 1.5 KB

$.EJS

current: 1.5 KB

I think this is ok :-)

$.String

current: .666 KB > .650 KB
wanted: .5 KB

Summary

Combined, this would bring JMVC to 8.6 KB (which is back to inline with my 7kb goal for everything w/o EJS).

Oh, also steal ...

Steal

current: 4.97 KB
wanted: 4 KB

join and such needs to be cleaned up for this

[addyosmani]

Not an urgent question at all, but how does JMVC compare size-wise to other MVC-like JS frameworks? I remember Brian LeRoux making a comparison chart against frameworks for TodoMVC but this wasn't really reflective of the framework components alone :)

[justinbmeyer]

IMO, this is not a good question. It's the one simple, tangible value that people can easily compare so its importance gets far overblown. Size is important, but only when standing along-side an understanding of features.

With that being said, I think BB is 5 KB with it's underscore dependency. I'm not sure about other frameworks.

But also with that being said .. BB has nothing like $.Class, $.Controller's templated event handlers and rebinding. Model getter/setters, deferred support, converters, etc, etc, etc. Though, it has underscore.

I think a size comparison should ONLY be coupled alongside an explanation of features, etc.

JMVC is smaller than Dojo, but it doesn't have widgets and a whole host of other things.

[justinbmeyer]

Oh, and the fact that you can just use $.Controller or $.Class ...

[justinbmeyer]

In a branch, I am able to get:

• Class: .627
• Controller: 1.3
• Observe: 1.8

I did this by removing unessential features. For example, this._super, this.proxy, $.fn.controller, controller's plugin helper. And a very thin layer on $.Observe to do ajax requests the way model does (a model with no validations, getter / setters, defaults / serialization, etc)

This would make the total about: 5.5k. This would be the same size as backbone+underscore, but include things like automatic unbinding, $.View (which would be $.template), etc. You'd create controllers like:

new Tabs($('#foo'),{})

[justinbmeyer]

Another iteration:

Model 3.04KB (Δ +0.22 KB) 2.88KB (+0.04)

Break Down:

• Model Core -> 1.12KB -> 1.09KB
• Observe -> 1.92KB -> 1.74KB

Plus

• Based on $.Observe
• $.Observe.List

Minus

• setters
• serialize (attributes)
• elements
• basic validation (needs tests) (attributes)

Class 0.66KB ( Δ -0.32 KB )

Minus

• proxy
• _super

Controller 1.33KB ( Δ -0.4 KB )

minus:

• jQuery helper, controller()

Thoughts

I cut about .7KB. But, I haven't spent time on $.Observe

[justinbmeyer]

So BB (4.6KB) and it's Underscore dependency (3.74KB) are 8.33KB.

Currently, the MVC parts are 6.92. This does not include route ( 1.16KB ) and hashchange ( .5kb ).

So, MVC + R+H = 8.58.

$.View and $.route will have to come up with the remaining 0.25.

[justinbmeyer]

I have the small mvc parts down to 5.79KB. Awesome.

[justinbmeyer]

So now, with hashchange, deparam, $.route, and controller/route, JMVC comes to:

7.33 KB!

controller/route lets you bind to specific routes like:

$.Controller('Routes',{
  "foo/:bar route" : function(data){
    data.bar
  },
  "route" : function(){
   // fires when hash is empty
  }
})

We could use an html5 converter ...

[addyosmani]

Great job, Justin! :)

[asavoy]

Wow, that's tiny!

[justinbmeyer]

It's now 9.16KB with EJS (and EJS's new live-templating).

Without EJS, it's about 7.4k (excluding hashchange).

It will be about 1k bigger for Zepto because it brings deferred support.

[justinbmeyer]

Here's the breakdown ... You can see that EJS is now a fat ass ...

string - 580
construct - 676
observe 1.74
deparam 348
route 1.13
control 1.33
view 1.49
model 1.42
control/route 210
ejs 2.03

[justinbmeyer]

combined, EJS + View is 3.5k ... much too big.

[justinbmeyer]

Total is now 8.8k.

String  560
Construct   674
Control 1280
Observe 1690
Deparam 384
Route   1140
View    1150
EJS 2020
Model   1370

You an see that EJS+View has blown (3.3k) up b/c of live templating. However, this is largely equivalent to Knockout now.

[addyosmani]

@justinbmeyer really great work on this. Are there plans on making the improvements more visibly documented somewhere?

[justinbmeyer]

This has been accomplished via CanJS