Javascript App Core Concerns - spinningideas/resources GitHub Wiki

Below are some essential things to keep in mind when building a new project or enhancing the functionality of any large scale application (with references to React based libraries for examples within a given item).

1. Project Folder Structure

There are many ways to structure projects and thus its key to project success to have a very clear guidelines that are intuitive to keep files organized and aid the team in effectively navigating through files as the project grows bigger.

See More

2. State Management

Having a means to manage state at the top level of the application as well as down into pages and components is very important for any large scale application.

Redux

There are many options but Redux is still a good and safe option to consider for large scale projects as the Redux ecosystem is rich enough to cover most of your use-cases. Some libraries:

  • redux-persist : For persisting data locally
  • redux-thunk : For asynchronous operations
  • reselect : Selector library to optimize your store access
  • react-redux : Integration with React
  • redux-toolkit - a lot less verbose and clean

Services

An alternative to use of Flux based Redux libraries can be use of Service pattern where you create simple javascript classes/functions for each service that themselves use some form of HttpClient to make outbound HTTP calls to APIs

Example

3. API Integrations/HTTP Calls

Fetching data from the remote server is one of the most common tasks for dynamic react applications.

or roll your own fetch based HttpClient and something like this:

4. Routing

Routing is an important concern and getting it right out of the gate with clear practices can help greatly as these routing rules are embedded within the application and become difficult to manage if not encapsulated and clear.

React does not provide an official library for routing on the client-side however some projects have floated to the top:

  • react-router-dom

Some helper libraries that go well with your react-router ecosystem:

  • history : Keep track of the history of navigated pages
  • connected-react-router : Helps to connect your route with the redux state.

5. Forms

Forms are essential parts most applications and having clear practices/approaches to handling data within them in a clean way can be tricky.

Some popular libraries:

These libraries will help eliminate the boilerplate logic from your components and provide validation and other styling features.

6. Styling

You can use basic css or for more dynamic css and use of variables you can use a sass setup for styling.

  • node-sass

7. UI Kit/ Library

If you are designing all of your components by hand then it’s not required. But it's not the case most of the time. So you should choose your component library wisely.

These are some of the options you should look out for. Also for some specific use-cases, you can choose other libraries like react-loader-spinner or react-spinner for loading animation. Or for the table react-table can be a powerful option to consider.

8. Documentation

Documentation can be very helpful for larger projects and aid those coming onboard or after development proceeds. The documentation can be for the project itself or can be for components and styles or can be coding standards

Coding Standards

https://github.com/spinningideas/resources/wiki/Coding-Standards#javascript

UI Level

There are many libraries out there but a couple good options are:

9. Localization - Multi-Language Support

If you have needs to support non-english speaking user base then you need to add multi-language support. It’s better to add it at the beginning of your project.

A good option is to use react-i18next and i18next library. Another approach is to use a basic service:

10. Animation Library

Animation done well can make the application more responsive, more enjoyable to use, and add a level of polish that helps it rise above the competition. You can create your own animations or use some of these libraries:

  • react-awesome-reveal
  • react-spring
  • react-transition-group.

11. EsLint and Prettier

For large-scale projects getting all the developers to follow a consistent style of code can be tricky. You can take the help of two awesome libraries eslint and prettier.

  • EsLint - works as a linter and static type checker for your project
  • Prettier - helps to achieve consistent styling and spacing etc.

12. Typescript

There is some debate about use of typescript however with large code bases the benefits can outweigh the negatives and can boost productivity.

If you are working on a javascript project now you can add typescript incrementally to your project as typescript is a superset of javascript.

13. Analytics

It is often really helpful to track usage of an application and see what parts are popular or may be experiencing low use and thus may have usability issues or bugs

  • react-ga - implementation for google analytics for react

14. Testing

Having test coverage of your application can be very helpful for a number of reasons.

You should have a proper testing environment setup and that comes automatically with create-react-app.

Helpful librarie:

  • react-testing-library - For testing react components
  • jest - For javascript unit testing
  • cypress - End to End testing

15. React/Redux Dev Tools

Its really helpful to have development tools that can help you to debug your application faster and make the developer experience that much better.

Some useful tools:

16. Shared Utilities

For any project, we need smaller chunks of shared logic for things like date handling or string formatting and thus can leverage external libraries via adapters in utility library functions. Some external libraries are:

date-fns : Date handling

17. Multiple Environments

Enabling multiple environments allows separation of efforts and QA/deployment of the application. Depending on needs you can have multiple environments such as:

  • development
  • qa
  • staging
  • production

You can maintain separate environment files for that and add .env .env.qa, .env.staging, .env.production etc files for this purpose.

18. Containerization/Docker

Docker offers portability and efficiency and having it setup inside your project can speed development and deployment. The following article is a great overview of how to dockerize your react application efficiently:

How to Dockerize and Reduce Docker File Size

19. Build and Continuous Delivery (CICD/dev-ops)

The critical piece of deploying and testing your application every time you deem necessary should be handled by a continuous delivery setup. Setting up and maintaining process early and well will help the overall success of the project.

https://github.com/spinningideas/resources/wiki/CICD

20. Source Code Protection

At times you do not want anyone to be able to view and make sense of your source code. There are a number of ways to make source code less accessible.

The first is to ensure no source maps are present.

https://izhan-yameen25.medium.com/protect-your-react-js-source-code-in-production-build-e6b408003817