Templates overview

In this document, we will explain how the Polavi frontend system works.

As you already know, Polavi application follows the Client-side rendering approach. It means the content of the page will be rendered by using Javascript. Server-side only responsible for data fetching and customer authorizes.

Polavi application uses ReactJs to handle the frontend part. We also have Redux to manage application state.

Important

Polavi application uses the es6 module and dynamic import. There is no Webpack and bundled js file. If you are not familiar with es6 and dynamic import I suggest you check this document.

Rendering process

Let's take a look at this diagram

Polavi rendering process

When a request sent from the browser, the server will process and return a JSON data. This JSON data contains some application state and a list of Widget. The browser receives that JSON data and Javascript will start to process it. Bellow are tasks that Polavi template system will do:

  • Read JSON data and get a list of widgets
  • Start to import modules and get the list of ready React components. These components will be stored in Redux state
  • Assign widgets to Area and start rendering

The only difference is at the first time you visit the website, the server will return a piece of HTML code with a bootstrap script inside named app.js. It also returns page data as a JSON variable along with the initial HTML code.

In the next section, we will explain what is Area and widget.