FAQ

Can vfunc.js replace React or Vue?

For most business screens, behaviour on published pages, intranet systems and small SPAs it is enough. For screens that update thousands of rows often, large apps built by big teams, or when you need a rich ecosystem, React or Vue may fit better. See Compare.

What are the limits?

Large lists: a component's render replaces its whole inside (no keyed diff). For long lists where a few rows change often, draw only the changed rows with the official plugin vf.ext.list (since 1.1.0). Keep unchanged areas with data-vf-keep. The built-in vfGrid pages long data instead of scrolling it; for virtual scrolling use a grid adapter (vfGridAg, vfGridTabulator). For numbers, see the measurements below.
Focus and caret: after a render, focus and caret move back to the element with the same id, data-ref or name, else to the same data-action at the same position. Scroll positions are not restored. Do not render on every keystroke.
Table rows: a component that renders <tr> needs tag: 'table'.
Ecosystem: few component libraries and tools so far. Third-party libraries can be attached directly with onMount + data-vf-keep.

How slow are large lists?

The operations of js-framework-benchmark, measured four ways. Naive: one component redraws the whole screen. Recommended: as the kit teaches, only the <tbody> is redrawn, and selecting a row changes an attribute without a render. vfList: the recommended page with the official list plugin, which draws and moves only the changed rows. Vanilla: hand-written code that touches only the changed rows. The numbers are the time from the click to the end of style and layout after the render; in parentheses, the ratio to vanilla.

chromium 153.0.8010.12 · Windows_NT 10.0.26200 (win32), Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz, vfunc 1.1.0, 1000 rows, median of 10 runs after 5 warm-up runs (ms)

Operation (ms)	vfunc naive	vfunc recommended	vfunc + vfList	vanilla
create rows	51.8 (1.1×)	56.6 (1.2×)	51.9 (1.1×)	45.8
create many rows	533.6 (0.9×)	692.0 (1.2×)	605.6 (1.1×)	570.2
append rows	124.8 (2.3×)	109.1 (2.0×)	70.6 (1.3×)	54.0
partial update	53.8 (3.0×)	56.2 (3.1×)	25.3 (1.4×)	18.0
select row	53.1 (265.5×)	0.3 (1.5×)	5.3 (26.5×)	0.2
swap rows	56.1 (9.7×)	54.6 (9.4×)	6.9 (1.2×)	5.8
remove row	52.8 (9.1×)	55.9 (9.6×)	6.7 (1.2×)	5.8
clear rows	6.7 (1.1×)	6.0 (1.0×)	5.8 (0.9×)	6.2
startup	68.2	79.0	82.2	69.6
memory (after create)	1.3 MB	1.3 MB	1.4 MB	1.4 MB
script size (gzip)	10.39 KB	10.52 KB	12.20 KB	1.26 KB

Firefox and WebKit results, min and max

Creating rows and clearing them are close to vanilla in all four.
Operations that change a few rows (partial update, swap, remove) redraw the whole list when drawn with render, several to tens of times slower: the cost of having no keyed diff. With vfList they stay within 1.5 times vanilla in all three engines.
For operations that change only attributes (selection, expanding), change the attribute instead of drawing the row again (the recommended page): a new row element makes the browser lay out the whole table again.
The numbers depend on the machine and the browser. How they are measured and how to run them yourself: layer1/bench/README.md in the repository. To compare with other frameworks, see the js-framework-benchmark results.

What about server rendering and SEO?

vfunc assumes the HTML already exists. When a server (or static files) produces the HTML and vfunc only adds behaviour, search engines read that HTML. This site is built that way.

How is security handled?

vf.html escapes by position and refuses interpolation in dangerous places, javascript: URLs included.
opts and vf.el refuse innerHTML and string handlers.
setState and merges ignore dangerous keys such as __proto__.
Permissions must be checked on the server; client code can always be bypassed.

If you find a security issue, follow SECURITY.md in the repository instead of opening a public issue.

Can I use TypeScript?

Type declarations (types/vfunc.d.ts) ship with the package. Plain scripts without a build get editor type checking with // @ts-check and a reference to types/global.d.ts.

Which browsers are supported?

Build	Browsers
`vfunc.min.js`, ESM	Current Chrome, Edge, Firefox and Safari (desktop and mobile)
`vfunc.legacy.min.js`	Internet Explorer 11, Edge IE mode

The examples, the starter and this site are tested automatically in Chromium, Firefox and WebKit on every change.

Is IE11 supported?

vfunc.legacy.min.js runs in IE11 and Edge IE mode; your app code must be ES5 as well. See Extensions, plugins, IE.

What is the license?

Apache-2.0. The distributed files contain no third-party code; the tools and the libraries used by examples are all listed under Licenses.