Digital Defiant Studios

Published: 2015-12-04 00:00:00 -0800

An application "algebra" design

This is a TOOLS BUILDER ALGEBRA - A mini-language idea using algebraic style of notation.

Using highly terse symbols, a web-development language is expressed through a few characters corresponding to common web development design patterns, as an experiment in language design.

A pure algebraic, simple version

  • W (Web application) = (R, C, T, M)
  • R = Routes [R0, R1, R2, Rn-1]
  • C = Controller (view) [C0, C1, C2, Cn-1]
  • T = Template [T0, T1, T2, Tn-1]
  • M = Model [M0, M1, M2, Mn-1]

  • P = partials [P0, P1, …]

  • L = layout [L0, L1, L2]
  • T = (P, L)

Detailed layout composition via partials – “widgetized” layouts

All pages are composed of components, sub-components, etc… but this is a formalization of that common observation.

layout (composed sections) section (composed collections/static/model) collection loop format display (grid, carousel, etc.., – widget) collection loop (iterated view block) model (single view bloc) static block

Structure/required types

MODEL

* Collection
    * Create collection
    * Read collection
    * Compose with collection
* Single
    * Create
    * Read
    * Update
    * Delete
    * View all enumerable properties
        * Filter props
        * Sort by prop
    * Compose with other singles

VIEW

* Display models as modular blocks
    * Table
    * Div-based "grid"
    * UL, OL, DL
* Display plain text blocks
* Display links to other pages
* Display forms for CRUD'ing an entity
    * All properties
    * Filtered properties

CONTROLLER

* Get model data
* Transform (optionally):
    * Property
    * Composition with other

Notes: common “patterns”

These types of things can be modeled using the application algebra, but for now are simply common patterns in web app development. In most all applications, the majority of content/functionality consists of:

  • static content
  • entity
  • actions on an entity, via html elements (CRUD actions).
  • displaying an entity, via html elements.

Another algebra design example:

  • Let K = Entity([…])
  • E = props(K) <- get properties of model
  • F = filter(E, props) <- filter unwanted props
  • H = Tab(F) <- generate html table with enumerative filtered properties F
  • P = {H0, H1, …, Hn} <- page = set of html blocks

  • [+] = create model button
  • [x] = delete model button
  • [MC] = model collection
  • [MS] = model single

Abstract form operations

  • =F = Form
  • =F[C - entity:name] = Form, CREATE operation on entity:name
  • =F[R - entity:name] = Form, READ (display results) on entity:name
  • =F[U - {fields: [field_1, field_n]} -> entity:name] = Form, UPDATE {fields} on entity:name
  • =F[D - entity:name] = Form, DELETE on entity:name
  • =F[Q - entity:name] = Form, UNI[Q]UE operation on entity:name

Abstract html elements

  • <a> = link (url)
  • |T| = table
  • :L = list
  • ~c~ = plain (static) content
  • <0, N> = index enumeration from 0 to N
  • <k,v ... [MC]> = entity enumeration, where entity is a key, value, that can be nested.

Application algebra examples (WIP)

  • [MC] list on page
  • [MS] details on page.
  • [MC] -> list on page, with [x]
  • [MC] -> list on page, with [+], and F(MS)