One day, I was building a web app which was meant to serve as a POS system that manages Business and Customers like POS registers in the traditional server-client system way at a SaaS company.
As you've probably already known, the traditional client-server system needs a server and client application separately and integrates them through Web API interface.
That means every action requires a request to a server from a client if you make it without optimization. I know that there is a wide variety of way to reduce those requests using JavaScript, Local Storage, etc...
Especially, when you let users persist or manipulate their data in your database, requesting a server is mandatory. For instance, imagine like I did that you are implementing a POS system such as Self-checkout system with web technologies like HTML, JavaScript (React, Angular, or something similar), and Node.js as a server.
(Why we make web applications over desktop applications: higher distribution ability, mature enough technologies, running on sandbox environment for security thanks to web browser, etc...)
In this article, I would like to introduce you to another way to build those kinds of apps. That is "Local-First software" which can make web apps run fully offline even if you want to CRUD users' data.
I believe that it's easy to understand the concept with a simple real-world problem so I prepared the requirements below.
Here is the simplified requirements for example of a POS system
- Show in-store products with price. Let's say we provide this system with grocery stores so we could show fruits, dairy products, drinks, snacks, and so on.
- Let users add products to a cart before checkout
- Calculate total price, including tax
- Allow users to checkout products
- Display a transaction history of past purchases
I will show you two styles of how you could develop an app satisfying the requirements. One way is the traditional client-server approach and another way is a Local-First approach that is the subject of this article.
Traditional Client-Server Approach🧑💼
First of all, you'd compose front-end code with HTML + JavaScript whatever framework you could use and back-end code with Node.js in the client-server architecture.
To conform the first requirement, We assume the information of products in Relational Database Management System (RDBMS) such as PostgreSQL, MySQL, or something. And there is a back-end server as a kind of wrapper of the database so that you can fetch products with price from the back-end via Web API on load. That's really simple to imagine.
Then next, when a user select some products, you have to put them into a cart calculating total price including tax. You might want to update the database with cart information to preserve the data just in case when the user close the browser. You have some options which are saving the data in Cookie, Local Storage, or Database. Maybe for some security reasons, you might use http-only Cookie or Database over Web APIs over TLS. In this case, you need to access the back-end server to access the cart. As a fallback option, probably, you want to utilize Local Storage as well to save the data when a user could not access the back-end server. Now, it's kind of complicated.
For the fourth requirement, if you saved the cart in Cookie or Database, you need to fetch the data through the back-end server in a checkout page where a user can see the detail of products like price, total price, tax, name, etc... more importantly, you have to let the user can checkout the products and obviously need to submit it to the back-end.
Lastly, History of transactions which stores all transactions the user did before. To show this, you should manage all users' data in database and send them to each user via HTTP requests if they request.
As we saw now, there are many access to a back-end server and database to implement this app. And without internet access, it does not work at all. Even if you decide to use Local Storage or something like offline-proof technologies, that makes your app complicated and you might have to take care of a lot of stuff.
Local-First Approach✨
To overcome these problems, I would like to recommend you this Local-First development.
This is Rocal Website GitHub I'm building to make Local-First development easy and fast. From my experience I was struggling with implement a POS system with the client-server model, I'm making this framework. Even I mentioned a POS system, I believe you can use it for some kinds of web apps.
But how does this make it easy and fast? Let's dive into that with an example.
Like we saw how the Self-checkout is implemented with the traditional client-server model, let's see that with Local-Fast way.
In the previous way, we saved and fetched the product information in RDBMS, however, the Local-First framework provides embedded database that runs in a web browser by itself without relying on any remote server and database.
After the app's data is downloaded, users can access it offline.
On top of that, Rocal enables service worker by default so that a user can see web pages offline since they are cached.
The next requirement is the cart feature, in the traditional model, you needed to put products that a user selected into Cookie, remote database, or Local Storage as fallback. But like I said, the framework has embedded database so you can easily construct some SQL query to save cart info in it. There is no additional setup and configuration to do that. And all data in the embedded database so you can simply query total price including tax with SQL.
For checkout, technically, you can let a user submit it to the embedded database first then while online it will be sent to a remote database or server for charging the customer actually.
Finally, to show history of transactions, you can simply query to get records of checkout from the embedded database.
That's really simple and easy, isn't it?
Demo🎉
Here is a link to the demo which is Self-Checkout app built by Rocal.
Demo link
Try to make your web browser offline making some changes like adding products, checkout, seeing transaction logs, everything works even if you hit the refresh button in your browser.
Rocal with Synchronization🔃
You might wonder how to sync data across devices like PCs, smartphones, and tablets like the traditional approach do in a simple way.
The framework provide synchronization mechanism as well. Across multiple browsers on multiple devices, embedded database is synchronized if you turn on the feature in an app.
On top of the advantages of using the framework, all code produced by it is compiled into WebAssembly so heavy tasks like 3D rendering, running local LLMs, etc. can run efficiently in compared to simple JavaScript.
Need Supports❤️
That being said, Rocal is still under active development, with more features and improvements on the way. You might even come up with better use cases! Try adding Local-First development to your toolbox! you're gonna love it.
I would appreciate it if you could feedback or stars on the repository or get in touch with me about Rocal. Cheers!
Rocal Website GitHub
New UI feature came out! Rocal UI
