Translating Dust templates to JSX center regarding the ten years (affected by the endless JavaScript fram

Translating Dust templates to JSX center regarding the ten years (affected by the endless JavaScript fram

Hello Habr! i am Milos from Badoo, and also this is my Habr that is first post initially posted within 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 midst of the ten years (suffering from the endless framework that is javaScript), embraced the DOM, surprised everybody 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, and that’s HTML templating. As well as a healthier ecosystem, it is perhaps perhaps not difficult to realise why it became one of the more popular and influential JavaScript libraries, if you don’t the preferred certainly one of all.

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

right right right Here within the Cellphone internet 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 really works well for all of us, manipulating DOM is normally difficult, therefore we wished to relieve this by decreasing 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 we also 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 advantages and disadvantages in training, but migrating an adult application with billions of users is a very different challenge|challenge that is totally different.

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, & most of our rendering ended up being done because merely as template.render() . Exactly how could we retain this purchase and ease of use while going to respond? In my experience, 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:

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

Needless to say, this could just go us halfway, because we might nevertheless need certainly to alter the html page manually. Taking into consideration the amount and amount of our templates, we knew that the most readily useful approach could be one thing automatic. The initial concept sounded not so 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 had been there is certainly a parser available for the templating language that we used. This 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 might work!

Lo and behold, after a few times something had become to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with an extensive option of parsers, the procedure should really be comparable for translating some other popular templating language.

To get 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 this kind of template rule:

to its JSX rule equivalent:

See side-by-side comparison right here.

following this, our procedure had been pretty straightforward that is much. We immediately converted our templates in one structure , and every thing worked needlessly to say (many thanks, automatic evaluation). To start with, we preserved our old template.render() API changes isolated.

needless to say, making use of this approach you nevertheless get templates rather than “proper” React components. The benefit that is real within the reality that it is much easier, if perhaps 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.

You may think: you will want to compose brand brand new templates from scratch rather? The quick response is that absolutely nothing incorrect with this old templates — we merely had most 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 that may pass, so just why invest in it? It’s hard to anticipate, but one feasible response is that you don’t need to. In the event that you iterate quickly, you can test down different alternatives, without investing too much effort on any one of them, before you get the structure that actually works perfect for your group. That’s certainly one of the core concepts for people at Badoo.

With all the rise of ES7/8/Next, Elm and factor, and of course TypeScript and comparable solutions, rule that has been once *.js is becoming more indistinguishable from JavaScript, and that trend appears like it is set . In place of being overrun by it, have you thought to utilize that benefit?

Start supply

When you look at the character of accomplishing something well, we’ve built these tools that are internal a few components:

  1. dust2jsx — package accountable for real Dust to JSX interpretation
  2. ratt (React All the plain things) — command line device for reading/writing files on disk. accountable for 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 or simply just keep us a remark if you discover them helpful.

468 ad

Leave a Reply

Your email address will not be published. Required fields are marked *