Which low-code UI framework? Part 1: Openblocks
The first candidate in my low-code UI framework test is Openblocks. This is a new kid on the block (haha), it was announced 10 days ago on OrangePage. I am presenting it first because it’s the first one I seriously tried.
Self-hosting setup: Download docker-compose.yaml, change port, run, done. Two thumbs up.
Registration: enter email and password, done.
One issue: on my first test I entered some random password I forgot. That user is gone now - there seems to be no central user management yet where I could reset the password, delete the user, limit registration etc.
You can make “apps” and “modules”. Modules are parametrized blocks that can be reused in apps. Perfect, just what I want. A set of input (and also output) parameters can be specified which are then bound to
Evaluation
CSV editor
Edit (2.12.22): After learning how to use different frameworks for two weeks, I was able to massively simplify this: the new version (available as a component for import!) works without auxiliary states and is much more elegant. I am still waiting for a runtime configurable or self-schema-updating table component though!
Original:
“REST query” is the generic HTTP query. I have one to GET the csv file and one to PUT the file back on the server.
Parsing and rendering the CSV: I can easily include Papa Parse from a CDN (App settings → Scripts and Styles → JavaScript library) and add a Transformer query or JavaScript block to run it. My JS skills are pretty basic, but Google helps a lot and I don’t have to do complicated things.
State: I can store data in a “Temporary state” object. This is useful since I always upload the entire CSV and not single records.
File upload is easily achieved with an “upload file” button (storing the content as base64),
atob()
, and a PUT query.Data display: This works fine with the Table component. There is a complication: currently, the table columns are fixed at design time. This makes sense for more well-defined cases; but in my case the columns are dependent on the current data. I don’t envision adding columns to my data as a necessary feature, but I need some way to configure columns at runtime or at least for a module, since I want to use the module for multiple CSVs. This is currently not possible, but the devs have signaled interest in providing this in a version soon.
Data editing: The table is currently read-only. However I can add an “edit” button, and link it to a JSON Schema form in a modal. I can make the schema dependent on the data and autogenerate it with a Transformer query. This is great, now we just need this functionality for the table too!
On Submit, I can update the “temporary state” that stores the data, and upload it (or don’t upload it and wait till the user clicks “save”.) This involves some copy acrobatics, but that might be owed to my weak understanding Javascript .
I also tested a feature to edit the raw CSV in text mode. This works more or less. The Textarea editor doesn’t support setting a monospace font or line numbers, which is an optical nuisance but not dramatic. The only complication is deciding how to flow the data: When do I render my edited JSON data to CSV - live or only on demand? When I save/submit the plaintext CSV, should I upload it, and then re-trigger download→parse→display? I had some issues getting the corresponding queries to run in the right order, but it seems to be working now. Also we cannot expect this to do clean roundtripping.
Generic API query
As a second task, I looked at a paginated, server-side sort/filter API query. The target is a Django Dynamic REST endpoint.
Binding #rows, entries-per-page etc to the query data is effortless with
{{ yourdata }}
.Binding query parameters (
page, sort[]
) to table state works immediately and auto-retriggers the query.There are some complications with the filter parameter, which in Django DREST is
filter{colname.operator}=filterstring
. In Openblocks (as in many similar tools), variables or code is inserted with{{mycode}}
. There is currently no way to escape a{
before{{
. I found an ugly workaround first. However, binding the filter to a single parameter doesn’t work anyway if you select multiple conditions. Composing a multicondition filterstring with a Transformer query and adding it to the URL gets rid of the problem anyway.
Summary
The handling is great, the flexibility is great. I particularly like how uncomplicated it is to transform, customize etc.
I am currently missing one feature to make the CSV editor work: runtime configurable table columns. The devs seem to be very responsive and a feature like this could be in the December release. However everybody is fielding their feature requests, so I hope it’s high enough on the prio list.
It is not clear to me yet how to make complex apps with many pages. I will be able to handle most of it with Tabs, and there is a “Navigation” thing to go between many apps, but I am not sure yet how I would interact between those. Potentially I could go via
localStorage
.The project is still quite new. This is a risk factor, as the business model is not yet clear, and I am hesitant to sink time into something that might become non-viable for us later. There seems to be strong initial interest, and we will see how the dev team holds up to the inevitable influx of requests. There are also a few things not yet taken care of, such as managing user accounts and Git integration. I am hopeful though.