3 ms·
Yeah, regular HTML is overly verbose. Being able to compose JSX generating functions and using regular JavaScript logic for loops, conditions etc. wins out for
by seanwilson 2y ago
Yeah, regular HTML is overly verbose. Being able to compose JSX generating functions and using regular JavaScript logic for loops, conditions etc. wins out for me though because realistic HTML gets big and messy otherwise. Can you do something like this in Pug? (where the actual HTML would be more complex, so you'd want to split it up like this)
const elToolbar = generateToolbar(toolbarItems) // returns JSX
const elUserCards = users.map(user => <div class="card card-body fw-bold">{{ user.name }}</div>)
return <div>
{elToolbar}
{elUserCards}
</div>
I find doing something similar with Vue HTML templates has far too much boilerplate, and I have to learn/recall all this Vue specific boilerplate instead of using regular functions so I end up not breaking up my HTML as much. Unless there's a way to do something similar within in a single file?
- bvrmn 2y agoThis approach is a classic footgun for beginners in the context of "hook rules". In general it's quite fragile.
- seanwilson 2y agoCan you explain more? You're talking about React (hooks) here? Or this applies to Vue + JSX as well?
- bvrmn 2y agoIt's React thing. In maintenance context it's always better to not extract component instantiation. They could start to use hooks or they could be wrapped in conditions in a parent component and it would lead to severe quite hard to find issues.
- seanwilson 2y agoThis is a bonus of using Vue then if this kind of code doesn't pose a problem there? Makes me wonder why this is all so difficult. Vue has a lot less problems for me than previous iterations and frameworks, but it's still frustrating how many footguns still exist. Like gotchas where you lose reactivity where linters/compilers won't catch the problem for you, and you forget the gotchas if you're not immersed in that framework for a while. I'm not getting why we can't have robust static checking for this stuff vs trusting every developer to be careful.
- bvrmn 2y agoYep. I prefer Vue myself — no need to stay on toe tips full time. It's really a question of available ecosystem and quite phenomenal React's backward compatibility which ties very agile in other circumstances FE devs to the framework.
- gbuk2013 2y ago> Can you do something like this in Pug? https://pugjs.org/language/mixins.html https://pugjs.org/language/mixins.html
- seanwilson 2y agoAny particular part? I'm maybe not following the specifics, but this is similar to the `elUserCards` example I gave? JSX is regular JavaScript, so you can use regular functions, maps, variables, default arguments etc. to generate repetitive HTML, just like you would to generate repetitive strings or JSON, without having to learn a new language.