React in Velo
WE ARE SPARTANS, a team at Wix, our goal is to look into ideas/problems and create a solution or a proof of concept. Today, I would like to share with you a story of one such project, but first, a little background.
Velo by Wix giving users the ability to write code to enhance the functionality of their Wix website.
The Velo code to interact with the page and its elements has a syntax which is similar to jQuery, and looks like so:
There are a few problems with the code above. In his article State management in velo, Shahar discusses in length and proposes a few excellent solutions. But can we go further? Can we offer our users an even more familiar environment?
React is by far the most popular frontend framework
From StackOverflow’s annual Developer Survey:
Node.js and React.js are the two most common web technologies used by Professional Developers and those learning to code.
React has a 44% market share, jQuery only 29%, so the code below should be more familiar to a 2022’s developer than the code above:
You can actually go to your Wix site today, install from npm react and @wix/react-velo,
Drag on to the stage these 3 elements:
- Text with id: counter
- Button with id: increment
- Button with id: decrement
and test the above code, it should just work™. You can see it live here.
No magic
To actually make this work, no changes were required in Velo or it’s APIs. Everything is accomplished from the “external” library — react-velo.
react-velo is actually a React Reconciler, the component that applies internal react state (think Virtual DOM) to the UI, the most common example is React DOM.
Example of other react reconcilers:
As a reconciler, one needs to implement methods such as (full API here):
appendChild?(parentInstance: Instance, child: Instance | TextInstance): void;removeChild?(parentInstance: Instance, child: Instance | TextInstance | SuspenseInstance): void;
React will call these methods when a change to the actual “DOM” is required. However, in Velo, we don’t actually have access to the real DOM, all we have is $w.
Another limitation is, that what “creates” elements on the document is the user by dragging elements to the stage and we can’t create/remove elements with $w API. A close approximation of that can be expand / collapse though, something like that:
...
appendChild(parentInstance, child) {
$w(`#${child.props.id}`).expand();
}removeChild(parentInstance, child) {
$w(`#${child.props.id}`).collapse();
}
...
The real implementation has a some more steps, however, that’s the gist of it.
You can see full implementation here.
More complicated examples
To see and play with the code, first login to Wix, then click the link “see and modify code”, then enable “Dev Mode”.
Todo list — see and modify code | just live site
BlackJack game — see and modify code | just live site
As an exercise, you might want to try to implement it with the imperative $w approach.
Final thoughts
To be honest, a few months ago, when I was tasked with investigating whether Velo can benefit from react — I was very skeptical.
Mainly because it’s not a “real” react: The JSX structure doesn’t represent “real” components. That is, react doesn’t “create” those on the screen; React, in our case, just modifies existing components — so the structure doesn’t matter, only component identifiers.
When react-velo was ready, and I started to play with it, and saw what other colleagues built with it (mainly Shahar Talmi 😉), I saw what a huge value it brings in terms of application state management with familiar mechanisms — I was sold.
If you’re using Velo, I suggest you to give react-velo a spin and see how that works for you and let me know in the comments. 🙏
P.S.
You might also want to checkout Eitan’s video where he reviews react-velo and compares it to $w’s imperative approach.
