74

It's been awhile since I did any frontend work. Is there something that has taken jQuery's place?

you are viewing a single comment's thread
view the rest of the comments
[-] kameecoding@lemmy.world 4 points 11 months ago

JSX is fucking weird compared to vue

[-] realharo@lemm.ee 4 points 11 months ago* (last edited 11 months ago)

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.

[-] kameecoding@lemmy.world 7 points 11 months ago

nah mate,mixing html into js is fucked, no matter how hard you cope.

[-] realharo@lemm.ee 1 points 11 months ago* (last edited 11 months ago)

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

[-] kameecoding@lemmy.world 7 points 11 months ago* (last edited 11 months ago)

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.

[-] realharo@lemm.ee 2 points 11 months ago* (last edited 11 months ago)

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.

[-] spartanatreyu@programming.dev 4 points 11 months ago

But why bother with creating a new language

I can just do items.map(item => 〈Item key={item.id} item={item} /〉)

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.

[-] kameecoding@lemmy.world 2 points 11 months ago* (last edited 11 months ago)

but how do you know what renderItem does? where will the items end up?

we are visual creatures.

if I see a 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.

[-] realharo@lemm.ee 1 points 11 months ago* (last edited 11 months ago)

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.

[-] spartanatreyu@programming.dev 2 points 11 months ago* (last edited 11 months ago)

DOM attributes are built for browsers and frameworks to take advantage of.

The style of some of those frameworks to stick symbols in there is downright weird. But that only goes against those particular frameworks. It doesn't impact how good DOM attributes actually are.

[-] CmdrKeen@lemmy.today 1 points 11 months ago

Both are weird compared to Svelte.

[-] spartanatreyu@programming.dev 1 points 11 months ago* (last edited 11 months ago)

Svelte uses labels, so Svelte itself is weird compared to everything. Except in a way to assembly and 50s goto-control-flow styled code.

[-] CmdrKeen@lemmy.today 1 points 11 months ago

You mean these? Does it use them internally, because I haven't really seen them in any Svelte code.

If so, what does it matter what the compiler does in order to make your code work, so long as it's legal? It's perfectly valid JS, that's all that counts.

I wouldn't say Svelte is weird as much as it's different. That's the whole point after all. Instead of adding a bunch of library bloat and keeping an entire copy of the DOM to constantly compare to and derive changes from, it compiles your components down to native JS that manipulates the DOM directly, like you would by hand. Except of course the compiler uses different ways to achieve that than you would, but that's because it doesn't have to care about readability, as long as it creates valid and efficient code.

this post was submitted on 11 Dec 2023
74 points (100.0% liked)

Programming

17378 readers
204 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev



founded 1 year ago
MODERATORS