Benchmark

[akxcv]

I'm eager to optimise this library, to make it perform as fast as possible, and I already have some thoughts about how to do that. Before optimising anything, though, it's necessary to have a benchmark of the library.

I've been thinking of forking js-framework-benchmark and adding some benchmarks for vuera to the fork.

I'm not sure, though, what exactly we should measure, and I don't know when I'll find the time to do this, so if anyone wishes to help, this is very appreciated.

[priteshpoddar]

@akxcv I tried adding it in benchmark by creating a project but I am getting this error. Here is the repo I have created https://github.com/priteshpoddar/vuera-benchmark .The App.vue code I took from js-framework-benchmark for vuejs benchmark itself.

[akxcv]

Hi! It's great that you started to work on this.

First, don't minify your build and don't use NODE_ENV=production, this way error messages will be clearer. Second, as I can see, you're not wrapping the Vue component in a vuera wrapper anywhere, so React cannot render it.

[priteshpoddar]

@akxcv I will remove minification.In case you want to know what error says https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= . I tried using both the wrapper VueWrapper and HOC and they both were giving the same errors as above.So I used the vuera/babel plugin.

[akxcv]

Ah, I see now, you're using require statements. You have to use require('./App.vue').default instead of require('./App.vue'). And, at least in your repo, I don't see a babel config anywhere, so you're not using vuera's babel plugin. I got it working with the wrapper, though.

[priteshpoddar]

Thanks @akxcv made it.Regarding this.

I don't see a babel config anywhere, so you're not using vuera's babel plugin

The config was in .babelrc file. I created a pull request for it. https://github.com/krausest/js-framework-benchmark/pull/291

[akxcv]

I don’t think we need to push vuera into js-framework-benchmark. Vuera isn’t really a framework, and @krausest will have to support it if this is merged. Instead, we should keep it a separate repo, or merge into Vuera itself.

[priteshpoddar]

I see there are lots of libraries in js-framework-benchmark like halogen, polymer etc. which are not framework either so I am not sure if needs to be framework.Regarding benchmark I integrated with js-benchmark library locally and got the results both in simple and interactive table.

Anyway for measuring the benchmark we need to integrate with js-framework-benchmark to leverage some benefits like running automated test cases, measuring performance with other frameworks.So it will be better to keep it as separate repo only I guess.

Here is the result I found compared with react and vue.

[krausest]

@akxcv We can add it if you want, but probably I'll need some help if version updates introduce incompatible changes. Do you want it published in the js-framework-benchmark? Does vuera support keyed updates?

[priteshpoddar]

Sure, incase incompatible changes arises I will make the update.For keyed updates I will check and let you know.

[akxcv]

Sorry for the delay! @priteshpoddar, your current benchmark isn't really measuring vuera's performance. What we need to do, at the very least, is to 1) measure performance when updating React props that are passed to Vue and 2) measure performance when updating Vue props that are passed to React. In the current state of your benchmark, you're just mounting a Vue app via ReactDOM and then you just measure Vue's performance. We could also measure performance for different cases and different levels of depth (Vue in React in Vue, React in Vue in React, etc). But that can be done later. @krausest vuera is just a library to integrate Vue and React, so it supports keyed updates just like Vue and React do. We can benchmark with both keyed and non-keyed updates.

[priteshpoddar]

Yes I too compared the perfomance after creating the vuera keyed part with react v15, v16, vue, keyed and non-keyed.The results were nearly approximate with react and vue and I too think by this way it does not convey proper performance benchmark.

1. measure performance when updating React props that are passed to Vue

Regarding this what I understand is that instead of creating/manipulating data in Vue (for Vue in react) we will create/remove data in react and then pass that data as props to vue, something like

<VueAppComponent data={data} handleReset={this.handleReset} />

the data and handleReset will be defined in react component and we will pass down as props to vue component. By this way the interaction between vue and react component will be higher.So for Vue in React, we will use vue for displaying data only and manipulate the data in react. Let me know if this is correct or what do you think..

[akxcv]

Yes, that’s precisely what I meant!

[priteshpoddar]

@akxcv I will try to do that.It will take some time as I am taking holiday for the next week.

[akxcv]

Sure, take your time!