Translating Dust templates to JSX center associated with ten years (suffering from the endless JavaScript fram

Hello Habr! i am Miloš from Badoo, and also this is my Habr that is first post initially posted inside our technology weblog. Hope you enjoy it, and please share and remark when you have any queries

So… React, amirite.

It starred in the midst of the ten years (suffering from the endless framework that is javaScript), embraced the DOM, surprised everyone else by blending HTML with JavaScript and changed the net development landscape beyond recognition.

Dozens of accomplishments, without also being truly a framework.

Think it’s great or hate it, React does one task effectively, which is HTML templating. Along with a healthier ecosystem, it is maybe perhaps perhaps perhaps not difficult to understand why it became the most popular and influential JavaScript libraries, if you don’t the most used certainly one of all.

yeah, he said he *hates* javascript frameworks…can you think that?

Right right right right right Here into the mobile phone internet group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and now we work with a mix of legacy and modern technologies. Although that actually works well for all of us, manipulating DOM is normally difficult, and we also wished to relieve this by decreasing the wide range of «manual» updates, increasing our rule reuse and stressing less about memory leakages.

After some research, respond ended up being considered the best option and now we made a decision to opt for it.

We joined up with Badoo in the exact middle of this procedure. Having bootstrapped and labored on React projects previously, I became alert to its advantages and disadvantages in training, but migrating an adult application with vast sums of users is a very different challenge|challenge that is totally different.

Respond mixes HTML with JavaScript in a structure called JSX. Though it seems like a template language, JSX is really merely a syntax, or syntactic sugar in the event that you will, for React calls, extremely similar-looking to HTML.

Our own HTML files had been well organised, and most of y our rendering ended up being done because just as template.render() . Just how could we retain this simplicity and order while going to respond? To me personally, technical problems apart, one concept had been apparent: change our current telephone calls with JSX rule.

After some planning that is initial provided it and wrapped up a command-line tool that executes two easy things:

1. Reads templates referenced in UI (JavaScript) file
2. Substitute render( that is template calls aided by the HTML content

Needless to say, this might just go us halfway, because we would still need to alter the rule manually. Thinking about the amount and quantity of our templates, we knew that the most useful approach could be something automatic. The initial concept sounded not difficult — and if it could be explained, it could be implemented.

After demoing tool to teammates, the most useful feedback i acquired had been that there’s a parser readily available for the templating language we used. This means that individuals could parse and convert rule a lot easier than we’re able to with regular expressions, for instance. That’s whenever i truly knew that this will work!

Lo and behold, after a few times an instrument was created to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a thorough supply of parsers, the procedure should really be comparable for translating some other popular language that is templating.

For lots more technical details, skip to your Open-source part below. We utilized tools like Esprima to parse JS code, and a PEG.js parser generator to parse Dust templates. Into the really easiest of terms, it is about translating this sort of template code:

to its JSX rule equivalent:

See side-by-side comparison right here.

Following this, our procedure had been pretty much simple. We automatically converted our templates from a single structure to a different, and every thing worked as you expected ( thank you, automatic evaluating). In the first place, we preserved our old render( that is template API to help keep changes isolated.

Of course, with this specific approach you continue to get templates rather than “proper” React components. The benefit that is real within the undeniable fact that it is much easier, if you don’t trivial, to respond from templates which are currently JSX, more often than not by merely wrapping a template rule in a function call.

it may appear: why don’t you compose brand new templates from scratch rather? The quick response is that there is absolutely nothing incorrect old templates — we just had plenty of them. In terms of rewriting them and working towards real componentisation, that’s a story that is different.

Some might argue that the component model is simply another trend that may pass, so just why agree to it? It’s hard to anticipate, but one feasible response is which you don’t need certainly to. In the event that you iterate quickly, you can test away different alternatives, without investing a lot of time on some of them, unless you get the structure that actually works perfect for your group. That’s certainly one of the core concepts for people at Badoo.

Because of the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and solutions that are similar rule that was once *.js is starting to become increasingly more indistinguishable from JavaScript, and therefore trend appears like it is set . rather than being overrun by it, you will want to utilize that to your benefit?

Start supply

Into the character of doing a very important factor well, we’ve built these tools that are internal a few components:

1. dust2jsx — package accountable for real Dust to JSX interpretation
2. ratt (React All the plain things) — command line device for reading/writing files on disk. In https://eastmeeteast.review charge of including referenced templates, and utilizes dust2jsx internally to change rule

We’ve even open-sourced these tools — make sure to check always them down, and also other open-source materials on our GitHub web page. Please contribute or just keep us a remark if you discover them of good use.