5 ms·
For 95% of apps, Svelte's custom syntax is pure cognitive overhead making little difference to the performance of the app.
by jeswin 5y ago
For 95% of apps, Svelte's custom syntax is pure cognitive overhead making little difference to the performance of the app.
- recursive 5y agoFor me, trying to make sense of how React's reconciler matches hook invocations to component instances is pure cognitive overhead. Other people don't seem to have this problem. But trying to accomplish anything in React is arduous for me, particularly with function components and hooks. Class components seem a little more obvious.
- madeofpalk 5y agoIs it possible to just not think about it? Or is that easier said than done?
- millerm 5y agoYes, it's completely possible and most people don't think about it, at all. It's not complicated.
- scotty79 5y agoI think it's perfectly possible if you just don't place hooks in a loop or if, which you shouldn't do and are warned against.
- recursive 5y agoUsually it just works. But, even following the "Rules of Hooks" (https://reactjs.org/docs/hooks-rules.html https://reactjs.org/docs/hooks-rules.html), I managed to write some code where the state that belonged to one component ended up in its adjacent sibling. When that happened, I really wasn't sure what to do other than go on a deep react dive. It's not clear how to debug stuff like that. I came to realize that I had confused the reconciler. The fix is basically to just use the key= attribute everywhere, not just in arrays.
- madeofpalk 5y agoHow did this happen? I've never seen this in practice if you weren't doing something "obviously" wrong.
- recursive 5y agoHere's a minimal-ish repro of the issue I ran in to. It's totally possible that I'm doing something "obviously" wrong. However, I've spent more than a couple of hours reading through docs trying to figure out what it is. I'm not seeing it. https://codepen.io/recursive/pen/XWMLWBZ https://codepen.io/recursive/pen/XWMLWBZ If you could point to anything in the docs that I'm missing, I'd genuinely appreciate it.
- WickyNilliams 5y agoI assume the issue here is that you are rendering a single nameInput instance in two places. This is definitely not idiomatic react and I can't ever think of seeing this in the wild. Just render two instances. If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop.
- recursive 5y ago> If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop. This is the kind of stuff that's difficult for me to wrap my mind around. If I have to remember to "do it this way, but not that way", that's mental overhead. Especially when it's difficult to articulate exactly under what circumstances this problem occurs. Obviously, there are plenty of people that have no problem with it. However, my first inclinations seem to be more likely to be those that React has problems with. I'm having a difficult time "thinking in React".
- arcturus17 5y agoEverything you say is true for pretty much every technology?
- wruza 5y agoAnd for me, both are unnecessary overcomplicated abstractions over mithril+js based classical MVC (not web-renamed one): class App { constructor() { this.message = 'Hello' this.foo = new Foo this.show_foo = true } bye() { this.message = 'Bye' this.show_foo = false } } class AppView { view({attrs:{app}}) { const attrs = { onclick: (e) => app.bye(), } return m('div.container', [ m('h1', attrs, 'Hello!'), (app.show_foo ? m(FooView, {foo:app.foo}), : null), this.render_footer(app), ]) } render_footer(app) { return m(…) } } window.app = new App m.mount(document.all.root, { view: () => m(AppView, {app})) })
- dgellow 5y agoSvelte is quite small, you can be effective with it in a weekend.
- nobody0 5y agoThis, that's why React was a bit revolutionary at its time. No customized template dsl. Just speak JS.
- slumdev 5y agoWriting HTML programmatically or using JSX are both unfortunate React-isms. Not saying that Angular's banana box is ideologically superior, just that all JS frameworks have idiosyncrasies.
- blacktriangle 5y agoHonest question, why? The problem one always runs into in client side apps is you need various features like conditionals and looping when rendering your HTML. This has lead to a proliforation of templating languages that half-assedly implement these features. Moving to using a full programming language for generating your HTML removes the need for janky inconsistant templating languages.
- slumdev 5y agoBrowsers support HTML and JS (and a few other things not relevant to this point). Neither HTML or JS on its own will do what you're describing. HTML doesn't allow binding to a data source. JS doesn't allow you to write HTML declaratively. So, people build abstractions. If an abstraction ever became popular enough and futureproof enough, there could be a case for supporting it natively. But I don't know of anything that currently exists and does what you're describing.
- blacktriangle 5y agoNatively no, but writing some JS code that will take an array of objects and turn it into a DocumentFragment is a trivial exercise. And once you're representing your HTML as data, looping and data binding are trivial.
- 5y ago
- dbrueck 5y agoI'm curious to better understand what you mean by this (maybe an example or two?).
- FractalHQ 5y agoWhat custom syntax? You don’t even need to use it, but 100% of the time I do, the custom syntax implementation is vastly simpler than any alternative. I would love an example that contradicts my experience.