Translating Dust templates to JSX center for the ten years (affected by the javaScript fram that is endless

Hello Habr! I am MiloЕЎ from Badoo, and also this is my very first Habr post, initially posted within our technology weblog. Hope you enjoy it, and please share and remark when you have any queries

So… React, amirite.

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

Dozens of accomplishments, without also being fully a framework.

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

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

Right right Here when you look at the mobile phone online group, we don’t follow any strict JS frameworks – or at the least, any popular people – so we make use of a mix of legacy and technologies that are modern. Although that actually works well for all of us, manipulating DOM is generally difficult, and now we desired to relieve this by reducing 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 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 became alert to its advantages and disadvantages in training, but migrating an adult application with billions of users is an entirely different challenge|challenge that is totally various.

Respond mixes HTML with JavaScript in a structure called JSX. Even though it appears like a template language, JSX is truly 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, & most of 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 ended up being apparent: change our current phone 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 aided by the HTML content

Needless to say, this could just go us halfway, because we might still need to change the code manually. Considering the amount and wide range of our templates, we knew that the approach that is best is one thing automatic. The initial concept sounded not so difficult — and it can be implemented if it can be explained.

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

Lo and behold, after a few days something was created to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a thorough option of parsers, ought to be comparable for translating some other popular templating language.

For lots more technical details, 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 is about translating this particular template rule:

to its JSX rule equivalent:

See side-by-side comparison right here.

Following this, our procedure had been pretty straightforward that is much. We immediately converted our templates from 1 structure to some angelreturn other, and every thing worked as you expected ( many thanks, automatic evaluating). In the first place, we preserved our old template.render() API modifications isolated.

Needless to say, using this approach you continue to end up getting templates rather than “proper” React components. The genuine advantage is in the proven fact that it is much easier, if maybe not trivial, to respond from templates which are currently JSX, generally by merely wrapping a template rule in a function call.

It might seem: why don’t you compose brand new templates from scratch rather? The brief response is that there is nothing incorrect with this old templates — we just had many of them. In terms of rewriting them and dealing towards real componentisation, that’s a various story.

Some might argue that the component model is simply another trend that may pass, why commit to it? It’s hard to anticipate, but one feasible response is that you don’t need certainly to. Until you find the format that works best for your team if you iterate quickly, you can try out different options, without spending too much time on any of them. That’s certainly one of the core concepts for people at Badoo.

With all the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and solutions that are similar rule which was once *.js is starting to become progressively indistinguishable from JavaScript, and therefore trend appears like it is set . 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 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 charge of including referenced templates, and utilizes dust2jsx internally to change rule

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