7 ms·

I just can't get behind ` <div v-if="unreadMessages.length > 0">` after years of React. At least with React it is pure JS/TS - No magic. However I must admit,

I just can't get behind ` <div v-if="unreadMessages.length > 0">` after years of React. At least with React it is pure JS/TS - No magic. However I must admit, the css story within vue is more interesting than React and its collection of CSS-IN-JS libraries.

mattigames 8y ago
That's also how angular does it, i don't see anything magical to be honest, just syntax sugar over if (unreadMessages.length > 0) { addComponent(this) }
- ng12 8y ago
  But it's a lot of syntactic sugar. There's a second, stringly-typed language embedded in your HTML template.
  - mattigames 8y ago
    The only reason for it to be "stringly-typed" is that your IDE doesn't support it.
    - ng12 8y ago
      It's still stringly typed even if someone wrote an IDE plugin that tries very hard to make it safe.
      - orf 8y ago
        So just like JSX then?
        ng12 8y ago
        No, because JSX is a 1-to-1 mapping to React.createElement, it's actually just syntactic sugar. There's no variable binding or evaluation.
        deleted 8y ago
        [deleted]
    - nv-vn 8y ago
      At the end of the day, it's much more of a hack. The IDE having to guess at what the string does is ridiculous to me, and it's just a ton of extra work for the person who wrote the IDE for no real reason. And now if you want to embed a string inside you need to switch quotes. Plus formatting gets super weird if you have a multiline condition. It's also super confusing for new users. There are so many issues I see with that design that I can't begin to understand why someone would argue in favor of it.
      - lucidone 8y ago
        A lot of people are familiar with it (and that style) via AngularJS. It may not be as pure, but it's what they know.
      - mattigames 8y ago
        An IDE doesn't have to guess anything, if the string is preceded by v-if then is code, that's it. Pretty much how a string literal inside eval() could be parsed as code.
        nv-vn 8y ago
        What if another library uses v-if? Or there's no library loaded at all? What if I just wrote a new library that uses c-if? I imagine most IDEs approach this by looking at the string and trying to guess whether it's HTML code or not.
- liveoneggs 8y ago
  finally a clear code snippet
fro0116 8y ago
Going to have to disagree with the comment on CSS-in-JS. CSS-in-JS is one of my favorite parts of the React ecosystem. Style as a function of state is such a natural extension to React's programming model that I end up cringing a bit every time I have to go back to writing a bunch of different classes and applying them conditionally. Representing styles as data also means you have the full power of JavaScript at your disposal to compose and manipulate styles (not to mention access to a proper module system), whereas with plain CSS you're limited to a handful of mixins offered by whatever post-processor you choose, and those in turn are generally limited in terms of expressiveness themselves by nature of only being able to perform simple string interpolations, since that's the format they have to deal with. I think these benefits are analogous to the benefits of HTML-in-JS a la JSX over traditional JS-in-HTML templates. I'm honestly struggling to see why someone would prefer HTML-in-JS but not CSS-in-JS.
- unclebucknasty 8y ago
  It's funny to hear people debate CSS in JS vs. templates, etc. For me, the answer is none of the above. That is, all of these frameworks are underpinned by a certain awfulness that is born of the impedance mismatch between applications vs Web. The right framework would abstract away CSS, templating, HTML, and all of the other awful that we've unfortunately come to accept as the cost of doing business when building Webapps. So far as I know, that framework doesn't exist yet.
  - fro0116 8y ago
    Curious if you could point to some solution for building apps outside of the web ecosystem that doesn't have this impedance mismatch you're talking about? Pretty much all of the UI frameworks on any platform that I personally know of use some combination of an XML-based templating system for laying out components and a programming language to implement the logic behind those components, which is fairly analogous to how the web has HTML for templating and JS for implementing logic. Perhaps the impedance mismatch you're talking about lies in how the web handles styling, i.e. CSS itself and how it's not integrated into either the templating or the logic side like certain other frameworks but is rather a separate independent piece altogether? Just trying to understand where you're coming from, because in my view React itself _is_ already a powerful abstraction over the DOM (in React you write components, and rendering those components to the DOM is an implementation detail involving an entirely separate library, react-dom, which can be seamlessly swapped with libraries dealing with the implementation detail of rendering to other targets like react-native, react-canvas, react-sketchapp, etc), and CSS-in-JS in the React ecosystem is itself a powerful abstraction over CSS for implementing styling as a function of state (though this abstraction hasn't yet been taken advantage of quite as much, the only notable exception I know of being glamorous-native, which implements glamorous's style as a function of state pattern on top of react-native's Stylesheet primitive rather than on top of CSS).
molszanski 8y ago
What do you mean by css story with vue? You mean css modules? Or having one file for css, html, and js?
cageface 8y ago
I've found styled-components to solve just about all my gripes about CSS in React. You even get auto formatting with Prettier. https://www.styled-components.com https://www.styled-components.com
- molszanski 8y ago
  What are your gripes?
  - cageface 8y ago
    I’ve found doing CSS in JS to be a bit awkward. The fancier CSS grid syntax is a good example of CSS that’s awkward to write in JSON. styled-components lets me use normal CSS syntax in a natural way alongside JSX code.
    - molszanski 8y ago
      What "CSS in JS" you where using before? JSS?
      - cageface 8y ago
        Mainly I was just using react’s native support for passing styles as JSON objects.
        molszanski 8y ago
        Oh. Now I understand. Yeah, that makes a lot of sense.
Tallain 8y ago
You can also do `<div :if="foo">` where `foo` is a computed property (or function with ()) -- nothing specifies you have to write code inside the string, though it seems this is a pretty commonly overlooked ability.
deleted 8y ago
[deleted]

mattigames 8y ago

That's also how angular does it, i don't see anything magical to be honest, just syntax sugar over if (unreadMessages.length > 0) { addComponent(this) }

ng12 8y ago
But it's a lot of syntactic sugar. There's a second, stringly-typed language embedded in your HTML template.
- mattigames 8y ago
  The only reason for it to be "stringly-typed" is that your IDE doesn't support it.
  - ng12 8y ago
    It's still stringly typed even if someone wrote an IDE plugin that tries very hard to make it safe.
    - orf 8y ago
      So just like JSX then?
      - ng12 8y ago
        No, because JSX is a 1-to-1 mapping to React.createElement, it's actually just syntactic sugar. There's no variable binding or evaluation.
        deleted 8y ago
        [deleted]
  - nv-vn 8y ago
    At the end of the day, it's much more of a hack. The IDE having to guess at what the string does is ridiculous to me, and it's just a ton of extra work for the person who wrote the IDE for no real reason. And now if you want to embed a string inside you need to switch quotes. Plus formatting gets super weird if you have a multiline condition. It's also super confusing for new users. There are so many issues I see with that design that I can't begin to understand why someone would argue in favor of it.
    - lucidone 8y ago
      A lot of people are familiar with it (and that style) via AngularJS. It may not be as pure, but it's what they know.
    - mattigames 8y ago
      An IDE doesn't have to guess anything, if the string is preceded by v-if then is code, that's it. Pretty much how a string literal inside eval() could be parsed as code.
      - nv-vn 8y ago
        What if another library uses v-if? Or there's no library loaded at all? What if I just wrote a new library that uses c-if? I imagine most IDEs approach this by looking at the string and trying to guess whether it's HTML code or not.
liveoneggs 8y ago
finally a clear code snippet

fro0116 8y ago

Going to have to disagree with the comment on CSS-in-JS. CSS-in-JS is one of my favorite parts of the React ecosystem. Style as a function of state is such a natural extension to React's programming model that I end up cringing a bit every time I have to go back to writing a bunch of different classes and applying them conditionally. Representing styles as data also means you have the full power of JavaScript at your disposal to compose and manipulate styles (not to mention access to a proper module system), whereas with plain CSS you're limited to a handful of mixins offered by whatever post-processor you choose, and those in turn are generally limited in terms of expressiveness themselves by nature of only being able to perform simple string interpolations, since that's the format they have to deal with. I think these benefits are analogous to the benefits of HTML-in-JS a la JSX over traditional JS-in-HTML templates. I'm honestly struggling to see why someone would prefer HTML-in-JS but not CSS-in-JS.

unclebucknasty 8y ago
It's funny to hear people debate CSS in JS vs. templates, etc. For me, the answer is none of the above. That is, all of these frameworks are underpinned by a certain awfulness that is born of the impedance mismatch between applications vs Web. The right framework would abstract away CSS, templating, HTML, and all of the other awful that we've unfortunately come to accept as the cost of doing business when building Webapps. So far as I know, that framework doesn't exist yet.
- fro0116 8y ago
  Curious if you could point to some solution for building apps outside of the web ecosystem that doesn't have this impedance mismatch you're talking about? Pretty much all of the UI frameworks on any platform that I personally know of use some combination of an XML-based templating system for laying out components and a programming language to implement the logic behind those components, which is fairly analogous to how the web has HTML for templating and JS for implementing logic. Perhaps the impedance mismatch you're talking about lies in how the web handles styling, i.e. CSS itself and how it's not integrated into either the templating or the logic side like certain other frameworks but is rather a separate independent piece altogether? Just trying to understand where you're coming from, because in my view React itself _is_ already a powerful abstraction over the DOM (in React you write components, and rendering those components to the DOM is an implementation detail involving an entirely separate library, react-dom, which can be seamlessly swapped with libraries dealing with the implementation detail of rendering to other targets like react-native, react-canvas, react-sketchapp, etc), and CSS-in-JS in the React ecosystem is itself a powerful abstraction over CSS for implementing styling as a function of state (though this abstraction hasn't yet been taken advantage of quite as much, the only notable exception I know of being glamorous-native, which implements glamorous's style as a function of state pattern on top of react-native's Stylesheet primitive rather than on top of CSS).

molszanski 8y ago

What do you mean by css story with vue? You mean css modules? Or having one file for css, html, and js?

cageface 8y ago

I've found styled-components to solve just about all my gripes about CSS in React. You even get auto formatting with Prettier. https://www.styled-components.com https://www.styled-components.com

molszanski 8y ago
What are your gripes?
- cageface 8y ago
  I’ve found doing CSS in JS to be a bit awkward. The fancier CSS grid syntax is a good example of CSS that’s awkward to write in JSON. styled-components lets me use normal CSS syntax in a natural way alongside JSX code.
  - molszanski 8y ago
    What "CSS in JS" you where using before? JSS?
    - cageface 8y ago
      Mainly I was just using react’s native support for passing styles as JSON objects.
      - molszanski 8y ago
        Oh. Now I understand. Yeah, that makes a lot of sense.

Tallain 8y ago

You can also do `<div :if="foo">` where `foo` is a computed property (or function with ()) -- nothing specifies you have to write code inside the string, though it seems this is a pretty commonly overlooked ability.

deleted 8y ago

[deleted]