Ambrosius Topor

Notiz — 2024-01-02

Electronize Web Applications

Using Electron to speed up development of web applications has been an approach I came across by luck recentlyFn. This seems to be a nice strategy to iterate fast when developing a prototype or trying things out; generally, if there are many moving parts and you don't have a clear path of the evolvement of your application.

It's important to keep things separated, meaning to be able to transfer the implementation back to a web application, having the Electron specific parts clearly separated.

Using JSON-RPC, it's rather easy to do so.

Basically, besides the packages there is not much to add; the source folder has some elements added:

application/
  build-menu.js
electron-main.js
storage.ts

Example: Create Note

For development (when using HTTP), I'm using simple fake implementations for the JSON-RPC methods.

// requests/requests-fake/create_note.js

function create_note(params) {
    return function () {
        const newNote = {
            id: id(),
            creation_time: new Date().toISOString(),
            ...params.note,
        };

        return newBlock;
    };
}

Using the file strategy, the following function is being used instead:

// requests/requests-file/create_note.js

function create_note(params) {
    return async function () {
        const newNote = {
            id: id(),
            creation_time: new Date().toISOString(),
            ...params.note,
        };

        return await db.table("notes").insert(newNote);
    };
}

To streamline the code (remove boilerplate), I've added a database-like abstraction layer (that db object) on top of the storage services, avoiding the need to first load the data, append the record and persist it again (in case of the insert method),
or -- in case of the patch method -- first load the data, find the row, patch it and persist it again.

Invokation of methods

Layout of the requests folder:

requests/
  requests-fake/        // Fake methods
    create_note.js
  requests-file/        // File strategy methods
    create_note.js
  rpc-request-fake.js   // Fake strategy
  rpc-request-file.js   // File strategy
  rpc-request-http.js   // HTTP strategy
  rpc-request.js        // Adapter

The file names correspond to the JSON-RPC methods, making it a no-brainer to locate them.
Methods are invoked the same way, no matter what strategy (Fake, File or HTTP) is being used:

const result = await rpcRequest("create_note", params);

For the fake and file strategies, this will call the functions defined in those adaptors. For the HTTP strategy, this will make an HTTP request to the backend.

References

Comments

There are no comments yet.

Thanks for your contribution!
Your comment will be visible once it has been approved.

An error occured—please try again.

Add Comment