Front-end Framework

• Status: Active

• Last Modified: 2023-07-14

• Related Issue: #97

• Deciders: Lucas Brown, Aaron Couch, Billy Daly, Sammy Steiner, Daphne Gold, Andy Cochran, Sarah Knopp

Context and Problem Statement

The project will need a web framework to build and manage the frontend. The goal of this ADR is to evaluate and select a frontend web framework.

Decision Drivers

Must Haves

• Active Maintenance: The web framework is actively maintained with patches and minor releases delivered on a regular basis

• Community of Users: The web framework has an active community of open source users and the framework is commonly used for frontend development

• Usability: The framework is relatively easy to learn for developers without prior experience in the particular framework, and there are plenty of resources and training materials available

• Static Site Generation: The framework can generate static pages (HTML/CSS + JavaScript) at build time that can be cached in a CDN for faster loading

• Server-Side Rendering: The framework can render some pages server-side with every request to get up-to-date information when the page loads

• Client-side Rendering: The framework also supports rendering or modifying content client-side based on user interaction with the page (e.g. filtering, searching, etc.)

Nice to Have

• AuthN/AuthZ: The framework supports Authentication & Authorization routing natively or there are established extensions that provide this functionality

• Internationalization (i18n): The framework supports localized routing for different languages natively or there are established extensions that provide this functionality

• Middleware: The framework supports other types of middleware (i.e. functions or scripts that execute before a routing request is complete)

Options Considered

• Create React App

• Next.js

• Vue.js or Nuxt.js

• Svelte or Sveltekit

Decision Outcome

Chosen option: Next.js, because this option meets all our technical requirements, has a large community of support, is easy to learn with good documentation, and is well understood by Nava.

Positive Consequences

• We can use the Nava Next.js template to get started quickly

Negative Consequences

• We'll need to modularize our code so that if Next.js ever loses support, we can swap it out

Pros and Cons of the Options

Create React App

Create React App is a lightweight, client side, single page application framework for React, maintained by Facebook. While it is one of the most widely adopted react frameworks, it seems like Facebook has either stopped or will stop supporting it in the near future, as it has been removed as a suggested framework from the react website.

• Pros

  • One of the earliest react frameworks

  • Widely used and understood

• Cons

  • Either has or will stop receiving support

  • No longer recommended by react

Next.js

Next.js is a popular full stack framework for static and server‑rendered applications built with React and can prerender pages it determines are static automagically alongside server rendered routes to improve performance. It includes styling and routing solutions out of the box, is optimized for performance and SEO, and provides great developer documentation and support. Next.js is maintained by Vercel, a PaaS for frontend hosting company.

• Pros

  • Popular framework with dedicated support

  • Supports static site generation, server side rendering, and client side rendering

  • Easy to learn and use with good documentation

• Cons

  • Very opinionated with routing which can significantly increase code complexity for non standard routes

Vue.js or Nuxt.js

Vue.js is an open-source, JavaScript framework for building progressive user interfaces that also supports server side rendering. It was created by Evan You in 2014 and has grown in popularity, thanks to its reactive data binding and component-based architecture. Nuxt.js provides a set of conventions and tools for building Vue.js applications, including automatic code splitting, prefetching, and caching.

• Pros

  • Static site generation is easy out of the box

  • Code splitting helps reduce package sizes and makes caching easier

• Cons

  • Small community of support

  • Scalability

Svelte or Sveltekit

Svelte is a JavaScript, front-end compiler that turns declarative and easy to understand JavaScript code into highly efficient JavaScript code optimized for the browser. In contrast to the React framework, SvelteKit, uses a "compiler-first" approach to add server side rendering capabilities to Svelte, eliminating the need for a virtual DOM, improving performance, and reducing bundle size.

• Pros

  • Fast, performant, and very scalable

  • Not opinionated and very flexible

• Cons

  • Relatively new framework, with fewer resources and plugins than React

  • Steeper learning curve, since many JavaScript developers are used to React

  • Small community

  • Limited documentation

Links

• React removing create react app from its recommendations