Custom template language and custom DOM attributes are way weirder than just using language-native constructs (ternary operator, map/filter, variables, functions, etc.) directly like you can in JSX.
template syntax is a piece of cake, takes literally 2 hours to learn everything you need and you can easily see what’s where and how the html will look when it’s rendered or not.
and the list rendering? you are literally pointing out the best features of vue.
But why bother with creating a new language, and duplicating all the features your language already has, in a weird way?
If I want a list of UI items based on an array of some data, I can just do
items.map(item => 〈Item key={item.id} item={item} /〉), using the normal map function that’s already part of the language.
Or I can use a function, e.g. items.map(item => renderItem(item, otherData)) etc.
JSX itself is a very thin layer that translates to normal function calls.
but how do you know what renderItem does? where will the items end up?
we are visual creatures.
if I see a <ul><li></li></ul> I know it’s doing a list item for every object in given list.
it’s literally just html with a few added stuff, v-if to determine whether it’s rendered, v-for for iteration, dynamic class bindings and event listener bindings.
templating has also been around for a while for a reason it’s solid tech, thymeleaf and jsf/primefaces being prime examples.
Custom template language and custom DOM attributes are way weirder than just using language-native constructs (ternary operator, map/filter, variables, functions, etc.) directly like you can in JSX.
nah mate,mixing html into js is fucked, no matter how hard you cope.
Still better than whatever the hell this is
https://vuejs.org/guide/essentials/template-syntax
The more you scroll down, the worse it gets.
And this too: https://vuejs.org/guide/essentials/list
A new separate language with features that already existed in the original language (and worked with all its tooling, etc.)
template syntax is a piece of cake, takes literally 2 hours to learn everything you need and you can easily see what’s where and how the html will look when it’s rendered or not.
and the list rendering? you are literally pointing out the best features of vue.
But why bother with creating a new language, and duplicating all the features your language already has, in a weird way?
If I want a list of UI items based on an array of some data, I can just do
items.map(item => 〈Item key={item.id} item={item} /〉)
, using the normalmap
function that’s already part of the language.Or I can use a function, e.g.
items.map(item => renderItem(item, otherData))
etc.JSX itself is a very thin layer that translates to normal function calls.
but how do you know what renderItem does? where will the items end up?
we are visual creatures.
if I see a <ul><li></li></ul> I know it’s doing a list item for every object in given list.
it’s literally just html with a few added stuff, v-if to determine whether it’s rendered, v-for for iteration, dynamic class bindings and event listener bindings.
templating has also been around for a while for a reason it’s solid tech, thymeleaf and jsf/primefaces being prime examples.
Well you don’t have to place it in a separate function, nothing stops you from inlining that part and writing
li
or whatever directly there.It’s up to you how you organize your components.