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

Hello Habr! I am Milos from Badoo, and also this is my very first Habr post, initially posted inside our technology weblog. Hope you enjoy it, and please share and remark for those who have any concerns

So… React, amirite.

It starred in the middle of the ten years (affected by the endless JavaScript framework wars), embraced the DOM, surprised everybody else by blending HTML with JavaScript and changed the net development landscape beyond recognition.

Dozens of accomplishments, without also being a framework.

Think it’s great or hate it, React does one task very well, which is HTML templating. Along with a healthier ecosystem, it is perhaps maybe perhaps perhaps not difficult to realise why it became probably one of the most popular and influential JavaScript libraries, or even the most used certainly one of all.

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

right right Here into the Cellphone online group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and we also work with a mix of legacy and modern technologies. Although that actually works well we wanted to alleviate this by reducing the number of «manual» updates, increasing our code reuse and worrying less about memory leaks for us, manipulating DOM is usually hard, and.

After some research, respond ended up being considered the best option therefore we chose to opt for it.

We joined up with Badoo in the exact middle of this technique. Having bootstrapped and labored on React projects previously, I happened to be conscious of 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 known as JSX. Though it appears like a template language, JSX is clearly merely a syntax, or syntactic sugar in the event that you will, for React calls, really similar-looking to HTML.

Our own HTML files had been well organised, and most of our rendering ended up being done since merely as template.render() . Exactly how could we retain this simplicity and order while going to respond? In my opinion, technical problems apart, one concept ended up being apparent: change our current telephone calls with JSX rule.

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

  1. Reads templates referenced in UI (JavaScript) file
  2. Substitute render( this is certainly template calls using the HTML content

Needless to say, this will just go us halfway, because we might nevertheless have to alter the rule manually. Considering the amount and wide range of our templates, we knew that the most useful approach could be one thing automatic. The first concept sounded not difficult — and if it may be explained, it may be implemented.

After demoing the original device to teammates, the feedback that is best ended up being there clearly was a parser designed for the templating language we used. Which means that individuals could parse and convert rule much simpler than we’re able to with regular expressions, as an example. That’s whenever i truly knew that this could work!

Lo and behold, after a few times an instrument had become to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a broad accessibility to parsers, the procedure should always be comparable for translating some other popular templating language.

For more details that are technical skip to your Open-source part below. We utilized tools like Esprima to parse JS rule, and a PEG.js parser generator to parse Dust templates. within the really easiest of terms, it’s about translating this particular template rule:

to its JSX rule equivalent:

See side-by-side comparison right here.

Following this, our procedure ended up being pretty straightforward that is much. We automatically converted our templates from one structure to some other, and every thing worked not surprisingly (many thanks, automatic screening). In the first place, we preserved our old template.render() API changes separated.

Needless to say, using this approach you continue to end up getting templates rather than “proper” React components. The benefit that is real within the undeniable fact that it is much easier, or even trivial, to respond from templates which can be currently JSX, generally by merely wrapping a template rule in a function call.

It might seem: then compose brand brand new templates from scratch alternatively? The brief response is that there clearly was absolutely nothing incorrect with your old templates — we just had many of them. In terms of rewriting them and working towards real componentisation, that is a various story.

Some might argue that the component model is merely another trend which may pass, so just why invest in 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, and soon you get the structure that really 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, and undoubtedly TypeScript and solutions that are similar rule which was once *.js is becoming increasingly more indistinguishable from JavaScript, and therefore trend seems like it is set to carry on. As opposed to being overrun by it, then make use of that to your benefit?

Start supply

Within the nature to do the one thing well, we’ve built these interior tools in a few parts:

  1. dust2jsx — package accountable for real Dust to JSX interpretation
  2. ratt (respond all the stuff) — command line device for reading/writing files on disk. Accountable for including referenced templates, and utilizes dust2jsx internally to transform rule

We’ve even open-sourced these tools — make sure to check always them away, and also other open-source materials on our GitHub web page. Please add keep us a remark if you learn them helpful.