[Proposal][UI][HttpServer] FE frontend and backend separation

[hf200012]

Status Quo and Motivation

The current Doris FE module has a simple http server and UI built in. The UI currently has relatively simple functions and is only used for the display of some information.

At present, Doris does not use a frontend and backend separation framework, resulting in a large amount of html and js code embedded in the FE module. When we want to modify some frontend elements, we have to update and upgrade the main code, which is expensive to maintain.

At the same time, the current http server is written by Netty, which has relatively simple functions. If more advanced functions are needed, a large amount of additional code needs to be written. There are already many very mature web frameworks in the industry, and we should use them to simplify our development.

Implementation

Spring is a very mature open source framework in the industry. It is very convenient to build a complete Web application through SpringMVC and Spring Boot. We can also easily use the spring framework to complete a series of functions such as authentication, session, and cookie. At the same time, RESTful standard API can be developed quickly.

The UI code is completely stripped from the FE module. The FE module only provides standard RESTful API. This allows more flexible use of the frontend framework to develop Doris's UI interface. Here I choose to use Vue as the frontend framework, and I will transplant all the functions of the current WebUI to the new framework. This UI may not be the final form of the UI, but I think it is a good start, and more extensions can be made under this framework in the future.

How to submit my code

There are many code changes this time. In order to ensure that the code can be merged without affecting the trunk code, I am going to submit the code according to the following steps.

1. Update the maven dependencies of Frontends

2. Submit the new version of the API document for the interface Review.

3. Submit the UI part, which is completely independent and will not affect the existing functions of the main code. Before the new version of RESTful API is enabled, this part of the code will not take effect.

4. Submit the new RESTFul API code. This part only adds files and does not modify existing functions. And this part of the function will not be enabled, so you can ensure that the trunk code can still run normally.

5. Submit a new version of HttpServer, based on Spring. This part of the code will replace the old http server implementation before, and connect the new version of the RESTful API and the new version of the UI. After the code is merged, all new functions are enabled.

[morningman]

Nice Job!
I followed this feature for a while before, and it looks good to me.

[hffariel]

Nice Job!

Just have had a quick tour of the code, and some tips here could be of help:

• Precompiled css frameworks like sass stylus less might be better for a theme customization?
• Replace some px with rem might be better for the future responsive development?
• Use mixin for all pages that have a paginated table, instead of setting the same code in every page?
• A more detailed eslint configuration file?
• Using jwt or session instead of basic auth as an authentication method?
• Currently lack of multi-languages neither in the frontend nor the backend?
• Make an integration with Swagger to have a better API document maybe?

Actually there is a nice frontend template that we can refer to vue-element-admin

[jeffreys-cat]

Nice Job!

Just have had a quick tour of the code, and some tips here could be of help:

• Precompiled css frameworks like sass stylus less might be better for a theme customization?
• Replace some px with rem might be better for the future responsive development?
• Use mixin for all pages that have a paginated table, instead of setting the same code in every page?
• A more detailed eslint configuration file?
• Using jwt or session instead of basic auth as an authentication method?
• Currently lack of multi-languages neither in the frontend nor the backend?
• Make an integration with Swagger to have a better API document maybe?

Actually there is a nice frontend template that we can refer to vue-element-admin

Thank you for your advice! We were really inspired by it. But I don't understand what is lack of multi-languages means. Why we need multi-languages?

We want to rewrite the frontend page in the future. We want to use React instead of Vue.
Here are some reasons.

• Vue3.x is at release candidate stage. It has a lot of breaking changes from the 2.x, If we use Vue 2.x, We have to rewrite it again in the future which is we don't want to do.

• Vue2.x is not working very well with TypeScript, TypeScript is important and it's future.

Here is the skill set we want to looks like

• React
• TypeScript
• Less
• Eslint
• Webpack
• RxJS
• Antd

In my opinion

• rem or px is ok
• Paginate related code could be a react hooks, like usePaginate.
• OAuth and Swagger are great ideas. I think we can consider whether to add them to our code.

[morningman]

Why we need multi-languages?

multi-languages is required. And default should be English.

[jeffreys-cat]

Why we need multi-languages?

multi-languages is required. And default should be English.

Get it!, Definitely it is required!