Frontend libs

[bhoomij]

As per finalised tech stack frontend will be "React using JavaScript (not TypeScript) and CSS (not Sass)"

Would like to discuss on which packages/libraries are best suited with react echo system ?

Will use any boilerplate ?

1. create-react-app
2. https://github.com/react-boilerplate/react-boilerplate

These two almost provides readymade support for transpiring and bundling and makes app production ready from day one.

Other useful packages I would like to add:

1. Reselect : Provides memoization and avoids wasted renders. More
2. Redux: App state management
3. Redux-saga : For asynchronous call, uses generators and provides some good features like take_latest. Check Redux-saga and redux-thunk-vs-redux-saga
4. React-intl: Refer Internationalize the Chapter Application #21

Would like to hear community thoughts and experience with this and any other useful packages, we can include in frontend tech stack

[Utkarshbhimte]

Given the requirement, I think a server side rendered app would be more beneficial for SEO

I propose using nextjs instead of cra

[Zeko369]

@Utkarshbhimte We already said that Next will be used, so create next app?

[Zeko369]

Also IMO if we use Redux we should use ReduxThunk because it's easier to get into for people who havent working with it in the past, and is generally more widely used lib

[pabloHoc]

Are we going to use some UI library? If so, I'd like to propose Chakra-UI, it's a really simple and composable component library crafted with accesibility in mind and uses emotion and Styled System. It's also OS.

[aeganaden]

For UI Library, i would like to suggest React Ant Design. It has a rich set of components ready to be used, and unlike other component library its UI is sorta new to other users.

[isubasinghe]

I think redux is a must for any non trivial application with state. It just makes doing React state management much much easier.

Thoughts on using formik & yup for form validation? Both are well documented / supported libraries. It helps immensely to standardize validation as well.

For api calls, I would suggest axios.

[MirzaChilman]

We already agreed to use next.js you can see the discuss here

@isubasinghe as for state management, we still haven't figured it out whether to use it or not, as we are still blind here

[sinharaksh1t]

If we do consider using Redux for application state management, then it's worth giving redux-query a read. It's a seamless way to manage the network state into your Redux store.
Also, any API calls made through redux-query goes into your Redux state along with the network state of the call. Rendering it pretty useful when showing different UI feedbacks if the API call were to fail, is in-flight or succeed with delay.

[MirzaChilman]

Never heard of redux-query, anyway probably we should list what kind of libs that we are going to use, at least we can discuss the pros and cons of each libs

[Wizyma]

Redux-saga is really hard to grasp, specially for people not that experienced in JavaScript...
There is others tools to use.
In my company we use it for our main app, it works well no doubt, but only few can really maintain it and understand it.
When it comes to async calls, it is way overkill to use redux saga if it isnt for critical reasons.

[Wizyma]

@bhoomij for i18n there is i18next too.
It is mature, a lot of support and a gold documentation.

[keeth]

I've had a lot of success with Material UI, however that would mean ditching CSS for JSS.

[Wizyma]

and for others libs:
styled-components for styling
react-redux for global state management no doubt
material-ui as an UI lib ? customizable and quite powerfull
testing-lib for testing components
ramda for utils and FP