This is an example module showing how you can use virtual DOM
in a jQuery environment. This is only created as an example so
you will most likely need to create your own version of the
index.js using whatever dependency loader / bundler your
project uses. I've created an example
that uses the module along with webpack as the bundler and the
source code can be seen in /demo.
If at all possible, you should NOT be using this technique. I
created this because I have worked with plenty of Handlebars or
other template based UIs that are still using $.html to render
the internals of it's applications. This is hard on the browser
and either the user or developer. If you are starting a new
project, please use one of the many fully fleshed out declarative
UI libraries out there. However, if you are stuck maintaining
an older application where it would be too extensive to replace
jQuery, this could be a way to implement Virtual DOM on that
legacy application.
In most web apps, the most CPU intensive action is manipulating the DOM. By using a virtual dom reconciliation (diff => patch), the DOM only needs to make the specific changes requested instead of removing and then re-adding all elements on the page.
Probably the more important benefit is that when using a template
framework and declarative UIs (e.g. Handlebars), the user flow
is interrupted every time anything on the page gets rendered. The
way to solve this is by only having the initial render in the
templating language but then this defeats the purpose of declarative
UIs since the logic needs to be separated into initial and
interactive rendering. In my example, it is actually re-rendering
the entire form with every keyup, however it is imperceptible due
to the reconciliation of the virtual-dom. This is very similar to
how
The surge of declarative UI utilities should make you aware that they are a major benefit during development. The centralized rendering of the view contains all logic necessary in one place instead of scattered around to ensure good user experience. The declarative pattern allows the UI to be rendered in full from any state.
- install dependencies at root
cd jquery-vhtml
yarn install # or `npm install`- install dependencies inside demo
cd demo
yarn install # or `npm install`- start the bundle and watch for changes
yarn build # or `npm run build`- start a static server in this location
yarn global add http-server # or `npm install -g http-server`
http-server ./- view the demo page at http://localhost:8080
- make the logic for replacing the internals more robust.
- make an exportable dist
- make an example using requirejs