Hacker News Reader

Comment by interlocutor | Hacker News Reader

>> Use template literals for templating, so you don't even need handlebars/mustache anymore.

You can do better than template literals. You can use TSX, which gives you compile-time verification for tags and attributes, in addition to JavaScript expressions.

See: https://github.com/wisercoder/uibuilder

With TSX (which is JSX written using TypeScript, you get things like syntax coloring and indentation for tags, because HTML and JavaScript are both first-class citizens in TSX.

View on HN

I’ve only been using React for a few weeks but the comparisons on that page to React are FUD and the incompatibility with web components is just plain wrong and mixing them is covered here https://reactjs.org/docs/web-components.html

From the page you linked: "Events emitted by a Web Component may not properly propagate through a React render tree."

React components are brittle, that's not FUD. For example, CSS classes used by React components can clash with other React components, or with the page that includes them. What's FUD about that?

That's misunderstandong of the technology. React has nothing to do with styles, it manipulates DOM. Handling styles is up to you, and it's extremely easy to use CSS modules.

>> React has nothing to do with styles

That's one of its limitations.

React is a component technology and doesn't solve the problem of clashing styles, element ids and so on. Web components is a component technology that does.

No, it's not a limitation, it's called separation of concerns, I don't want my component framework interfering with the job of Webpack or application runtime. I want to use my preferred (also easy, standard, ...) solution.

> clashing IDs

React solves that one, not through namespacing though. You never need to use IDs with React.

> clashing styles

React gives you power to solve this one by your preferred solution. You can use expressions in your JSX, and thus it's very easy to do one of the following:

- Generate optimal global CSS stylesheet with no code repetition, generate classnames on the fly (https://github.com/typestyle/typestyle)

- Import your CSS file as a module using Webpack - classnames are guaranteed to be unique; additionally, similar approach as TypeStyle (global optimal stylesheet) can be set up

- Use just "inline" styles (preferably not really inlined in your JSX) since React will keep it updated for you as well

>You never need to use IDs with React.

If you don't care about accessibility then yes.l, but try using properly annotated aria attributes without appropriately scoped ids(which you can do in react, but it's not free).

Hmm, right now I truly don't (that's the business requirement :-/). I'll investigate, thank you.

Not doing anything about CSS isn't separation of concerns, it's just a leaky abstraction. Separation of concerns implies some work was done to achieve some level of decoupling that would otherwise be tighter.

In fact, the criticism that react components can have style clashes is precisely one of not having enough separation of concerns. The fact that there are numerous libraries to address that deficiency further indicates that react as a platform is severely affected by the underlying level of abstraction when it comes to styling.

It's fine to defend a technology you like but calling a weakness a strength does nobody any favors.

Styled-Components gives you efficiently “inlined” styles (creates unique CSS class used only by instances of your component) and doesn’t affect global CSS. It’s up to the developer to avoid polluting with global CSS and that’s honestly not very difficult.

According to https://custom-elements-everywhere.com/ React has a way to go for full support.

If I read parent's comment correctly, the notable thing was simplicity via few dependencies. I expect parent knows about J/TSX.

Panel can use any hyperscript based templating language. Virtual-jade, tsx, jsx, just h() calls.

It’s pretty flexible and thin.

Never heard of hyperscript before today, thanks for the pointer.

Reply on news.ycombinator.com