Hello Habr! I am Milos 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 center of the ten years (affected by the endless framework that is javaScript), 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 truly a framework.

Like it or hate it, React does one job effectively, which is HTML templating. As well as a healthier ecosystem, it is perhaps maybe perhaps not difficult to realise why it became perhaps one of 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 Here within the mobile phone internet group, we don’t follow any strict JS frameworks – or at the least, any popular people – so we make use of mix of legacy and technologies that are modern. Although that really works well for all of us, manipulating DOM is normally difficult, therefore we desired 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 had been considered the best option and we also chose to choose it.

We joined up with Badoo in the center of this technique. Having bootstrapped and labored on React projects previously, I became alert to its benefits and drawbacks in training, but migrating an adult application with billions of users is a totally various challenge|challenge that is completely various.

Respond mixes HTML with JavaScript in a structure known as JSX. Even though it seems like a template language, JSX is in fact simply 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, & 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? if you ask me personally, technical problems apart, one concept had been apparent: change our current phone calls with JSX rule.

After some planning that is initial provided 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

Of course, this might just go us halfway, because we might nevertheless need certainly to alter the rule manually. Thinking about the amount and quantity of our templates, we knew that the most readily useful approach will be one thing automatic. The first concept sounded not so difficult — and if it may be explained, it may be implemented.

After demoing the original device to teammates, the feedback that is best 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 much simpler than we’re able to with regular expressions, for instance. That’s whenever i must say i knew that this will work!

Lo and behold, after a few times an instrument came into existence to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a thorough accessibility to parsers, must be comparable for translating any kind of popular templating language.

For lots more details that are technical skip towards the 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 simplest of terms, it is about translating this particular template code:

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 to a different, and every thing worked needlessly to say (many thanks, automatic evaluation). To start with, we preserved our old template.render() API to help keep changes separated.

Needless to say, using this approach you nevertheless end up getting templates rather than “proper” React components. The genuine advantage is when you look at the undeniable fact that it is much easier, if you don’t trivial, to respond from templates which can be currently JSX, escort service in glendale generally by merely wrapping a template rule in a function call.

You may think: have you considered to compose templates that are new scratch rather? The brief response is that absolutely nothing incorrect with your old templates — we merely had many 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 another trend that might pass, so just why invest in it? It’s hard to anticipate, but one feasible response is which you don’t need to. In the event that you iterate quickly, you can test away different alternatives, without investing a lot of time on any one of them, and soon you get the structure that actually works perfect for your group. That’s certainly one of the core concepts at Badoo.

Utilizing the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and comparable solutions, rule that has been once *.js is becoming more indistinguishable from JavaScript, and that trend seems like it is set . In the place of being overrun by it, then utilize that to your benefit?

Start supply

Into the character to do something well, we’ve built these tools that are internal a few components:

1. dust2jsx — package accountable for actual 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 makes use of dust2jsx internally to change 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.