You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm happy to announce the release of VanJS1.5.0. 🎉🎉🎉
✨ What's in the release?
1. Optimization on state derivations
In this release, we made major optimization on how state derivations are being executed. To illustrate the optimization, let's consider an example below:
s will be derived twice, one triggered by ++a.val, and the other triggered by ++b.val. 1.5.0 changed the execution of state derivations from synchronous to asynchronous, so that only one derivation for s will be executed after both state a and b are updated.
Another benefit of this optimization is that, if we have:
++a.val--a.val
The derivation of s will be skipped because after ++a.val and --a.val the val of a doesn't change at all.
For state-derived DOM properties and DOM child nodes, we already have this kind of optimization since 0.11.9 (VanJS's first public release). 1.5.0 release expands the optimization to state derivations. Side effects defined by van.derive will also be benefited from this optimization.
Note that in one single derivation cycle, state derivations and side effects are always executed before DOM updates, to ensure DOM re-renderings always have the top-priority to be minimized. For instance, for the component:
When the val of a changes, the derivation of s will be executed 4 times (triggered by the updates of state a, b, c, d, respectively). But s^2, the s-derived Text node will be re-rendered only once.
The optimization in 1.5.0 is very crucial for VanX-based apps. For instance, let's say we have the following piece of code to save the reactive object items into localStorage whenever it changes (as in this example):
Prior to 1.5.0, localStorage.setItem might be called multiple times for updates to items, especially if we update items with vanX.replace(items, ...), leading to significant waste of resources. With the optimization in 1.5.0, localStorage.setItem will be called only once for each update and derivation cycle.
2. rawVal property for State objects
In 1.5.0, we added a new readonly rawVal property for State objects - for getting the current value of the State object (peeking) without registering the state as a dependency of the binding function for the derived state, side effect or DOM node. For instance, the derived state:
van.derive(()=>a.rawVal+b.val)
will be updated when b changes, but won't be updated when a changes. Being able to "peek" the value of a state without registering the dependency can be useful for some use cases, such as: #282.
Similarly, we also released VanX to 0.3.0 to introduce a new function vanX.raw for getting the field value of a reactive object without registering the dependency. e.g.:
data.s=vanX.calc(()=>vanX.raw(data).a+data.b)
will make data.s updated when data.b changes, but data.s won't be updated when data.a changes.
With the optimization, the bundle sizes increases slightly. Gzipped bundle increases to 1055 bytes (1.0kB) from 1012 bytes (1.0kB) (43 bytes increase), while minified bundle increases to 2035 bytes (2.0kB) from 1896 bytes (1.9kB) (139 bytes increase) - still being the smallest reactive UI framework in the world.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi fellow VanJSers,
I'm happy to announce the release of VanJS
1.5.0
. 🎉🎉🎉✨ What's in the release?
1. Optimization on state derivations
In this release, we made major optimization on how state derivations are being executed. To illustrate the optimization, let's consider an example below:
Before
1.5.0
, if we have:s
will be derived twice, one triggered by++a.val
, and the other triggered by++b.val
.1.5.0
changed the execution of state derivations from synchronous to asynchronous, so that only one derivation fors
will be executed after both statea
andb
are updated.Another benefit of this optimization is that, if we have:
The derivation of
s
will be skipped because after++a.val
and--a.val
theval
ofa
doesn't change at all.For state-derived DOM properties and DOM child nodes, we already have this kind of optimization since
0.11.9
(VanJS's first public release).1.5.0
release expands the optimization to state derivations. Side effects defined byvan.derive
will also be benefited from this optimization.Note that in one single derivation cycle, state derivations and side effects are always executed before DOM updates, to ensure DOM re-renderings always have the top-priority to be minimized. For instance, for the component:
When the
val
ofa
changes, the derivation ofs
will be executed 4 times (triggered by the updates of statea
,b
,c
,d
, respectively). Buts^2
, thes
-derived Text node will be re-rendered only once.The optimization in
1.5.0
is very crucial forVanX
-based apps. For instance, let's say we have the following piece of code to save the reactive objectitems
intolocalStorage
whenever it changes (as in this example):Prior to
1.5.0
,localStorage.setItem
might be called multiple times for updates toitems
, especially if we updateitems
withvanX.replace(items, ...)
, leading to significant waste of resources. With the optimization in1.5.0
,localStorage.setItem
will be called only once for each update and derivation cycle.2.
rawVal
property forState
objectsIn
1.5.0
, we added a new readonlyrawVal
property forState
objects - for getting the current value of theState
object (peeking) without registering the state as a dependency of the binding function for the derived state, side effect or DOM node. For instance, the derived state:will be updated when
b
changes, but won't be updated whena
changes. Being able to "peek" the value of a state without registering the dependency can be useful for some use cases, such as: #282.Similarly, we also released VanX to
0.3.0
to introduce a new functionvanX.raw
for getting the field value of a reactive object without registering the dependency. e.g.:will make
data.s
updated whendata.b
changes, butdata.s
won't be updated whendata.a
changes.With the optimization, the bundle sizes increases slightly. Gzipped bundle increases to
1055 bytes
(1.0kB) from1012 bytes
(1.0kB) (43 bytes
increase), while minified bundle increases to2035 bytes
(2.0kB) from1896 bytes
(1.9kB) (139 bytes
increase) - still being the smallest reactive UI framework in the world.❤️ Hope you can enjoy!
Beta Was this translation helpful? Give feedback.
All reactions