Size Goals #26

Closed
justinbmeyer opened this Issue Oct 19, 2011 · 16 comments

Comments

Projects
None yet
3 participants
@justinbmeyer
Contributor

justinbmeyer commented Oct 19, 2011

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

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Oct 19, 2011

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 :)

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Oct 20, 2011

Contributor

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.

Contributor

justinbmeyer commented Oct 20, 2011

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Oct 20, 2011

Contributor

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

Contributor

justinbmeyer commented Oct 20, 2011

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

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Dec 3, 2011

Contributor

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'),{})

Contributor

justinbmeyer commented Dec 3, 2011

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'),{})

@ghost ghost assigned justinbmeyer Dec 4, 2011

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Dec 5, 2011

Contributor

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

Contributor

justinbmeyer commented Dec 5, 2011

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Dec 5, 2011

Contributor

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.

Contributor

justinbmeyer commented Dec 5, 2011

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Dec 11, 2011

Contributor

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

Contributor

justinbmeyer commented Dec 11, 2011

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

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Dec 11, 2011

Contributor

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 ...

Contributor

justinbmeyer commented Dec 11, 2011

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

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Dec 11, 2011

Great job, Justin! :)

Great job, Justin! :)

@asavoy

This comment has been minimized.

Show comment Hide comment
@asavoy

asavoy Dec 12, 2011

Wow, that's tiny!

asavoy commented Dec 12, 2011

Wow, that's tiny!

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Feb 1, 2012

Contributor

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.

Contributor

justinbmeyer commented Feb 1, 2012

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Feb 1, 2012

Contributor

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

Contributor

justinbmeyer commented Feb 1, 2012

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

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Feb 1, 2012

Contributor

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

Contributor

justinbmeyer commented Feb 1, 2012

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

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Feb 14, 2012

Contributor

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.

Contributor

justinbmeyer commented Feb 14, 2012

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

This comment has been minimized.

Show comment Hide comment
@addyosmani

addyosmani Feb 14, 2012

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

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

@justinbmeyer

This comment has been minimized.

Show comment Hide comment
@justinbmeyer

justinbmeyer Apr 19, 2012

Contributor

This has been accomplished via CanJS

Contributor

justinbmeyer commented Apr 19, 2012

This has been accomplished via CanJS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment