VARUNA JAYASIRI

@vpj

jsblocks, React, Angular performance compared with Weya.coffee

May 27, 2015

I came across jsblock yesterday on Hacker News. They had a nice performance comparison test case set comparing jsblocks with Angular and React. It made me curious to see how the small library we use (Weya.coffee) compares in performance with these.

I ran the tests on Chrome broswer on a Macbook Air (1.6Ghz i5, 2GB). I have not altered test cases provided on jsblock, and have added test cases for Weya for Rendering and Syncing Changes., The results on Safari are not accurate in syncing-changes test case, because jsblock test case use setTimeout(0) to resync which is called before html is actually rendered while the Weya test case use requestAnimationFrame which waits till it's rendered.

Rendering

LibraryTime (ms)Bar (shorter is better)
Weya.coffee404====
jsblocks801========
React1065==========
Angular2432========================

Syncing Changes

LibraryTime (ms)Bar (shorter is better)
Weya.coffee1593========
jsblocks2035==========
React2781==============
Angular8081========================================

Weya.coffee is more of a rendering tool than a a framework. The main difference between Weya and other frameworks is that instead of writing logic inside html, markup is written in coffeescript. Weya comes with a router and a base class inspired by backbone.js.

I came across <<http://jsblocks.com/(jsblock)>> yesterday on Hacker News. They had a nice performance comparison test case set comparing jsblocks with <<https://angularjs.org/(Angular)>> and <<https://facebook.github.io/react/(React)>>. It made me curious to see how the small library we use (<<https://github.com/vpj/weya(Weya.coffee)>>) compares in performance with these. >>> Weya.coffee is more of a rendering tool than a a framework. The main difference between Weya and other frameworks is that instead of writing logic inside html, markup is written in coffeescript. Weya comes with a router and a base class inspired by <<http://backbonejs.org/(backbone.js)>>. <<< <iframe src="https://ghbtns.com/github-btn.html?user=vpj&repo=weya&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> I ran the tests on Chrome broswer on a Macbook Air (1.6Ghz i5, 2GB). I have not altered test cases provided on <<http://jsblocks.com/(jsblock)>>, and have added test cases for Weya for **Rendering** and **Syncing Changes**., The results on Safari are not accurate in --syncing-changes-- test case, because jsblock test case use ``setTimeout(0)`` to resync which is called before html is actually rendered while the Weya test case use ``requestAnimationFrame`` which waits till it's rendered. >>> **<<http://vpj.github.io/jsblocks-performance.zip(Download the performance test cases)>> ### Rendering ||| Library | Time (ms) |Bar (shorter is better) === Weya.coffee | 404 | ==== jsblocks | 801 | ======== React | 1065 | ========== Angular | 2432 | ======================== ### Syncing Changes ||| Library | Time (ms) | Bar (shorter is better) === Weya.coffee | 1593 | ======== jsblocks | 2035 | ========== React | 2781 | ============== Angular | 8081 | ========================================