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...

React.js stateful component 独自で更新可能

　最近、React.js の Component を作るとき、属性を親から、子や 孫 Component まで渡すにはちょっと面倒だなと思いました。Component Tree が大変深いからです。。。
　それで色々調べて、考えました。まず解決方法として、React.js には ChildContext という概念があります。まず親でどういうデータを Context に設定するかを指定して、孫の Component などは ContextType を定義すれば、this.context でそのインスタンスがアクセスできます。しかも shouldComponentUpdate に第三の引数が nextContext となっています。ただし、もし孫の Component と親の間に、shouldComponentUpdate が false を返す親がいると、孫が更新されません。。。これは最大の問題です。
　今アプリの作りでは、childContext はちょっと使いにくいです。。。

　次となる方法としては Redux を使って、子や孫 Component に store と直接連携するようにして、もし何か state 変更が発生すれば、store からの Event がトリガーされます。これはとっても便利ですね。具体的には store からのデータを孫 Componet の state に保存して、ajax call や、どこかの View でイベントが発生したら、Redux store が自分の state を Reducer で更新して、イベントを登録している Component には送ります。その Component のイベントハンドラーで setState() を使うと、その Component のみ更新されます。とても便利です。

　それで、もう一回 React.js Component の仕組みを考えてみると、完全に独立で自分を動けます。他の Component や、アプリ他の部分と関係ありません。別に親は普通の HTML Div でも、React Component でも、Angular Directive でも。

　これはアプリが一定程度に複雑になった話しです。通常であれば、属性で関数とかを子や孫に渡すべきです。

　それでは。