What is a single page app
The so-called single page application refers to the integration of multiple functions on a page, or even the whole system has only one page, and all the business functions are its sub-modules, which are connected to the main interface in a specific way. It takes AJAX technology to the next level, taking AJAX’s no-refresh mechanism to the extreme, and thus creating a smooth user experience comparable to that of a desktop application.
Advantages of a single page application
The operation experience is smooth and comparable to that of local apps. There is no frequent “interruption” during switching. Because the interface framework is local, and the communication with the server is basically only data, it is easy to migrate. It can be migrated into desktop products or various Hybrid mobile products with relatively small cost.
Weaknesses of single-page applications
- Not friendly to search engines
- Development is relatively difficult
How to maximize the operating experience of a single page application?
– Routing planning – Use of push – disconnection reconnection mechanism – operation compensation mechanism – local cache – hot update – good memory management – server pre-rendering
1. What is a route?
Routes can be regarded as the mapping between urls and interface states.
It is important to note that, ideally, urls and interface states should correspond exactly. For example, an interface opened twice with the same URL should have exactly the same state for the same user. For the same interface, after the same operation, the URL should accurately reflect the current state.
However, we need to note that it will be a very tedious thing if the fragmentation operation needs to be synchronized with the route, so we should make a choice in the design process, and abandon the synchronization of the state and the route that is too fragmented.
2. Server push
Push means that, in some cases, even when the page is still open, the server actively sends a message to make the interface manifest. Usually we use technologies like WebSocket to achieve this experience.
From time to time, we might see some scenarios where push is used on a page, most commonly instant messaging.
For example, if we add a chat window to the app and someone else sends a message, it can be displayed on our side in real time.
For the ultimate user experience, we can push business changes throughout the application, such as:
When I’m looking at a task and someone changes it, I should be able to automatically reflect his changes without doing anything.
If push management is implemented for all changes across the business, the experience will be greatly enhanced, but the implementation difficulty and code complexity will increase dramatically.
3. Disconnection and reconnection mechanism
How do we judge the technical level of a single page product? This can be done in this way:
Leave it open for several days without the need to “refresh” the operation to solve some common problems.
Why is this a technical thing? Because to do it well, you need to do these things well:
- Disconnection and reconnection mechanism
- Good memory management
- Automatic version upgrade
Because the popularity of mobile office, cause we may need to face in some cases, for example, switching network, such as computer dormancy open again, when connected to the Internet again, you need to link, and, in the process of business change to “make up a missed lesson, and then one by one, is applied to the interface, the interface to adjust to a new state.
4. Operate the compensation mechanism
What is operational compensation?
Logically speaking, when we create a task on the interface, the new task should not be displayed immediately, but should wait until the server confirms success before adding it to the interface. But most likely our network is not good and users will have to wait a long time for this step. This is not good from a user experience perspective, so we can put the interface on first, and then backfill the memory data with something like a unique identifier after the successful creation message comes back.
Single-step operation compensation is not too difficult, if there is one more step, is very trouble, an extreme example, the user adds a task, the service side hasn’t returned, he immediately under the task to create child tasks, but not at this time of subtasks parent task id, if you want to give this step also do compensation operation, will be in trouble. Even after a few steps in a row, it can be very complicated to find that the previous operation failed.
5. Use of local cache
As mentioned above, if there is a failure in the multi-step operation, the situation will be awkward. For example, when you fill in a lot of things, the network is broken when you submit, it will be a headache. At this time, users will expect the data to be saved and try again after the network is restored.
We can use a local cache to store this data temporarily. If this layer is taken to the extreme, combined with a well-designed action compensation mechanism, we can even allow users to use our application offline, caching all of these changes and synchronizing them back in batches when they are connected to the Internet.
6. Hot update
As mentioned earlier, users could leave our application open for a long time and never refresh it. Under normal circumstances, business changes should be pushed in full, and the interface feedback should always be up to date and current. But we need to consider another question, what about system upgrades?
Of course we can push a notification: this system has been upgraded, please click refresh. But can it do better? It is possible to achieve this by using hot updates, which are designed to maximize modularity and change management of the code, with each updated code module being pushed in and applied as a patch to the current system. This mechanism requires a high standard from the development team.
7. Good memory management
In order for users to be able to keep the app open for long periods of time, they also need to manage the memory well.
Data changes, routing switches, and component creation and destruction all result in memory changes. Perfect memory control is almost impossible, if you want to pursue this aspect of the extreme, the impact on the development process will be very large, in many cases is not cost-effective, so, you can do some optimization, to solve the more conventional problems, do not need to destroy things in time.
8. Server prerendering
As a single page application, the classic pattern is a complete separation of the front and back ends, with the front end loading interface and logic, the back end responding to data, and the front end “generating” changes based on that data.
Notice that we have a “generate” process here, which is also commonly referred to as “render”. The mechanism is to generate the corresponding interface based on the data. If the interface is generated on the browser side, first, load the interface template or logic, need a request, and then, when the section is ready, need to request the data, and then another network request. Network requests are usually slower than “generating the interface” and this time is likely to be erratic, which may delay the user’s first view of the interface.
While single-page applications are incompatible with server rendering, we can optimize some of this by, for example, substituting some pages directly from the server into the data generation. There are several development frameworks that attempt to address this issue at another level, by extracting commonalities between client and server rendering, and using appropriate abstractions to describe both mechanisms so that the rendering mechanism can be switched with configuration changes alone.
summary
We mentioned these ways to improve the single-page app experience, which, if implemented, would be very enjoyable for users, but need to weigh the gap between ideal and reality calmly:
- What kind of thing am I going to make?
- How strong is my development team?
- What kind of historical burden do we have?
- Is it worth it?
- Can you do it?
All of the experience enhancement methods mentioned in this article need to be balanced. The more you do it, the stronger the technical control and the higher the probability of error.
There is a famous expression:
E = MC^2
We can interpret this differently:
Errors = (More Code) ^ 2
Copy the code