Hello Habr! I am Milos from Badoo, and also this is my very first Habr post, initially 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 middle of the ten years (suffering from the endless framework that is javaScript), embraced the DOM, surprised everybody by blending HTML with JavaScript and changed the internet development landscape beyond recognition.
Dozens of accomplishments, without also being truly a framework.
Think it’s great or hate it, React does one task very well, which is HTML templating. Along with a healthier ecosystem, it is perhaps maybe not difficult escort service in kent to understand why it became one of the more 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 right right Here into the mobile phone online group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and then we make use of a mix of legacy and modern technologies. Although that actually 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 ended up being considered the best option and now 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 vast sums of users is an entirely different challenge|challenge that is wholly various.
Respond mixes HTML with JavaScript in a structure called JSX. Even though it appears like a template language, JSX is merely 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 y our rendering had been done because 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 ended up being obvious: change our current telephone calls with JSX rule.
After some initial preparation I 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 with all the HTML content
needless to say, this will just go us halfway, because we would still need to alter the rule manually. Taking into consideration the amount and amount of our templates, we knew that the most readily useful approach could be one thing automatic. The initial concept sounded not so difficult — and if it could be explained, it could be implemented.
After demoing the first device to teammates, the feedback that is best i obtained ended up being there clearly was a parser designed 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 truly knew that this will work!
Lo and behold, after a few times an instrument was created to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with an extensive option of parsers, should really be comparable for translating some other 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. Into the very easiest of terms, it is about translating this kind of template rule:
to its JSX code equivalent:
See side-by-side comparison right here.
following this, our procedure had been pretty much simple. We immediately converted our templates in one structure to some other, and every thing worked not surprisingly ( many thanks, automatic evaluating). To start with, we preserved our old template.render() API to help keep changes separated.
needless to say, making use of this approach you nevertheless end up getting templates rather than “proper” React components. The benefit that is real into the proven fact that it is much easier, or even trivial, to respond from templates which are currently JSX, more often than not by merely wrapping a template rule in a function call.
It might seem: have you thought to compose templates that are new scratch rather? The quick response is that there was clearly absolutely nothing incorrect with this old templates — we just had most of them. in terms of rewriting them and dealing towards real componentisation, that’s 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 for people at Badoo.
Using the rise of ES7/8/Next, Elm and factor, as well as TypeScript and comparable solutions, rule that was once *.js is starting to become progressively indistinguishable from JavaScript, and therefore trend appears like it is set to carry on. In the place of being overrun by it, why don’t you make use of that benefit?
Start supply
Into the nature to do the one thing well, we’ve built these interior tools in a few components:
- dust2jsx — package accountable for real Dust to JSX translation
- 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 away, and also other open-source materials on our GitHub web page. Please add or simply just keep us a remark if you learn them helpful.