Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
Why Hacker News recommends it
Seen as the canonical Redux introduction and a model live-coding talk about better developer tools.
What it is
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.
Recommended by 12 HN commenters across 8 different months, 2015 to 2022.
What Hacker News said
Strong rec GordyMD · 2015-07 · on “Ask HN: Can you suggest some good JavaScript projects to read and learn?”
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]
Strong rec jongalloway2 · 2015-11 · on “Writing code doesn't mix well with oration”
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.
Strong rec mcintyre1994 · 2018-04 · on “Ask HN: What is your favourite tech talk?”
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]
Recommends danabramov · 2015-07 · on “Redux: Atomic Flux with Hot Reloading”
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 desc
Recommends lingojs · 2015-07 · on “Angular vs. React – the tie breaker”
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
Recommends adeptima · 2015-07 · on “Flux Architecture Visual Cheatsheet”
This is out-dated from my perspective. Check Redux [this video] [LINK] Many Flux implementation lucks of isomorphic, proper hot-reloading, etc. ES6 transition is on its way. Most code will be abandoned. Alt, Reflux, etc are all in trouble.
Recommends findjashua · 2015-07 · on “Flux Architecture Visual Cheatsheet”
If you're wondering about which flux implementation to start with, I'd highly recommend checking out Redux : [LINK] The main idea is to think of stores as reducers (redux = reducers + flux). He also gave a very good talk on it at react-europe: [this video]
Recommends GordyMD · 2015-10 · on “The 3REE Stack: React, Redux, RethinkDB and Express.js”
I think if you take a lot at the motivations that Dan Abramov had for creating Redux [1], you'll see that improving debugging was at the centre of it. Check out his talk he gave at React-Europe. He basically is talking about improving developer tools. The functional approach Redux takes allows for you to see state transitions and replay actions - making it relatively trivial (compared to say Angular.js) to understand how to reproduce a buggy state. [1] [LINK] [2] [this video]