Hacker News Reader

Comment by FreeHugs | Hacker News Reader

    In modern web applications, it's
    pretty self evident that components
    are the right solution

I often see this argument of "self evidence" made by developers who claim that some modern "best practice" approach is the right one.

In my experience it is an indication that the proclaimed "better" approach is actually inferior. And the author had to resort to the argument of "obvious self evidence" because there are no better arguments around.

I think it is driven by what I call "tool religion". Developers who invested significant amount of time into learning a tool become religiously attached to it. Because they now want to be an "expert" of the "best way". Not just "Some guy with a preference".

View on HN

Every CSS rule is effectively in global scope. And as the complexity of web apps increases regression testing becomes a bigger and bigger challenge. Being able to insert components multiple times and not having to worry whether an innocuous CSS change can result in "spooky action at a distance" really helps.

I think this is a reversal of the best practice of complex CSS class hierarchies. Having flatter and fewer CSS classes and more inline CSS will result in redundant style information, but having fewer CSS rules apply to nodes is a win overall.

    Every CSS rule is effectively in global scope.

We had this problem in programming forever. These days, you can put your function in a class in a namespace ... still the namespace sits in global scope. But we never came to the conclusion that we should make all code inline to solve it. Fortunately.

So if you make a CSS rule to make links in your userlist red:

    .gizmosUserlist .name a { color: red }

Then yes, it will apply to other .gizmosUserlist instances.

Shadow DOM is a way to prevent it if you want.

Personally, I think it is a good thing, that you can make all links in all gizmosUserlists red if you like and can target a specific one with a more specific selector if you like.

Every CSS rule is effectively in global scope.

They are, and that's why sibling and child selectors exist. If you only ever define simple classes with no thought about how they'll work in the overall app then you're in for a bad experience with styles cascading to things they're not meant to affect. If you actually use CSS the way it was designed then you have complete control over exactly what styles are applied to which elements.

A good rule in component based development is to define a class name for the component and use ".unique-component-class-name > .class-for-things-in-this-component" to limit the application of styles to that component. This takes a bit of discipline but it's pretty obvious when you get it wrong.

Yes indeed. Say you're creating a new component, and this new component will contain (among other things) some existing component, but the existing component needs to be styled slightly differently in this particular context. How do you deal with this with inline styling? Threading around this information between the components in JS to make the old component aware of the new one seems clearly wrong. A good old-fashioned style sheet handles it easily and relatively cleanly.

I've seen that inline CSS seems to be the latest trend, but I haven't really read up on why myself. Is this post really the current thinking? I find it completely uncompelling.

the existing component needs to be styled slightly differently in this particular context.

See my other comment in this thread (https://news.ycombinator.com/item?id=24221241) for how I'm tackling that sort of problem at the moment. tl;dr Work out what the dev should be able to override in the style at runtime and make it a CSS var that's set inline in the component. As I said there, it might not be the best approach especially in very large apps, but it does seem to be working well for me.

The rule we've come up with is essentially "don't do that". But if you need to, instead of having styles cross boundaries, the inner component should be configurable (either by making two versions of it, or having something like "mode=large" as an abstraction over the CSS it needs to apply to itself).

the inline CSS is not redundant, because redundancy only applies to the source, not the output. And in a component world, the source is the js/compiler/component source code, and the output is what's on the page. I wouldn't care if the css is repeated for every component that's rendered, as long as it's clear from the source code of the component (or js source).

Nobody bats an eye when a compiler unrolls a loop, and you get N copies of the same code in assembly. In the same sense, nobody should care how clean the "assembly" of the web is (CSS+HTML).

I'll believe that CSS+HTML is the "assembly of the web" once I have to touch them as little as I have to touch the output of my C++ compiler or Java bytecode. Right now, any web developer has to be very comfortable with debugging HTML and CSS issues, whereas it's entirely possible for a competent Java developer to know literally zero about bytecode.

a proper C++ or java dev will examine the byte code if stuff is broken (if required), just the same as they would when writing react apps. You wouldn't normally need to examine the output the html or css when you use a framework as high level as react (or really, most web component frameworks).

That argument falls because it was never designed that way. If you want broad browser support and careful testing of edge cases you can't threat it that way, even with WASM you likely won't escape it.

At some point people should care because most applications delivered over the web perform by the rules of entertainment meaning that if it takes too long to load or render people leave and look for their entertainment elsewhere.

You have to really try for that to happen.

There's another very good reason to make a claim of "self evidence" besides not having any good arguments, which is if the proposition actually is self-evident to the target audience, and you want to focus on something else rather than dive into a long justification for the proposition.

I think the author is justified in saying that designing with components in web development has become self-evidently better than not. All new web frameworks are component-based. Web Components were added to HTML. Pretty much all web developers agree on this.

Are you a web developer? Do you disagree that the benefits of components in web programming are self-evident? If so, that is definitely surprising to me, and probably to the author.

This is only discussing about whether the premise that components is the right abstraction is self-evident.

That's all, nobody else in this particular thread said anything about whether that means inline styles is the way to go.

You might want to post your question to the author of the blog post, or as a top-level question.

I think we should spend a minute on what is meant with "components" in the article.

Would you say that this very site - Hacker News - is using this type of "components"?

The latest possible start date for components on the web was when PHP/fi (or whatever it was called) allowed you to ```include``` other files.

Realistically, people were probably doing the same with perl scripts before that.

And any definition of component is going to find it hard to exclude standard html elements, other than by specifying that it's users being able to define new ones, and not just browser vendors.

Incidentally, CSS was the original implementations of user-defined components: it allows defining certain behaviours once, for a "class" or group of similar elements, then using it repeatedly.

I remember when we loaded xml into a buffer in c and replaced template tags with search and replace.

I don't think that is the type of "component" the author means when he writes about a "component world". He constantly talks about his argument applies to "modern web apps".

I don't have the feeling that what he really means with "Inline CSS works better in a component world" is "Inline CSS is the better choice since the 90s".

This definitely leads me to believe that you don't have much experience with modern web frameworks. The meaning of "component" in modern web development is pretty consistent. You can think of a component as a custom HTML element (though they can be much more complex than built-in HTML elements). In fact, if you are using HTML Web Components, then your component literally is a custom HTML element. But the metaphor works even when generating HTML server-side: If you can reference a piece of UI by name, and pass it attributes, and it packages up some HTML/CSS/JavaScript in a reusable fashion, then it's a component.

Your question is slightly nonsensical, because components are not a design language, and it's not something you can see by looking at a rendered web page. To know whether Hacker News is using components, I would need to look at the source code, because components are a programming paradigm.

If you're asking me to comb through HN's JavaScript to see if they use that paradigm, well, no thank you.

    This definitely leads me to believe that
    you don't have much experience with modern
    web frameworks

Here we go again. It would have suited the discussion even better if you said "it is definitely self evident".

But I explained why it led me to believe that. You're just...not gonna respond to any of my argument...are you?

Yes! A comment box is a component. The tree view you look at comments in are components. Usernames and scores are component. A shared „link“ on the frontpage is a component. HN is not rendered on the client side, but its backend uses these „components“ via a templating framework. Components are just templates for the frontend.

Not going into the CSS vs. inline bit (I think CSS modules solved this for components years ago) but I think composing components is a reasonable abstraction and it _is_ self evident because it's what we've been doing everywhere else.

"Component based" is basically just "functions composing other functions and calling each other in a top-down flow with bottom-up updates through framework state". It's "evident" that it's the correct abstraction because the alternatives (things like managing app state and UI interactions through MVC, MVVM and MVP) are mostly not needed or are not the right level of abstraction for composing large UIs in web apps (where components make it trivial and shift the complexity to stitching the state manangement <-> component interop when you need to break the abstraction).

Also - components are pretty uncontested these last few years.

You've outlined a preference, but you haven't informed the reader why your preferred solution is superior other than by saying that it makes your problems "trivial" (which in any moderately complex problem space is extremely unlikely).

If I can't see it given that I have actual experience with what you're talking about and can reasonably be expected to have the background to understand, how is someone from a different field supposed to understand what you wrote?

> components are pretty uncontested these last few years

I don't think so. Many people still use traditional frontends, i.e. static or server-rendered HTML and CSS.

Components are newer and there is still more to talk about, so they naturally are more prominent on sites like hacker news. That doesn't mean they are uncontested in practice.

SSGs use templates with template arguments. How is that different from a component?

This is a good call - 'self evident' isn't the best wording. This was just meant as a statement that the component model is dominant in modern web development.

The rest though is not what I intended to get across. I've done it both ways, the inline way works better for the component model is what I'm saying. If a different model comes along in future, there may be a better approach and I may switch to that.

This isn't about there being one right way, just more appropriate ways for different paradigms.

Reply on news.ycombinator.com