Evaluating frontend frameworks and libraries for setting up Galaxy UI

[d-rita]

For the setup of the React app, the methods in consideration are: 1) building the React app from scratch, 2) using create-react-app 3) using another React app builder, like Next.js

For styling purposes, the frameworks/libraries in consideration are: 1) UI Kits, like Bootstrap 2) Utility-first CSS frameworks, like Tachyons, or Tailwind CSS

cc: @ramyaragupathy, @JorgeMartinezG, @omranlm

[JorgeMartinezG]

Also, something to evaluate is whether using typescript or raw javascript

[d-rita]

Setting up the React App Evaluation: [Draft] 1) Building the React app from scratch: This would take a while to set up. It would involve setting up all the configurations ourselves: development web server, automation scripts, transpiler and bundling, linting, testing and the project structure. It is time consuming to set up and one would need to know all that is needed to set it up.

2) using Facebook's dedicated app building tool, i.e create-react-app: Run a single command to have all the configurations set up for you. It provides a good developer experience. Does client-side rendering but is terrible at SEO. Also, code splitting is not a given.

3) using another React app builder, like Next.js: Open-source, does server side rendering, is good for code splitting and SEO, but it will take a long time to load if the app is heavy

[d-rita]

For styling purposes, the frameworks/libraries in consideration are: [Draft] 1) UI Kits, like Bootstrap:

• Comes with responsive pre-designed components that you get to work with. Customization of designs is hard to do. If you have to override most of the components, it is not the one to use for the project. 

2) Utility-first CSS frameworks, like Tailwind CSS and Tachyons:

• For a library to be considered utility-first, it means it offers you a set of unopinionated building blocks (utility/helper classes) to help you style your components. It is good for creating custom and/or complex designs without having to override unwanted styles.
• When it comes to Tachyons vs Tailwind, they are both pretty similar in functionality and get the job done. The differences are: Tailwind is bigger, more customisable, offers better default fonts and color scale, better documentation. You can also extract reusable utility classes into a CSS component for Tailwind which cannot be done for Tachyons.
• While using a utility-first CSS framework, the team has to be intentional about responsiveness about the site because it is not in-built as in UI-Kits like Bootstrap or Material UI

[d-rita]

Tools/Frameworks used:

• [x] React setup using create-react-app
• [x] CSS using Tailwind
• [x] State management using Redux
• [ ] Linting using ESLint
• [ ] Type checking using Flow

[ramyaragupathy]

We have the boiler plate setup. @d-rita please add any additional comments and close

[ramyaragupathy]

@d-rita what are the next actions that you see here?