Hello Habr! I am Milos from Badoo click for info, and also this is my Habr that is first 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.
It starred in the center of the ten years (affected by the endless JavaScript framework wars), embraced the DOM, surprised everybody 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. Along with a healthier ecosystem, it is maybe maybe maybe not difficult to understand why it became probably one of the most popular and influential JavaScript libraries, or even the preferred certainly one of all.
yeah, he said he *hates* javascript frameworks…can you think that?
right right Here when you look at the Cellphone online group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and then we make use of mix of legacy and modern technologies. Although that actually works well for people, 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 had been considered the most suitable choice and now we made a decision to opt for 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 vast sums of users is a totally various challenge|challenge that is totally various.
Respond mixes HTML with JavaScript in a structure known as JSX. If you will, for React calls, very similar-looking to HTML although it looks like a template language, JSX is actually just a syntax, or syntactic sugar.
Our own HTML files had been well organised, and most of y our rendering ended up being done because just as template.render() . Exactly how could we retain this purchase and ease of use while going to respond? In my opinion, technical problems apart, one concept had been apparent: change our current phone calls with JSX rule.
After some initial preparation we offered it a chance 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, just go us halfway, because we might still need to alter the rule manually. Considering the amount and wide range of our templates, we knew that the approach that is best is one thing automatic. The first concept sounded not so difficult — and it can be implemented if it can be explained.
After demoing device to teammates, the feedback that is best i obtained ended up being that there’s a parser readily available for the templating language we used. This means than we could with regular expressions, for example that we could parse and translate code much easier. That’s whenever 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 an extensive accessibility to parsers, should really be comparable for translating some other popular language that is templating.
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 was pretty much simple. We immediately converted our templates in one structure to some other, and every thing worked needlessly to say (many thanks, automatic evaluation). To start with, we preserved our old render( that is template API to help keep changes isolated.
Needless to say, using this approach you nevertheless get 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 which are currently JSX, more often than not by merely wrapping a template rule in a function call.
it could appear: you will want to compose brand brand new templates from scratch rather? The quick response is that absolutely nothing incorrect old templates — we merely had many of them. in terms of rewriting them and dealing towards real componentisation, that’s a various story.
Some might argue that the component model is simply another trend which may pass, so just why invest in it? It’s hard to anticipate, but one feasible response is that 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.
Using the rise of ES7/8/Next, Elm and factor, and undoubtedly TypeScript and solutions that are similar rule which was once *.js is starting to become increasingly more indistinguishable from JavaScript, and that trend seems like it is set to keep. In place of being overrun by it, have you thought to utilize that to the benefit?
Start supply
When you look at the nature 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. Accountable for 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 away, and also other open-source materials on our GitHub web page. Please add keep us a remark them useful if you find.
