Translating Dust templates to JSX center regarding the ten years (affected by the javaScript fram that is endless

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 center 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 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 maybe perhaps perhaps not difficult to understand why it became perhaps one of the most popular and influential JavaScript libraries, or even the most used certainly one of all.

yeah, he said he *hates* javascript frameworks…can you think that?

Right right Here when you look at the Cellphone internet group, we don’t follow any strict JS frameworks – or at the least, any popular people – and now we make use of a mix of legacy and technologies that are modern. Although that actually works well for people, manipulating DOM is normally difficult, and now we desired 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 choice that is best therefore we made a decision to choose it.

We joined up with Badoo in the center of this procedure. Having bootstrapped and labored on React projects previously, I became 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 wholly 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, and most of y our rendering ended up being done because merely as template.render() . Exactly how could we retain this simplicity and order while going to respond? For 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 a chance and wrapped up a command-line tool that executes two easy things:

  1. Reads templates referenced in UI (JavaScript) file
  2. Substitute render( that is template calls because of the HTML content

needless to say, this might only go us halfway, because we might nevertheless need certainly to alter the code manually. Thinking about the amount and quantity of our templates, we knew that the approach that is best is one thing automatic. The first concept sounded not difficult — and it can be implemented if it can be explained.

After demoing device to teammates, the feedback that is best i obtained had been that there’s a parser designed for the templating language we used. Which means than we could with regular expressions, for example that we could parse and translate code much easier. That’s whenever i truly knew that this could 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 a thorough accessibility to parsers, the method ought to be comparable for translating any kind of popular templating language.

For more details that are technical skip to your Open-source part below. We used 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 particular 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 from a single structure to a different, and every thing worked not surprisingly (many thanks, automatic evaluating). To start with, we preserved our old render( this is certainly template API modifications isolated.

Needless to say, making use of this approach you continue to end up getting templates rather than “proper” React components. The genuine advantage is within the proven fact that it is much easier, if maybe not trivial, to respond from templates which can be currently JSX, more often than not by merely wrapping a template rule in a function call.

it may appear: you will want to compose brand new templates from scratch alternatively? The brief response is that there was clearly absolutely nothing incorrect old templates — we merely had plenty of them. in terms of rewriting them and working 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 commit to 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 for people at Badoo.

Utilizing the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and comparable solutions, rule which was once *.js is becoming more indistinguishable from JavaScript, and that trend seems like it is set to carry on. Rather than being overrun by it, you will want to make use of that to the benefit?

Start supply

When you look at the character of doing a very important factor well, we’ve built these tools that are internal a few parts:

  1. dust2jsx — package responsible for real Dust to JSX interpretation
  2. ratt (respond all the stuff) — command line device for reading/writing files on disk. Accountable for 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 just keep us a remark if you learn them helpful.