ReactEurope
12 HN recommenders · recommended in 13 months, 2015–2022
30:41 · 472K views · Jul 5, 2015
Dan Abramov live-codes hot reloading with time-travel debugging at React Europe 2015, debuting Redux and its devtools. The slides themselves are driven by application state.
Seen as the canonical Redux introduction and a model live-coding talk about better developer tools.
20 comments from Hacker News
Not a readable resource, but I feel it is worth the exception - Watch Dan Abramov's talk [1] about Redux (Reducers + Flux). Gives great insight into his motivation for creating React Hot Loader and Redux. +1 for Dan (aka Gaearon) being an excellent developer [1] this video
Dan Abramov's talk on Redux and hot loader at ReactEurope really nails live coding for maximum effect: this video His presentation is web-based, so his live coding interacts with his "slide-ware", e.g. changing slides is accomplished by setting application state.
One of my favourites I watched recently was Dan Abramov introducing React hot loading, Redux and Redux Dev Tools in the same 30 minute talk: this video
Hey, lib author here. Let me first explain Flux in five seconds. Instead of mutating your models, any data mutation in your app is described as a plain object describing “what happened” (e.g. { type: LIKED_POST, postId: 42 }) and broadcasted globally. Models (called Stores in Flux) have no setters and change their internal state in response to specific mutation objects (called Actions). The goal of Flux is to have single source of truth and make it easy to avoid race conditions and cascading updates. If some data is wrong, just repeat the same Actions in the same order, and you'll get the same data in Stores. Very easy to debug. Now, for Redux. It keeps the properties of Flux (mutations described as objects), but instead of Stores mutating internal state, it has Reducers—pure functions with (state, action) => state signature. While writing Flux apps, I noticed that the _essence_ of every Store I ever wrote was a reducer function. It turns out that using pure functions instead of event emitters has many benefits: they are composable ( [LINK] ), it is possible to hot reload their logic ( [LINK] ). I wrote Redux for my React Europe talk about Hot Reloading and Time Travel ( [LINK] ). It got popular before I explained _why_ I made it. In my talk I show what kind of powerful devtools it is possible to build on top of Redux. The video of my talk will be up soon, you can check when it appears here: [LINK] . Also check out my article on the subject: [LINK] EDIT: THE VIDEO IS UP! [VID
Directives are replaced by React components. I would argue, IMO, that directives are actually a half-assed implementation of components. In terms of services, I would recommend using Flux to perform actions / store your state. This is what a lot of developers are leaning towards these days. There was a great talk at React Conf about Reflux, I've never used it, but the presentation has convinced me to try it out on my next project: this video When you build with React, imagine building an application in Angular using only Directives. It isn't that simple, but that is sort of the idea with React components. I started with Angular (and still work day to day with it at work) but if someone asked me how I would architect an application tomorrow, I would go with Flux + React + ES6, no questions asked. Also, Angular2 is heavily influenced by React, so learning React now will allow you to have a better understanding of Angular2.