Building a framework less, offline first, cross platform application

This is the first article in my series: "Building a framework less, offline first, cross platform application"

Introduction

When I first started this project, I put those requirements together without thinking about the tech brick I would have to assemble to make this project possible. Also, I had a nice, little, cool use case stuck in my head that would need all the basic stuff a web application generally needs.

The use case

A web application allowing comparing fuel prices for all types of fuel in the user’s country and eventually the price to charge an electric vehicle.

Users will updates the price when they are next to a fuel station. To motivate our users to do it, the web application will rewards points to the user according the action done in the application. For example, +10 points for a daily login, +100 points for updating prices of a fuel station.

Business requirements

So we can already add to our business requirements :

A user management module with basic stuff like sign up, login, forgot password, social logins

A fuel station module with classic stuff like create, read, update, delete (CRUD), get one and get all

As we are leaving in a modern world, some modern stuff like lite and dark theme

And as the world is so small with internet, a multi-language web application

After some times away of this side project because I’ve my day job, a nice spouse and two kids, I came back to this project and was ready to add some technical requirements.

Technical requirements

For my technical requirement, I put a list together without thinking of the available technology for the project. The golden list was :

Offline-first : as I’ve already tried to convince some of my colleagues, offline first mode is the new normal. Today, you cannot let your users down when the connection is… down.

Cross-platform : it is really a cool feature when the user can choose his way to consume our service : in the browser, on the desktop, on the mobile phone as a progressive web application (PWA) or a native web application installable through the mobile stores.

And maybe the most controversial requirement (it has already induced a lot of hate and passion around the morning coffee with my fellow developers), the project should not use any framework. No react, no angular, no vue and the minimal amount of external libraries to avoid too much maintenance.

So with this Christmas List, I was ready to go fishing for the most adapted tech brick for my project. See you in the second part of this series

My first technical choices

The app must first work offline in a web browser. From this initial version, I will publish to other platforms.

So to store the data, I have decided to use PouchDb. This a local implementation of the CouchDb NoSQL database with an integrated replication protocol.

For the front-end, I've decided to use native web component. Concept is not new and React, Vue, etc uses this concept of reusable piece of html and code but with the custom web component, it's already available in all modern browsers.

For my component code behind, I will use typescript to have... types :-)

To bind the data from the db to the component I will use the MVVM pattern through an old library named KnockoutJs. Until now, I have not found something better than this work of art.

For my app to be responsive, I will use Bootstrap 5.3 and it implements theming natively too.

And for the translations of my app strings I will use a custom method to avoid using the huge i18next library that I find to complex for my needs.

And last but not least I will use vitejs as my dev server and bundler with hot reloading so cool!

So this is my idea, see you in my next article for the implémentation.