Velo’s ecosystem truly depends on not just the development of Velo itself, but the tools and educational materials around the platform. Today, I want to highlight the work of Alexander Zaytsev (a.k.a. shoonia), a developer who works at Wix on Velo. I’ve learned a great deal from his blog since I started at Wix, and I think that everyone else can too.
Tooling
Storeon
Storeon is an event-based state manager that serves as a central place to manage your state. This provides many benefits, including:
Connect any page element on your page to an event in your store, so that page elements update whenever your state changes
No need to worry about the scope of your stateful variables; simply make a call to the store to update state
Your state is stored in one place, not scattered throughout your codebase
Adding it to your package is as simple as installing any other npm package. This one is called storeon-velo.
Jobs.config Creator & Validator
Jobs.config lets you schedule backend tasks to be executed periodically on your Velo site. This is useful for periodically cleaning up your Content collection (such as removing old/expired entries), or sending periodic status updates.
However, writing jobs.config entries can be a little tedious. To make this easier on developers, shoonia has written two tools: A creator for creating new jobs.config entries, and a validator for ensuring handwritten entries are correct.
Repeater Scope
Another great utility library that helps you to manage data and events with your repeaters. This gives you access to helper functions like useScope, which translate events into variables such as $items and itemData. Likewise, if you’re responding to an event on a repeated item and need the parent repeater, there’s getRepeater to make this a single line of code.
Just like storeon-velo, you can find and install the repeater-scope package through Velo’s npm package manager.
Shoonia’s Blog
Shoonia’s blog is full of insightful articles and neat tips that you can apply to your work with Velo today. My favorite is his article “Type safety your code with JSDoc,” which goes over how to leverage the fact that Velo uses Typescript on its backend to introduce type safety to your projects. For example, you can tell Velo’s compiler that a variable should be a $w.Repeater. This ensures that if you accidentally assign a string to the variable, the compiler will create an error.
Of course, his blog doesn’t end there. From how to create a queue for animations, to communicating with iframes, there is a wealth of information you might not have known, so go check it out.
