1027726 - Clean up calendar app view code with reactive view abstractions

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Calendar, defect)

Description

[Gareth Aye [:gaye] (back from PTO)]

See proposal here https://github.com/gaye/calendar-refactor/blob/master/proposals/reactive-views.md.

Comment 1

[Evan Tseng [:evanxd]]

Attachment: benchmark test on Flame

For performance, there is a benchmark test[1] for AngularJS, Backbone.js, Ember.js, Knockout.js, Om, Ractive.js, React, and Vue.js. In the test, the TodoMVC[2] apps implemented by different frameworks will add 100 todos, toggle them one by one, then delete them one by one. And the test run on the Flame device.

The attachment shows the spending time of the operations for each framework, and faster is better.
AngularJS:   20747ms
Backbone.js: 10403ms
Ember.js:    20991ms
Knockout.js: 20423ms
Om:           9275ms
Ractive.js:  22927ms
React:       14230ms
Vue.js:       4201ms

We could see that the Vue.js is the best performance in the test.

[1] https://github.com/vuejs/vuejs.org/tree/master/perf/todomvc-benchmark
[2] http://todomvc.com/

Comment 2

[Gareth Aye [:gaye] (back from PTO)]

Hey Evan,

Have you tried this on a Hamachi? What is your flame's ram set at? Also it would be good to get lots of trials to make sure that we're seeing the real common behavior. We should also look at each example and see if there are any ways that we can improve / level application-level performance so we're not penalizing a framework for a poorly written todos app (with regards to perf).

Comment 3

[Evan Tseng [:evanxd]]

Attachment: benchmark test on Hamachi

Hi Gareth,

The result of the test[1] on Hamachi(4 runs average in the attachment):
AngularJS:   53799ms
Backbone.js: 32217ms
Ember.js:    65846ms
Knockout.js: 32217ms
Om:          20379ms
Ractive.js:  54475ms
React:       45206ms
Vue.js:      10031ms

We could see that the Vue.js is still best.

For the test in Comment 1, I used the Flame with 1G memory.

[1] https://github.com/vuejs/vuejs.org/tree/master/perf/todomvc-benchmark

Comment 4

[Evan Tseng [:evanxd]]

Sorry, update the result for Comment 2.

AngularJS:   53799ms
Backbone.js: 28921ms
Ember.js:    65846ms
Knockout.js: 32217ms
Om:          20379ms
Ractive.js:  54474ms
React:       45306ms
Vue.js:      10031ms

Comment 5

[Evan Tseng [:evanxd]]

For doing the performance test in Hamachi for 100 times, the result is

AngularJS:    24255ms
Backbone.js:  10942ms
Ember.js:     29114ms
Knockout.js: 175152ms
Om:            9606ms
Ractive.js:   34224ms
React:        17270ms
Vue.js:        3341ms

Comment 6

[Miller Medeiros [:millermedeiros]]

during work week we decided to change the calendar structure to use smaller sub-views (day based) and refresh the whole "sub-view" when events change.

the main reason we decided to not use any "reactive framework" was that React was adding a big delay to the app startup, Vue.js was too slow during complex array mutations/sorting and in the end we would still need to figure out how to glue all the pieces together and map the data into the proper format.. the benefits would not pay off for all the extra work and performance drawbacks.