If you need a launch checklist as a frontend engineer, this is the talk you should attend. Before launch of an applications one needs to make sure that load testing and performance testing, user tracking, FE error tracking, security testing for FE, along with other such checks are done and dusted. Learn about these 11th hour activities and what tool set can come handy.
This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.
Making a React web application production-ready ensures a superior user experience, maintains the company's reputation by providing a responsive and efficient website, and secures user data. It also helps in reducing the cost and time involved in fixing bugs in a production environment.
Key aspects of a production readiness checklist for React applications include ensuring key functionalities work as expected, optimizing performance, ensuring security measures are in place, checking scalability to handle traffic, and setting up monitoring systems with alert configurations.
User experience is crucial as it directly affects how users interact with the application. A simple and intuitive interface tailored to the target audience can significantly enhance user satisfaction, encourage usage, and prevent frustration and abandonment of the application.
Performance optimization in React applications can be achieved by identifying performance metrics or web vitals like load time and responsiveness, utilizing tools like Lighthouse for testing, and addressing issues such as large images or inefficient code through methods like image compression and code splitting.
For security testing in React applications, tools like SonarQube, ESLint for static code analysis, and Nessus for vulnerability scanning are recommended. These tools help in identifying and mitigating security risks like cross-site scripting and other insecure code practices.
Key journeys involve mapping out critical functionalities such as login processes, purchase completions, or form submissions, and ensuring they work flawlessly. Testing these journeys with automation tools like Cypress and writing regression tests are crucial steps in ensuring the application's readiness for production.
Monitoring involves setting up tools and systems to track application performance and stability, using KPIs like server response time and error rates. Effective monitoring ensures issues are promptly identified and addressed, and alert systems notify the right personnel to prevent disruptions in service.
To manage scalability, it's important to predict user load and use automated tools like Apache Jmeter for load testing. This helps in identifying performance bottlenecks under expected traffic conditions and adjusting the application's capacity to maintain smooth operation during peak times.
Hello, everybody. I'm Aditi, a senior engineer at Mckenzie & Company Vietnam. Today, we will discuss if your React web application is ready for production. User experience, reputation, security, and cost are important factors to consider. In a competitive sector, quick development has advantages but also downsides. A production readiness checklist helps ensure application readiness. The first checklist item is key journeys, which include identifying and testing features using automation tools like Cypress, Jest, and Enzyme.
Hello, everybody. I'm Aditi. I'm a senior engineer at Mckenzie & Company Vietnam, and the topic that we will be talking about today is if your React web application is ready for production.
So, as part of my work, I got a chance to work with JavaScript stack, and I worked with Angular for a year, and I have been working with React since then. So, first, we need to understand that why do we need our application to be production-ready. So, before we dive into dissecting the production readiness checklist, we need to understand what are the reasons we do so.
So, the first thing that comes to mind is user experience. So, user experience can vary based on your target audience. It can be someone old, or someone young, or someone from a different generation, but ultimately, it's all about keeping it simple and intuitive. Also, reputation is involved when we talk about websites, right? So, the company's website is the face of the company. So, we all depend a lot on the application reviews, and as a tech-savvy generation, we need to make sure that the application is responsive. Also, the website experience should not be laggy, otherwise it can lead to a bad reputation, and also discourage future potential users. Security is definitely always a crucial part of a well-tested application, and we should make sure that the user data is never at risk. Cost, well, fixing bugs or issues on a production environment is always more expensive and more time-consuming. So having done that beforehand would actually save us time and money.
Moving on, we are working in a very competitive sector, right, so there is always advantage of delivering something really fast, but there are also downsides of doing very quick development. So that is why we need to use a production readiness checklist to make sure that is our application ready for launch or not. I've also recommended some tools and best practices that you can follow. So before we dive in, let's imagine that we are in a car race and we have a start point, we have a finish line that we need to reach. And the racetrack is actually our production readiness. And the checklist items are the checkpoints.
So the first checklist item would be key journeys. So key journeys by key journeys, I mean that all the features and functionality should be in place and work as expected. First, we need to identify the key journeys. They can be log in processes, they can be completing a purchase or submitting a form. First that we will write test cases. Now, test cases should simulate the entire journey, the entire key journey including the steps and also state the expected outcomes. There are a lot of automation tools these days that we can use to test our key journeys such as Cypress, Jest and Enzyme. I would specifically want to highlight the importance of regression tests. By writing regression tests, we can always eliminate the human error from the testing process and save time on the retesting.
If we find any burning issues, we can address these before the launch. The next checklist item is optimized performance. We need to identify the identification process for the performance metrics, run tests, analyze the report, and identify areas of concern. We can use tools like Lighthouse, webpagetest, loadimpact, and react profiler. Next is security. We need to do a thorough code review, perform static code analysis, and conduct penetration testing. Finally, scalability involves ensuring the application can handle large traffic and a big user base.
If we find any burning issues, we can address these before the launch. Moving on, I think the next checklist item would be optimized performance. Performance means that your application should load well, it should run smoothly, it should meet all acceptance performance standards. We often define NFRs or non-functional requirements in the beginning of our development process. These usually indicate to functionalities such as, which refer to scalability, availability, reliability, security, usability, and all these things, which are not really key features but they impact the overall quality of our application.
We need to make sure that our application is tested and optimized for performance. First, we need to identify the identification process for the performance metrics. These are called web vitals. These can be things like page load time, time to first byte, largest contentful paint, first contentful paint, first input delay, cumulative layout shift. All these are matrices that we can evaluate on. Once we've figured them out, we can go and use a testing tool to track the speed and responsiveness of our application. Some common issues that arise are usually due to large images or large assets that we are using. We might be using some JavaScript libraries which are not required or just generally due to inefficient code. So what we need to do is we need to run these tests. We need to analyze the report and identify areas of concern. We can use tools like Lighthouse, webpagetest, loadimpact and react profiler. These help us find the performance throttlenecks or vulnerabilities around that. So now we need to work on these concern areas. So one thing that we can do to optimize images is use packages like tinypng, imageoptim to compress these images, reduce the size so that they load faster. We can also implement code splitting such as lazyloading, and we can not only just do lazyloading on the routes, but also on the internal components. We can also use something called a webpack bundle analyzer which helps us find the unnecessary JavaScript files and libraries, and we can remove those from our code.
Next would be security. So security, we need to make sure that the SSL certificates are placed, authentication flows are secure, and data is encrypted. So one thing that we can do is, we can do a thorough code review of these flows, specifically authentication authorization, data validation, input handling, output handling, all these have to be reviewed again, right. So another thing we can do is static code analysis, so tools like SonarQube and ESLint come really handy in this, and the help is find any vulnerability around cross-site scripting or any insecure code practice that might be in our code right now. Penetration testing, basically attackers can exploit network infrastructure, they can exploit the authentication mechanism, or how we store our data, or overall application logic, so we need to make sure we go through append testing before we go into production. Advanced security testing, we can do using vulnerability scanning and one of the tools that I can recommend is Nessus.
Moving on, the next checkpoint is scalability. So when I say scalability, I mean that the application should be ready to handle large traffic and a big user base. Identifying scalability requirements basically talks about two things, right.
Comments