Client - Side Rendering [Part - 02]

1. Dynamic Form Handling

We have came across many forms, in our workspace, surveys and colleges. Coming to workspace environment, forms include

1.1 What are Dynamic Forms ?

The forms which use Dynamic Layouts based on user choices to collect information are called Dynamic Forms.

Simply we can define, adding and removing the input fields based on the user actions to collect more customized information from the user.

For example, I used to conduct a survey among a different section of people. The data i should collect has fields vary from one section of people to other section of people. One solution is to use different forms, one for each section of the people. This will create misconception among the users and analyzing data from multiple forms will create cumbersome.

And the optimal solution is, to use Dynamic Form Layouts- which has selective input fields based on the previous user choices.

1.2 Dynamic Form vs Static Form

1.3 Form Validation Techniques

So far we discussed about form layouts to collect information from the users. But the most important thing is the form validation i.e., checking whether the form input data is a valid or not. Also, it is not restricted to validation but should include the Data Integrity checks for right data entry in the database.

Here are the common Validation and Integrity Techniques that needs to be performed on both client - side and server - side.

1.3.1 Client - Side Validation Techniques

  • Data Type Checks

  • Range Checks

  • Format Checks

  • Null Value checks

1.3.2 Server - Side Integrity Techniques

  • Input Data Integrity

While choosing client/server for validation checks, we should be compliance with the security policies, User Experience and the Performance.

2. Making HTTP Requests from client

Initially, while we try to access an application, our browser sends default HTTP Request to get the web page which is rendered using DOM.

Then, Why we need a library to make HTTP Requests ? It is not a good practice to send whole data in a default request, because of the security and the performance issues. Moreover, it is optimal to deliver only necessary information to the client each time a HTTP Request raises.

Many Programming Languages provide Library to make HTTP Requests for this purpose. And the JavaScript has 2 Libraries Fetch and Axios for making HTTP Requests.

2.1 Fetch vs Axios