Ask HN: expanding on MVC with frameworks for declarative UI description?

9 points by DenisM ↗ HN
Having written a bunch of UI code for iPhone I am now tempted to design my own framework to factor out reusable parts. However, before I begin I would like to tap into collective wisdom of this community - surely someone has done similar work before and if so I would be glad to learn rather than reinvent.

Here's how I see the structure of a single "page" in an application, expanding on MVC:

1. The Model - a software component and backing storage which provide access to the data. The important thing here is that Model itself must represent data how it's structured in the user's head, not how it's really stored in e.g. a relational database.

2. The Model Schema - a declarative description of types, relationships, and arity of the data entities stored in the Model. Model Schema could be an XML file, for example.

3. Text (Copy), possibly localized. A simple key-value text file would likely suffice.

4. Layout description - list of UI controls and their design attributes (colors, fonts, margins, alignment, grouping/proximity etc). This also includes binding from controls to the Model Schema and to Copy. Layout description also can be a declarative description, such as an XML file.

To make this whole thing come alive I would need a layout engine that can take layout description, create UI controls, populate them with data according to bindings and place them on screen according to design attributes, taking content into account. The difficult part is handling arity.

If I can pull this off, I can see enormous benefit: a designer, a developer, and a copy writer could be iterating independently based on a single common document - the Model Schema - and seeing the complete animated result of their work as they make progress.

So what are the closest things to this that someone else has already done or tried to do?

Note that existing iPhone UIKit cannot do content-sensitive layout, all layout positioning is independent of content and so often looks poor with truncated text or large areas of whitespace - this deficiency and the countless hours spent aligning text on screen were the primary motivators behind my thinking.

4 comments

[ 3.8 ms ] story [ 22.1 ms ] thread
Might be worth looking at Reaction for ideas: http://search.cpan.org/dist/Reaction/

In Reaction the model is split into "Domain Model" and "Interface Model". Also the View is broken down into layoutsets, widgets & viewport components.

Here's some inks which may (or may not!) show some enlightenment on the methodology behind Reaction:

* http://search.cpan.org/dist/Reaction/lib/Reaction/Manual/Int...

* http://search.cpan.org/dist/Reaction/lib/Reaction/Manual/Ove...

* http://search.cpan.org/dist/Reaction/old/Manual/FAQ.pod

Although not a direct answer to your question, I do think Qt's Kinetic (http://labs.trolltech.com/page/Projects/Graphics/Kinetic) might be a good source for inspiration. It contains a declarative UI markup and scripting language called QML, that looks roughly like JS/JSON. An old example can be seen here: http://labs.trolltech.com/blogs/2009/05/13/qt-declarative-ui...

I am very curious about how Apple would react to something like this though. It's obviously a good idea, but they have been really frantic about alternative solutions to these kinds of problems :)

Thanks for the links, guys, I will look into them.

I'm not worried about Apple for two reasons:

- The layout engine I have prototyped (there is no binding, only layout proper) operates on native iPhone controls, i.e. it does not create a new abstraction layer on top of UIKit but rather extends it form the side with smart sizing and positioning. I think it's very important to avoid creating leaky abstractions and I plan to keep doing things this way. In other words the layout description describes layout of native UIKit controls, not some abstract presentation of data.

- I'm no Adobe, and I'm not likely to attract attention to myself.