Angular 4 vs React.js vs Polymer and some thinking of component

 # I posted the same article on Medium, and will use Medium from now on.
https://medium.com/@newying61/angular-4-vs-react-js-vs-polymer-and-some-thinking-of-component-596085325d5

 This week, I got some time to have a look at Angular 4 and Polymer, the two frameworks for developing component based SPA. As I have used React.js for about 2 years, just wanted to write down what I feel about these two comparing with React.
 First about Angular 4. It is said to be component base, but when I saw other projects which are using it, I just feel, it's kind of like Angular 1. Component becomes controller, and all the logic are still in services. Also, it's quite confusing about directives, when and where to use it...
 I should say, Angular 4 's learning curve is too high, and if you use it, it's very easy to get effected by the former experience with Angular 1.
 For Polymer, it's quite well organised and because of it's shadow dom is a standard, it can make HTML so easy to understand. Although, it has two way bindings just like Angular, it is still a UI library, not like Angular as a framework.
 So, Polymer can easily re-organised with Redux by adding a store component and pass it anywhere by using a singleton pattern.
 Compared to React.js, I think Polymer may be a good competitor. It also batch the changes to DOM and can make some operations easier by two way binding.

 Then I started to think about what component means for SPA. React.js and Polymer let you define a component and by wrapping it with other components or using higher order components you can organise an app with good structure. Angular 4 can do the same thing, but compared the effort, I would say, React.js and Polymer are much better.
 A component should be kind of dumb, which means it should only care about itself and only work with the attributes passed in. It can has it's own state (state in React.js component and property in Polymer component) to control how it looks like.
 Also, it doesn't care about what it's children looks like. By wrapping anything, we can just create a new component with new functions.
 This can dramatically increase the usability of the components. We can use it anywhere and it should just work. :)
 Also by doing this, it can easily integrate with other libs like Redux to control model data.
 A warning is, if a state is only related to a specific component, then it should not be put in store, don's abuse Redux to store everything.

 A good example is Polymer's iron-page, by defining the selected attribute and the target attribute, it just select the right child component and add a new attribute to it.
 The same as react-router, just define the structure, and it just work.
 By the way, compared to these two, Angular 4's router is kind of ugly. It needs a json object... which is not direct at all...