5 ms·
In React, everything is Just JavaScript, which sounds very simple and elegant - until you dig deeper. The unfortunate reality is that reinventing HTML and CSS w
by FrancoDiaz 10y ago
In React, everything is Just JavaScript, which sounds very simple and elegant - until you dig deeper. The unfortunate reality is that reinventing HTML and CSS within JavaScript can cause a lot of pain.
So what's the pain for me, as a user of React? It's just embedded HTML for me. They never go on to explain why.
And...
Instead, we offer templates as a simpler alternative:
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
Notice how the templates are code in strings. I don't find that simpler at all. I find code in strings to be an anti-pattern. I already have a nice real language (TypeScript in my case) to do "templates".
- rk06 10y agoAs far html vs jsx goes, i would say its a matter of taste. But when it comes to css, vue's css are way better than React's alternative by a longshot.
- reza_n 10y agoAs another reply mentions, its a matter of taste, but for me its the clean seperation between data and presentation. Presentation is generally HTML+CSS. Data and plumbing is JS. This is similar to traditional MVC and works well with mixed dev/designer teams. Dev in JS, design with HTML+CSS. You can liken it to a data API returning data with HTML in it, you now have data and presentation together. Do you want the 2 roles in 1 convenient language? Great, JSX gives you that power. Do you want data and presentation separate, then go with templates.
- eyko 10y agoYour component's logic is all presentation logic. You may want to break it even further but it's not a real separation (you still have logic in your templates via `v-if` and `v-for`, don't you?). Data, in both React and Vue, lives outside the component.
- reza_n 10y ago'For' and 'if' are very basic operations which have equivalent CSS constructs and play extremely well with HTML presentation. I'm not saying your wrong, I'm just saying its a total non issue for designing presentations. Without it, you cannot present modern data (JSON).
- Noseshine 10y agoSo whose preventing you from only using the same basic structures when embedding it like JSX, with Javascript? I don't see why learning a different syntax for the templates improves anything you say. The for loop does not look any better/easier just because you slightly change the way you write it, but you now depend on yet another language.
- reza_n 10y agoWhat's preventing me? My preference for a different kind of separation between data and presentation. No one right or wrong here, just a matter of taste :)
- Noseshine 10y ago> separation between data and presentation That makes no sense. Reminder: We were talking about Javascript vs. custom template language - both are programming languages. One more limited than the other, but that is when I asked why you don't just use the same subset of Javascript. Just variables and basic loops, for example. You have the exact same things in the template language!
- boubiyeah 10y agoString templates (angular, vue, riot, aurelia, ember, etc) try to be close to the WEB component standard. I find them horrible, because I too use typescript and 1) you have to learn a template sub-language (angular is the worst in that regard) and all your component wiring can't be typed.
- lightblade 10y agoWell, I know Vue and Ember are no longer using string based template. Most front end nowadays are DOM based templates.
- Touche 10y agoHandlebars is not valid HTML, so I find it hard to believe it is DOM based. I believe the new version of Glimmer compiles its strings to bytecode.
- boubiyeah 10y agoEven angular 2 uses some sort of virtual dom under the hood. My point remains though, as all the developer manipulates are strings. I think manipulating objects (virtual dom nodes) is a more powerful and versatile way to do it.
- Flow 10y agoI fiddled with VueJS some weeks back and didn't use the .vue files because I wanted to understand what I was doing and not have a build chain. After a while it felt like I was writing strings in strings in strings. And that was exactly was I was doing. I think JSX is a very sane way of coding after all. I think writing things like <ul> {childItems.map(x => RenderChild(x)} </ul> is wonderfully clear.
- jadbox 10y agono need for lambda <ul> {childItems.map(RenderChild)} </ul>
- kylestlb 10y agoTypescript is fully supported by vuejs, I use both and they don't contradict each other.
- Touche 10y ago> So what's the pain for me, as a user of React? It's just embedded HTML for me. They never go on to explain why. The build requirement, and all of the tooling and complexity that is required to make that work.