Hello Habr! I am Milos from Badoo, and also this is my very first Habr post, initially posted inside our technology web log. Hope you enjoy it, and please share and remark for those who have any concerns
So… React, amirite.
Dozens of accomplishments, without also being truly a framework.
Right right right right right Here when you look at the mobile phone internet group, we don’t follow any strict JS frameworks – or at the least, any popular people – therefore we make use of a mix of legacy and modern technologies. Although that actually works well for all of us, manipulating DOM is generally difficult, and we also wished 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 and then we made a decision 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 alert to its advantages and disadvantages in training, but migrating an adult application with billions of users is a very different challenge|challenge that is totally various.
Our own HTML files had been well organised, & most of y our rendering ended up being done since just as template.render() . Just how could we retain this simplicity and order while going to respond? If you ask me, technical problems apart, one concept had been apparent: change our current phone calls with JSX code.
After some planning that is initial offered it a spin and wrapped up a command-line tool that executes two easy things:
- Substitute template.render() calls utilizing the HTML content
Needless to say, this could just go us halfway, because we might nevertheless have to change the rule manually. Considering the amount and amount of our templates, we knew that the approach that is best could be one thing automatic. The first concept sounded not difficult — and if it could be explained, it may be implemented.
After demoing the first device to teammates, the feedback that is best i acquired ended up being there clearly was a parser designed for the templating language that 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 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 comprehensive supply of parsers, the procedure must be comparable for translating some other popular language that is templating.
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. Into the really easiest of terms, it is about translating template rule:
to its JSX rule equivalent:
See side-by-side comparison right here.
Following this, our process ended up being 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 screening). In the first place, we preserved our old render( this is certainly template API to help keep modifications isolated.
Of course, applying this approach you continue to end up getting templates rather than “proper” React components. The benefit that is real into the fact that it is much easier, if you don’t trivial, to respond from templates which are currently JSX, more often than not by just wrapping a template rule in a function call.
You may think: you will want to compose brand new templates from scratch alternatively? The quick response is that there is absolutely nothing incorrect old templates — we merely had many of them. in terms of rewriting them and working towards true componentisation, that is a story that is different.
Some might argue that the component model 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.
Into the character of performing a very important factor well, we’ve built these interior tools in a few components:
- dust2jsx — package accountable for real Dust to JSX interpretation
- 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 check always them down, and also other open-source materials on our GitHub web page. Please add keep us a remark them useful if you find.