Comment by candl | Hacker News Reader

Comment by candl | Hacker News Reader

HTML/CSS is generally quite flexible when it comes to operations on text. No surprise since it was its intended purpose to be a format for documents.

Making any layouts and god forbid centering elements has always been a headache for me. Even by looking at the CSS examples provided by the link my first thought is how random they all seem and how ugly they are not to mention difficult to remember and use. There should be a single way to center an element. It should be an obvious operation given how important and common it is.

Some very useful CSS properties might take a lot of code and be hard to implement in native GUI toolkits like floats, overflow, height/width with percents, text wrapping etc. This is a sweet spot where HTML/CSS shines.

I have been playing with QML lately and decided to implement the Dialog (Absolute center within viewport) that pops after visiting the linked page just for comparison:

Here's the dialog equivalent that just fills the entire screen of an application done with QtQuick 2.0 for Desktop.

http://pastebin.com/mnN3Zr6N

Layouting is easily done by anchors. Filling a rectangle to match a parent's container, centering an element inside a parent, etc. Other containers such as Rows, Columns or Grids are also provided. Property bindings are used for centering the dialog even if the viewport changes. Text wrapping is also done explicitly and binding was necessary to limit text width to the ScrollView for it to work.

One big difference compared to CSS is that by looking at the source I can see at glance what the layout structure is and what might be happening with the element.

Another cool thing about QML is that it's as simple as taking the code, creating a new file 'Dialog.qml', adding a few properties, a signal and some functions and we get a reusable standalone component:

http://pastebin.com/CSbxrnK3

that is very convinient to use:

http://pastebin.com/XKnhW4wN

result: http://i.minus.com/iGTQhAxP55bBP.gif (3MB gif)

How is that better than CSS?

http://jsbin.com/ezocec/1/edit (25 lines counting the HTML)

CSS has columns and grids, custom text wrapping. These features are available now in >90% of browsers. The `.dialog` class can be used as component without any changes, and we have things like component.io and browserify to package them up with behaviour.

result: http://cl.ly/2w1o3h0i1t0r

Sure, at this point HTML/CSS has grown to accomodate many features. But there's a lot of ugly and non-obvious cruft that has been inherited over the ages and it won't change soon.

Perhaps a tool can bundle resources, but in the end it's still going to be inserted into the DOM and can potentially clash with other code since everything lives in a global namespace. There's also the problem of competing tools and the dilemma of which one to choose. Any other additional library that is meant to augment/fix HTML/CSS is another dependency that can cause problems and needs to be maintained.

QML is meant to be extensive. Not happy with how the drop shadow works? Write your own shader that does it the way you want it. Feeling that there's some primitive like an Ellipse missing? You can write your own in C++ and expose it to QML easily. In fact you can expose any native code to QML.

With HTML/CSS you are constrained to the environment it works in.

QML supports components, animations, transitions, particles, states, bindings, i18n and much more. It's also very smooth, qml is hardware accelerated. In the case of CSS so you get some hardware acceleration only for animating properties like translation, etc.

Here's the dialog I posted before which I changed to support states and transitions and also added an inline shader and particle emitter:

http://pastebin.com/hh7xARTS

http://i.minus.com/iATg82IRCaMa9.gif (result 4MB gif)

As it can be seen it's highly declarative and it basically contains no javascript logic at all besides setting the states.

Of course a lot of such features are available indirectly in HTML/CSS by piggybacking on third party libraries/frameworks, but wouldn't HTML be so much nicer if it were designed with those things in mind from the very beginning?

Now you're pushing it, but it's getting there :)

Shadow DOM is the specification that will fix the collision/cascading issue, making it possible to isolate components. You can now write your own shaders, use custom masks/clipping etc, and of course, SVG for unlimited vector shapes. If that's not enough, write your own graphics layer with WebGL or Canvas.

http://jsbin.com/ezocec/3/edit

http://cl.ly/1q1b0T0n0l0u

Now around ~80% less code.

This is a fun but pointless showdown of course, these are technologies born worlds apart, with different audiences, purposes and constraints. HTML appeared in 1990, with the sole purpose of marking up hypertext, grew organically and has a hundred other interoperability concerns; QML showed up in 2009 (?), twenty years later, and was designed to solve specific problems. I'm certain the web wouldn't have grown as fast if it didn't have a stack as accessible as html/css.

Reply on news.ycombinator.com