{updated: " 2nd Jan '21 with tips on corvid workarounds and Shoonia’s work " ,
updated: " Animations beyond Show and Hide ",}
Hi folks, I’m becoming ever more dependent on node packages as I add complexity to my site. I can’t find much discussion on the forum on this topic and wondered if anyone wants to share learnings, examples, clever solutions etc.
There are some formal corvid examples that exist and some support guides , and a great series of forums (IMHO) but they’re not beginning to do justice to the universe that is Node.js, or the way it can help.
I think there’s a different story.
Simple package installation and use - at least for me - is a Wix advantage beyond any other, it’s the way Wix will transition from website builder into a true serverless development environment, and despite frustrations (cough 8 seconds Wix-bolt, without packages!) it’s the reason I’m still here.
(When I’m feeling militant I can construct an argument that basic module use should be the entry point into Corvide, rather than event handlers…)
These are the sort of things that have helped me no end.
Lodash
Ok, I know ECMAS8 helps - a lot - but it doesn’t replace Lodash completely yet, and you know that just by sneaking a peek at what Wix Engineering are still using. For anyone manipulating a lot of data in arrays, it’s a must-add.
Plus it goes hand in hand with futil-js, which adds all sorts of clever stuff (
toggle, single Object). And delay vs timeout?
State Management
I have a site which increasingly is beyond my ability to state manage (hence toggle).
My issue was states on states on states creating a cube that was user views vs product views vs journey progression to levels of detail that were becoming impossible to think through, let alone deal with.
{ Since this was written originally Corvid Storeon was added by Shoonia ; even easier to adopt. More below }
I knew about Redux, but I’m a self-taught jobbing occasional coder - struggling to apply it to Wix, and I didn’t know about Corvid-Redux . Or Mobx and then out of nowhere a genius like Shahar Talmi appears, drops a life-changing post , and then disappears back into the ether.
That post isn’t even a Corvid Example. Yet, it’s probably the best ever written - mostly because it takes existing Corvid Examples apart and shows how to make them scalable and more reliable. And in case that was ambiguous, I didn’t mean that negatively - applying better solutions to older models is what we’re all looking to do. And for me, it was instructive because I already knew the limitations so I could follow along with the solutions.
Is Shahar still at Wix, can we contribute to a side job in inspiring solutions? Ok, I’m joking - but if you’re anything more than a content site, have a read.
Simplicity
I grew up with Linux, so I’m ok playing around in a terminal, but there’s still a lot of “proper” code management that’s needed to handle the node or NPM. The removal of package dependency management has not helped things (from a user POV, strategically it probably has helped).
The beauty of what Wix has built (and seem almost determined not to talk about), is I don’t have to care about any of that stuff. A simple GUI install of the package, or an alternative, or a request for one, and I’m immediately accessing short cuts that make me look brilliant (thanks Wix Engineering). Basically, it’s all the fun and none of the grind. The ops maintenance gone in a flash.
Dependencies and Interoperation
There’s a ton I don’t know. Here’s an obvious one.
Given the aforementioned “cough wix bolt 8s” problem, can I help myself by aligning with Wix?
This is the list of packages Wix are running to maintain my site (not the packages I am also running on top of them).
So -
a) do I benefit?
b) can I benefit?
c) can we both benefit?
It seems to me if I add React (see below), and Wix has already added it, then it’s effectively a site speed zero impact addition for me?
If I want to add the drag and drop animation I yearn for (and I really do), can I use TweenMax and save the page size impact of Wix Animations (which somehow I can’t make work - yet I’m sure it’s GreenSock?).
And then there’s the final frontier - when am I going to take the leap and start seeing just how far Wix will let me play with React before I start bumping up against DOM and HTML restrictions? I haven’t gone there, mostly because it could be a huge time waste and I don’t have the time to waste.
But I wonder if others have?
Which is actually the point of this post - Shahar Talmi genius aside, I’m sure many of us are figuring out solutions to different parts of this universe. If we had a way to share them, we’d all benefit.
Love to hear your thoughts, dear reader.
MN
Wix Corvid ANIMATION beyond show and hide effects. Update Dec 7 2020
Occasionally I stumble across something so good I wonder why I haven’t seen it before, so I’ll append these to this post as they come along.
Animations ShortCut
Complaining to a friend that it was boring working out animation timings , this got linked to me. Brilliant short cut timeline planner. My thanks to whoever created it.
MN
Repeaters, Statement Management and Corvid Learning. Update Jan 2 2021
Sometimes you just need someone to ask, learn from or blatantly copy!
One of the challenging things , when you’re not in a team, is finding someone who has had the same specific problem as you have, or who has the same platform experience as you do.
For quite a long time I’d been living between questions like these, and aside from people on this forum, and two other people I know who work with Wix Corvid, didn’t have anyone to ask.
-
Did I create that problem?
-
Does it just not work here?
-
Is there another way to do it?
-
I’m going to live with this annoying workaround I’ve made, but it’ll bug me.
Then I met Hilary and she helped me find Shoonia’s (Alexander) work, or possibly she found me in order to tell me about it. I’m going to post some points from her that I think are on the topic of this post
In her words, warts and all.
Alexander very much changed my experience and perception of Wix, I was super frustrated and I was giving up with Corvid until I read what he has been writing. This is my shortcut list that any junior developing on Corvid should read through.
-
Direct $item management and dodging side effects - Solves occasional For Each loop problems
-
Arguably it is an easier solution for people who are new to coding to manipulate for events than the standard method. Or maybe my words should be it is abstracted differently.
Repeater Hover (Mouse In/Out) background solution
-
Repeaters are great, but they have a bunch of events that aren’t in the native solution.
-
This is a clever workaround that using 1px images to solve background limitations
-
If you’re super lazy he even built the image-maker for you!
Data Hook W eird Mutations
-
I had a data problem for months that I had builled a mountain of external hosted solutions around that were just silly to maintain when what I needed was a simple console trick.
-
Except I didn’t realise I was dealing with a side effect, I thought I’d made a mistake in the data logic somewhere. Which of course in a way I had, but this answer was totally not what I ever would have considered.
TBH this is where we need to feel more like a community - you don’t get the critical mass on this sort of insight unless a many of the folks are working together.
State Management, Even Simpler, Even Quicker
Gone are the days of me building in page arrays to manage state (I’m not joking). Wix has done the kilometres since then, and it’s so much pleasured compared to before.
But there is always more to do. Everyone knows Redux and MobX but there’s some other stuff that can be useful that Wix doesn’t yet support it like Alpine or futil. [ note both are actually approved and in the NPM list now ] One of these was Storeon - fast, quick, low bundle size state management without all of Redux’s forced compliance, and even easier to use than MobX .
Alexander ported it over (see Github or WixForum ) and I’ve used it for a bunch of otherwise kinda tricky to manage stuff. eg. I have a global side nav bar that needs to change state based on page, where links can be different in some situations. Plus it has to remember state of favourites added and things like that. And it needs to be light. Storeon was builded for this sorts of things.
This list as just a few of the ones I found helpful, his blog has some other really helpful stuff. But actually, Github has more if you’re more the code than the words person.
Oh yeah if anyone’s trying to make local Corvid work he probably knows, I discovered what he was doing due to the CLI work he’s been doing for Corvid. Plus say thanks to him coz we all need that and over here we never tell anyone and probably people just copy his work without like saying saying
Oh and tell Wix that they are sitting on a Gold Mine with Corvid now they adopted the NPM at last, except for [three] two problems, they don’t have package examples (this improved of course now), they don’t tell no body about it and somehow they named it for a Global virus (almost) except they had a time machine and did it first.
Thanks to Hilary for the update.
She’s claiming she’s too shy to post, which I think just from her tone you know is [bull&*£2] unlikely.
But maybe more to her final point, thanks to Alexander Zaytsev for all the examples he’s sharing, and speaking personally really upping my game.
MN