In this document, we will explain how the Polavi frontend system works.
Polavi application uses ReactJs to handle the frontend part. We also have Redux to manage application state.
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.
Let's take a look at this diagram
- 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.