4 ms·
I've used ExtJS, Backbone, CanJS, Angular, Polymer and React commercially. To me, React is a more complex alternative to Google's Polymer framework. In React,
by jondubois 10y ago
I've used ExtJS, Backbone, CanJS, Angular, Polymer and React commercially.
To me, React is a more complex alternative to Google's Polymer framework.
In React, a component is made up of code which has HTML inside it.
In Polymer, a component is made up of HTML which has code inside it.
They're actually the inverse of each other but the result is almost exactly the same - Both libraries allow you to build components which contain other components and both provide clean encapsulation.
One of the reasons why I have a slight preference for PolymerJS is that it's much simpler and works with existing HTML concepts (they didn't need to invent a new debugging panel, a new DOM model, a new approach to CSS styling or an advanced state management architecture like Redux to make it work) - Instead, they leveraged existing web technologies. For example, Polymer provides really nice CSS style encapsulation. In PolymerJS, the <style> tag only affects the component in which it's declared (potentially including sub-components but not parent components).
It makes CSS really easy to use/maintain without actually reinventing it. You can do cool stuff like allow a sub-component's style to change automatically as you move it from one parent component to another. You don't need any special module or library or special styling logic; just a <style> tag declared at the appropriate level in your component tree/hierarchy is all you need.
That said, the React community is massive and because of this, there are tons of modules and tools around it so it's hard to beat now - It seems that pretty much every problem that React has introduced has since been fixed.
- acemarke 10y agoOn the flip side, React's composability and generic component rendering concept allows it to be reused across many non-HTML platforms, including React Native, ReactVR, and more (per this list of React renderers: http://iamdustan.com/react-renderers/ http://iamdustan.com/react-renderers/ ). Also, fwiw, Facebook didn't invent Redux, Dan Abramov and Andrew Clark did _before_ they joined the React team :)
- jondubois 10y agoThere is nothing inherent to React which makes it easier to render on native platforms. This could easily be achieved with Polymer too - It's just that the Polymer community is much smaller so they're behind in that respect.
- Kiro 10y ago> You can do cool stuff like allow a sub-component's style to change automatically as you move it from one parent component to another. I don't like this at all. I want all the styles to be encapsulated to the component only. It shouldn't matter what parent component it's in. Polymer's CSS automatically spills over into the child components.
- rictic 10y ago> Polymer's CSS automatically spills over into the child components. Hm? No, the opposite, the shadow DOM provides CSS encapsulation.
- Kiro 10y agoOk, sorry. I misunderstood it then. So what does this mean? "potentially including sub-components but not parent components"
- jondubois 10y agoYou CAN optionally have styles from a parent component affect child components but you can also restrict the styles to the host component only (excluding children) if that's what you want. I find that often though, I like the host component to affect the style of child components - For example, let's say we have 2 container components which hold a list of items; one container component shows its items as rows and the other component shows items as thumbnails (with a picture). In this case we want the parent container component to affect the style of the child item (thumbnail vs row). If we were to drag an item from one container and drop it into another, we would want the style (thumbnail vs row) of the new parent container to take effect on the child (without having to imperatively update styles in the child). The danger in traditional (non-WebComponents) CSS is not the cascading aspect of it; it's the fact that it's global. If you localize CSS to components such that it only cascades downwards in the DOM hierarchy, then it solves all your problems. Also, because of the CSS specificity rule, style properties defined in the child will overwrite those from the parent, so the child always gets the last say about how it looks - With this approach, the child can effectively decide which CSS properties its parent is not allowed to modify.
- pier25 10y agoMy team is moving from React to Vue precisely for many of the reasons you are pointing out. We considered Polymer but we felt it's still too early for web components. Vue's code is not as elegant as React or others, but it's very pragmatic, fast, lightweight, and easy to learn.