Let's Add Some Sugar to Javascript with Jewell

Jewell brings Higher-Order Messaging to Javascript

Jewell — Javascript Syntax Sugar for Higher-Order Messaging

If you want to jump straight to the action (GitHub repo), click here.

I've worked and played with many languages and frameworks throughout my career and learned a lot with each one of them.

Recently I've been exploring Javascript quite a lot and, one day, while working with arrays I remembered a very cool feature that the Laravel Framework has, called higher-order messaging. It allows you to create very expressive 1 liners, such as: (PHP code)

$employees->filter->retired->each->sendPayment();

With some research I found that there are also some implementations of this using Ruby, one of my favorite languages. Ruby's syntax is very fluid, so higher-order messaging looks very natural to it. Using Nat Pryce's implementation, here's how the same code would look like in Ruby.

employees.where.retired?.do.sendPayment()

What about Javascript?

As you may know, that are quite many Javascript packages out there, so guess what was my reaction once I researched and realized there was no higher-order messaging library for Javascript?

If you know a library that does that, please leave it on the comments below, I’d love to check it out. I honestly couldn’t find it on NPM/Google ¯\_(ツ)_/¯

Since I couldn't find a library that allowed me to accomplish that same behavior, I wanted to see if that was even possible. I started hacking a version in my spare time and turns out it could be done with one of ES6’s features, Proxy! \o/

The tricky part was getting the syntax to be pretty and to make sense in the Javascript ecosystem without creating a monster. After a few iterations, I finally got a version that I was happy with! This is how it looks like:

employees.filter.retired.forEach.sendPayment();

Pretty similar to the example I showed you above, huh?!? Let's see a full code sample now, step by step.

Step 0. Add Jewell to your project

npm install jewell --save

Step 1. Import jewellPrototype and apply it to the Array class, so we can use higher-order messaging with native array methods.

Step 2. Declare a class. In our case it's Diamond

Step 3. Create an array of Diamonds

Step 4. Have fun

Notice that in our Get all blue diamonds example we call #isBlue, that's because #isBlue is a function. If that's the case, why do we not call it here?

diamonds.filter.isBlue.forEach.buy()

The answer is: you can, but it's not necessary. Since isBlue has no arguments, Jewell assumes it should be invoked to allow the chaining.

Besides jewelling the Array class itself, you can also use Jewell with your own library that has shortcuts to manipulating arrays or individual instances.

⚠ Warning: Keep in mind that Jewell replaces the original method with a Proxy, so before shipping it to production, make sure you’re not creating some crazy behaviors in your app or slowing everything down.

You can check out more examples in the repo. If you have any questions please leave a comment bellow or open an issue on the repo. You're also very welcome to contribute with Pull Requests and suggestions.

With no further ado, here's the GitHub repo:

pedsmoreira/jewell_jewell - Javascript Syntax Sugar for Higher-Order Messaging_github.com

Extra

If you’re into pieces of software crafted with love, I'd like to invite you to GitShowcase. Come and get your own rockstar portfolio 🤘. cc Victor F. Santos

GitShowcase_Developer, feature your best projects in a plug and play portfolio. The best part, for free._www.gitshowcase.com