Analyze frameworks supporting PWA

[uveta]

Overview

As a technical lead, I should analyze and choose suitable framework for creating PWA

[SternUxi]

PWA prototype

The prototype will include but is not limited to following features:

• Support for video chat room
• Support for localization
• Support for Biometric Authentication

Application stack and Libraries

• The app FE build on the React JS Framework using create-react-app in a Github environment https://reactjs.org
• The current build is using React-Bootstrap (based on Bootstrap) as a UI library https://react-bootstrap.github.io/getting-started/introduction/ and react-suite https://rsuitejs.com
• The app styling documents are primarily written in Sass
• The app is component based
• We can use react-hot-loader to see FE changes https://github.com/gaearon/react-hot-loader/tree/4.12.7

Client/Server & Data support

• Id assignment gets handled by UUID https://www.npmjs.com/package/uuid
• Cross-origin request handling implementation will be handled by Cors package https://www.npmjs.com/package/cors
• API calls and data fetching can be achieved with a combination of Axios or fetch()

Helpful links for React development

https://reactjs.org https://www.reactjstutorials.com/

[thangbm]

These are good investigation and analysis, it is possible to go ahead and implement a PWA basing upon such materials. I would just like to add a few minor things:

• Since NextJs is a great framework which provides useful tools for developing React application, it's beneficial to leverage.
• When it comes to component library, react-bootstrap and rsuitejs are popular and they both provides almost common components needed. I personally like material design, https://mui.com/ is such a big player. Even there is a limitation, the community version provides components for almost use cases.
• Typescript is the most preferred language/sub-type for a lot of projects and teams because it provides excellent tooling. However, the complexity it brings is a concern. I experimented several problems of conflict typescript version, javascript module from various libraries used in consumed project. So I prefer pure JSX which natively supports by React itself.
• Regarding to styling, I find CSS Module and Styled Component (Emotion ) are more interesting.

[SternUxi]

First of all thanks Thang for the valuable input.

• I definitely agree we can investigate these options in particular NextJs.
• Indeed Material design is a good and well-documented UI library but I found it has its drawbacks when creating a custom UI that stands out due to mainly overhead in code and customizability imo. I would suggest we continue using the mentioned UI libraries at least for the prototype phase.
• I think for this phase we can use JSX since Typescript might be resource intensive atm. TS is a win when it comes to development and type checking in larger apps. The downsides might be that not every company we want to target has Typescript developers available.
• Good point, Let's incorporate this library. I also feel that after the prototype is done the implementation methods can be totally up to the development team )

[SternUxi]

I also think the use of NextJs falls in line with my original idea to use a PERN stack if possible. I think code splitting/serving and SEO could be the most usable features from this Library. Additionally, I recommend code splitting to be done during the optimization of the bundle.js

[uveta]

• I see no problem using Next.js, as it can ease up React development and give us some necessary features out of the box
• MUI seems like a better option for prototyping, as it offers a lot of components we can use out of the box. I would suggest trying it out, and if we notice any serious issue that could hinder future development, revert to bootstrap/rsuitejs
• Typescript is a must, as with all IPS projects. There shouldnt be any performance impact, as code is transpiled to Javascript anyways
• We could try Emotion for CSS. Again, if it becomes cumbersome to use, we should revert to Sass/Less

[vuleips]

Hi @linhnk-ips Please create feature branch from https://github.com/ips-ag/demo-progressive-web-app and commit your code there.

C/c @uveta to decide how to move Linh's deployed sample https://ips-pwa.vercel.app/