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

Hey so my talk is about developer tools because reacting hot reloading and time travel these are all developer tools but tools don't exist in vacuum tools exist to solve a problem so what is the problem that I'm trying to solve there are many worthy problems in software engineering but there is one particular problem that excludes to my heart and that I want to help solve and that problem is an emotion that I feel I feel a lot of frustration developing apps not just web apps native apps - it's all the same and I feel frustrated not because of the complex challenges but because if the small mistakes that I make that accumulate over time and they I wished a lot of time on them so this frustration comes from the fact that my workflow is not optimized for iteration so I have to spend a lot of time tweaking things iteration is what I do most of the time but I treat the component friendly method or I refactor a component I split it into two components but I spent too much time you know battling with small mistakes so what I want to show in this talk is how I try to solve the problem of my workflow the problem of optimizing my workflow for myself and maybe this will work for you maybe this will not work for you but I want to encourage you to actually spend time working on developer tools because before you can optimize your wrap you should optimize your workflow so you have more time to spend working on your app because once enough frustration is gone your programming actually feels fun again just like it used to do when the tools were simple so my name is Dan Abramov this is my twitter username and medium you might have read some of my tweets or my articles whatever except github where its Garan and don't ask me why it just is it's like flow the phone so I have some popular repositories in react tracker system and most of my work is around the reactive system because that's what inspired me to contribute to the open source in the first place but there are two particular projects that I'm going to talk about today and one of them is called react hot loader and that's my atone attempt at solving my frustration with iterating on the view layer and Redux is a similar attempt to solve my frustration with iterating on the model layer it's like a variation on Fox so the status quo for JavaScript in the for the mainstream JavaScript community is that every time you change something whether a render method or data transformation you have to refresh your app and you potentially lose the street so if you're inside some model and there is a tab there or whatever you have to do all the same things again and if you're reaching on your data transformations and I have some actions that cause these transformations like you click a button and whatever happens you need to redo these chaps every time you change a function because you have to make sure that they work correctly so it does not have to be this way I think that we can fix it because you don't rewrite to your whole application every five minutes most of the time the changes are really scoped to a particular part like a particular component or maybe your change in a particular flux or or styles whatever it's possible to replace these parts in runtime and another important part is that I do a lot of typos I do a lot of silly mistakes like not crashes so it's important to me that if I have hot reloading I need my tools to recover from errors and to show these errors to me so I don't have to restart my session when I make a silly mistake there are many tools for hot reloading some of them more populous and less popular so I'm not going to talk about everything today I'm just going to tell you about the stuff that I was working on react folder and it's powered by web pack but you really should check out other tools in this list and you should watch the talk on freak wheel by Bruce Coleman it's really illuminating and inspiring you should do that so my reactor workflow what is hot reloading right let's find out so I got a bottle here and it's supposed to be an example rate it says timer example but I don't really see an example because I made a typo so I'm going to bring here my editor and my slide track is actually a big react component right that's composed out of components and I have this what is what is hot reloading component and I see it says timer example I forgot the angle brackets so I'm just going to put in here press save I get a timer right and it's not it's I systems it's inside the model right and it's you it says here but it's going the wrong way that's a bummer right well there is a this is my timer component which is pretty simple and I got this increment method that's insert timeout and yeah I should change it to increment and now increments I should make it faster right okay okay yeah all right I have the license but my laptop did not work so I'm using Christopher's laptop but I do have the license that is it not transfer it so I can actually to rate on rent a method to you so for example I want to make it look fencer and I can write something low counts color equals count through model or to let's say red or black alright and I got this thief and let me write style equals power but I did not work right because it's British English so I'm going to change it to international English and it's two mounted right it does not lose the street didn't obviously props they did not get unmounted it just I can continue working on that so there's a huge property boost from air that is reactor powder and the way it works it seems like magic but it's it really is not is it is a compile-time transform and this is your typical react component right it has some it's a glass with some methods like render and lifecycle hooks and some custom methods event handlers whatever but will react with all the does is it takes your methods and it puts them separately it stores them separately and instead it replaces the methods on your class with proxies that call those stored methods so anytime the app calls Ranger Ranger is called then component it update component to the update is called so it calls your proxy it makes proxies that call your methods but anytime you save a file it replaces the stored methods so now the proxies point to the new versions and when it renders its using the new render when there is some lifecycle hook it calls the new lifecycle cook and so on so every time you change the file is going to replace destroyed methods but the instances they stay the same and the his to have their state so that was making what makes it powerful and to the outside to the app itself to other components components that are proxies with reactor folder these two look exactly the same so the app is unaware that this is happening and of course it is only meant to be used in development you don't do that in production surely this cannot work without some buy-in from the module system so here's where web pack comes into play so web pack is a model bundler kind of like browserify but it has this feature called hot model replacement and the idea of that feature is that anytime you change a file if you if it is in hot mode is going to emit another JavaScript file that contains only the stuff that you change so if you change a component file is going to meet hot update with that component file and rapid loader applies these updates so they are just downloaded skip checks and reactive loader does this proxy magic and the important part about it is that if you have stateful modules like flag stores traditional flag stores with local street they do not get re-evaluated so it is possible to use react loader in a backbone codebase if you only save component files if you only iterate on them because the rest of the code is not touched and this is all possible only because render in react does not have side effects it returns the description is declarative and if something is declarative if you push side effects to the edge it is possible to replace the declarative part and still have it work so thanks renter and this was my reactor quo I use reactor loader for tweaking components I use side loader that comes with web pack for tweaking the CSS the same way and I'm using webpack as my model bundler that allows me to do that now flux so react water is not bad with Fox you can tweak your components you can even tweak your action creators because they are just pure functions so it's possible to put it up for the component to reevaluate referencing the new versions and then react with older does the proxy think so it's possible to edit a lot of street listings in your app but you cannot eat rate on stores this way because stores are Street full if you re execute the store code is going to get the new initial street right so the straight is lost the subscriptions are lost it's a bummer but it doesn't have to be this way and as I was thinking more about trying to work around this and to make somehow fix to feed flocks into react with other workflow I figure out that in fact store in flux does too many things it is it has to much bolder plate and I'm not talking about the switch statements let me so a lot of flux implementation they try to solve the switch statements because the thing that this is the boiler plate of flux but the real boiler plate is in concepts not in in the syntax you can always write your own helper that turns something into from an object map to switch statement that's not the important part the important part are the concepts so what's happening here there is this registration right but why should a stall register itself it's a bit like somebody registering themselves for a party I mean if they're invited they're going to be invited if the store whatever calls the store manages it it can register and register when it wants to so I'm going to export this function instead but now I see that there is a mutation right I'm pushing the items but you're going to trust trust me on this for now I'm going to show why it's important but I'm going to remove the mutation I'm going to replace it with assignment I'm going to create a new object because it simple simple to write any kind of powerful developer tools if you are reaching your seat all over the place you need to have a way to have references to all the states so I'm replacing that with assignment and it's really easy to do with es7 spread syntax you don't have to use immutable J as if you don't want to but please donate your data now the Gators Fox stores they have getters and is really handy you can write stuff like is to do complete and similar but I don't think it really belongs to the store like to the color concept of the store and it becomes apparent when you have getters you want to use one store from another store aggregated data map something filter whatever and stores begin to depend on other stores but really all you want is for these functions to use one another so what we want is to probably move getters somewhat separately and this is another benefit to see you can apply memorization or similar performance optimization techniques so let's remove the getters for now and let's export get seed which returns the economical street of the store in a way that makes sense for the store maybe it's a number maybe it's an array maybe it's complex object but let's just say that each store has some kind of seed I remember when we are removed the mutation this gives us some nice opportunities for example this lets us remove the event emitter how is it possible well whatever calls the handle function is able to call get street before and after that call and compare the reference and if the reference has changed then the straw has changed and if the reference to get straight result is the same then it has not changed so the straw does not have to do extra steps to notify about the changes it's an after expurgate shade so it also opens the door for other performance optimizations for them for example when you have many stores and each of them means their own updates you have compose receiving new Street in the middle of this patch but what you really want to do is to let all-source accept all the data and then emit a single update and it's possible with that model because the dispatcher or whatever calls them knows what changed and what did not finally what do we have gets eat right because we already have a handle function and the handle function is a function right they can return something so to just return the next state and at this point our store is really simple but not exactly because it's to has the local seed but it doesn't have to if it returns the street every time whatever calls it can save it somewhere and then give it back next time so we can make it a parameter right and this is our slimmed down store this is captures the essence of the Fox store Fox store is how state is transformed by an action and shake state and action and returns the new State this is much simpler than the traditional Fox tour but it captures the same idea so state action to state this looks like a lot like another signature accumulator value to accumulator and as a signature of a real reduced function like right so it's a reducer it's not a store it's a reducer because if you have an array of actions let's say in a unit test plane objects you can call reduce on them and pass your reducer and the initial state and what's it going to get is the result state of that reducer so that's pretty powerful you can call it with any kinds of actions this opens the door for very powerful tools that inspect your stores and one missing thing here is that as you see I'm passing the initial street but whatever is calling the reducer doesn't need to know it's an implementation to tell of the reducer what the initial state is so I'm just going to add it as a default parameter and initially I pass undefined so that's my store or reducer to say it correctly and I totally did not intend to do this honestly I just wanted something for my talk but it turned out that I found knowfox library that does it that works via reducer composition and that allows some powerful debugging tools I'm going to show now so we just reducers plus box it's called Redux you can check it out it's open source it just got over a thousand stars although I have not really explained why I built it so that's my chance to do that and one nice property is that you don't really need the dispatcher and the whole thing with many stores because unlike event 2-meters functions fewer functions I really get it easy to compose you can just call all your reducers and gather their results in one state object and that's the route reducer just like you have a route component at the top of your app so that's pretty cool now I'm going to show you something I got a to-do app here it's a common theme but it doesn't really work it doesn't do anything yet so let me go there with some stuff I built a thing that I call monitor and I'm going to uncomment it yeah there it is so let me bring it closer so this is just a react component that I used for the buggin and it shows all actions that ever happened in my app and my slide rack is a real Redux app so it says the next slide it changes the current slide right next slide next slide so it's action state action state how actions change this cheat and do a lot of things of course you will not do that in production is just for development but I can cancel some actions right I can go back you can go back a lot or I can go forward right so it's pretty cool but I don't want to have all my actions all the time like that's really noisy and I want to work on features instead so I'm going to commit it's kind of like get right you have the initial state and you have the staged stuff so actions are like stage stage actions and I'm going to start working on this feature so if I go back I can roll back ok I'm here again I'm working on this feature on the to the app and to-do app is just a react component it doesn't do much right now you see there are some other files here like action types and I know some people hate constants but that's not the point you can avoid them but I'm going to keep it simple action creators which are just files that return the plane object to actions with the stripes and the reducers file which I only have a single reducer that manages current slide right it says that when the next slide go forward I will go back whatever so I'm going to add a new oh wait I don't want to do that here what I want to do is I want to render to do this right I don't have any introduced yet but I started working on to do so let me just render to do is save it it says try better this render to this is not function or that right because I am not written yet but I'm going to write it eventually so it's probably I need some kind of list right it's you you really basic these props to do this map to do let's say put it in this item to do this item you're not very property I may have a fun defined that makes sense because I don't have the to do this in my state which is here right so I'm going to write a reducer for to do this so that it manages the to do state export function to do this and let's just return the fake data hey how let's go okay and do you see that it's it's actually in the street now so it's not allowed in my reduce Earth you just but it doesn't render anything why is that maybe it's because my debug monitor which is also a rare component is too wide you just cannot see that yeah I'm going to make it more narrow yeah these are the two dues so it says to do to do yeah I forgot the races right um I do that all the time I don't want to spend time on it heyyo that's correct okay but that's just dummy data right I'm going to change the up to D to the typical signature default state is am jewelry alright so now let's dispatch action because we really want to dispatch actions and Fox so I'm going to add a constant export counts add to do equals unsurprisingly at to do I'm going to add an action free each or now to do text he's going to return something like type types ad to do with some tax that I pass and I'm going to my component and in fact let me just try to dispatch something I just want to know and dispatch works so grab this patch from props it's injected bar redux dispatch something let's just try oh it says something right that's good rollback you don't care for this okay so now i can import I know that I have not made mistakes so far so that's good I can import add to do from action creators and let me dispatch add to do Hey and yeah indeed it dispatches at to do hey but I don't want to say hey I want to dispatch whatever us in the textbox so I use value yeah let's see hey that works let me roll back now I want to reset the node value because it's not cool that it sees their read so now hey okay it is appears how let's go so I have the street changed by not really changed to say the sames but it stays the same but I got these actions so I want to change the street so what I'm going to do now is I'm going to go to my reducer implementation and I'm going to write a switch statement switch action type if it's add to do I'm going to return something like action text and say or otherwise I'm going to return the current state so whoa you can alter but take a look here it says interrupted by an error of the chain it tried to replay my actions and my irreducibly at but that does not mean I have to stop alright it says F is not defined okay I forgot to add a parameter and now it says I had to do is not defined so I'm going to import that to do an out reevaluate right but the result is too messy and it's kind of hard to look at the current state it's there's too much here I want to focus on the 2ds so let me go to my app and put a prop on my Redux monitor challenge to only show me in the tudors that's what I do but right now all right so yeah I see the two duis and there is some nested arrays oh there is nested arrays I forgot to put the spread operator yeah it's right now but it's in the wrong order I'm almost there I can feel it yeah okay so the extra nice thing about it is these are developer tools I mean I made them like in a week before that I was thinking about it for three months but it's artfully the UX is not really great but you can add some software and one feature I really look forward to is that in export as unit tests because these are reactions right and they have intermediate states and you can export it a unit test from your debugging session which is pretty cool so this is it with live coding so this my flux workflow I use Redux I used to read up to tools with that which are not released yet but I'm going to release them like soon in a week and I'm going to travel eight react with order to have this error handling it doesn't have it now I'm going to so it's also coming and right back to manage all that now there is one less demo and you know it doesn't matter what we're entering platform you use right because it's the same thing so who tried to write here okay oh by the way I don't like this prompt it says what do we need to do and I want to write something like wet right okay how let's go and there's your monitor here and big thanks for - Johannes lumpy who helped me who ported the monitor in 1:3 to react native it's not really hard right these are just react components so I'm able to toggle the actions back and in 2d the UI is not perfect I mean that's not the point right now right but I can toggle them and I'm able to do the same kind of stuff let's say I wanted to mark is completed but it doesn't work out let's look at my chaga to do handler and it has completed how he's just this object right so let me spread over it and put the initial object there too but it does not work oh maybe I need to spread first right I'm over writing it yeah it worked correctly i iterate on my actions right so that's pretty cool and that was um no that wasn't what I want you to say is that these are not new things I did not invent them there some people will tell you that they existed thirty years ago and maybe they'll be right but we'll never find out if nobody talks about bringing cool functional techniques to JavaScript because if you learn a cool programming language like Alma closure script you stay there it doesn't have to be this way you know you can share your knowledge please do because you can do functional in JavaScript you can bring functional programming to mainstream and do really cool stuff with it my name is John Abramoff thank you so if anyone has questions no no questions oh there is a question yeah uh I don't know I haven't really thought about it much currently it works as a react component in sorry a component tree and it subscribes to the instance of Jesus Christ or redux it actually works as a normal component subscribing to redux but with the debug state instead of the Europe state but if you are make a bridge that and I want to do that make a bridge that allows you to send the payload back and forward we have WebSockets or whatever you can build it any way you want you can put this depth into chrome dev tools or Firefox or whatever to your friends computer I think you can do that that is it okay thank you for having me

Channel: ReactEurope

Views: 430,296

Keywords: Dan Abramov, ReactEurope, JavaScript (Programming Language), reactjs, conference, dev tools

Id: xsSnOQynTHs

Length: 30min 40sec (1840 seconds)

Published: Sun Jul 05 2015

Reddit Comments

[u/kevrom]

Awesome presentation. Really looking forward to checking out the redux dev tools. Thanks for this!

[u/OfekA]

Redux looks awesome, but I am starting a moderately big project next week, and it's hard not to think that it might be a mistake to use it just yet.

Any recommendations for a flux framework which is mature, with as little boilerplate as possible and also easily testable?

[u/Ledoux88]

Maybe a bit offtopic, but does anyone know what sublime text theme and color scheme is he using?