SaFi Bank Space : React Tools and Libraries

Overview

Documenting the choice of technologies for the Back-Office FE application.

For the core we chose to use TypeScript with React.

Area to consider	Proposal	Decision/Notes
React version	latest - 18.x
TS version	latest - 4.6	With the transpiler `strict` option on.
Package manager	yarn or npm	yarn was chosen
Fetching data	React Query or Redux or Apollo	React Query very little boilerplate needed similar usage to Apollo recommended by other VL project Redux - classic, but too much boilerplate, even though partially amended by RTK Apollo - not the best since we won’t use GQL
State management	zustand or standard React hooks	Zustand could be used if the internal state is too complex to be managed by `useState/useContext` (React hooks) only lightweight state management recommended by other VL project Update: it was not used as we don’t need complex state management
Component library	Material UI	good component coverage good customization options recommended by more VL projects (there are figma plugins for designers)
Form validation	React Hook Form or Formik	React Hook Form currently very popular, looks promising, may be worth exploring Latest version supports both controlled and uncontrolled components No dependencies, smaller bundle size and promises better performance Code is mostly less verbose than Formik, but might need more dev work than Formik in complex form constructs Doesn’t support class components as it is all riding with hooks (might not be a problem) Works well with Typescript, Material UI and for testing as well. Find more about Formik vs RHF here
Routing	React Router	standard
I18n	i18next	recommended by more VL projects
Linting & formatting	eslint prettier	using both together with an eslint prettier plugin using VL custom config, other configs inspired by other TS projects in VL and by the ESLint team
Feature flags	Firebase Remote Config or https://launchdarkly.com/	Firebase tools are already used by the Mobile App squad simple, free, includes A/B testing, not real-time LaunchDarkly mentioned by Jakub Ukrop (Unlicensed) more comprehensive, used by large companies, real time, A/B testing is an add-on Verdict: This feature is not needed
Monitoring & Analytics	Firebase Performance Monitoring & Google Analytics or LogRocket or Sentry.io	Firebase tools are already used by the Mobile App squad GA is well regarded and extensive Firebase Crashlytics is not available for web but it seems that GA can be set up to track JS errors too LogRocket can record user actions in the session that lead to an error also provides product/ux analytics (free plan 1,000 sessions/month) Sentry more geared toward performance and error tracking Verdict: not needed in MVP, should be revisited later
Document viewing (pdf, jpg/jpeg, png, doc, docx)	react-file-viewer or react-pdf + other or react-doc-viewer or some web api displayed in an `<iframe>`	react-file-viewer seems to work for `pdf`s and `docx`s, plug and play is supposed to work for images as well the bundle size is larger it doesn’t support `doc` format does not have `TS` module declaration react-pdf works well with a little bit of additional setup highly customizable smallish bundle size only for `pdf`s… ~~react-doc-viewer~~ @cyntler/react-doc-viewer ~~didn’t work for neither of the tested docx or doc files~~ (it uses some external web api so it only woks for files that are accessible from the internet publicly - should not be a problem), it uses react-pdf to preview `pdf`s works with images as well (tested a `png`) the bundle size is small Sebastian Šimků (Unlicensed) confirmed doc and docxs work for him and found a fork of the original project that is active download button should be simple to hide using CSS, in general it is decently customizable iframe simple `iframe` embedding the document directly seems to work great for `pdf`s embedded google doc viewer could be probably used for `doc/docx`s - but do we want to send links to sensitive information to a 3rd party like this? simple `<img />` can be used for images another unexplored option is to do this with the help of some BE service Verdict: react-doc-viewer used
Base64 parsing	`atob` or `Buffer` or auth0/jwt-decode	Context: FE needed to parse base64-encoded JWT token made by okta (to get user ID to be sent into tracing headers, PR) Options Use deprecated `atob` that has issues with Unicode characters (and the token may contain such as it has full user name) Use the `Buffer.from('base64').toString()` available in Node.js - we'd need to polyfill the `Buffer` though as it's not available in browser the polyfill if lots of code, not all we need Use some 3rd party library like https://github.com/auth0/jwt-decode Copy out the logic from the library and use that, would not create a dependency Resources https://developer.mozilla.org/en-US/docs/Glossary/Base64 https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library https://github.com/auth0/jwt-decode#readme https://www.npmjs.com/package/jwt-decode Verdict: The 3rd party library (3.) was used. It’s very small and well regarded.