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.
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.
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.
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 normalmapfunction 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.
I don’t think this is a very good example. You’ve just said not to use a new language, then used JSX, a new language.
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
lior whatever directly there.It’s up to you how you organize your components.