Similar works and things to learn from them:

Apple UIKit constraints

  • Auto Layout 2011-2016
  • Constraints as a set of equations to be solved, could result in an ambiguous or invalid layout
  • Many open source convenience libraries built on top
  • Seems like Apple walked away from these even before they walked away from ObjC
  • Connecting to parent or peer looks similar and can be handled consistently
  • Concept of device-specific safe areas that avoid e.g. the notch
  • Everything always rounded to nearest pixel at the end of the layout

Constraint solvers

LUME AutoLayout

  • Apple’s Auto Layout implementation in JS using the same constraint language.
  • Nice online editor for experimentation and debugging.
  • Fork of an earlier autolayout.js.
  • Supports Apple’s VFL, but adds opt-in features (Extended VFL).
  • Has an explicit constraint option that looks very similar to ui4html.
  • Potentially interesting features to consider for ui4: z-ordering, ranges (spread ..)

Apple SwiftUI

  • Dropped the idea of Auto Layout (more Flutter-y)
  • Layout is always valid

Nativescript-Vue

  • DockLayout, FlexboxLayout, GridLayout
  • Other typical layouts like RowLayout, StackLayout
  • DockLayout is interesting because the docking areas are filled and managed by the layout manager not to be overlapping (i.e. dock 2 to right is same as dock=right plus dock=first.leftof)
  • GridLayout has relatively sized columns, rows

Android

  • Similar to UIKit, but only as one type of layout manager, not as a fundamental building block.
  • Text baseline alignment
  • Guidelines and dividers can be implemented with divs with 0 width or height
  • Size as ratio

React constraints

  • Remove the HTML attribute after parsing, does it make a difference for the “hygiene”?

Grid Style Sheets

  • Constraint CSS
  • Constraints as equations
  • Abandoned, “never used much beyond company internal implementation”, “too heavy computationally”

Flutter ConstraintLayout

  • Seems to tick all the boxes
  • Some things to steal learn from:
    • Control over z - idea: layer=lower, lowest, higher, highest, id.lower, id.higher
    • Relative references to other elements - idea: previous.below, next, peer()
    • ratio, again - ratio=16/9, translates to setting the unset dimension
    • translate, rotate?
    • polar coordinates? - angle, distance