4 ms·

And beyond the performance issues, app design on the web is a massive pain. Despite the advances with CSS3, we're still working with a layout engine that was d

by fny 12y ago

And beyond the performance issues, app design on the web is a massive pain. Despite the advances with CSS3, we're still working with a layout engine that was designed for documents rather than applications (mobile and otherwise), so many seemingly trivial tasks (e.g. centering and vertical alignment) involve an unintuitive mess that I after 10+ years of experience, I still need to lookup from time to time. [Edit: I should have been more clear--I'm referring to issues that flexbox doesn't resolve such as aligning/sizing elements relative to each other rather than to their parents.] On top of that, we're seriously in need of better tooling. It feels like we've spend the past 10 years developing a set of powerful primitives but ignored building tools that truly empower our creativity on the web. Sometimes I really miss how fun and simple it was to use Flash to build things when I was a kid... ...and that's the whole point really, isn't it?

woah 12y ago
Just use flexbox. I've recently started doing iOS dev, and I really miss the simple, declarative, consistent web layout tools. In iOS, there's a broken drag and drop editor that can do about 80% of what you need. You then need to go in and call a bunch of arbitrary methods that do various things to different UI modules, with no consistency between modules. Everything is very ad-hoc and one-off and you don't have much choice in what to use. I will say that all the animations are pretty smooth once you call the right combination of weird arbitrary methods to do what you need. What is this legendary interface system that is better than the web? I'd like to use it. EDIT: As for tooling, I guess it's just a difference of opinion, but I love the fact that there is none for the web. It forces everything to actually implement elegant and understandable API's. Too many IDE-based systems use the IDE as a crutch allowing them to create inelegant systems that would not be possible to use with it.
- Animats 12y ago
  Flexbox: "The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions." They just re-invented HTML tables. The replacement of HTML tables for layout with "float" and "clear" was a disaster. It replaced a 2D model with a 1D model. There were years of Javascript hacks to deal with that. Now, the 2D model of tables is back, but with a new name, because the cool kids won't use tables.
  - pcwalton 12y ago
    As someone who has implemented tables in a browser engine, the idea that flexbox layout just duplicates table layout is completely untrue. Tables are extremely complex, don't have a complete specification, and differ between browsers. Just to give one example, the algorithm for computing widths of table columns involves creating four "candidate guesses" of all the column widths using different algorithms for each, selecting the two guesses that most closely bound the available width, and then linearly interpolating between them [1]. And that's the easy case, when there are no colspans: when you get colspans, the layout parameters are defined by a complex recursive series [2]. Flexbox has none of this complexity: it basically does the simple thing you'd expect. [1]: http://dbaron.org/css/intrinsic/ http://dbaron.org/css/intrinsic/ section 4.3 [2]: ibid, section 4.1, "intermediate intrinsic minimum width for span N (N > 1)"
- fny 12y ago
  I should have been more clear with the centering issue: I'm looking at something like GSS [0] as a model of what would be incredibly useful. As for IDEs, I've always used a text editor for web dev, but there's something incredibly fun about being able to draw components and move them around on your screen as opposed to having to mess around with something like the Canvas API. I built fairly complicated little apps with Flash when I was 10 that would take me 10x longer (at least) to implement in HTML5. 0: http://gridstylesheets.org/ http://gridstylesheets.org/
  - woah 12y ago
    Yes I definitely agree on GSS. Can't wait to try it!!
    - hiphopyo 12y ago
      CSS grids (http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid) are on the rise too I think.
- rimantas 12y ago
  Do you really do ANY iOS development? Because you talk shit. Cocoa Touch is very consistent and I don't understand how can you call web tech mess superior to Auto Layout.
spankalee 12y ago
Are you really using all of CSS3? Centering and vertical alignment are trivial with flexbox. http://philipwalton.github.io/solved-by-flexbox/ http://philipwalton.github.io/solved-by-flexbox/

by fny 12y ago

woah 12y ago

Just use flexbox. I've recently started doing iOS dev, and I really miss the simple, declarative, consistent web layout tools. In iOS, there's a broken drag and drop editor that can do about 80% of what you need. You then need to go in and call a bunch of arbitrary methods that do various things to different UI modules, with no consistency between modules. Everything is very ad-hoc and one-off and you don't have much choice in what to use. I will say that all the animations are pretty smooth once you call the right combination of weird arbitrary methods to do what you need. What is this legendary interface system that is better than the web? I'd like to use it. EDIT: As for tooling, I guess it's just a difference of opinion, but I love the fact that there is none for the web. It forces everything to actually implement elegant and understandable API's. Too many IDE-based systems use the IDE as a crutch allowing them to create inelegant systems that would not be possible to use with it.

Animats 12y ago
Flexbox: "The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions." They just re-invented HTML tables. The replacement of HTML tables for layout with "float" and "clear" was a disaster. It replaced a 2D model with a 1D model. There were years of Javascript hacks to deal with that. Now, the 2D model of tables is back, but with a new name, because the cool kids won't use tables.
- pcwalton 12y ago
  As someone who has implemented tables in a browser engine, the idea that flexbox layout just duplicates table layout is completely untrue. Tables are extremely complex, don't have a complete specification, and differ between browsers. Just to give one example, the algorithm for computing widths of table columns involves creating four "candidate guesses" of all the column widths using different algorithms for each, selecting the two guesses that most closely bound the available width, and then linearly interpolating between them [1]. And that's the easy case, when there are no colspans: when you get colspans, the layout parameters are defined by a complex recursive series [2]. Flexbox has none of this complexity: it basically does the simple thing you'd expect. [1]: http://dbaron.org/css/intrinsic/ http://dbaron.org/css/intrinsic/ section 4.3 [2]: ibid, section 4.1, "intermediate intrinsic minimum width for span N (N > 1)"
fny 12y ago
I should have been more clear with the centering issue: I'm looking at something like GSS [0] as a model of what would be incredibly useful. As for IDEs, I've always used a text editor for web dev, but there's something incredibly fun about being able to draw components and move them around on your screen as opposed to having to mess around with something like the Canvas API. I built fairly complicated little apps with Flash when I was 10 that would take me 10x longer (at least) to implement in HTML5. 0: http://gridstylesheets.org/ http://gridstylesheets.org/
- woah 12y ago
  Yes I definitely agree on GSS. Can't wait to try it!!
  - hiphopyo 12y ago
    CSS grids (http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid) are on the rise too I think.
rimantas 12y ago
Do you really do ANY iOS development? Because you talk shit. Cocoa Touch is very consistent and I don't understand how can you call web tech mess superior to Auto Layout.

spankalee 12y ago

Are you really using all of CSS3? Centering and vertical alignment are trivial with flexbox. http://philipwalton.github.io/solved-by-flexbox/ http://philipwalton.github.io/solved-by-flexbox/