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 yourself have any concerns
So… React, amirite.
It starred in the center of the ten years (suffering from the endless JavaScript framework wars), embraced the DOM, surprised every person by blending HTML with JavaScript and changed the internet development landscape beyond recognition.
Dozens of accomplishments, without also being a framework.
Think it’s great or hate it, React does one task very well, which is HTML templating. As well as a healthier ecosystem, it is maybe perhaps not difficult to understand why it became probably 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 Here within the Cellphone 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 modern technologies. Although that actually works well for people, manipulating DOM is generally difficult, and we 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 most suitable choice and now we made a decision to choose 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 benefits and drawbacks in training, but migrating an adult application with billions of users is a very different challenge|challenge that is totally different.
Respond mixes HTML with JavaScript in a structure known as JSX. Though it appears like a template language, JSX is clearly 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 y our rendering ended up being done because just as template.render() . Just how could we retain this purchase and convenience while going to respond? For me, technical difficulties apart, one concept ended up being apparent: change our current telephone calls with JSX rule.
After some planning that is initial offered it a spin and wrapped up a command-line tool that executes two easy things:
- Reads templates referenced in UI (JavaScript) file
- Substitute template.render() calls aided by the HTML content
needless to say, just go us halfway, because we might nevertheless need to alter the rule manually. Taking into consideration the amount and quantity of our templates, we knew that the most readily useful approach is one thing automatic. The first concept sounded not so difficult — and if it could be explained, it could be implemented.
After demoing the first device to teammates, the most readily useful feedback i obtained ended up being there is a parser designed for the templating language we used. Which means that individuals could parse and convert rule a lot easier 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 something was created to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a broad option of parsers, the method should really be comparable for translating some other popular language that is templating.
To get more technical details, 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 this sort of template rule:
to its JSX rule equivalent:
See side-by-side comparison right here.
Following this, our procedure ended up being pretty straightforward that is much. We immediately converted our templates in one structure to some other, 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 changes separated.
needless to say, applying this approach you continue to end up getting templates rather than “proper” React components. The benefit that is real into the proven fact that it is much easier, if you don’t trivial, to respond from templates being currently JSX, more often than not by just wrapping a template rule in a function call.
It might seem: you will want to compose templates that are new scratch rather? The quick response is that there clearly was absolutely nothing incorrect with your old templates — we merely had most of them. In terms of rewriting them and dealing towards real componentisation, that is a story that is helpful site different.
Some might argue that the component model is simply another trend that might pass, so just why agree to 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 down different alternatives, without investing too much effort on some of them, unless you get the structure that really works perfect for your group. That’s certainly one of the core concepts at Badoo.
Using the rise of ES7/8/Next, Elm and factor, and undoubtedly TypeScript and comparable solutions, rule which was once *.js is becoming more indistinguishable from JavaScript, and that trend seems like it is set to keep. In place of being overrun by it, why don’t you make use of that benefit?
Start supply
Into the nature of doing the one thing well, we’ve built these interior tools in a few components:
- dust2jsx — package accountable for real Dust to JSX interpretation
- ratt (respond all the stuff) — command line device for reading/writing files on disk. accountable for including referenced templates, and utilizes 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 if you discover them helpful.