3 ms·
Somehow, I don't know why especially, I've come to enjoy JSX/TSX syntax with styled components. It just is simpler for my brains, I guess. To think of all just
by tekkk 7y ago
Somehow, I don't know why especially, I've come to enjoy JSX/TSX syntax with styled components. It just is simpler for my brains, I guess. To think of all just as custom components, with their logic included as a single component. Nice to see though that also people working at Polymer do see the benefits of only JS.
But having separate style-sheets, I don't know. I have done Vue with SASS etc, but the abstraction I felt was a bit too vague. At least our team got a little lazy and wrote massive style sheets with nested classes, and similarly we then ended up fitting too much HTML to the template.
With JSX/TSX I can keep myself from doing those mistakes, and just make small simple components, that do not go overboard with logic. Although I have to say performance-wise React is still very much pain in the ass to debug, and I can't say how many working days I have wasted on some dumb rendering bug, where the components would rerender constantly.
And it's way, way too hard to find those problems and I think this is the weak point of React. No one likes figuring out how to performance optimize a simple list. It should work straight out-of-the-box! I hope that Polymer team will try to make their framework a little better than React on this part.
- nicoburns 7y agoIf you think it's bad in React (and I agree that this can be a pain point at times - although actually long lists are a weak point of the web platform in general), definitely don't try Polymer! A colleague of mine went with Polymer for a prototype (against my advice), and switched to Angular within 2 weeks because the performance of Polymer was so bad. I think the web-component approach is inherently inefficient for large apps, because you can't batch DOM reads and write like the other frameworks do. Were you using CSS modules with your SASS? I've found a few base styles in global SASS along with scoped styles in CSS (SASS) modules works pretty well for keeping things simple.
- spankalee 7y agoPolymer has generally been as fast or faster than Angular and React. We've seen that pretty consistently in Todo MVC, Hacker News, etc., shootouts. But Polymer isn't our current generation library anymore. LitElement, which is based on the lit-html template library, is. LitElement measures clearly faster than Angular and React on shootouts. There's nothing inherently inefficient about web components, and we do batching of DOM updates much like frameworks. LitElement is even able to yield between different component renders naturally, like React concurrent mode, to not jank the page.
- tekkk 7y agoHuh, well it figures that it isn't an easy problem to solve. EDIT: I was looking at the wrong. I see, it seems like a nifty way to combine styles. But hmm, I guess this one of those things that what works for you, is good enough. Somehow keeping the styles in the same file, inside the styled components, just makes everything easier to me. Granted the string interpolation is bit annoying at times for accessing the theme variables but ehh.