Salesforce Classic vs Lightning: Multiple Page Application and Single Page Application

Hello “Lightning Lovers!” Welcome back to the Salesforce Lightning series. In my earlier article, “Salesforce Lightning Magic Begins” I introduced Salesforce Lightning. In this article, I will go through the difference between Salesforce classic and Salesforce lightning with respect to Multiple Page Application and Single Page Application.

Target Audience

The target audience for this article is someone who wants to learn Salesforce Lightning.

Prerequisite

Basic Knowledge about Salesforce

Topics Covered

1.  What is a Multiple Page Application?
2. Example of Multiple Page Application
3. What is Single Page Application?
4.  Examples of Single Page Application
5. Advantages of Single Page Application
6. Distinguish between Classic and Lightning: Multiple Page Application vs Single Page Application
7. Video explaining the concept

Introduction

Differences between classic and lightning are one of the most asked interview questions so please understand the differences carefully. Instead of just giving you the difference, I will explain the terminology in depth with the help of examples so that it is easier for you to grasp the difference.

Multiple Page Application

In the multiple page application, the first time the page is loaded, then the entire HTML is being loaded. After that every time the user clicks on a button or navigates then the entire page is reloaded. AJAX can be used for refreshing only particular parts of the application, but it is more complicated than creating a Single Page Application.

Confused?

Are you mugging up the above definition? Don’t do that; I will help you with clearing your doubts.

Multiple Page Application Diagram

See the above diagram, and observe what is happening

Client (Browser) makes an initial request to the server. After that, every request made by the client to the browser leads to rendering the entire HTML.

Advantage of Multiple Page Application

1. It is a tried and true model.
2. It naturally splits large applications into small, manageable pages

Disadvantage of Multiple Page Application

If you would have noticed for every single change, the client has to depend on the server. There are a lot of round trips leading to a reduction in performance and quality.

Example of Multiple Page Application

If you are still unclear about the meaning of Multiple Page Application, then this example will make you understand clearly.

I am taking the example of the New York Times. It is a multiple page application. If you click on a link then what you will see is that the entire page is being loaded.

So how can you see if it is Multiple Page application?
1. Go to New York times
2. Right-click and select inspect
3. Go to networks
4. Choose offline mode
5. Click on any link

What offline mode does is, it makes you disconnected from the network. After that, if you click on a link, the browser tries to connect the server. However, it is unable to connect, and therefore the page throws the error.

This looks very ugly and inefficient from a user’s point of view.
Now, what is the solution? The answer to this problem is the Single Page Application.

Single Page Application

First time when the page is loaded that time everything on the page gets loaded, and there is never a need to load the entire page, i.e. logic are executed in the browser instead of making a trip to the server. The server is used only for storing the data.

All your favorite sites applications like Gmail, Facebook, Google Maps, Github are examples of Single Page Application

Are you still not completely comfortable with the concept? Don’t worry I will go in more depth to explain the meaning.

Diagram of Single Page Application 

In Single page application, HTML is loaded only once throughout the lifespan of the application. The server acts as a database for storing the data.
Let’s see with the help of an example

1. Go to CrunchBase
2. Right-click and select inspect
3. Go to networks
4. Choose offline mode
5. Click on any link

What you will observe is unlike, New York Times where the entire page was reloaded and once there was no network, an error occurred. Here you can see the HTML only you cannot see the data as the server is fetching that. Because you are in offline mode so you cannot request the server.

It is definitely a better way of presenting the information. It increases the performance, and there is less load on the server

Multiple page application and Single Page Application: Classic vs. Lightning

Now I will give you the example, which will make the difference crystal clear.

Classic

In Salesforce Classic , when a page is loaded, then the initial HTML is rendered. Now when the user clicks on a tab, link, reload the page etc…then client requests the server, and this results in another HTML. So basically, new HTML is rendered back from the server every time post request is made.

In the below image, you can see I have gone to the offline mode and I see the “No network” when I navigate to a different page in classic mode. As every time user do some action, client makes a request to server.

Lightning

In lightning, all the HTML is loaded at a time of the initial page load. Now to fetch specific data from Salesforce, the client (browser) makes ajax call to the server only to fetch the JSON. There is no loading of HTML again and again.

In the lightning UI , when I  go to the offline mode and client is not able to access the server, still it is coming up with a pop up error message, helping users to fix the issue. This UI surely looks more elegant. The client is dependent on the server just for the UI.

 Video explaining the concept

Conclusion

Developers can build Single Page Application in Visualforce using a frameworks like Angular, React but its tedious process. Also, these frameworks have

their own learning curve. On the other hand, lightning uses Single Page Application to build better faster apps.

Hope you enjoyed this article. For more articles in this series, stay tuned.

Quote of the day : “Nothing worth doing comes easy”

Please click on the like button below and subscribe to our blog with signup with you get the latest update.

References

Single-page vs.multi-page: Which is better