#mjml

Everybody already loves React. It’s a beautiful framework that revolutionized rapid application development, and we use it and adore it. jQuery, Angular, NPM, Bootstrap – everybody’s talking about them and everybody’s using them. They’re great.

But we thought it was time to shine the light on a few smaller javascript libraries – maybe not the stars of the show, but doing yeoman’s service in our daily coding, and deserving more attention than they get. To that end, allow me to present 3 javascript libraries we love:

moment.js

Moment is used in a whopping 70 files in the codebase of our flagship product, NowRenting. If you need to do anything involving dates or times, it’s the one-stop, slices-and-dices Swiss Army Knife to make your problems seem small and insignificant.

It utilizes chaining and descriptive function names to make it obvious at a glance what it’s doing. Do you need to display the time exactly three days and thirty minutes after midnight on June 2, 1989? No problem:

moment('June 2, 1989, 12:00am', 'MMMM D, YYYY, h:mma') .add(3, 'days') .add(30, 'minutes') .format('MMMM D, YYYY, h:mma')

Amazing!

MJML

It used to be impossible to send graphically rich, responsive emails. Coders assigned the task pulled their hair out: it took endless amounts of time and just as endless numbers of nested html tables. Imagine CSS selectors sixty or a hundred elements deep, and you begin to get an idea what it was like before MJML came on the scene.

MJML is a markup language that compiles to styled HTML that will show up nicely in any email client. It looks like this:

<mjml> <mj-body> <mj-section> <mj-column> <mj-text>Wow!</mj-text> </mj-column> </mj-section> </mj-body> </mjml>

And it’s as easy as it looks. MJML does exactly what a library should do: abstract away the toil so you can focus on what’s important.

classnames

Classnames is a different kind of animal from moment or MJML. Instead of hiding the difficult or tedious parts of a task under an easy function or markup syntax, classnames enables you to make your React code more React-ish.

At its simplest, you pass in strings and it sticks them together; at its best, it allows you to control the logic of popping classes on and off of elements without having to deal directly with string concatenation. Instead, you pass in an object with classes as names and booleans as values. This leaves your code more functional and maintainable.

You can rewrite this (from their docs):

var btnClass = 'btn'; if (this.state.isPressed) btnClass += ' btn-pressed'; else if (this.state.isHovered) btnClass += ' btn-over';

as

var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered });