Don't Miss

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

By on October 18, 2021

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

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

So… React, amirite.

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


Dozens of accomplishments, without even being truly 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 maybe perhaps perhaps not difficult to understand why it became perhaps one of the most popular and influential JavaScript libraries, if you don’t the preferred certainly one of all.

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

Right right Here when you look at the Cellphone online group, we don’t follow any strict JS frameworks – or at the least, any popular people – so we work with a mix of legacy and technologies that are modern. Although that actually works well for people, 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 was considered the choice that is best so we chose to opt for it.

We joined up with Badoo in the exact middle of this method. Having bootstrapped and labored on React projects previously, I happened to be conscious of its benefits and drawbacks in training, but migrating an adult application with billions of users is a very different challenge|challenge that is completely different.

Respond mixes HTML with JavaScript in a structure called JSX. If you will, for React calls, very similar-looking to HTML although it looks like a template language, JSX is actually just a syntax, or syntactic sugar.

Our own HTML files had been well organised, & most of y our rendering had been done since merely 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 offered it and wrapped up a command-line tool that executes two easy things:

  1. Reads templates referenced in UI (JavaScript) file
  2. Substitute template.render() calls utilizing the HTML content

needless to say, this will just go us halfway, because we would nevertheless have to change the html page manually. Taking into consideration the amount and amount of our templates, we knew that the approach that is best is one thing automatic. The first concept sounded not difficult — and if it may be explained, it may be implemented.

After demoing device to teammates, the feedback that is best had been there is a parser readily available for the templating language we used. Which means than we could with regular expressions, for example that we could parse and translate code much easier. That’s whenever knew that this could work!

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

For lots more details that are technical skip into the Open-source part below. We used tools escort service in kent like Esprima to parse JS rule, and a PEG.js parser generator to parse Dust templates. within the very easiest of terms, it is about translating template rule:

to its JSX rule equivalent:

See side-by-side comparison right here.

Following this, our procedure was pretty straightforward that is much. We immediately converted our templates from 1 structure , and every thing worked needlessly to say ( many thanks, automatic screening). To start with, we preserved our old render( that is template API to help keep modifications isolated.

needless to say, with this specific approach you nevertheless get templates rather than “proper” React components. The benefit that is real into the undeniable fact that it is much easier, if perhaps not trivial, to respond from templates which are currently JSX, more often than not by just wrapping a template rule in a function call.

It might seem: why don’t you compose new templates from scratch rather? The brief response is that there was clearly absolutely nothing incorrect old templates — we just had most of them. In terms of rewriting them and working towards real componentisation, that is a story that is different.

Some might argue that the component model is merely another trend that may pass, why agree to it? It’s hard to anticipate, but one possible response is which you don’t need to. In the event that you iterate quickly, you can test down different alternatives, without investing too much effort 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.

Aided by the rise of ES7/8/Next, Elm and Reason, and of course TypeScript and solutions that are similar rule which was once *.js is becoming progressively indistinguishable from JavaScript, and that trend seems like it is set . In the place of being overrun by it, why don’t you make use of that to your benefit?

Start supply

Within the nature to do something well, we’ve built these interior tools in a few components:

  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 makes use of 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 add or simply just keep us a remark them useful if you find.

Leave a Reply

Your email address will not be published. Required fields are marked *