Using React and Preact to Build My First Offline First Apps
Creating Progressive Web Apps with PouchDB and Apache CouchDB
What is Offline First?
Losing connectivity — we’ve all been there. Whether it happens while we’re attempting to load up a playlist in the gym, watch a video on the road, or play a mobile game inside a building, the effect it has on the user experience is usually the same: an error message, or worse yet, an infinitely spinning progress indicator that never gets us anywhere. Occasionally this kind of an interruption is understandable. I know that in order to stream audio or video I’ll need a connection, and I can see why internet connectivity is mandatory for an online game. Sometimes, though, it just seems like poor planning, or a flaw in the way the app was designed.
Enter the Offline First way of thinking about app development.
The shift in thinking requires a slight mental reboot, similar to the shift towards Mobile First in web development. Mobile First was the idea that an app should be designed for a small screen first (where most users will see it) and then progressive enhancements are added as a user’s screen gets larger and larger.
To get our minds in an Offline First state, we need to assume that a user will not have connectivity, and design the experience around that. Then, if we detect that a user connects to the internet, we can add features that take advantage of that and prepare us for the next time we go offline.
We’re seeing this even with streaming services like YouTube, Spotify, and Netflix, all of which now offer some form of download option to prepare for a lack of access to the internet.
The benefits of Offline First
When you make the switch to Offline First thinking for your app, there are some natural benefits that come along with it. First and foremost, you get a seamless user experience that isn’t destroyed when the user loses their connection. Ideally, your app can function using local data stored in a PouchDB database, for example. When connectivity is restored, your app can sync with a remote CouchDB or similar remote database, updating both databases with the most current data. This way, if the connection is lost again, the user continues to use your app with no interruption.
A smooth and consistent user experience isn’t all you get when you adopt the Offline First way of thinking; you also get better performance! Instead of calling to a remote database every time your app needs data, it always pulls from the local database. This acts almost as a type of cache, giving you fast access to your data and decreasing lag time across your application. Since the only time your data needs to travel across the internet is when you sync, your users will spend far less time looking at spinning rings and loading screens.
What are Progressive Web Apps?
A Progressive Web App (PWA) combines the best features from traditional websites and native applications. Unlike hybrid apps, which are usually written in a combination of HTML and native code and downloaded via an app store, PWAs are run in the browser and therefore aren’t dependent on any particular platform. There are some additional assumptions that come along with the PWA label, but mostly they are app-like websites, built with web technologies, that should be responsive and work in any browser.
Applying the Offline First approach
This summer, as part of an internship on the IBM Watson Data Platform team, I set about creating a simple Shopping List PWA in two different web frameworks — React and the similar but more lightweight Preact. Both were very intuitive and easy to work with after getting familiar with the APIs, and adding in the Offline First capabilities was a breeze. For this app, that meant setting up a local PouchDB database that would sync with a remote CouchDB database (in this case, Cloudant) when a connection was available.
To get started building my Offline First shopping list, I chose to use the React Javascript library. It’s a popular tool for building UIs — for good reason! By leveraging both reusable components and a JSX, a preprocessor step that adds XML-like syntax to Javascript, it’s easy to get interactive web apps up and running quickly. Using the create-react-app tool even makes the setup a breeze. One shell command is all it takes to get a boilerplate app running on a development server on your machine. After removing the placeholder code, I began adding in the necessary components for our shopping list. The component doing most of the work is the ListContainer. It manages the state of our app, which includes things like the contents of the text input field and the list items, as well as handling the API calls. To learn more about React, check out the official documentation.
Developers familiar with React may be surprised to learn (like I was) that there’s a lightweight alternative out there called Preact that offers many of the same benefits in a much smaller package. Using the library preact-compat to smooth out some of the API differences I was able to get an app very similar to the one I had created with React in about half the size! Preact includes some of the great things about React and ES6 like class components, functional components and virtual DOM diffing, but leaves out things some may find unnecessary, like PropTypes and synthetic events.
Beyond the sample apps
In building these shopping list apps I learned about a new way to build PWAs, using an Offline First approach. No longer will users of my apps be limited to areas with a strong internet connection! Using PouchDB and a remote database, apps can be built to run on the data they have available and be updated with new data when a connection is available. In a world where we have internet connectivity almost everywhere, it can be easy to take it for granted. This assumption makes those times when an app or service doesn’t work even more frustrating. Thankfully, much as we did with the advent of small screen sizes, developers seem to have found a new way to approach these problems that produces better applications for the world we live in.
Take a closer look at the Shopping List PWA, built with React or Preact.
