How it Works

Blog Single

WebWidgets.io (WWIO) is a low-code, open-core platform for building lightweight web applications. These apps depend only on industry standard technologies such as JavaScript, HTML, and SQLite. The platform reduces the difficulty of development by moving all logic into front-end JS code.

The key insight underlying the WWIO architecture is that for many applications, data volumes are quite small compared to internet speeds and the size of computer memory. That means we can drastically simplify the data loading process by simply sending all of the records in the DB to the browser (WWIO does provide more targeted data load techniques, but "just send it all" is the core philosophy).

When a WWIO page loads, the server transforms the underlying SQLite DBs into JSON and ships the result to the browser. Once the data is received, JS code in the browser can perform any kind of filtering, aggregation, or joining that is necessary, and display the result to the user. The service also provides a simple set of sync operations that allows the app to persist any updates or creations that are performed by the user. These sync operations run in the background, so they are essentially instantaneous from the user's perspective. Thus, WWIO apps can take some time on page load, depending on the size of the underlying data, but are extremely fast afterwards.

In addition to the data load and update operations, the service performs a code generation process that allows the SQLite records to be accessed and updated with a simple, intuitive, and error-resistant way. The autogenerated code is created by inspecting the SQLite schema and creating objects and methods based on a name-conventional mapping from column names to object methods. For example, if the SQLite table has a column is_active, the generated object has methods called getIsActive and setIsActive. Here is a typical JavaScript function that demonstrates this API:

    function markActive(itemid)
    {
      const myitem = W.lookupItem("my_table", itemid);
      if(confirm("Are you sure you want to activate this record?"))
      {
         myitem.setIsActive(1);
         myitem.syncItem();
         redisplay();
      }
    }

When the redisplay method is called, it will show the given item as active (whatever that may mean in the context of the specific app). Since the update has been persisted by the syncItem command, the user will see the exact same information if they reload the page.

WWIO apps are built by writing .wisp files, which are just .html files with a special type of tag in the head section. When the service sees these tags, it loads the data from the desired SQLite DBs and inserts it into the page. The wisp tag has a variety of options that allow the developer to control how the data is loaded, see WISP File Format in our tech docs. To upload your wisp and other assets to our service, we provide a few simple Python scripts that can be downloaded from our GitHub repo. You will also need to download a config file that contains an access token, and update this file to point to the directories on your local machine that you use for development.

WWIO developers have the option of uploading and downloading their SQLite DBs for offline inspection, development, and testing. The code generation process runs whenever the DB definition is changed, so you can add a new column to a table, upload the DB to the server, and immediately begin putting new data in the column. There are some conventions that must be followed when defining WWIO DBs, but otherwise you have complete control over your app's schema. The hosted version of the service also has a convenient Data Designer tool that allows you to add and remove columns directly.

Unlike most low-code platforms, WWIO apps do not require any extensive proprietary tools or technologies. If you or your engineers know basic JavaScript and HTML coding, you will be able to get started with WWIO immediately. If you are a beginner, you can rest assured that, by building WWIO apps, you are learning skills that are highly relevant to the rest of the tech industry, not an obscure teaching language that no one uses in the real world. The WWIO platform protects you from lock-in by using standard tech and providing an open-core offering.