undefined | Better HN

0 pointszkldi4y ago0 comments

If it's a template then it's a very complex one, and under closer inspection it reads almost like storing code in a string and evalling it.

Let's say we want to iterate over commits in reverse. A google shows that we can do something like this:

    v-for="item in items | orderBy 'field' -1"

So, there's pipes now, and Vue has essentially re-invented a programming language inside HTML attributes. But then comes this example below it:

    v-for="item in _.reverse(items)"

And this line is terrifying! If this string is able to use lodash, then that means it's able to access the JS global scope, and therefore is very powerful - yet the resulting template is nonsense js, but still at some point involves JS evaluation?

Maybe I'm missing something though - I don't use Vue and if something is this big with this approach, I'm definitely missing something.

EDIT: A search for *new Function(` calls in the vue github repository shows quite a lot of code that essentially evals strings.

0 comments

Drew_4y ago

I don't know if you haven't had much experience with templating engines, but having the ability to write programmatic expressions to make a layout dynamic is a basic necessity that pretty much every known templating engine has. "It reads like storing code in a string and evalling it" sounds very funny in this context because that's exactly what every solution does and it works pretty well in practice.

zkldiOP4y ago

My issue isn't the existance of programmatic expressions (yeah, it's the point of templating languages), but more that the way vue (and angular) do it is a mess of syntaxes that creates a really, really strange template.

The lodash example is the main critique because that is not JS, but it involves evaluating JS - it's created its own programming language with its own rules -- when one was right there from the beginning!

Drew_4y ago

Like any templating engine there's always just enough power given to have the ability to write something stupid or complex in the template. Again not really a problem in practice.

The scary underscore expression you're referring to can easily just be written as a reversedList variable in "normal" JS and get referenced plainly in the template. So the template expression syntax never has to be as messy as you might think it is.

1 more reply

EugeneOZ4y ago

Angular doesn’t evaluate the code of the template. Example with lodash will not work out of the box in Angular.

dragonwriter4y ago

> "It reads like storing code in a string and evalling it" sounds very funny in this context because that's exactly what every solution does.

Its not, though. JSX-based solutions (not just React, but Solid and others) don't (actually, neither do many frameworks with more traditional-looking templates, including, AIUI, Vue, actually compile templates to render functions, so it just looks like old school “string with embedded code which is evalled” ttemplates)

Drew_4y ago

I know it's pedantic but this is still JavaScript we're talking about not binary so the "compiled render function" is still ultimately just "a string that gets evaled".

In any case the implementation details aren't important it's what it appears to be that is apparently the problem.

1 more reply

lmm4y ago

Templating is the wrong approach. Component-based approaches where you use polymorphism rather than putting logic in your templates are much better. Look at Wicket for a HTML UI framework done right, IMO.

masklinn4y ago

People like templates, and the clear and declarative correspondence between input and output.

You can write React without using JSX, and I assume Vue without templates, but unless the components system has a declarative layer so thin it might as well be templates (e.g. elm, or clojure’s hiccup) and it is entirely expression based, they’ll want templates.

Wicket looks like absolute nonsense of the worst kind. It completely reminds me of Struts and Spring and friends, and that is not a positive comparison.

1 more reply

sangnoir4y ago

would you have preferred

  {{ for item in items | orderBy 'field' -1 }} ?

I feel like you're getting hung-up on the fact that the template directive is also a valid attribute and not something similar to jinja - but that's just syntax

zkldiOP4y ago

I don't really see much of a difference - that is still storing it as a text attribute inside a DOM node.

To be clear, I vastly prefer Reacts approach of putting HTML into JS, rather than Vue/Angulars approach of putting JS into HTML.

likeclockwork4y ago

It never ends up on a DOM node. The template is compiled into a render function.

cout4y ago

This has been the debate of templating systems for as long as I can remember. Do you want your looping construct to use the same syntax as your markup language (so all the tools you use that operate on the markup "just work", without any modifications)? Or do you want to use the same looping constructs as the language you are programming in (so there's no need to invent or learn a DSL built on top of a markup language)?

Both approaches are valid, and each comes with its own set of tradeoffs.

lenkite4y ago

Yeah well, its not really HTML - its JSX and it reads quite differently. Most folks who create HTML prefer to read HTML not Reacts domain language. HTML is a documented world-wide standard implemented by web-browsers. JSX is not.

EugeneOZ4y ago

You are trying to discuss things you have never tried in practice, just saw some examples in the docs. Your opponents are trying to explain this fact politely.

j / k navigate · click thread line to collapse

0 pointszkldi4y ago0 comments

If it's a template then it's a very complex one, and under closer inspection it reads almost like storing code in a string and evalling it.

Let's say we want to iterate over commits in reverse. A google shows that we can do something like this:

    v-for="item in items | orderBy 'field' -1"

So, there's pipes now, and Vue has essentially re-invented a programming language inside HTML attributes. But then comes this example below it:

    v-for="item in _.reverse(items)"

Maybe I'm missing something though - I don't use Vue and if something is this big with this approach, I'm definitely missing something.

EDIT: A search for *new Function(` calls in the vue github repository shows quite a lot of code that essentially evals strings.

0 comments

Drew_4y ago

zkldiOP4y ago

Drew_4y ago

Like any templating engine there's always just enough power given to have the ability to write something stupid or complex in the template. Again not really a problem in practice.

1 more reply

EugeneOZ4y ago

Angular doesn’t evaluate the code of the template. Example with lodash will not work out of the box in Angular.

dragonwriter4y ago

> "It reads like storing code in a string and evalling it" sounds very funny in this context because that's exactly what every solution does.

Drew_4y ago

I know it's pedantic but this is still JavaScript we're talking about not binary so the "compiled render function" is still ultimately just "a string that gets evaled".

In any case the implementation details aren't important it's what it appears to be that is apparently the problem.

1 more reply

lmm4y ago

masklinn4y ago

People like templates, and the clear and declarative correspondence between input and output.

Wicket looks like absolute nonsense of the worst kind. It completely reminds me of Struts and Spring and friends, and that is not a positive comparison.

1 more reply

sangnoir4y ago

would you have preferred

  {{ for item in items | orderBy 'field' -1 }} ?

I feel like you're getting hung-up on the fact that the template directive is also a valid attribute and not something similar to jinja - but that's just syntax

zkldiOP4y ago

I don't really see much of a difference - that is still storing it as a text attribute inside a DOM node.

To be clear, I vastly prefer Reacts approach of putting HTML into JS, rather than Vue/Angulars approach of putting JS into HTML.

likeclockwork4y ago

It never ends up on a DOM node. The template is compiled into a render function.

cout4y ago

Both approaches are valid, and each comes with its own set of tradeoffs.

lenkite4y ago

EugeneOZ4y ago

You are trying to discuss things you have never tried in practice, just saw some examples in the docs. Your opponents are trying to explain this fact politely.

j / k navigate · click thread line to collapse