How to manage HTML DOM with vanilla JavaScript only?

Re:How to manage HTML DOM with vanilla JavaScript only? by peterhunt on Thursday April 02, 2020 @01:59PM (#22761707)

VB classic didn't have a layout engine, so you had to do everything yourself. Making the window resizable required a huge amount of error-prone code that you had to change every time you updated the UI, and it often didn't work well. A classic VB6 bug was to resize the window larger, and then shrink it back down to the same size, and the layout would not be consistent despite the window returning back to the same size it once was.

The browser today lets you opt out automatic layout and instead specify fixed x/y/width/height coords with `position: fixed`.

It seems to me that your problem isn't the technology itself but perhaps the culture around it?

[ Parent | on HN ]

Re:How to manage HTML DOM with vanilla JavaScript only? by rkagerer on Thursday April 02, 2020 @02:13PM (#22761867)

I never found it error-prone. Perhaps meticulous. You had one event where you simply go through all your "dynamic" controls and set their position and size. I did it for all my applications, both simple and sophisticated. Worked like a charm.

The built in tooling got more flexible in .Net (eg. You could effectively "bind edges"), but I actually found setting all that up more time consuming in practice that just arranging everything myself in straightforward code (which also gave me more control over exceptions and edge cases).

[ Parent | on HN ]

Re:How to manage HTML DOM with vanilla JavaScript only? by peterhunt on Thursday April 02, 2020 @03:01PM (#22762362)

It became really error prone when elements had intrinsic size. A great example is when you have to lay out elements based on how text wraps. Designs back then didn't need this as often, but most designs today do need to take it into account (especially if internationalization is a requirement).

To do this correctly you need to do two passes for layout and at that point you've basically implemented a rudimentary layout engine.

I think we overestimate the complexity of apps we built back then and don't have an appreciation of how complex our apps are today.

[ Parent | on HN ]

Re:How to manage HTML DOM with vanilla JavaScript only? by jfkebwjsbx on Thursday April 02, 2020 @03:05PM (#22762398)

If your layout depends on text wrapping, text length and i18n, then your design is wrong, your UX will be bad and your users will hate you for trying to be too clever.

Not to mention the amount of finicky bugs you will encounter.

[ Parent | on HN ]

Re:How to manage HTML DOM with vanilla JavaScript only? by peterhunt on Thursday April 02, 2020 @03:32PM (#22762759)

That hasn't been true in my experience. For example, German has a lot of compound nouns that aren't breakable over multiple lines, so you often have to tweak your navigation layout to account for this vs languages that are more likely to be breakable over multiple lines, like English.

[ Parent | on HN ]

Re:How to manage HTML DOM with vanilla JavaScript only? by jfkebwjsbx on Thursday April 02, 2020 @03:02PM (#22762369)

Pretty much this. Making something resizable is very easy because you know what you want to happen.

Making the same in a declarative way requires tons of options and it is a mess. See CSS flex, CSS grid, CSS @media queries, CSS box-model...

[ Parent | on HN ]