Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015

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

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.

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

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 ▶ this video - Stackblitz link - Comm link - Mongodb link - Let's Encrypt link - Figwheel-Clojurescript link - Svelte link

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: ▶ this video

Dan Abramov's DevTools[0] 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] ▶ 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.

As somebody who hasn't worked with react before I find this talk very interesting: ▶ 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.

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

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 ▶ 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.

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.

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.