Frontend is the visual aspect of the web that users interact with. It works on any device, operation system or internet connection but, compared to the native world, it has many limitations. Due to frontend’s importance, however, web APIs are constantly evolving, getting stronger and providing more capabilities.
Which brings us to distinguishing the "best" frontend framework available. Over the past decade, we’ve chased the answer many times. Thanks to the progress of the whole web community, there are numerous great alternatives to choose from. Our conclusion is, it doesn’t matter what you choose. Or, rather, that shouldn’t be your focus. What matters is: What will be the output?
Five Focus Points
The quality output of web apps could be defined by five categories, all of which work together to create a truly valuable result. These categories are:
- Great UX/UI
- Stability
- Performance
- Accessibility
- Security
Getting all of this right results in more than meets the eye. It’s crucial to understand the business impact of these focus points and why an investment in making them better means an investment in long-term success.
Great UX/UI
First impressions matter. Perfectly tuned UX/UI helps increase conversions, and automated end-to-end testing with visual regression can guarantee that you are not breaking your UI with new changes.
Stability
Having a crashing app can be detrimental to businesses. Using automated tests and monitoring services to pinpoint any problems before they got into production and cause real damage is always a must.
Performance
Get ahead of your competition by having a web app that loads faster. There are many studies covering how page load time affects conversion rates. Around 2014, mobile usage took over desktop use; since then, we've needed to focus on mobile first. And mobiles are unfortunately prone to be on a slow network.
Accessibility
The web can and should be accessible for anyone, despite any disabilities. Unfortunately, this optimization is not very common, yet it can make a big difference to your business. It’s simple: the more users feel catered to on your website, the more will become loyal customers who spread a good word.
Security
A project’s security used to be considered backend’s responsibility. Today, we know that the number of vulnerabilities present on frontend’s side is just as high — especially with single-page apps, where you often deal with sensitive data. The bare minimum is to run on a secure https protocol, but a strong frontend engineer will find many more ways to ensure security.
Tools and Guidelines
For an even deeper understanding of what the above-mentioned focus points mean, it’s very important to measure them. Because if there is ever an issue, you simply can’t fix what you don’t measure. We recommend utilizing the following tools:
- Lighthouse - great built-in tool in Chrome focusing on performance, accessibility, best practices and security
- Chrome User Experience Report - provides user experience metrics for how real-world Chrome users experience popular destinations on the web
- WebPageTest - runs a speed test from multiple locations from real browsers
- Analytics - always have them in place to understand the behavior of your users better
- WAVE and/or Accessibility Insights for Web - use to evaluate accessibility improvement opportunities
As for guidelines, that is a very broad topic. A solid foundation and strong development codex are the alpha-omega of quality software development. Squeeze the most out of your project setup. Choose the project starter wisely, consider using static type checking, set up code quality tools, enforce good practices, write tests, agree on code versioning flow, set up continuous integration & delivery and consider doing isolated component development.
For a more in-depth understanding, please see strv.gitbook.io/frontend/project-guidelines.
STRV Tip
At STRV, we are fans of React for numerous reasons. Nonetheless, we can easily adapt to Vue, Angular, Svelte or whatever comes next. As mentioned, we believe it’s really not about the road you take, but the output you end up with.
