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:
Top comments (40)
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.
Thank you Josias, I'm glad you liked the app.
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
Thanks and I agree.
Did you used NextJs as your backend as you only mentioned it for the product website? tq
I used NextJS for the website. For the backend, I use Firebase and Google cloud functions.
oh? will be better if you could explain in the article how you manage your backend o, seems interesting to hear that.
That would be out of scope for this article as this was mostly about React framework. I'll do another blog post soon on offline-first apps design which will give some insights on how I designed mine.
That will be great, thanks for that. Hope to see it soon.
How did you manage the repositories? Are there common parts in the ReactJS, React Native and NextJS repos? Or just separate repos?
Thanks!
They all are in separate repos. Architecture for both React and React Native code is similar but the code is different. Also, React Native has some quirks which I have to careful with, so managing each repo separately was the way to go for me.
NextJS is completely different as I used it for the website only, so its in separate repo.
Thanks for the answer! Are you aware if there could be a way to share some parts of the repos to avoid duplicating code? I imagine that some parts of the code (utilities and helpers, fetch from API...) must be similar on all the repos.
I'm sure there could be code which I could refactor and share between both projects. However, I wanted to get the app out there in the hands of users as soon as possible. The architecture at the moment is similar so its manageable and since I have to be careful on the React Native side, it works for me this way.
Thanks for the answer!
What I liked most is this part -> " I started this project with 2 purposes - to learn React..." 😊👍
Pretty good advice, thanks for the experience sharing :)
Great post! Very informative and I look forward to future posts.
Thanks. I'll doing another one on offline-first apps design soon.
Awesome!!!
Thanks! :)
Wow! Great concept 👏👏👏👏👏
Wow... That app is well designed.