We have to accept the fact that to web application evolve fast. Web development is challenging, and the way we do web development has changed. The user experience and capabilities of your legacy apps can be enhanced by leveraging modern UI frameworks like React, Angular or Vue.
The question is how do you transition to a new world of Javascript. In recent years framework such as React, Angular or Vue have become the frameworks of choice. Most of the web app is now a rich client and server-side JavaScript apps. Thanks to the advancement made by the JavaScript community most of these frameworks help you address challenges faced developing web apps that can be made Isometric, Progressive, Universal and Native using the same core frameworks.
Traditionally, JavaScript was the language of the web browser. It used to execute on the user’s machine. It is also called as “client-side” processing. With the advent of Node.JS, the JavaScript has become “server-side” language, which was previously a domain of languages like Java, PHP. This converts JS into a special language, where we convert JS into a language where I can execute the code o client as well as server side.
JavaScript on the client side
JavaScript, as a language, is evolved. From an initial couple of lines of code where the user’s input is validated to current RIA (Rich Internet Application). RIA comes with the following flaws:
- First, you need to access an URL and wait until the app is loaded
- App then request some data in asynchronous mode
- The user must wait until data is loaded and added to the page
You can see that the user has to wait double time to view the initial content of the app. Waiting is a killer for the application. We all have an experience that in the advent of HTML5 and CSS3, many companies change their strategy from developing the native app to a hybrid one. These companies realized that their users don’t like it as they have to wait for a while until getting some content.
JavaScript on the server side:
In JavaScript, it is extremely easier to create asynchronous event-driven applications. On the server-side JavaScript works as follows:
- A client makes a request
- The server processes incoming data, computes or queries any needed data values, constructs HTML page as a response, and returns to the client
- The client interprets the return HTML page
In this approach, the server application needs to wait until the client’s action. However, the great aspect is that it returns with the page content. This speed up the application.
Universal Web Application
To call application Universal Web Application, we use the same code base. It executes on the client and the server side.
In earlier days, when you want to render the information on the client, then web server Tomcat has to use Java + JSP that returns the initial HTML code which embeds JavaScript which executes on the client.
Now the approach is to write a code which first executes on the server fills up the HTML components. The HTML page displays information on the server. The same code executes on the client when it needs additional information.
In short, the workflow is as follows:
- Request: The browser requests the server. The server returns the HTML page with maximum content (g., Index.html).
- Process and Render: The server intercepts the request for the client. It retrieves the pages, gets the data that needs to render on the page.
- Response: the server returns the HTML page to the client which is built in the earlier stage by the server.
- Interaction: The client has the required code. It handles the additional request by a client which is triggered by User’s interaction on the page. If require it asks for additional content in asynchronous mode. Let us keep in mind that now the web page is not required to load again.
Summary
Write a Universal Web application. It can give a better response and less traffic on the network. React helps you to build a Universal Web application.
