search

dfilatov / vidom

Library to build UI based on virtual DOM
MIT License
415 stars 16 forks source link

Unreasonable performance dbmon #300

Closed ibrahimbensalah closed 7 years ago

ibrahimbensalah commented 7 years ago

@dfilatov What is the secret that makes vidom, by far, the fastest dbmon implementation? By the way I've created the second fastest implementation which is not based on the virtual dom concept but instead is based on functional reactive concepts: http://templatejs.azurewebsites.net/sample/dbmon

A year ago I started with implementation, of course inspired by React concepts because that would be the most interesting and hardest way to learn the modern javascript/typescript and it's ecosystem. First I thought 1. react.js could never be effective and will introduce ill-conceived architectures, like in case of animation, clean mvc architecture (not the bad one facebook is talking about), etc... I think Flux is an example for that and 2. won't never reach the most optimal performance because of virtual dom batching, and react is slow when compared to angular 2 and aurelia.js for example. And yet vidom is this fast? I've already used all optimalization tricks and months of refactorings, but the couple of days (no patience) there is no progress in performance, I am happy tho with second place but still curious how you did it.

dfilatov commented 7 years ago

Hi, @ibrahimbensalah! What do you mean by " ill-conceived architectures"?

ibrahimbensalah commented 7 years ago

@dfilatov I think that the simplest way to describe "ill conceived architecture" is the case when one introduces solutions to problems that shouldn't be there in the first place. e.g. I think that virtual dom introduces challenges to the architecture like delaying insert and disposal of dom element. And who knowns history will proof either I am right or not. Either way I think the projects I am working on proofs we don't need virtual dom for Functional style , uni directional data flow.

dfilatov commented 7 years ago

@ibrahimbensalah Which way do you use to update DOM state in your approach?

ibrahimbensalah commented 7 years ago

@dfilatov I use a kind of implicit observable / stream approach (inspired by rxjs BehaviorSubject), by diffing the model I know exactly which streams needs to be notified. By implicit I mean the library takes care of it.

ibrahimbensalah commented 7 years ago

@dfilatov do you have any experience with some hard to solve problems when using the virtual dom approach with vidom?

dfilatov commented 7 years ago

@ibrahimbensalah If you explain and provide an example of "hard to solve problems", I'll try to answer.

ibrahimbensalah commented 7 years ago

@dfilatov that is actually my question to you., can you provide example(s) of problems which were challenging / non-straightforward to solve with vidom?

dfilatov commented 7 years ago

The main thing which virtual dom is supposed for is to get rid of manual DOM manipulations and transitions between states of DOM. It's one of biggest source of bugs and errors. With declarative model provided with vidom you just describe each state separately without need to describe transitions between them.

ibrahimbensalah commented 7 years ago

You absolutely right about declarative style, but some libraries (e.g angular) will force you to go around the declarative style to do non-idiomatic implementations, that's when things gets messy and difficult With my approach I also promote declarative style, but I don't believe that the declarative style is the silver bullet here.

dfilatov commented 7 years ago

I don't think a silver bullet exists at all but ability to write declarative ui in most cases reduces a lot of imperative manipulations with DOM and get rid of whole bunch of errors.