Translating Dust templates to JSX center associated with the ten years (suffering from the endless JavaScript fram

Translating Dust templates to JSX center associated with the ten years (suffering from 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 when you 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 every person by blending HTML with JavaScript and changed the internet development landscape beyond recognition.

Dozens of accomplishments, without also being a framework.

Think it’s great or hate it, React does one task very well, and that’s HTML templating. As well as a healthier ecosystem, it is maybe perhaps perhaps maybe not difficult to realise why it became the most 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 right Here when you look at the Cellphone internet group, we don’t follow any strict JS frameworks – or at the very least, any popular people – and we also make use of 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 ended up being considered the best option so we made a decision to opt for it.

We joined up with Badoo in the center of this method. 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 wholly various.

React 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 our rendering ended up being done because merely as template.render() . Exactly how could we retain this purchase and ease while going to respond? In my opinion, technical problems apart, one concept had been apparent: change our current telephone 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 template.render() calls utilizing the HTML content
Needless to say, just go us halfway, because we might still need to alter the html page manually. Taking into consideration the amount and quantity of our templates, we knew that the most readily useful approach will be one thing automatic. The first concept sounded not so difficult — and if it could be explained, it may be implemented.

After demoing the original device to teammates, the most useful feedback ended up being that there surely is 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 knew that this might work!

Lo and behold, after a few times an instrument had become to transform Dust.js HTML-like templates to JSX React rule. We utilized Dust, however with a comprehensive option of parsers, the procedure must certanly be comparable for translating any kind of popular language that is templating.

For more technical details, 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 had been pretty much simple. We immediately converted our templates from 1 structure , and every thing worked needlessly to say ( many thanks, automatic screening). To start with, we preserved our old render( this is certainly template API to help keep changes separated.

Needless to say, with this specific approach you continue to end up getting templates rather than “proper” React components. The genuine advantage is into the proven fact that it is much easier, if perhaps not trivial, to React from templates being currently JSX, generally by just wrapping a template rule in a function call.

It might seem: have you thought to compose templates that are new scratch rather? The quick response is that there clearly was absolutely nothing incorrect old templates — we merely had plenty of them. in terms of rewriting them and dealing towards real componentisation, that is a various story.

Some might argue that the component model is merely another trend which may pass, 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 some of them, unless you get the structure that actually works perfect for your group. That’s certainly one of the core concepts at Badoo.

Because of the rise of ES7/8/Next, Elm and factor, and of course TypeScript and comparable solutions, rule which was once *.js is becoming more indistinguishable from JavaScript, and that trend appears like it is set to carry on. In place of being overrun by it, have actually you considered to make use of that to the benefit?

Start supply

Into the nature 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 (respond all the stuff) — 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 check always them away, and also other open-source materials on our GitHub web page. Please add or just keep us a remark if you discover them of good use.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.