Making the right technology choices before starting a new frontend project

Often, customers lack a technical background to comprehend the technology selection process prior to commencing a project. Consequently, the responsibility of making choices falls onto developers. Ideally, code should cater to the business, bridging the gap between developer and business needs.

It’s vital to recognize the significance of selecting the appropriate technology stack. This ensures that future adjustments — be they architectural decisions, business shifts, or team modifications — can be accommodated seamlessly without hindrance.

Bleeding-edge

Is it time for fun and trying something new?

Bleeding-edge technologies refer to the latest and most advanced developments. These technologies are at the forefront of progress, pushing the boundaries of what is currently possible. They are typically experimental, cutting-edge, and not yet widely adopted or standardized.

It’s important to note that while bleeding-edge technologies offer the promise of innovation and breakthroughs, they may not be suitable for every project or organization. Adopting such technologies requires careful consideration of the associated risks, benefits, and the specific needs of the project or business.

The primary risk we face when choosing bleeding-edge technologies is uncertainty about whether they will gain meaningful adoption in the future.

However, bleeding-edge technologies allow developers to advance their overall understanding and become more versatile, framework-agnostic specialists.

Make bets on bleeding-edge technologies only if:

• It’s your personal side project and you want to learn something new.
• The innovation presented in the technology is unique and has no other alternatives.

Some examples of bleeding-edge technologies:

• Svelte
• Solid.js
• Astro

SSR vs CSR

Does the project require SEO optimizations?

One of the initial questions in technology selection can be whether to opt for SSR or CSR. The choice of subsequent framework or toolset greatly depends on this decision.

In almost all cases, internal applications developed for businesses are internal and do not require SEO optimization. In such scenarios, it makes sense to choose technologies considering that the approach will be Client-Side Rendering (CSR).

In my opinion, the only advantage of CSR compared to SSR nowadays is the absence of complexities associated with SSR, such as code splitting and hydration.

You should consider choosing Server-Side Rendering (SSR) when:

• SEO is Important: If search engine optimization (SEO) is a priority for your application, SSR can help ensure that search engines can index your content effectively since fully rendered HTML is sent to the browser.

• Improved Initial Load Times: SSR can lead to faster initial page load times compared to Client-Side Rendering (CSR), as the server sends a fully-rendered page to the client.

• Accessibility: SSR can benefit users with slower connections or devices by providing content more quickly, ensuring better accessibility.

• Social Media Sharing: If your application involves social media sharing, SSR can provide fully-rendered content, improving the appearance of shared links.

• Legacy Browsers: If your user base includes users with older browsers or devices, SSR can provide a more consistent experience by rendering content on the server.

• Content Security: SSR can help mitigate certain security vulnerabilities, as sensitive logic or data can be kept on the server rather than exposed in client-side scripts.

• Single Page Applications (SPAs): If you’re developing a single page application but still need some SEO benefits, SSR can be a suitable approach.

Some examples of SSR frameworks:

• Next.js (React)
• Angular Universal (Angular)
• Nuxt (Vue.js)
• SvelteKit (Svelte)
• Astro

Technical background and level of potential team

What is background of the potential team?

Sometimes, situations arise where projects are prepared for specific teams, and it’s not uncommon that frontend work is undertaken by developers with a backend background. Or it’s expected it will be a junior/middle devs. In such cases, to avoid mistakes in technology selection, it makes sense to recommend frameworks that might be more comprehensive but include ready-made architectural solutions. This approach aims to prevent errors in technology choices.

A good example here is Angular - Angular has demonstrated its maturity and is expected to remain a prominent choice for the foreseeable future.

Mobile application

Is the development of a mobile application planned?

If yes, it’s important to consider technologies in which we can reuse the existing resources of developers.

Examples:

• React Native
• NativeScript

Future of the team

Is team expansion planned?

Choosing a highly unique technology when only a few specialists are knowledgeable about it can be a risky decision. Therefore, it’s important to know the answer to this question beforehand in order to select the technology accordingly. However, of course, it’s always better to choose technologies considering that the team will grow and change.

A good example here is React - It has gained widespread adoption and is widely used by developers and companies.

Design

Is custom design important?

There are situations when a unique design for an internal system is not the most crucial aspect. Such input allows us to choose ready-made components and libraries, enabling us to move faster and avoid bothering the designer at every step.

Examples:

• MUI
• Ant Design
• DaisyUI

Backend

Which technologies does the backend team use?

Sometimes, it’s useful to know the technologies that the backend team is using in order to make appropriate decisions on the frontend.

Example:

• GraphQL

Conclusion

Frontend technologies are evolving rapidly, and among the various options available, it’s becoming increasingly challenging to make technology choices. In this article, we have examined key questions that every frontend developer should ask themselves before embarking on technology selection. When choosing technologies, it’s crucial to detach oneself from personal biases and knowledge, while considering various factors.