I built my app in React, React Native and NextJS. Lessons learned.

I developed an offline-first personal Kanban app called Brisqi and launched it for 5 different platforms. I started this project with 2 purposes - to learn React and to build my own offline Kanban app as I always wanted one. I've been working on Brisqi since June last year.

Here's the tech stack I used in case you're curious:

• ReactJS + BlueprintJS + custom styling for desktop app.
• React Native + React Native elements + custom styling for Android/iOS App.
• NextJS + BulmaCSS for the website.
• Firebase Auth for authentication + Firestore for the database.
• Google cloud functions - to handle backend operations.

Electron framework was the obvious choice to make it cross-platform as it has good eco-system around it so I went ahead with it as the underlying framework.

Following are the things I learned and followed specific to React, hope its helpful to you:

• Start with Context API for state management if your app is small, learn how it works. This will get you use-to the reducer pattern in React. Don't worry about the performance in the beginning, React is smart enough and optimizes rendering for you. Optimize for performance or re-renders only if performance becomes an issue. And only move to Redux if you feel your app needs more than a simple state management.

• Learn Immer and how it works. It's a great library to modify state in an immutable way. It makes life so much easier by modifying the "draft" of a state directly without the use of spread operators if the state is made of nested objects. It also comes in handy when implementing reducers with Context API.

• If you move to Redux, use Redux Toolkit. It's a great toolkit made by the same people who made/maintain Redux.

  It states following on their website:
  "Redux Toolkit is our official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and we strongly recommend that you use it."

• This one's subjective I feel. Learn how to use Functional Components and Hooks effectively. All my apps are written using Functional components and Hooks. I personally feel they are easier to read and understand, it certainly helps in avoiding the need of HOC or render props which is a plus for me. If you're starting new projects, start using Functional components and Hooks.

• Optimizing performance in React Native can be a tricky thing to do if you have lot of data to display. If you're using lists, use FlatList instead of iterating over values using map function or similar. Using Redux here can be beneficial to you here so you can avoid unnecessary re-renders. Remember, in Context API, using useContext within a component will re-render that component and child components everytime unless you use React.memo on child components. Check out this Github link to learn more. In Redux, accessing part of state using useSelector hook prevents re-rendering if that part hasn't changed.

• Speaking of unnecessary re-renders, learn how to use React.memo(), useCallback() and useMemo() effectively. Learn them, understand them and use them to avoid re-renders if performance becomes a problem. If you're using Redux, learn about Reselect library to create memoized selector functions. All of this helped me a lot in improving performance of Brisqi mobile app. If you're developing on iOS first, you might not see performance issues immediately, test it on Android. In my personal experience, an app written in React Native performs better on iOS than Android. I go by this rule of thumb, if it's performant on Android, it probably performs equally well or better on iOS, but I still test thoroughly on both platforms.

• Break components into smaller components if possible. Smaller components are re-usable, easier to work with when using React.memo(), easier to manage state in them and code is easier to read and maintain when you come back to it after a couple of months.

• Use third-party utility libraries sparingly. Use them if you think you cannot reproduce that functionality on your own "reliably". For example, I wrote my own Keyboard avoiding/aware view from scratch because - 1) I could simplify it, 2) tweak it according to my needs , 3) adapt it for both Android and iOS platforms and 4) I'd avoid external dependency. I'm not saying that other solutions are not good enough, they might be and some are, but less dependency = more stability because you know the functionality in and out.

• For styling/convention, be consistent with whatever you pick. Airbnb style guide can be a good starting point, however I don't follow everything they say. For example - I disagree with them on the usage of single and double quotes. I use double quotes everywhere to be consistent where as they use both single quotes and double quotes.

• Keep things simple, don't over-complicate your architecture. Add things as you go along. Similarly, don't prematurely optimize for performance, do it when it becomes an issue.

• NextJS is for websites or multi-page apps and React(CRA or manual setup) is for single page apps. I personally don't try to adapt one into another. Makes things easier that way.

• Keep refactoring as you find out better approaches of doing things. It's part of the learning process.

• Keep learning, don't stop and share your knowledge with others.

Links:

• Follow me on Twitter for behind the scenes.
• Brisqi

Comments

[Frederick Ofosu-Darko]

Awesome!!!

[Ash G]

Thanks! :)

[Josias Aurel]

You built such a nice app. Again the offline thing is what like most about it. Most productivity apps today require an internet connection and where it is not much affordable, it becomes an issue. Keep doing the great work.

[Ash G]

Thank you Josias, I'm glad you liked the app.

[durid-ah]

The app looks amazing! Does it support any text formatting in the cards?

[Ash G]

Thank you! Yes it supports markdown for description of cards.

[Aman Ahmed]

Thanks for sharing 😄😄😄😄

[Muhammad Maaz Shakeel]

Awesome

[Chris Ijoyah]

Nice work!

[Ken Choong]

Is all the app in a monorepo??

[Ash G]

Different repo for each.

[Alec]

Great write-up. Thanks!

[weirdguppy1]

Wow! Great concept 👏👏👏👏👏

[Ben Fox]

Great points! I particularly think "Use third-party utility libraries sparingly" is highly under-rated and people turn to packages for functionality they could do in a trivial amount of time, and with functionality better suited to their specific use/edge-cases

[Ash G]

Thanks and I agree.