Use a template engine with backend integration instead of a fully-JS UI framework like react or angular?

ppopescu

June 12, 05:23 AM

Let me start by saying that I am a back-end developer. I do have some experience with front-end technologies, but I can't say that I am capable of a full-stack dev session. With that being said, let me rant a bit.

I find all the JS UI frameworks confusing. There are so many of them, each has its own syntax and structure, many components, and doesn't use "traditional" JS/TS, but many placeholders that get "replaced" later on. I reached this conclusion recently when I started a new project (with a new company) and the UI part was done purely in Angular and the UI communicated with the BE using REST calls. The project had less than a month since it started, so I wasn't quite from the start so I could not impose my view :D

This brings me to my next rant. The UI does soo many calls to the backend all the time. The project has a complex data structure so there are many back-and-forth messages from UI to BE to get certain data elements, save them, updated them, and so on. At one point, for one screen, I counted almost 60 calls from the UI just to populate the needed data.

There HAS to be a better way!

Let the backend do the job I've been using template engines for as long as I can remember. It offers so many advantages (at least for me) and I honestly can't see a reason why NOT to use one. FTL templates are well integrated with most BE Java frameworks (cough Spring cough) and it gives BE control over the data that is being shown and returned.

Need to show a certain page, let the BE do all the DB queries, filtering and only display the resulting data in one go. One call to the BE to get everything you need. Also, the risk of accidentally returning MORE data than needed is reduced, since everything that is returned is displayed on-screen (with a few exceptions). Instead, if UI communicates with the BE using REST calls only, you get a complex JSON structure back but maybe only a small portion is needed.

Back-end guys can work on the UI as well when a template engine is used. Let the FE team deal with actual styling, element positioning, design... you know, the actual template. The UI should not do business logic, so there is less work for them. You would say that there is more work for BE, but that is not totally true since a good back-end always validates data received, so we are already doing most of the work anyway.

Next, there is the security component. If only REST calls with JSON IN/OUT is done by the FE, you need to validate the request origin, maybe keep an updated table with all FE servers (in case of a distributed system with many instances), use a JWT maybe... all on top of the normal session-based validations. Just using a CSRF token becomes harder when the FE is so isolated from the BE.

Using a template engine is not perfect either

I am not saying that all the problems go away when using a template engine that is controlled by the BE. There still needs to be a lot of work on the UI side and you can't truly make "intelligent" FE that actually do (well) some of the business logic.

Also, I find it REALLY HARD to find a modern UI framework that works well with this. I've been using Bootstrap, but most others (like Vue, React, Angular and Flutter) don't work with a backend-driven template engine. If you do know any good and modern ones, please let me know cause I am really struggling to find something.

Discussions and Conclusions

So what is your take on this? I know I may get a lot of hate since there are soo many FE devs focused on react/angular, but I am sure that any BE dev feels, at least partially, what I feel.

Do you use or know any UI framework that works well with FTL? I really want to stop using jQuery as much as possible for my JS needs and maybe switch Bootstrap as well with something better.

Select One:
bobbyiliev

June 16, 05:42 AM

Hi there,

Really cool discussion!

I'm not really a frontend dev and that's why I like the TALL stack. As Livewire is a fullstack framework makes it quite easy for solopreneurs to get projects off the ground without much effort.

Select One:
ppopescu

June 16, 07:47 AM

I am a Java Developer, so I don't use JS except for front-end stuff. But my concern/question still stands. What benefits does it offer to have the UI so decoupled from the BE?

Select One:
bobbyiliev

June 16, 11:28 AM

Main benefits that I could think of are:

  • multiple backend services for better scalability
  • micro services architecture
  • decoupled services, no single point of failure, if one backend service goes down, like let’s say the search on your website, the rest of the functionality remains intact
  • the possibility of using different tech stacks for your backed. One microservice could be running Java, another one could be .Net and etc.
Select One:
ppopescu

June 17, 11:12 PM

I agree with your answer. I see the same benefits and it sorta baffles me as to why frameworks like React and Angular that are so decoupled from the BE managed to get so much traction, and the ONLY reason I can find is that it allows people that are not that good at programming to code something working. You don't need to focus on optimizations, no need to learn algorithms. Just "beautify" the JSON received with good graphics (which I do agree that requires skill) and use pre-defined components that you mix-and-match.

Select One:
Write
Preview
Help

Markdown Basics

DevDojo uses Markdown syntax for writing posts, commments, and other content throughout the site. Below you will find some commonly used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet


Bold & Italic

Italics *asterisks*

Bold **double asterisks**


Code

Inline Code `backtick`

Code Block

```
Three back ticks and then enter your code blocks here.
```

Headers

# This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5

Here is an example of how each heading will looks

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5

Quotes

> type a greater than sign and start typing your quote.

Links

You can add links by typing the alt text inside of [] and the link inside of (), like so:

[links](https://devdojo.com)

Images

You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the link inside of (), like so:

![alt text for image](https://cdn.devdojo.com/images/image.png)

Embedding Codepens

You can also embed a codepen pen by writing the following:

{% codepen https://codepen.io/your/pen/url %}

You may also choose the default tabs you wish to show your pen by writing the default-tab like so: (default is result)

{% codepen https://codepen.io/your/pen/url default-tab=result,html %}


Embedding YouTube Videos

You can also embed a YouTube video by writing the following:

{% youtube VIDEO_ID_HERE %}


Embedding Katacoda Terminal

You can also embed a Katacoda Terminal by writing the following:

{% katacoda %}

You may also choose if the terminal should float at the bottom of the page or be embeded in the post itself by writing float like so:

{% katacoda float %}


Embedding Asciinema

You can also embed an Asciinema video by writing the following:

{% asciinema YOUR_VIDEO_ID %}

You may also choose if the video should be added as an alternate rel tag, so it could later on be played with the `asciinema play https://devdojo/post-name` command, with the rel argument like so:

{% asciinema YOUR_VIDEO_ID rel %}


Embedding Gists

You can also embed a Gists by writing the following:

{% gist GIST_ID_HERE %}


Embedding buymeacoffee.com

You can also embed your "Buy me a coffee" button by writing the following:

{% buymeacoffee BUY_ME_A_COFFEE_USERNAME_HERE %}


Embedding CodeSandbox

You can also embed CodeSandbox by writing the following:

{% codesandbox YOUR_CODESANDBOX_EMBED_URL %}

Example:

{% codesandbox https://codesandbox.io/embed/rough-field-mykn0?fontsize=14&hidenavigation=1&theme=dark %}


That's about it. It's time to start crafting your story.

Please login, or signup to write a response.