Translating Dust templates to JSX center of this ten years (suffering from the endless JavaScript fram

Hello Habr! i am Milos 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 for those who have any concerns

So… React, amirite.

It starred in the center of the ten years (suffering from the endless framework that is javaScript), embraced the DOM, surprised everyone else by combining 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 maybe maybe perhaps perhaps not difficult to realise why it became 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 into the Cellphone online group, we don’t follow any strict JS frameworks – or at the least, any popular people – so we make use of a mix of legacy and technologies that are modern. Although that really 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 most suitable choice and now 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 happened to be conscious of its benefits and drawbacks in training, but migrating an adult application with billions of users is a totally various challenge|challenge that is totally different.

Respond mixes HTML with JavaScript in a structure known as JSX. Though it seems like a template language, JSX is in fact merely 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 y our rendering ended up being done since merely as template.render() . Exactly how could we retain this purchase and ease of use while going to respond? For me, technical difficulties apart, one concept ended up being apparent: change our current phone calls with JSX rule.

After some initial preparation we provided it 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 just go us halfway, because we might still need to change the rule manually. Taking into consideration the amount and quantity of our templates, we knew that the most useful approach will be one thing automatic. The first concept sounded not so difficult — and it can be implemented if it can be explained.

After demoing the first device to teammates, the most readily useful feedback i obtained ended up being there is a parser readily available for the templating language that we used. Which means that individuals 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 something 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 ought to be similar for translating some other popular language that is templating.

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 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 structure to a different, and every thing worked needlessly to say ( many thanks, automatic evaluating). To start gresham ts escort with, we preserved our old render( this is certainly template API to help keep modifications isolated.

Needless to say, with this particular approach you nevertheless get templates rather than “proper” React components. The genuine advantage is when you look at the undeniable fact that it is much easier, or even trivial, to React from templates which can be currently JSX, more often than not by merely wrapping a template rule in a function call.

It might seem: why don’t you compose templates that are new scratch alternatively? The brief response is that there is absolutely nothing incorrect with this old templates — we just had plenty of them. In terms of rewriting them and working towards real componentisation, that is a story that is different.

Some might argue that the component model is merely another trend which may pass, so just why agree to it? It’s hard to anticipate, but one feasible response is which you don’t need to. In the event that you iterate quickly, you can test down different alternatives, without investing a lot of time 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 at Badoo.

Aided by the rise of ES7/8/Next, Elm and factor, and undoubtedly TypeScript and comparable solutions, rule that has been once *.js is becoming progressively indistinguishable from JavaScript, and therefore trend seems 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

Within the character of accomplishing a very important factor well, we’ve built these interior tools in a few components:

  1. dust2jsx — package accountable for real Dust to JSX translation
  2. 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 transform rule

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.

Leave a Reply

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

Post comment