Hello Habr! i am Milos from Badoo, 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 when you yourself have any concerns
So… React, amirite.
It starred in the middle of the ten years (suffering from the endless framework that is javaScript), embraced the DOM, surprised everyone else by blending HTML with JavaScript and changed the net development landscape beyond recognition.
Dozens of accomplishments, without also being a framework.
Like it or hate it, React does one task very well, which is HTML templating. As well as a healthier ecosystem, it is perhaps perhaps maybe perhaps perhaps not difficult to realise 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?
Here into the mobile phone internet group, we don’t follow any strict JS frameworks – or at the least, any popular ones – and we also work with a 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 choice that is best and now 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 advantages and disadvantages in training, but migrating an adult application with vast sums of users is a very different challenge|challenge that is wholly various.
Respond mixes HTML with JavaScript in a structure known as JSX. Though it appears like a template language, JSX is obviously simply 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 because merely as template.render() . Exactly how could we retain this purchase and ease while going to respond? If you ask me, technical problems apart, one concept ended up being apparent: change our current telephone 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 render( this is certainly template calls utilizing the HTML content
Needless to say, this might just go us halfway, because we might still need to change the html page manually. Thinking about the amount and amount of our templates escort service in jurupa valley, we knew that the approach that is best could be one thing automatic. concept sounded not so difficult — and if it may be explained, it may be implemented.
After demoing the original device to teammates, the feedback that is best i acquired 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 was created to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a broad accessibility to parsers, the method must 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 really easiest of terms, it is about translating this kind of template code:
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 from a single structure to some other, and every thing worked as you expected ( many thanks, automatic assessment). To start with, we preserved our old render( that is template API changes isolated.
Needless to say, making use of this approach you nevertheless get templates rather than “proper” React components. The genuine advantage is into the undeniable fact that it is much easier, if maybe not trivial, to respond from templates being 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 absolutely nothing incorrect old templates — we merely had most 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 may pass, so just why invest in 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 at Badoo.
Using the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and comparable solutions, rule which was once *.js is starting to become more indistinguishable from JavaScript, and therefore trend appears like it is set to carry on. In the place of being overrun by it, you will want to make use of that benefit?
Start supply
In the nature of doing 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 utilizes 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.
