AppSPHERE by Programmati.ca

An entire app declared in one page of XML

AppSPHERE is a client-side engine for the AppSPEC language. You describe the screens, connect them by label and bind components to data, and the engine renders the application in any of 31 themes.

Try it live Read the five-step guide

Everything runs in your browser. Each demo is sandboxed and reads fixed demo data; anything you add is kept on your device.

field-notes.appspec

Running in the sandbox

Edit the spec on the left and the app updates. Open a note to see its likes and comments, which attach to that note without any wiring.

Three ideas

Everything is declared, labelled or bound

01Declare it

Each STATE is a screen. Layout comes from implied containment, like an HTML table: rows, columns and grids. Anything left over is an attribute, including the theme.

<STATE ID="home">
  <ROW>
    <TEXT STYLE="h2" TEXT="Inbox" />
    <BUTTON LABEL="Compose" />
  </ROW>
</STATE>

02Wire by label

A button fires a label. A WIRE with the same label connects one state to the next and can save on the way. The data passed along is a key-value bag.

<BUTTON LABEL="Send" ACTION="send" />

<WIRE LABEL="send" SAVE="messages"
      TO="inbox" />

03Bind by GUID

Every record has an identity. Comments, likes and related items bind to whatever the page is showing, so the same component works on a video, a product or a post.

<STATE ID="watch">
  <VIDEO YOUTUBE="{record.youtube}" />
  <LIKES />
  <COMMENT-THREAD />
</STATE>

Why AppSPHERE is still ahead

A design from 2001 that the web is still catching up with

Many of its ideas have since been adopted piecemeal by JavaScript frameworks. The complete model, an entire application specified as one declarative, loosely coupled state machine in a single document, remains a couple of generations ahead of today's web stack.

01The entire app is one spec

Interface, data, states and transitions are written in one declarative document, with no build step, bundler or glue code between them.

02The state machine is explicit

Every screen and every transition is declared, so an app can be visualised, validated and reasoned about. The Studio draws it as a graph.

03Wiring is by label

An action is a name. A WIRE with the same label connects it to a state, and can save a record on the way.

04Components bind by identity

Comments, likes and recommendations attach to any record with one tag. The engine finds the data through the record's GUID.

All eight reasons See them live in the guide

Origin

The first version of AppSPHERE was developed in 2001 by Amir Husain and made its way into the technology stacks of giant Japanese telecom and financial-services companies. Its core philosophy, one document that specifies an entire multi-state application, now runs on the latest engine.

The story

Gallery

Eight real apps, each a single spec

See all eight

Clips

58 lines

A video site of Blender open movies. Comments, likes and up-next bind to whichever film is playing.

VIDEORELATEDCOMMENT-THREADACTION-BAR

Run Open in Studio

Storefront

81 lines

Products, a picture viewer bound to the active record, reviews by product and a demo cart.

PICTURERATINGTOTALWIRE SAVE

Run Open in Studio

Pulse dashboard

54 lines

KPIs, line, donut and bar charts, a ticker and system health, all from static data.

KPICHARTMETERTICKER

Run Open in Studio

Build one in the Studio

A visual IDE with the workflow of Visual Basic: drag components onto a form, set properties, view the state graph and preview the app live.

Open AppSPHERE Studio Browse components