The Shortest CRUD App

The simplest — and most common — kind of web app is the CRUD app: a thin UI on top of a database table allowing the user to create, read, update, and delete records. Amazingly, however, building a CRUD web app is anything but simple. The problem is that a CRUD app actually consists of three separate programs. First is the UI, implemented as a bunch of HTML/CSS/JavaScript on top of one or more frameworks; next is the backend API and business logic (in Java, JavaScript, or whatever); and finally, is the database storage layer, accessed via SQL.

Fortunately, the solution is simple and obvious: build a platform layer that integrates all three pieces into one.

For the last two years I’ve been working on GridWhale, a SaaS development platform that integrates UI, business logic, and storage into a single program. When you write programs in GridWhale, you can access both the UI and storage system natively, and the platform takes care of doing the right thing. You can write a simple CRUD app in 65 lines of code:

using Data
using UI

schema MyRecord [
 [ key=,  id=,     type=,    label=,       ui= ],
 -----------------------------------------------------------------
 [ true,  "id",    String,   "ID",         "readOnly" ],
 [ false, "name",  String,   "Full Name",  "editable" ],
 [ false, "age",   Integer,  "Age",        "editable" ]
]

var tableDS = Data.open("#/MyTable", MyRecord, [ store="postgreSQL" ])

var tableCtrl = UI.create("table")
tableCtrl.data = tableDS

var createCmd = UI.create("button")
createCmd.label = "Create"

function createCmd.onaction () do
 var newRecord = UI.dialog(MyRecord)
 if !newRecord do
  return false
 end

 newRecord.id = String(tableDS.makeID(), "R-000#")
 tableDS.insert(newRecord)
end

var editCmd = UI.create("button")
editCmd.label = "Edit"

function editCmd.onaction () do
 var oldRecord = tableDS.getAt(tableCtrl.selection)
 if !oldRecord do
  return false
 end

 var newRecord = UI.dialog(MyRecord, oldRecord)
 if !newRecord do
  return false
 end

 tableDS.setAt(oldRecord.id, newRecord)
end

var deleteCmd = UI.create("button")
deleteCmd.label = "Delete"

function deleteCmd.onaction () do
 var toDeleteID = tableCtrl.selection
 if !toDeleteID do
  return false
 end

 if !UI.dialog("Are you sure you want to delete this record?") do
  return false
 end

 tableDS.deleteAt(toDeleteID)
end

UI.setCommands([ createCmd, editCmd, deleteCmd ])
UI.show(tableCtrl)
UI.run()

You can try out the program here: CRUD | GridWhale Program

About: I’m George Moromisato, a software engineer building GridWhale, a new cloud-computing platform. Every once in a while, I’ll post an update about its development. Interested in helping out? Write to us: contact@gridwhale.com.