Backend-less: The True Serverless

By Floréal Risso

Github: FlorealRISSO

Email: floreal.risso@proton.me

App: France Termes

Published: October 13, 2024

The Challenge: France Termes

As a developer who loves coding apps and websites, I've often faced a common challenge: the need for a database when building complex applications. This typically leads to implementing a backend, which brings its own set of inconveniences – server costs and cybersecurity concerns, to name a few. In this article, I'll share how I managed to eliminate the need for a traditional backend in the second version of my web app, France Termes.

France Terme (without the 's') is a resource dedicated to terms recommended by the Commission d'enrichissement de la langue française and published in the Journal officiel de la République française. It's particularly useful for civil servants and language enthusiasts.

The challenge arose from the fact that France Terme exports its database as an XML file. While comprehensive, this format is far from ideal for building a responsive web application. We needed a proper database to enable efficient searching, filtering, and better performance.

The Solution: A Three-Step Approach

To tackle this challenge, I developed a three-step approach that allowed me to create a fully functional, serverless web application:

Overall Architecture

Below is a visual representation of the architecture, from parsing the XML file to managing the SQLite database client-side:

graph TD A[France Terme XML Data] -->|Input| B[XML Parser] B -->|Generates SQLite DB| C[SQLite Database] C -->|Push to| D[GitHub Repository] D -->|App Downloads DB| E[France Termes App] E -->|Stores DB| F[Browser localStorage] E -->|Checks for Updates| G[GitHub API] G -->|If SHA Differs| E F -->|Uses DB for Search/Filtering| E

Step 1: XML Parser

The first step was to create a parser that could transform the unwieldy XML file into a more manageable database format. I chose SQLite for this task due to its simplicity and portability. The parser reads the XML file, extracts the relevant information, and populates a SQLite database file.

This parser, which I've open-sourced here, only needs to be run when the original XML data is updated. It's a one-time process that creates a database file ready for use in our web application.

Step 2: GitHub as a Storage Solution

With our database file created, we needed a place to store it that would be accessible to our web application. GitHub provided the perfect solution. By hosting the database file in a GitHub repository, we gain several advantages:

  • Version Control: Track changes to our database over time.
  • Easy Updates: Run the parser and push the new database file to GitHub when the original XML is updated.
  • API Access: Use GitHub's API to check for updates programmatically.

You can find the database repository here.

Step 3: Client-Side Database Management

The final piece of the puzzle is managing the database entirely on the client-side:

  1. On first load, the web application downloads the SQLite database file from GitHub.
  2. The app stores this file in the browser's localStorage for offline use and faster subsequent loads.
  3. On each load, the app checks the GitHub API for the current SHA of the database file. If it's different from the stored version, the app downloads and stores the updated database.
graph TD A[App Starts] --> B{Is DB in localStorage?} B -->|Yes| C{Is DB up to date?} B -->|No| D[Download DB from GitHub] C -->|Yes| E[Use local DB] C -->|No| D D --> F[Store DB in localStorage] F --> E

The Benefits of Going Backend-less

This approach offers several significant advantages:

  • No Server Costs: By eliminating the need for a backend server, we avoid ongoing hosting expenses.
  • Enhanced Security: With no server to attack, we reduce our security attack surface.
  • Offline Functionality: Once the database is downloaded, the app works entirely offline.
  • Simplified Architecture: Without a backend, our architecture is easier to maintain.
  • Scalability: This solution scales effortlessly, as each user essentially hosts their own "backend" in their browser.

Conclusion

By leveraging modern web technologies, we've created a truly serverless solution for France Termes. This approach demonstrates that it's possible to build complex, data-driven applications without the need for a traditional backend.

While this solution may not suit all use cases, especially those requiring real-time data or handling sensitive information, it opens up new possibilities for a wide range of applications.

You can see the final result of this backend-less approach in action at the France Termes webapp.

For those interested in the technical details, you can explore the source code for the original version and the current version on GitHub.