Three advantages and monitoring methods of single page application

More recently, developers are increasingly understanding the importance of providing users with a pleasant user experience, which is also a key factor in achieving business goals. As a high-end user, the developer itself is increasingly aware of the importance of website performance to enhance the user experience.

Similarly, developers are increasingly aware of the growing trend of users to access websites from the mobile side, where mobile traffic is growing faster than traditional desktop/network communications, and users of mobile devices are accustomed to the performance and speed of native applications.

As a result, developers realize that to meet the needs of a growing number of mobile users, they need to take actions that cater to their users, such as creating products with native application experiences and performance that give users a sense of security and fun to retain.

Single page application: Creating a great Web application experience

Many companies are starting to use an emerging web design paradigm called a single-page app to create a web app experience, which is only part of all products. For some of the questions mentioned above, the SPA can be a perfect solution.

First, a single page app makes it easier to build a Web experience that mimics the experience of on-premises apps more closely within a mobile device browser, without having to build and distribute hybrid on-premises mobile apps. This avoids having to wait for the App store's approval cycle through the App Store, or waiting for customers to download the latest version of the app. Also, it is extremely easy to update the application, as long as the code on the server is updated, which greatly shortens the release cycle, even every day, rather than every two weeks or longer.

Second, a single-page application supports rich interactive parts, which may have many interactive states "menu, Selection, item click, etc.", which can make server-side rendering more difficult.

Thirdly, a single-page app can redraw almost any part of the user interface, without having to commute to the server to get a new presentation content "html". Add more logical code to the client, allowing the app on the browser to handle the separate data and view layers. By reducing access to the server, it is critical for mobile devices. This approach can significantly improve performance/response times because potential network latency is closely related to mobile networks.

However, if you do not have access to the server or change control, it is also a challenge to monitor web front-end performance, that is, to monitor the performance of virtual pages in a single-page application.

Measuring the performance of a standard Web page is very straightforward, each request to a new page triggers a server-side request, and the server changes the control to return the new content to the device on the browser, where the timed API browser on the browser can be used to track the loading, construction, rendering, and display of each piece of content, and record the amount of time it takes.

In the case of a single page application, when sending multiple page content and loading for the first time, the event "click button" on each app page 导航 will trigger the client browser, and it will load a SPA page without any control changes to the server, even if the newly loaded page passes the XML HTTP Request "xhr" is called to load more resources.

Without server-side control changes, it is not easy for traditional Web users to use JavaScript injection monitoring to measure the performance of individual pages in a single page application. To ensure a good user experience with content, it is also important for developers to understand the performance of SPA Web content.

Single page application performance monitoring

Not long ago, OneAPM, the domestic APM industry leader, officially released the new product Browser Insight, which records the page load times, average response time, location, browser type and version, Java error, Ajax error, and DOM of each real user. Processing and page rendering time, and providing an effective one-stop performance assessment, with a comprehensive, real-world understanding of end-user satisfaction, to quickly identify bottlenecks in application performance and help developers address browser-side performance issues.

At the same time, Browser Insight supports automatic detection, as well as a single page application built into the Angular.js framework. It also supports manual API single-page application monitoring under other mainstream frameworks.

With the new Browser Insight real-time user monitoring browser, users can easily monitor the virtual pages of a single page application, as well as HTML, JavaScript, CSS pages, and so on, it will undoubtedly become part of the end-user overall detection program.

With all that said, you'd like to know all the benefits of real user monitoring, such as understanding the UX popularity of different regions, and getting the user's valuable comments and usage habits. With Browser Insight's application performance monitoring capabilities, you can achieve real-time monitoring and end-to-end visibility to help you quickly locate and solve problems.

Original link: 3 Benefits of single-page applications and how to Monitor them

This article is compiled and collated by OneAPM engineers. OneAPM is the emerging leader in China's basic software industry, helping enterprise users and developers easily implement slow program code and real-time crawling of SQL statements. To read more technical articles, please visit the OneAPM official blog.

Three advantages and monitoring methods of single page application