Software is complex and building software takes time and effort. But building the offline-first app is taking more time than you thought. I used to build app. One of my big interest is building an app that sync. Which is you can use while you’re offline, all data will be sync in background naturally when you connect to internet. You can use app without worry about unstable network. Many top iOS, Android apps are offline-first apps. It would be great if website supports offline-first too. Many technologies today support us to build but nowhere guides you how to build an offline-first software end-to end that we can naturally use in Web, iOS app, Android app. In this series, I tried to tell you a way to build your offline-first app.
To me, software is complex so it should be explicit. Even we will use many technologies but I will tried to make it clear and easy to learn. We will use React/Redux on front-end, ReactNative on mobile, Elixir on back-end, CouchDB/PouchDB for offline database sync. You don’t need to know all these frameworks or languages to read it because we will build software with DDD in mind. Which is component-base that can compose and replace easily. So you can replace React/Redux with your favorited UI frameworks: Angular, Ember, ….. ReactNative with your native stack: iOS, Android. Elixir for API with your favorited languages like: Ruby, Python, Scala, Clojure, Haskell…, CouchDB/PouchDB with Firebase or your back-end that support to sync.
The big picture.
oops! No picture here.
- Front-end: Our frontend will build completely with React/Redux. Where React for building UI, all data will be from Redux. When data in Redux change, the React UI will change automatically. React is only taking to Redux.
- Client database: We use CouchDB/PouchDB to handle offline sync database through platforms. PouchDB is local client database, CouchDB is remote database.
- Talking to the caches: All data in Redux store is from local PouchDB database. So we need to sync our Redux store with PouchDB database. Then if there are any change from PouchDB database, they will sync to Redux and React UI will be changed.
- Server: We also need a server built with Elixir/Phoenix to handle login/logout, authentication parts and other none offline-first features like: subscriptions, upgrade account, ….
As I said above, you don’t need to know all these frameworks, each blog is self-contained. I cover from basic to software that works. Here we go.
Table of contents:
Part 1: World of opinions.
Chapter 1: React
Tutorial 2: Build more complexed UI with React
Chapter 2: Redux
Tutorial 3: Redux distilled
Tutorial 4: RxJS-Meet your first side-effect
Chapter 3: PouchDB
Tutorial 5: Where to put PouchDB in react-redux pool
Tutorial 6: Finish a part of big picture
Part 2: Your own sever
Tutorial 7: API for signing up
Tutorial 8: API for logging in
Tutorial 9: Sync PouchDB and CouchDB
Part 3: Production ready
Tutorial 10: Cloudant for the win
Tutorial 11: Phoenix on Heroku
Tutorial 12: Our front-end on Firebase
Tutorial 13: Do it by yourself
Appendix
Tutorial 14: Config redux.
Tutorial 15: Config Redux-Observable.
Closing thoughts
*Table of contents may change while writing.
