When your app starts scaling, meaning there are features YOU don’t even know of being built, it makes sense to create some patterns for reusability. The problem with reusability on the front end is that more often than not, we confuse business logic with presentational logic. Thus, you end up with something like this:

As you can see we just have A LOT going on. We have some presentational code that effects buttons and form controls, we have done userId checks, we have run some callbacks, and routed you somewhere! There’s nothing wrong with these actions, but they are not reusable amongst components that need to do the same thing, or only partially the same thing. To be honest, this is how most Meteor apps are written!

Now at Workpop, we had this huge sea of event complexity. Parts of our app had event code that was literally copy-pasted between components. Oh, and you do know the best way to make a function reusable is to add parameters right? Just kidding but take a look at this:

There was huge shortcoming in how we were building our interfaces:

The Problems

We weren’t sharing code efficiently between components. We were adding on functions to global namespaces only to have duplicated code in different namespaces. Lack of organization was killer. From my examples above, our UI template code was HUGE and untestable. UNTESTABLE being an understatement. Switching Front end frameworks would be near impossible to do quickly since so much business logic was baked into the view layer.

Enter: The ZenAction

First, let me answer what may be going through your head. “Why is it a ZenAction?” What’s this Zen thing all about? For you to understand that let me show you…

Geoff Schmidt, CEO of Meteor Development Group, announced that Meteor’s UI framework would be deprecated in favor of a new template system powered by React. Oh man, this caused such a shit show.

It seemed that everyone was stressed about problem #3 from above.

I chimed in:

The reason why this pattern is under the umbrella of Zen is that I want people to be relaxed and confident in their code. I want you to be in a “Zen” state

Zen is a way of being. It also is a state of mind. Zen involves dropping illusion and seeing things without distortion created by your own thoughts.

How we solved our problems

So the idea was to create a central object called the ZenAction. This object’s job was to facilitate the necessary method calls or state changes needed for any particular view. We wanted these actions bound to the template or React component using them.

You can download this package here.

The following examples will be in Blaze, but we can easily see this working in React via the documentation.

Now instead of tons of code in our view directly, we’ve successfully created a logical place to read and reason about our actions. If you like to do template level testing you could bind the ZenAction to the template instance and execute from there.

Wait! This doesn’t help share actions between different views!

So we added a logical place to put our code per component. Score! But we still haven’t fixed the issue with the lack of shareable code and perfectly user-friendly testable code.

So say you repeat certain methods a lot. Let’s say our CommentActions were sprinkled around the site or attached to various namespaces. This is fine, but when your codebase gets bigger it’s harder to prevent people from reinventing the wheel without a logical uniform way to build stuff! Without order, you’re essentially in the Wild Wild West.

WHERE DO I PUT MY CODE?

The answer? It’s the lesser evil of many globals. Just one. We created a way for ZenActions to accept mixins. Well, of course, they’re called ZenMixins.

By using ZenMixins we solved some things. One, we created a logical place to put shared code that powers our views!

Here’s an example mixin for key events

Second, your code can be way more testable as you can create instances of the ZenAction in tests, and test these functions in isolation! No more clunky template tests!

Here’s a dumb example:

And lastly, if the view layer switches from under you…You will be fine.

A quote from Rishi Goomar from Meteor Weekly

Peep the discussion I had with Tom Coleman

Check out the repo itself!

And this blog post and the package came from a very special interview I did with Paul Dowman from OK GROW! You can listen to that here: