First of all, I think your article is really great. I like the code comparison. Help me learn React somehow.
However, when you said it is 1200Kb, I can’t believe it. After reviewing your code,
I realize couple things
- material eats 375k-ish. It is still in beta, so they haven’t worked on optimization yet (https://github.com/angular/material2/issues/3696). In the future, you should be able to treeshake it instead of loading all 375k.
- You also added animation, which is 70K-ish
- You included http but you use graphql. Honestly, most of people would just use http/httpClient from Angular, which is way smaller. 100k-ish vs 20k-ish
- You included ReactivedFormsModule, but you don’t really use any reactive form feature.
- You should use the latest angular cli 1.3 with — build-optimizer it actually cut your build size like 50%
chunk {0} main.6c71668b8e8d6d2adbb0.bundle.js (main) 638 kB {3} [initial] [rendered]
chunk {1} polyfills.2bed3755db1b8cd1fb1f.bundle.js (polyfills) 63.6 kB {3} [initial] [rendered]
chunk {2} styles.31436f12778709bc8313.bundle.css (styles) 33.5 kB {3} [initial] [rendered]
chunk {3} inline.2d994948ef56c73aa977.bundle.js (inline) 1.45 kB [entry] [rendered]
Above numbers are just simply generated by cli with —build-optimizer and with all latest version of libraries.
If you gzip it, the size goes down to 160K-ish
Here is another great example. In Angular, there is a team working on build for you. You don’t need to figure out the best webpack config or best library you need to use with your webpack or even your app. If you are working in a team with more than 2 members with strong opinions. Angular is the only way to be productive.
As others points out, you can use NgRx/Store to have unidirectional data flow. And it only cost you 10k-ish. Highly recommended.
And in your article you didn’t mention other features Angular offers like lazyloading. It is included in the build already.
IMHO, I believe both Angular & React even VueJS are all good and easy to learn. Just pick whatever you like if you are one man wolf pack type.
For a team, I think go with Angular would make team members being peaceful :) .
