u/gaearonin r/Frontend • Recommends
Live React: Hot Reloading with Time Travel (Dan Abramov, React Europe)
0:00 / 0:00
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
ReactEurope
23K subscribers • 3 videos on Hallway
- Recommended by 13 people: 12 on Hacker News and 1 in engineering communities.
- A classic. People kept recommending it from 2015 to 2022.
- Presented by Dan Abramov, creator of Redux
- May be out of date. Uploaded 11 years ago, in an area where tools change fast.
Intermediate. Assumes working knowledge.
472K views11 years ago13 recommendations
Web developmentTools and practiceReactVue, Svelte, Angular and othersJavaScript
Dan Abramov demonstrates hot reloading and time-travel debugging in React, introducing the concepts behind Redux at ReactEurope 2015.
React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.Why it's here
13 people recommend thisWhat people say. Highly recommended as a legendary tech talk that introduced Redux and revolutionized frontend developer tooling with live reloading.
GordyMDon Hacker News • Recommends
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 link to this video
jongalloway2on Hacker News • Recommends
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: link to 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.
mcintyre1994on Hacker News • Recommends
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: link to this video
danabramovon Hacker News • Recommends
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…
lingojson Hacker News • Recommends
On “Angular vs. React – the tie breaker”
…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: link to 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, n…
adeptimaon Hacker News • Recommends
On “Flux Architecture Visual Cheatsheet”
This is out-dated from my perspective. Check Redux link to 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.
findjashuaon Hacker News • Recommends
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: link to this video
GordyMDon Hacker News • Recommends
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 link to this video
kmgon Hacker News • Recommends
On “Ask HN: Which is best React or Angular?”
Though I don't have experience with a large rewrite like this. I am really liking what I see in React. React + Redux for the Flux pattern seems to be the best combination available right now. Watch this talk by Jessica Kerr - Functional Principles In React link about why Functional / Declarative approach is good for front end development. Also Dan Abramov (Redux Author) Talk - Live React: Hot Reloading with Time Travel link to this video introducing Redux is great. Watch this awesome talk by Ryan Florence - Don't Rewrite, React! link on how to approach rewrites bottom up and he rewrites a part of the TodoMVC written in Backbone.js.
eicnixon Hacker News • Recommends
On “Ask HN: Best (Tech) talks from 2015”
As somebody who hasn't worked with react before I find this talk very interesting: link to this video He talks about improving the development workflow by hot reloading parts of the application during runtime. Slow workflows affect every developer and the idea from this talk can be used to build tools for other stacks or languages.
iheartmemcacheon Hacker News • Recommends
On “Introducing React Storybook”
Dan Abramov's DevTools0 with Hot Reload and "Time Travel" (historical debugging) is basically the same thing too, though its tied to Redux pretty heavily IIRC. So yeah, nothing new. ("TimeWarp OS"1 was a project developed in the late 80s that did the same thing at the OS level, primarily for physics simulations. (Something would break, you'd go back to state foo, change parameters mu,delta,sigma to yield foo' and continue the run.)) 0 link to this video is the canonical talk on it, certainly worth a watch. 1 link Brian Beckman formerly of Microsoft as a second author. All those RX features I'd imagine were done largely in part by him and De Smet.
sailfaston Hacker News • Recommends
On “How Redux Works: A Counter-Example”
Yeah - I can see that. "It's all functions so it all works" haha. I think the context setter that helped for me was to see "hey here's what I see with state, and here's how I think about it and did the thing" at React EU: link to this video
swyxon Hacker News • Recommends
On “Ask HN: Best dev tool pitches of all time?”
i also asked this on twitter so just putting some replies here: - Doug Engelbart link - Twilio link - Stripe - "7 lines of code" - Netlify - link - Heroku - link and git push heroku master - Cloudflare - link - Node ( link ) and Deno ( link ) - Firebase (reportedly) - link smaller companies/less impactful pitches that i still like - Redux link to this video - Stackblitz link - Comm link - Mongodb link - Let's Encrypt link - Figwheel-Clojurescript link - Svelte link
Buetolon Hacker News • Mentions
On “Working Toward Bret Victor's “Learnable Programming””
But most things we see are 2D outputs (webpages, world if you close one eye, text console,..). I think the closer we are to the bret Victor's ideal (of seeing what you do directly) is this: link to this video (react-hot-loader + redux). And this is already practical. Another nice tool who's the near his ideal is the chrome dev console: visual interaction, live edit, start/stop debugging,.. The future is bright.
lewisl9029on Hacker News • Mentions
On “What is a coder's worst nightmare? (2014)”
I agree that it sucks when the "worse" technology wins, but your points on why React is an example of one of these "worse" technologies are seriously misinformed regarding its shortcomings and have largely glossed over some of its most significant merits over existing technology. > React seems to be designed to ignore 40 years of accumulated software best practices. Best practices in software is not set in stone. Sometimes you need to break from existing best practices of the past in order to arrive at truly powerful new approaches to solving problems that may not seem intuitive at first, but eventually manage to redefine best practices through their technical merits. The Virtual DOM and re-…