Hacker News Reader

Constraint layout systems are O(n^2) algorithms, while a procedural layout algo can be O(1) or O(n). I think out of practicality it wasn't adopted. It would be better if both were available, but such is life.

http://floriankugler.com/2013/04/22/auto-layout-performance-...

It's used for screen layout in MacOS Lion and Grid Style Sheets.[1] There's also a subdomain that goes faster, and simple layouts should be in that subdomain.

The idea is to get away from programmer-oriented layout input.

Right, but neither Lion or Grid Style Sheets were available in the early 90's. It may have been possible to implement, sure, but we're talking early enough in the web's history that the performance of the styling engine was a legitimate concern.

Sure, but now we're past all that and people still come up with bullshit reasons that CSS SHOULDN'T be replaced when there is every reason to believe that we can do a better job now that we've suffered through 20 years of learning.

Some systems can be linear and solved in real-time.

https://constraints.cs.washington.edu/solvers/cassowary-toch...

"Constraint layout systems are O(n^2) algorithms, while a procedural layout algo can be O(1) or O(n)."

Those are the upper bounded constraints, but not reality.

Pragmatically, there's no reason 'constraint bounded' algs can't - in practice - approach procedural layouts.

Second, is the fact that layout is becoming less and less of an issue re: performance, to the point that in a few years, the argument may be moot.

Third, I'd argue that 'performance' is only one factor.

But good point.

I wish iOS autolayout wasn't n^2. You have to realize these algorithms have very small time budgets and you can start seeing stutters when you use them in things like UICollectionViews and UITableViews and other scrolling / gesture contexts. Performance is still a very real thing for these things.

Devices you support will also last 5+ years and I don't think we will see the same power/performance ratio gains in mobile in the next 5 years like we have in the last 5 years. I bought an iPad Mini 4 recently and I see general stuttering in the OS programs alone and it's the most recent iPad Mini you can buy!

You can have something pretty close to constraint based layouts in procedural layouts in something like "snap view 1 bottom to view 2 top", etc.

> The people who designed HTML5 and CSS thought procedurally, not geometrically. It shows.

The problem the article points out is that they wanted styling to happen, before the entire document is downloaded. Obv. you can't say, "hey, this box should be pinned to the bottom of the footer" if the HTML for the footer isn't yet existing in the stream that's downloaded.

I think enough people fume when they see the Flash of Unstyled Content. I don't know if constraint-oriented would work. I (and I think you) would LOVE it to be that way, since css gets ridiculously weird, quick.

You are free to implement anything you like in JavaScript. There are several implementations of this type of constraint layout, but none have ever really taken off.

Surely you can say that -- that constraints are declarative means that resolving them doesn't have to happen in a particular order. The solver could stash away the constraint involving an element that doesn't exist yet, until it does.

If this sometimes moves elements that are already displayed, that'd be a problem. Isn't it a problem we're seeing anyway?

It sounds like people are forgetting that most users were on dial up during the 90s.

There is always Grid Style Sheets[1] if you want to try it out. It is based on the same algorithms as iOS constraint engine[2] AFAIK. Unfortunately it has to compute the constraints using javascript as its not native.

[1]: https://gridstylesheets.org/

[2]: https://en.wikipedia.org/wiki/Cassowary_(software)

WebAssembly should be able to help with that, no?

I think so, yes. Personally I'm really looking forward to seeing what people are going to implement with WebAssembly. Another possibility would be virtual DOM diffing.

CSS layout is slow enough as it is. Adding all the features you propose here would make the situation far worse.

The fact that CSS layout mostly follows a top-down (and parallelizable!) width assignment phase followed by a botton-up height assignment phase is not something to throw away lightly.

Do you have a reference for this?

https://github.com/servo/servo/wiki/Layout-Overview

I never tried it, but I've heard that Solid Edge 2D Sketch mode is free, and not a demo (it: you can use it all that you want).

https://www.plm.automation.siemens.com/en_us/products/solid-...

DesignGridLayout is based on canonical design grids.

https://designgridlayout.java.net/grids.html

The heuristics are hand coded.

I created DGL because I wanted visually correct, easy to create UIs. Here are some usage examples. (I probably won't ever design a "fluent API" (method chaining) ever again. A DSL would be better.)

https://designgridlayout.java.net/usage.html

Next time I do interesting UI work, I'll port DGL to that platform. I won't wrestle with constraints solvers again for anything but the most trivial efforts.

Mea culpa: I use Bootstrap for web stuff. Good enough for trivial UIs. Last time I checked, a few years back, I couldn't figure out how to use CSS to align text baselines between columns, or how to space those baselines vertically equally.

Well recent versions of CSS and HTML are limited by backwards compatibility. 20 years ago it was taken for granted that styling meant applying decoration, fonts and colors to a text, not building an application or a design tool.

> Layout should have been constraint-oriented, not procedural.

The problem is that there isn't a universal set of constraints that satisfies everybody's requirements. For procedural specs, it only has to be Turing complete to make everybody happy.

The whole world would be better if thinking this way was applied every where. Not only client side rendering. Even programming languages themselves, even OSes (hi HURD~). It's slowly coming but society has bad eye sight and ADHD.

What you mean is called "parametric modeling" with constraints, it's very common with 3D CAD and not exclusive to a specific software package: https://en.wikipedia.org/wiki/Solid_modeling#Parametric_mode...

It's implemented in the "geometric kernel" (similar to operating system, the kernel is the hearth of a 3D CAD software), and only a few companies develop such CAD kernel which are licensed by many CAD software companies: https://en.wikipedia.org/wiki/Geometric_modeling_kernel

Of course; everybody has parametric modeling now. Inventor is worth looking at because they have a nice GUI on top of it. Designers would be a lot happier with that kind of GUI than trying to write CSS to get the layout they had in mind.