Rafael Ugolini

Rafael Ugolini is a full stack software developer currently working at Famoco in Brussels, Belgium. He has been working with software development for more than 10 years and lately he is focused on designing web solutions and developing using Python and Javascript. TwitterLinkedInGithub

Introduction

In this article, I’m going to propose an offline-first development using Couchbase as the communication tool between the backend and frontend.

While studying react-redux, something that I really liked is the Async Actions pattern where you have:

After understanding a bit more about Couchbase and Couchbase Sync Gateway, it seems possible to apply this kind of pattern and let Couchbase deal with all the communication of the App and having a fully functional offline app.This pattern provides a very good user experience because you actually render the page based on the current status of the app.

How does it work?

How does it work

Application

The application itself never does any call to the backend, the only responsibility it has is to save states and render them, this way it’s possible to have a fully functional app working offline.

Couchbase Lite/Sync Gateway

Couchbase Lite will be responsible to sync the current state of the App to Couchbase Sync Gateway and retrieve new information once the document is updated in the backend.

Web hooks

Once Couchbase Sync Gateway receives a document that matches the filter, it will do an HTTP call to the Web App with the document it needs to update.

Web App

The Web App can do any kind of update like:

  • Creating a new Task in a Task Queue
  • Retrieving data from an external API
  • Analyze some data/images (eg: OCR)

Hands On

To illustrate a bit how this concept works, I develop a simple example that once you save a specific document, the web application will dispatch a task that will get a random Star Wars character and update the document.

You can download all the code necessary to run an example of this solution.

The stack is composed by:

  • Web App – Flask
  • Task Queue – Celery + RabbitMQ
  • Sync Gateway (walrus mode)

To have it running, simple clone the git repo and run docker-compose:

Data Modeling

In this example, the key action is the primary source of the events, the document must be saved with:

To create a document curl, just use the following command

Sync Gateway

In the configuration of the sync gateway, its registered an event handler that every document change with action == “person_request”, an API call will be made to the web app.

Web App

The web app is a simple Flask API that receives a POST with the information of the document and dispatches a task to Celery.

The task will query a random Star Wars person from https://swapi.co/ and update the document:

 

Client

I developed a simple pouchdb client that will print all the documents from sync gateway to the console. It basically runs this function every time there is a database change.

You can get it from this git repo.

 

This post was brought to you from the Couchbase Community Writing Program

 

Posted by Laura Czajkowski, Developer Community Manager, Couchbase

Laura Czajkowski is the Snr. Developer Community Manager at Couchbase overseeing the community, our incentive programs, Experts and Champions group, meetups, and defining our presence at developer events. She’s also responsible for our monthly developer newsletter and engaging with our community in various forms. Laura has been active in Open Source communities since 2000 and has been involved in various activities, including leading and organising conferences on software testing, documentation, and advocacy. Laura is an Open Source advocate and regular conference speaker who is passionate about getting people – everyone from primary school students to technology professionals – involved in Open Source communities both on IRC and in face-to-face discussions, she is easily found online at @czajkowski on twitter and on freenode.

One Comment

Leave a reply