Hello Habr! i am Miloš from Badoo, and also this is my Habr that is first post originally posted inside our technology weblog. 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 (suffering from the endless JavaScript framework wars), embraced the DOM, surprised everyone else by blending HTML with JavaScript and changed the internet development landscape beyond recognition.

Dozens of accomplishments, without also being a framework.

Like it or hate it, React does one task very well, which is HTML templating. Along with a healthier ecosystem, it is maybe perhaps not difficult to realise why it became probably the most popular and influential JavaScript libraries, if you don’t the most famous certainly one of all.

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

right Here into the mobile phone internet group, we don’t follow any strict JS frameworks – or at the very least, any popular people – so we make use of mix of legacy and modern technologies. Although that really 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 had been considered the choice that is best and then 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 became conscious of its advantages and disadvantages in training, but migrating an adult application with vast sums of users is an entirely various challenge|challenge that is completely various.

Respond mixes HTML with JavaScript in a structure known as 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 just as template.render() . Just how could we retain this purchase and simpleness while going to respond? If you ask me, 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 because of the HTML content

needless to say, this will just go us halfway, because we might nevertheless need certainly to change the html page manually. Taking into consideration the amount and wide range of our templates, we knew that the most readily useful approach will be one thing automatic. concept sounded not difficult — and if it could be explained, it could be implemented.

After demoing device to teammates, the most readily useful feedback ended up being that there surely is a parser readily available for the templating language we used. Which means that people could parse and convert rule a lot easier than we’re able to with regular expressions, as an example. That’s whenever i truly knew that this will 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 an extensive accessibility of parsers, the method must certanly be comparable for translating some other popular language that is templating.

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. Into the really easiest of terms, it is about translating this kind of template rule:

to its JSX rule equivalent:

See side-by-side comparison right here.

Following this, our procedure was pretty much simple. We immediately converted our templates in one structure to a different, and every thing worked needlessly to say ( many thanks, automatic screening). To start with, we preserved our old render( that is template API changes isolated.

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

You may think: have you thought to compose templates that are new scratch rather? The quick response is that there is nothing incorrect with this old templates — we just had plenty of them. In terms of rewriting them and dealing towards true componentisation, that’s a different story.

Some might argue that the component model is merely another trend which may pass, so just why agree to it? It’s hard to anticipate, but one feasible response is which you don’t need 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 at Badoo.

Aided by the rise of ES7/8/Next, Elm and factor, as well as TypeScript and solutions that are similar rule which was once *.js is becoming increasingly more indistinguishable from JavaScript, and therefore trend appears like it is set . As opposed to being overrun by it, have actually you considered to make use of that benefit?

Start supply

When you look at the character of performing the one thing 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. In charge of including referenced templates, and utilizes dust2jsx internally to transform rule

We’ve even open-sourced these tools — make sure to always check 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.