Hacker News Reader

Comment by FrancoDiaz | Hacker News Reader

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".

View on HN

I 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.

no need for lambda

   <ul>
     {childItems.map(RenderChild)}
   </ul>

Maybe, but be aware those are not equivalent (your method will pass extra arguments to RenderChild)

If you're the one designing the map function transformer, then you know about the extra args thing... but otherwise you're right that you have to be careful!

As 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.

Typescript is fully supported by vuejs, I use both and they don't contradict each other.

> 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.

As 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.

Your 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.

'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).

So 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.

What'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 :)

  > 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!

String 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.

Well, I know Vue and Ember are no longer using string based template. Most front end nowadays are DOM based templates.

Handlebars 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.

Even 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.

Reply on news.ycombinator.com