The BMEAN Stack and Offline-First Design

2014-04-11 00:00:00 +0100 by Alex R. Young
This is a guest post written by Daishi Kato.

Many of you would know the MEAN stack, the software stack consisting of MongoDB, Express, AngularJS and Node. However, the BMEAN stack might be new to you. The B stands for Breeze, a data management library with support for client caching.

The current trend in web development is mobile first design. Recently, the "offline first" approach got attention for contributing toward better mobile user experience. Breeze allows you to develop offline web applications easily thanks to support for querying the client's cache.

Breeze provides a sample BMEAN application called Zza, but it's not an offline application. I thought there could be a simpler
but more practical application using social-cms-backend.

Social-cms-backend is Express middleware and it demonstrates how to develop a simple Twitter clone in a matter of minutes. I updated social-cms-backend so that it supports Breeze and you don't have to code the server side logic.

Using the new social-cms-backend and the BMEAN stack, I developed a sample application called notes-app-sample. It's an offline application with HTML5 cache manifest thanks to connect-cache-manifest.

The usage of the application is pretty straightforward: you write text which will be stored in localStorage. Once you login, you can synchronize data with MongoDB on the server. The login is handled by passport, and currently it works with the Facebook strategy.

The source code of notes-app-sample is available here and the working application is available here.

I hope these sample applications give you some ideas about how to use Breeze with your MEAN apps.