Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-engine vs other template engines

I was wondering to use paypal's React Engine (https://github.com/paypal/react-engine), but I have some doubts:

What are the benefits over other template engines like Handlebars?

Why upload .jsx files, and not (jsx precompiled/transformed) .js files? (This one should be faster because don't have to do deal with the transformation at the server).

I have been researching but I get confused.

Thanks

like image 800
AlexAcc Avatar asked Sep 16 '15 21:09

AlexAcc


People also ask

Should I use a template engine or React?

Conclusion. There are many other advantages to using a framework like React as a templating engine / static site generator. Combined with a modular design approach, and taking advantage of all its complexity and power, it allows us to improve both our code and the contribution process.

Is React better than EJS?

While ejs does allow javascript logics (like else-if conditioning or for loops), the syntax is both cumbersome to write and a pain to read. React introduces the JSX syntax, which while maintaining the proximity to traditional HTML, elucidates the use of programming logic to a great extent.

Are template engines Good?

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.


1 Answers

The main difference between react-engine and template engines is only when the browser enables the user to interact with the browser page. Nevertheless, it is important how machines have access to individual data.

Assuming we want to run a simple webpage. Just a scrolling and open text information. Using template engines, like Handlebars.js, typically, when the browser request hits to the server, it tries to figure it out how to respond and what to do. That said, the template engine may reference existing fetched data from files stored into a local and accessible source. Those are loading all the defined data regarding the site template file (i.e. head, meta, title, etc.), with a render of incomplete HTML string. This HTML is then sent back to the Browser and rendered.

The react-engine, on the same side it happens the use of the same rendering mechanism. However, instead of a template engine semantic, it uses JSX, or if we want, we can also use JavaScript. The JSX is, therefore, broader then template engines. A great article by Hajime Yamasaki Vukelic complies the separation of concerns from a different angle between JSX and HTML templates.

With template engines, you feed the library a string (usually but not necessarily HTML), which is then converted into a piece of JavaScript code which generates virtual DOM structures when executed. At design time, templates are just strings, so we don’t have direct access to the surrounding code. For instance, we can’t import helper functions, or call methods. These things are only possible through abstractions called directives (and possibly other names depending on where you are coming from). Directives are the glue between the HTML and the JavaScript.

So far so good, there is no relevant difference between both solutions. Links to next or previous simple webpage are just simple <a href="/webpage>Next</a> elements.

At the moment, when we decide to implement some interactions, react-engine will be the winner. While react-engine rendering does not require JavaScript to run on the client side, it will enable SEO over the search.

Template engines also have this SEO support, but with less impact. We can not run here all JavaScript to render HTML. Even libraries like jQuery require live access to the browser window object which cannot be mocked easily on the server side. So template engines become less productive.

In conclusion, template engines can do the same as react-engine rendering. Maybe not equally easy or equally fast but both tools are qualified. You can also read another great thread on this topic.

like image 89
Francisco Maria Calisto Avatar answered Oct 23 '22 10:10

Francisco Maria Calisto