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 concerns
So… React, amirite.
It starred in the midst of the ten years (affected by the endless JavaScript framework wars), embraced the DOM, surprised every person by combining 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 task very well, which is HTML templating. Along with a healthier ecosystem, it is maybe decisive link perhaps maybe perhaps perhaps not difficult to understand why it became the most popular and influential JavaScript libraries, or even the most famous certainly one of all.
yeah, he said he *hates* javascript frameworks…can you think that?
right right Here within the mobile phone internet group, we don’t follow any strict JS frameworks – or at the very least, any popular people – therefore we make use of mix of legacy and technologies that are modern. 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 most suitable choice 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 conscious of its benefits and drawbacks in training, but migrating an adult application with vast sums of users is a very different challenge|challenge that is totally various.
Respond mixes HTML with JavaScript in a structure known as JSX. Even though it seems like a template language, JSX is in fact only 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, and most of our rendering had been done since just as template.render() . Exactly how could we retain this purchase and ease of use 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 provided it and wrapped up a command-line tool that executes two easy things:
- Reads templates referenced in UI (JavaScript) file
- Substitute render( that is template calls aided by the HTML content
needless to say, this could just go us halfway, because we would still need to alter the rule manually. Thinking about 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 so difficult — and if it could be explained, it could be implemented.
After demoing the original device to teammates, the most useful feedback i acquired ended up being that there’s a parser designed for the templating language we used. Which means that individuals could parse and convert rule much simpler than we’re able to with regular expressions, as an example. That’s whenever i must say i knew that this could 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 a broad accessibility to parsers, must be comparable for translating some other popular templating language.
For lots more technical details, 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 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 from 1 structure , and every thing worked as you expected (many thanks, automatic evaluating). In the first place, we preserved our old render( this is certainly template API to help keep changes separated.
Needless to say, making use of this approach you continue to get templates rather than “proper” React components. The genuine advantage is within the reality that it is much easier, if you don’t trivial, to respond from templates which can be currently JSX, generally by just wrapping a template rule in a function call.
You may think: you will want to compose templates that are new scratch alternatively? The quick response is that there is absolutely nothing incorrect with this old templates — we merely had many of them. In terms of rewriting them and working towards real componentisation, that is a various story.
Some might argue that the component model is merely another trend which might pass, so just why agree to it? It’s hard to anticipate, but one feasible response is that you don’t need certainly 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.
Utilizing 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 that trend appears like it is set to keep. As opposed to being overrun by it, why don’t you utilize that to your benefit?
Start supply
In the character to do a very important factor well, we’ve built these tools that are internal 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 transform 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 or simply just keep us a remark them useful if you find.