Hello Habr! i am MiloЕЎ 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 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, and that’s HTML templating. Along with a healthier ecosystem, it is perhaps perhaps not difficult to realise why it became probably 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 right right Here within the mobile phone Web group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and now we work with 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 had been considered the best option therefore we chose to opt for it.
We joined up with Badoo in the exact middle of this procedure. Having bootstrapped and labored on React projects previously, I happened to be conscious of its advantages and disadvantages in training, but migrating an adult application with billions of users is an entirely various challenge|challenge that is completely different.
Respond mixes HTML with JavaScript in a structure called 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, & most of our rendering ended up being done since just as template.render() . Just how could we retain this simplicity and order while going to respond? For me, technical problems apart, one concept ended up being apparent: change our current phone calls with JSX rule.
After some planning that is initial offered it a chance 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 because of the HTML content
Needless to say, this will just go us halfway, because we might nevertheless need to change 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 initial 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 obtained ended up being that there’s a parser readily available for the templating language we used. Meaning that people could parse and convert rule a lot easier than we’re able to with regular expressions, as an example. That’s whenever 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 broad option of parsers, the procedure must certanly be comparable for translating some other popular templating language.
To get more details that are technical 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 this sort of template rule:
to its JSX rule equivalent:
See side-by-side comparison right here.
Following this, our procedure had been pretty much simple. We immediately converted our templates from a single structure to a different, and everything worked needlessly to say (many thanks, automatic assessment). To start with, we preserved our old render( this is certainly template API to help keep modifications isolated.
needless to say, with this particular approach you continue to end up getting templates rather than “proper” React components. The benefit that is real into the reality that it is much easier, or even trivial, to respond from templates which can be currently JSX, more often than not by just wrapping a template rule in a function call.
it could appear: have you thought to compose templates that are new scratch alternatively? The brief response is that there clearly was absolutely nothing incorrect old templates — we just 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 simply another trend which might pass, so just why invest in it? It’s hard to anticipate, but one possible 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, not forgetting TypeScript and comparable solutions, rule which was once *.js is starting to become increasingly more indistinguishable from JavaScript, and therefore trend appears like it is set to keep. In the place of being overwhelmed by it, have actually you considered to utilize that benefit?
Start supply
When you look at the nature to do 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 makes use of dust2jsx internally to transform code
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.