Segment 1
Brian Holt from Utah, working at Netflix
https://github.com/tamouse/FeM-BrianHolt-CompleteIntroToReact
5:52happyhour podcast. Get drunk and talk about Javascript
This is V2 of his workshop.
React is a very small library in terms of API surface. In 2 days you can cover the whole API.
The ecosystem is frustrating (webpack, etc).
05:28
Clone the repo, node 6, etc.
Uses Yarn
replaces npm for installs.
07:56
the difference is that npm installs are not deterministic. This means is that if you do a partial install of the dependencies in your package.json you will not end up with the same install if you start with a different partial install (and finally install the same complete dependencies).
So yarn is much more reliable. You can install your dependencies in any order. Also, it's much faster.
Yarn is less good for building libraries when you don't want have the exact same libraries. 11:09
So use Yarn for apps and npm for libraries.
Restify is used at Netflix in Node for the aggregation layer. And React as well.
npm shrink wrap file vs yarn lockfile?
13:00
he had to modify the shrink file by hand (not easy) but never the yarn lock file.
but doesn't know the internal differences.
the yarn lock file is automatically kept up to date.
yarn (npm install)yarn installs all your dependencies in a flat structure and just symlinks them. so you will see a lot of child dependencies in your node_modules.
the symlinks are the key for the speed.
16:31
yarn upgrade-interactive is a great utility. you can select the packages you want to upgrade. tweet:
npm install yarn like getting your ex-GF to move your new GF's stuff into your house. 18:00
some global installs...
will talk about preact the second day.
React
You don't need any tooling to start using react. No ES6 or JSX needed.
What problem is react solving?
21:00
React is mostly a view library (from MVC).
About MVC on the front. MVC is really great for the back-end. Everything is very clear where it should go. Then people created backbone.
On the front you don't have the same separation, end the concerns get blurry. So as the project grows, you don't know anymore where you can find your modules.
So people started shifting towards Angular and Ember. More UI type concerns.
23:25
But still it was not always clear where a certain piece of code should go.
About the question (cycle.js) : react library is not reactive programming!
Fiber architecture: react is being reorganised into smaller, faster modules.
25:37
Back to MVC
ember, angular (old versions) - not sure where to put a piece of code.
You don't know where a certain bug comes from as a result.
You have a small UI widget that doesn't work. The bug can be in the directive, the controller, the other controller, the template, etc. (27:37)
React is an answer to this. Facebook/instagram wanted a very clear code organisation logic. First threw out the MVC logic and used the request-response logic.
28:32
"Take all of the concerns and shove them together and create very small pieces."
If you have a problem with a UI element, all of the related code is in one place.
questions (jQuery, vue.js)...
31:00
He suggests not to use React with Backbone or jQuery. Backbone can be a migration path, but your goal should be to completely move to React.
The first Component
32:21