Optimisation is all about making things run better and faster. As a tester, you'll often find and highlight code with poor performance for developer fixing. Whether it's reducing the time it takes to load a web page or making your algorithm run more efficiently, optimisation is key. Let's take a closer look at the optimisation of web applications in this topic.
Sessions and client state management on the server
There are several ways to optimise web applications. Each of them solves specific problems and works in a specific way. That's why it's important to know about several methods and what they're used for.
Web servers have an important feature, which is that they do not know where each request comes from (from the same browser or from different browsers). This is because the HTTP protocol "does not allow" to trace the evolution of these states and, accordingly, to maintain an uninterrupted connection with the visitor. Each request is handled separately, without the slightest link to previous ones. This problem can be solved by the browser session – a mechanism for tracking requests from a browser, which can save some variables in the process of transitions between pages of a web product
A session refers to a series of interactions between a user and a website within a specific timeframe. When a user visits a website, a unique session is created on the server to store relevant data like user preferences, authentication details, and temporary information required during the user's visit. The session remains active until the user logs out, closes the browser, or exceeds a certain idle time.
When a user visits a website, a unique session ID is generated by the server and stored as a cookie in the user's browser. This session ID serves as a key to retrieve the user's session data stored on the server. With each subsequent request, the session ID is sent back to the server, allowing the website to maintain the context of the user's interactions.
Imagine you are a tester tasked with ensuring the quality of a restaurant website. As a user visits the website, sessions are created to store their preferences, such as preferred language, dietary restrictions, or even table reservations. Without proper session management, users would need to re-enter this information on every page, leading to a poor user experience. By understanding sessions, testers can verify if the website effectively retains and utilises session data, providing a seamless and personalised experience for users.
Client state management involves tracking and maintaining the state (or data) of a user's interactions with a website. This data can be stored on the server or sometimes on the client-side itself. By implementing effective client-state management techniques, we can store and update relevant data on the client-side, reducing the need for frequent server requests. This can lead to faster loading times, smoother user interactions, and overall improved performance.
It is important to keep a balance between storing data on the server or the client. A client that stores nothing at all is usually called a thin client, and one that stores state and executable code is called a thick client. The balance is important because a very thick client can harm the performance of a web application. On the other hand, if everything is stored on the server, a fast-loading thin client is also of little use, because it will depend on the loading speed of server data and applications.
One popular approach to client-state management is using libraries or frameworks like React or Vue.js. These tools provide efficient ways to handle and update the application's state effortlessly. They enable us to build responsive, dynamic, and interactive user interfaces that adapt to user input and changes in data.
Additionally, client-state management allows us to create offline capabilities for our web applications. Imagine the users being able to access certain functionalities even without an internet connection. By leveraging client-state management techniques, we can cache important data on the client-side, ensuring that our app remains functional and delightful to use, regardless of network availability.
The client state management, on the other hand, is responsible for maintaining the state of the application on the user's browser. This includes the rendering of web pages, executing JavaScript codes, and handling user interactions. Cache comes into play by storing resources from previous sessions, reducing the need for repetitive fetches from the server, hence improving performance and user experience.
Cache
Caching is a clever way to store frequently accessed files, images, or data so that they can be served up swiftly whenever someone requests them. Cache acts like a memory bank, saving time and resources by reducing the need for fetching fresh content from the original source every single time.In other words, cache is a temporary storage location that stores copies of frequently accessed data to expedite future retrieval.
For example, when a visitor arrives at the restaurant's website for the first time, their web browser communicates with the server, eagerly asking for the web page to be served. At this stage, the cache pan is empty. To optimise website performance, HTTP headers provide instructions on how to store certain web elements in the cache. These headers specify the duration for which content can be cached, ensuring it remains fresh and relevant.
As the visitor navigates through the website, every element they encounter – from images to style sheets to JavaScript files – is gently placed into the cache pan. When a returning visitor arrives, the web browser glances at the cache pan to check whether it contains the requested webpage or its components. If the cache pan has what they're looking for, the visitor is joyfully served from the cache kitchen. This means a significantly faster and more pleasant experience. The cache also needs occasional cleaning. When changes to the website's content or updates are made, the cache pans are cleared.
There is a chart informing you on the pros and cons of cache to help you make a better decision during your testing process:
| Pros of cache | Cons of cache |
|---|---|
| Faster retrieval of data allows testers to access frequently used data quickly | Cache invalidation. Cache may still hold outdated versions, leading to incorrect test results |
| Improved test efficiency – testers can reduce the dependency on external resources or databases for every test run | Cache overloading. Cache overload can occur, resulting in limited memory or storage capacity for caching data |
| Enhanced user experience. Cache helps improve user experience by providing faster loading times for frequently accessed web pages | Data consistency. Multiple users access and modify the same data concurrently, maintaining consistency across the cached copies can become challenging |
| Reduced network traffic by storing frequently accessed data locally, cache helps reduce the load on the network infrastructure | Caching side effects. Implementation may have unintended side effects on the behavior of the system being tested |
| Time and cost savings. Efficient caching mechanisms can significantly reduce the need for retrieving data from external sources repeatedly |
Cache configuration complexity. Configuring and managing cache settings can be complex, especially when dealing with large and distributed systems |
By being aware of cache and its impact, the tester can implement techniques to ensure effective testing. Clearing the cache before each test is one approach, ensuring that the website fetches fresh resources from the server. In addition, testers can also utilise browser extensions or developer tools to disable cache temporarily, allowing them to evaluate the website's behavior without interference from cached data.
Cookies
Cookies are small pieces of data that websites store on your computer. They are created by the web server and are sent to your browser, where they are stored. These little bits of information help websites remember certain things about you and your browsing preferences. When you visit a website, your browser establishes a connection with the server, and a session is created.
During your stay at the restaurant, you might interact with the waiter, place orders, and enjoy your meal. On the web, sessions work in a similar way. As you navigate through a website, your browser sends requests to the server, and the server responds accordingly. Each request and response is associated with a unique session ID, which allows the server to remember who you are and what you're doing on the website.
Now, imagine you're at a restaurant and you decide to take a break. You inform the waiter that you'll be back in a few minutes, and you ask them to keep your order warm. On the web, this can be achieved through cookies. When you leave a website and come back later, the server can use cookies to remember your session and the state of your interaction.
As a tester, it's crucial to understand cookies because they can affect the behavior of a website. For example, you're testing a restaurant website that allows users to place orders. If the website doesn't handle cookies and session management correctly, you might encounter issues like lost orders or incorrect order details.
To avoid some mistakes a taster can make while managing cookies, take a look at the following list of the advantages and disadvantages of cookies.
Pros of working with cookies:
- Session management. Cookies enable testers to manage user sessions effectively during web testing. By storing session identifiers, testers can mimic user behavior accurately and thoroughly evaluate session-related functionalities.
- Personalisation testing. With cookies, testers can assess the personalisation features of a website.
- State maintenance. Cookies help maintain the state of a website between different interactions.
- Security testing. Cookies are useful in security testing scenarios.
Cons of the work with cookies:
- Cookie dependency. Although cookies provide valuable testing capabilities, relying too heavily on them can limit the scope and effectiveness of testing.
- Limited browser support. While cookies are widely supported, certain scenarios may involve cross-domain or cross-origin testing. In such cases, browser restrictions can limit the ability to set or access cookies, hindering comprehensive testing.
- Compatibility issues. Cookies may sometimes pose compatibility challenges, especially with respect to different browsers, browser versions, or cookie management settings.
- Privacy concerns. Usage of cookies raises concerns related to user privacy. As a tester, handle cookies responsibly follow privacy regulations to protect user data, and maintain ethical testing practices.
Tokens
Tokens are an invaluable tool for manual web testing, helping you streamline your testing process and find those annoying bugs. Tokens are small pieces of data that are generated by a server and sent to a client (typically a web browser) for identification and authentication purposes. Think of them as digital keys that grant access to restricted areas within a web application.
When a user visits a website, the server assigns a unique session ID to that user. This session ID is usually stored in a token, commonly referred to as a session token or cookie. It acts as a reference point for the server to recognise and remember the user throughout their visit. For example, a user adds a few dishes to their cart and proceeds to the checkout page. In a well-implemented system, the server recognises the user's session token and retrieves their cart items and other relevant information. However, if there is an issue with the session management, the server may fail to retrieve the necessary data, resulting in a frustrating user experience.
When testing, the tester needs to ensure that the correct session token is assigned to the user during authentication and that it is used correctly throughout the interaction with the site. By thoroughly testing the flow of data between the server and client, you will be able to ensure a smooth and error-free user interaction. To know more about the weaknesses and the strong sides of tokens, take a look at the following chart:
| Pros of tokens | Cons of tokens |
|---|---|
| Improved security. Tokens offer a secure way to authenticate users or applications during testing. They provide an extra layer of protection against unauthorised access | Complexity. Token-based authentication can be more complex to implement and manage compared to other methods. It requires handling and validating tokens during testing, which can add complexity to your workflow |
| Granular access control. Tokens allow you to define specific access permissions for different resources or services. This level of granularity can be useful in testing scenarios where fine-grained access control is required | Token management. As a tester, you need to manage tokens effectively. This includes generating tokens, storing them securely, and handling token expiration or revocation. It's an additional task that requires attention to detail |
| Token expiration. Tokens have a limited lifespan, and they need to be refreshed or renewed periodically to maintain access. Keeping track of token expiration and managing the renewal process can be time-consuming | Potential vulnerabilities. If tokens are not properly implemented or secured, they can be vulnerable to attacks like token theft or replay attacks. It's crucial to follow best practices for token security to minimise risks |
Conclusion
As you continue their journey in ensuring the quality of web applications, they should reflect on the interconnected nature of these elements. A holistic approach to testing, encompassing sessions, client state management, cache, cookies, and tokens, will not only uncover potential issues but also contribute to the creation of robust, user-friendly digital experiences. In essence, just as a well-coordinated restaurant ensures a delightful dining experience, meticulous testing ensures a digital space where users can navigate seamlessly and interact effortlessly.