Translating Dust templates to JSX center for the ten years (suffering from the javaScript fram that is endless


Translating Dust templates to JSX center for the ten years (suffering from the javaScript fram that is endless

Translating Dust templates to JSX center for the ten years (suffering from the javaScript fram that is endless

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 when you yourself have any queries

So… React, amirite.

It starred in the middle of the ten years (affected by the endless JavaScript framework wars), embraced the DOM, surprised everyone else by blending HTML with JavaScript and changed the internet development landscape beyond recognition.

Dozens of accomplishments, without also being fully a framework.

Think it’s great or hate it, React does one task very well, which is HTML templating. As well as a healthier ecosystem, it is maybe maybe maybe maybe not difficult to understand 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?

Right right right Here into the mobile phone internet group, we don’t follow any strict JS frameworks — or at the very least, any popular people — and then we make use of 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 choice that is best so we chose 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 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 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 had been done because just 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 obvious: 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 render( this is certainly template calls aided by the HTML content

Needless to say, just go us halfway, because we would nevertheless need certainly to change the rule manually. Thinking about the amount and wide range of our templates, we knew that the most readily useful approach will be one thing automatic. The initial concept sounded not so difficult — and if it may be explained, it could be implemented.

After demoing the first device to teammates, the most useful feedback ended up being there clearly was a parser designed for the templating language we used. Which means that people could parse and convert rule much simpler than we’re able to with regular expressions, for instance. That’s whenever i must say i 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 comprehensive accessibility of parsers, must be comparable for translating some other popular language that is templating.

For lots more technical details, skip towards the Open-source part below. We utilized tools like Esprima to parse JS rule, and a PEG.js escort service in fremont parser generator to parse Dust templates. within 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 was pretty straightforward that is much. We immediately converted our templates from a single structure to some other, and every thing worked needlessly to say (many thanks, automatic evaluating). In the first place, we preserved our old render( that is template API modifications isolated.

Needless to say, with this specific approach you nevertheless end up getting templates rather than “proper” React components. The benefit that is real within the undeniable 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 code in a function call.

You may think: why don’t you compose templates that are new scratch alternatively? The quick response is that there clearly was absolutely nothing incorrect with this old templates — we just had plenty of them. in terms of rewriting them and working towards real componentisation, that’s a various story.

Some might argue that the component model is merely another trend which may pass, why invest in 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 at Badoo.

Using the rise of ES7/8/Next, Elm and factor, not forgetting TypeScript and solutions that are similar rule which was once *.js is becoming increasingly more indistinguishable from JavaScript, and therefore trend seems like it is set to keep. In the place of being overrun by it, have you thought to make use of that to your benefit?

Start supply

Into the character of performing a very important factor well, we’ve built these interior tools in 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. In charge of including referenced templates, and makes use of 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 them useful if you find.

Об авторе

admin administrator

Оставить ответ