mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
eeee6edf41
We now use vdom-ish techniques to track the
list items for the pm list. When we go to update
the list, we only re-render nodes whose data
has changed, with two exceptions:
- Obviously, the first time we do a full render.
- If the keys for the items have changed (i.e.
a new node has come in or the order has changed),
we just re-render the whole list.
If the keys are the same since the last re-render, we
only re-render individual items if their data has
changed.
Most of the new code is in these two modules:
- pm_list_dom.js
- vdom.js
We remove all of the code in pm_list.js that is
related to updating DOM with unread counts.
For presence updates, we are now *never*
re-rendering the whole list, since presence
updates only change individual line items and
don't affect the keys. Instead, we just update
any changed elements in place.
The main thing that makes this all work is the
`update` method in `vdom`, which is totally generic
and essentially does a few simple jobs:
- detect if keys are different
- just render the whole ul as needed
- for items that change, do the appropriate
jQuery to update the item in place
Note that this code seems to play nice with simplebar.
Also, this code continues to use templates to render
the individual list items.
FWIW this code isn't radically different than list_render,
but it's got some key differences:
- There are fewer bells and whistles in this code.
Some of the stuff that list_render does is overkill
for the PM list.
- This code detects data changes.
Note that the vdom scheme is agnostic about templates;
it simply requires the child nodes to provide a render
method. (This is similar to list_render, which is also
technically agnostic about rendering, but which also
does use templates in most cases.)
These fixes are somewhat related to #13605, but we
haven't gotten a solid repro on that issue, and
the scrolling issues there may be orthogonal to the
redraws. But having fewer moving parts here should
help, and we won't get the rug pulled out from under
us on every presence update.
There are two possible extensions to this that are
somewhat overlapping in nature, but can be done
one a time.
* We can do a deeper vdom approach here that
gets us away from templates, and just have
nodes write to an AST. I have this on another
branch, but it might be overkill.
* We can avoid some redraws by detecting where
keys are moving up and down. I'm not completely
sure we need it for the PM list.
If this gets merged, we may want to try similar
things for the stream list, which also does a fairly
complicated mixture of big-hammer re-renders and
surgical updates-in-place (with custom code).
BTW we have 100% line coverage for vdom.js.
|
||
|---|---|---|
| .. | ||
| ci | ||
| circleci | ||
| documentation_crawler | ||
| droplets | ||
| i18n | ||
| lib | ||
| linter_lib | ||
| setup | ||
| test-install | ||
| tests | ||
| zulip-export | ||
| __init__.py | ||
| build-docs | ||
| build-release-tarball | ||
| cache-zulip-git-version | ||
| check-capitalization | ||
| check-frontend-i18n | ||
| check-issue-labels | ||
| check-openapi | ||
| check-provision | ||
| check-templates | ||
| clean-branches | ||
| clean-repo | ||
| commit-message-lint | ||
| commit-msg | ||
| conf.ini-template | ||
| coveragerc | ||
| create-test-api-docs | ||
| deploy-branch | ||
| diagnose | ||
| django-template-graph | ||
| do-destroy-rebuild-database | ||
| do-destroy-rebuild-test-database | ||
| documentation.vnufilter | ||
| fetch-pull-request | ||
| fetch-rebase-pull-request | ||
| find-unused-css | ||
| get-handlebar-vars | ||
| html-grep | ||
| js-dep-visualizer.py | ||
| lint | ||
| pre-commit | ||
| pretty-print-html | ||
| provision | ||
| push-to-pull-request | ||
| README.md | ||
| release-tarball-exclude.txt | ||
| renumber-migrations | ||
| replacer | ||
| reset-to-pull-request | ||
| review | ||
| run-dev.py | ||
| run-mypy | ||
| run-tsc | ||
| run-yarn-deduplicate | ||
| setup-git-repo | ||
| show-profile-results | ||
| stop-run-dev | ||
| test-all | ||
| test-api | ||
| test-backend | ||
| test-documentation | ||
| test-emoji-name-scripts | ||
| test-help-documentation | ||
| test-js-with-casper | ||
| test-js-with-node | ||
| test-locked-requirements | ||
| test-migrations | ||
| test-queue-worker-reload | ||
| test-run-dev | ||
| test-tools | ||
| update-authors-json | ||
| update-locked-requirements | ||
| update-prod-static | ||
| update-zuliprc-api-field | ||
| webpack | ||
| webpack-helpers.ts | ||
| webpack.assets.json | ||
| webpack.config.ts | ||
| zanitizer | ||
| zanitizer_config.pm.sample | ||
This directory contains scripts that are used in building, managing,
testing, and other forms of work in a Zulip development environment.
Note that tools that are also useful in production belong in
scripts/ or should be Django management commands.
For more details, see https://zulip.readthedocs.io/en/latest/overview/directory-structure.html.