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

[@bottledspace]

All that was missing was the mic drop at the end.

[@devvvvvvvvvvvv]

That sublime text alert was the best. I was desperately waiting for that to happen. hahahaa

[@Sindoku]

Same here, I was like when is the popup coming?

[@satazor]

Amazing how such a single concept brings so much power. Great job Dan.

[@ReacteuropeOrgConf]

Hey everyone, Dan Abramov will back next year at ReactEurope on the 2-3 of June 2016 and he will also be doing a workshop! You can get your tickets here already for both the conf and workshop eventlama.com/#/events/reacteurope-2016/tickets

[@hertzbergny]

+Andrzej Pakuła it's suspicious? it's the Atom. how is it suspicious?

[@matteo_gabriele]

this video should have millions of views!

[@sangthongsikhao505]

(S)accounts for student loans are interested in my phone and internet marketing services such as information processing system

[@moveaxebx]

Great talk, great guy.

[@galdamez3]

“These are developer tools. I made these in a week.” -Dan 😳 Now excuse me while I look back at the code I wrote last week and cry. 😂

[@gauravpoudel7288]

U guys r writing code 🤪!!!

[@karaloop9544]

"... and thought about it for 3 months before." ;)

[@SoeaOu]

this guy is a genius

[@mtheoryx83]

And he gives so much back!

[@dimecasts]

this is a pet peeve of mine. Seems like these days everyone's a "Genius" you hear and now it's become an overused word these days. There are VERY few geniuses out there. Smart yes? Very smart yes. But not a genius. I think we should take care when abusing a word like this. I have a friend who is just as smart as he is and I don't call him a "genius" either.

[@mateidavid3411]

The reason why he is called a genius is because of what he did for the open source community and his contribution to web development. No doubt your friend is smart, but I do not think he'd be able to do what Dan is currently doing and what Dan has done so far.

[@ajricherson1099]

@@dimecasts Depends on who you ask. According to many, it is simply a person with an IQ over 130 or 140 (sometimes even 160). About 1 in 50 people fit this description, so I don't think it's that overused.

[@EitaFox]

@@dimecasts go fly a kite.

[@davidreghay3629]

3 years later this is still blowing minds like mine (and I've been professionally developing for the past 4 years)

[@slothsarecool]

love it :D

[@gregory7572]

+Tj Holowaychuk How's life in golang?

[@slothsarecool]

Gregory Tandiono great! only complaint is slower json parsing (50% of v8's)

[@revisionfour]

+Tj Holowaychuk TJ, you sir are a boss and a legend! Thank you for express and all of the other amazing contributions you have made to the open source community. I'm not quite sure how you contribute so much, we need more people like you in this world. Hopefully in the future we can see more talks from you. I admire your brain. :)

[@bichitomax]

+Tj Holowaychuk You don't exists :D

[@saumyarastogi466]

That sublime purchase window is the awesome part of the video.!! :D

[@Nikitosss91]

He wrote Redux from one week, i cant understand that during 3 month

[@ajit555]

A good lyricist in Indian movie could pen a great song before he finished his cigarette, since he was writing since his early age.

[@tonybrown7847]

man, love this guys tools, react-hot-loader and redux rocks!

[@kaixiaozao]

See this in 2017, still amazing !

[@dishantsoni482]

You are insanely talented @Dan Abramov. I have not commented on any youtube video so far. You made me do this dude! I am a big fan of yours.

[@ReacteuropeOrgConf]

📢 We're super excited to announce a few things about ReactEurope 2020 (May 14-15): - the first round of conference & workshops tickets will be available on September 9th @ 10am Paris/Amsterdam, 9am London Subscribe here to be reminded: docs.google.com/forms/d/e/1FA... - we'll be getting a new venue this year to provide more comfort & a whole new experience 🔥 We've grown a lot these past 5 years along with the React community and our new venue will be more spacious and give people more room to socialize, learn, relax and have fun 🎉 Make sure to check our awesome list speakers, more to come soon as well as our call for paper www.react-europe.org/#speakers One more thing, 📢 we've added another workshop to help you build modern forms in React with @erikras🔥, you can check the current schedule of workshops (more to come soon) here 👇👇 www.react-europe.org/#schedule

[@PhilKingstonByron]

Fantastic presentation man! Well done.

[@HeyItsMeDave]

Fantastic. Thank you very much Dan! Can't wait to use Redux in my next React project.

[@pranjalagnihotri6072]

It was so good to see the redux dev tools react component which he built. Just blown my mind it's literally time traveling in Redux world

[@colloredbrothers]

Absolute legend, he inspires me.

[@souhailkaoussi6415]

And it doesn't work because, uh, british english! ahaha that was awesome!

[@SebLeFrenchie]

That was an interesting and funny conference extract to watch, thanks!

[@anonimo0486]

I finally got to know why a reducer is called that😊

[@hyoukuriyama1071]

ikr

[@bryannsotomayor2575]

Nice talk, he will go places in his career.

[@EllisWhitehead]

Great demonstration!

[@ChRs]

truly an innovator. wow

[@swyxTV]

watching this in 2019?

[@afzalsayed96]

2020

[@alexandrumorarasu3671]

In 2020 and I think I should watch it yearly

[@KevinKamauk]

Sw yx 2020 reporting in

[@glum_hippo]

FYI the link to the 'Figwheel' talk: kzbin.info/www/bejne/oF7Om2WnrK-Ulac

[@gabrielhpugliese]

Where can I find more theory/explanation about what he says on 12:06 about not mutating the data? I really want to understand the internal difference.

[@gabrielhpugliese]

Wow, thanks for the great explanation! I've been thinking about the equality and realized it's really a nice thing to have, indeed. But did not realized that we can undo things! Thanks!!

[@Chaaos2]

damn this guy is dope, love his honest

[@sophiezhu9714]

great video. And Dan is so cute!

[@hieunh161]

you are my idol dan!

[@nyahhbinghi]

This video inspired me to try to get hot reloading to work with React + RequireJS. Turns out the AMD spec was basically made for hot reloading, if you think about it. I got it to work with very little trouble - I am creating a simple example project, when I am done, I will share here. You don't need Webpack or Browserify for hot reloading, in fact it's probably much simpler with RequireJS.

[@nyahhbinghi]

+fasfsfgs sure thing, it works, but the documentation is a work in progress: medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

[@nyahhbinghi]

+fasfsfgs for sure, please give feedback on github or medium, I would like to improve the articles

[@fashnek]

You're talking about hot reloading source code. This video is about hot reloading an app with actions in mind -- replaying actions to rebuild state according to the new source.

[@nyahhbinghi]

no not really, he is talking about hot reloading source code. Like you just said "...according to the new source."

[@fashnek]

Reloading the source is just step one. It's not the new thing in this talk, it was already being done. He chose one of the hot reloading systems and augmented it with time travel debugging. RequireJS can do it too, and I don't think he said it couldn't, but as far as I can tell it's much less popular for the Web than browserify, Webpack, etc. I think he was saying that he happened to have chosen Webpack to build his extra tools on, but he was not saying that Webpack is the only solution.

[@ddmanmanigat1479]

5:50 Hello Thank for Trying Out Sublime Text

[@jediRTD2]

This Guy is a legend!

[@furkandemirsoy2107]

U r best my man :) And u are funniest coder ever :D

[@dimitrisproios1860]

4:34 what is the name of the talk that is recommended?

[@suminda-b]

great tools, thanks Dan

[@RainerDreyer]

I believe this is the talk on Figwheel by Bruce Hauman that Dan mentions: kzbin.info/www/bejne/oF7Om2WnrK-Ulac

[@KushChoudhary]

I am here by reading th book called "The Road to Learn React"

[@DoJoStan]

Made Redux in a week? Dan you're a boss.

[@AmanGupta_Dev]

I love it... ! seriously I had doubt that Dan might have used React and Redux for his presentation slides... and I was right ! :D :D awesome

[@MazDelaCerna]

Enjoyed this!

[@caiwarrior]

Молодец парень!

[@michaelromanenko]

Amazing talk!

[@willcowan7678]

For the part about removing the event emitter, is he suggesting parting event emission to the dispatcher? How is the view informed and who by?

[@vfxguru001]

the Sublime Text nag message is classic

[@antoinelucas4680]

Just a question, Why not using enums instead of constants? export enum actions = { ADD_TODO, DELETE_TODO }

[@ДмитрийНикулин-е2й]

There are no enums in pure JS. Enums are available only in TypeScript.

[@bromillie571]

Amazing work

[@rolfen]

If we call actions "events", and if we call reducers "event handlers", then what do we have? Don't we already have this?

[@陈藏]

Is there the slideshow source code? Still don't understand the time travling

[@tz5514]

Dan u are a genius...

[@dimecasts]

this is a pet peeve of mine. Seems like these days everyone's a "Genius" you hear and now it's become an overused word these days. There are VERY few geniuses out there. Smart yes? Very smart yes. But not a genius. I think we should take care when abusing a word like this. I have a friend who is just as smart as he is and I don't call him a "genius" either.

[@deadleaves1985]

Amazing talk, though it left me wondering why should I use ES6 when I could learn clojurescript and have true functional programming, macros, first-class immutable data-structures, and consistent syntax. I must admin ES6 (or ES2015) is a big disappointment for me, improvements are mostly marginal, and some of them are of dubious value.

[@SJ-gm7oh]

Thanks Dan!

[@abduelrah3676]

05:50 😂😂that's funny yo

[@DisfigurmentOfUs]

what is the name of this sublime theme?

[@yabytp]

+Pavel V. I'm fairly sure it's Solarized. I've used that a few years now and ever since been looking for other themes.

[@S3tsuna00]

+Pavel V. Its Oceanic Next, you can find it here github.com/voronianski/oceanic-next-color-scheme

[@yabytp]

+Iyus Rustandi Thanks for correcting! Wow, I can't understand how I ever suggested it was Solarized. I write so much Babel in these days that I'll definitely try it with babel-sublime.

[@S3tsuna00]

yabytp no problem :) Yeah I use that one personally for writing es6+ as well. It's my current favorite color scheme, especially for writing Javascript.

[@yabytp]

+Iyus Rustandi Actually I was using base16-ocean-dark-spacegray with Babel and thought it was Solarized :D Oh well... The Oceanic Next felt almost too sweet sugar candy for my eyes at first, but I'm getting used to it now. I actually wanted just better coloring for JSX, but it seems to do good job overall. So far so good. (I've never downvoted myself before)

[@sourabhbagrecha]

can anyone help me with Drag and Drop in "React-Native", I have tried many but it is not working as it should, I am trying to build something similar to Trello, we use react-dropzone in our website for the same.

[@kanthPL]

Is this browser screen INSIDE Sumblime Text?

[@mdsaifulislamshanto4444]

I love this person

[@00l0]

Great talk, thanks! Slightly unrelated question: what tools did you use to create this presentation? (diagrams, lists, transitions, react app, etc) Without ever leaving localhost:3000?

[@kinseyost1985]

+00l0 18:20

[@00l0]

+Kinsey Van Ost ooops, thanks! didn't finish the video yet at the time */blushes/

[@mrwho2513]

very nice! thanks

[@danwu7275]

hey! I like that old mac fashion menu bar, how can I get one?

[@jorisw_]

+Dan WU It's the menubar style of OS X 10.10 and 10.11.

[@olgierd245]

Man this guy must be good at centering div

[@TheSitar]

Incredible technology.

[@screamz5057]

Is it using reveal.js for the presentation ?

[@miXn]

He literally said that the presentation itself is one big React component. :)

[@Schwein41]

not all heroes wear capes

[@GameBench]

05:49 Holy shit i had a nice laugh out of this

[@tomroggero]

This guy is the real shit.

[@therealmicksa]

I SWEAR IF I SEE ONE MORE "TODOS" APP....

[@MattKnowsTech]

I think they are popular because one can easily demonstrate create, read, update, and delete (CRUD) operations.

[@mtheoryx83]

And blog Posts/Comments/Authors take it a step further by exploring relationships :) Nothing wrong with that

[@elartur87]

#TODO comment what would you do

[@ЕвгенийНикитин-х8и]

You can make a TODO app with TODO list of things you would do after you will see TODO app again

[@Mohamedtarek-qz2zj]

Who's watching in 2020 ?

[@roypt8055]

Me, came from dan's blog

[@k1ngydoteth403]

I came from robins book

[@sherylhohman6464]

:-D Awesome ! !! Great Talk !!

[@jpmitchell925]

Hey, Ho, Lets go!

[@hungnguyenquang7724]

5:50 the sublime text warning haha

[@BobbyBerberyan]

Amazing work! Thanks! 👏

[@SuperAshleyriot]

Sublime Text! Perfect!

[@anjalbinayakadhikari]

He made developers tools in a week but thought about them for past 3 months before making.

[@sm1ley732]

that sublime alert got me laughing :V lmaooo

[@riddlespuzzlesbymjcreation9663]

I like Frustration => Fun converstion (y)

[@Asdayasman]

Yeah but it sucks now. :( Save in my editor, wait 1s for the react native packager to notice, wait 500ms for it to build the bundle, wait another 1s for my device to notice the bundle and execute it, then see that I still don't understand react native styling, and change flex to 1 instead. And that's when it works. About 2/3 of the time, the packager doesn't realise any files have changed, so I either have to reload manually from within expo, or save the same file again and again until the packager picks it up. And that's when _I_ work. If I forget a bracket or import something that isn't there, there's a 50% chance that everything stops working and I need to close expo, restart the packager, and try again. One time I even had to delete the node modules folder and reinstall.

[@dzuzr]

Asdayasman you are doing it wrong.

[@Asdayasman]

github.com/asday/kanojo Go clone that and get your dev environment set up with your phone next to you, and tell me how long it takes from you pressing save _the first time_ to your changes showing up on the phone.

[@pvpbuddy6102]

pure genius

[@rogerwprice]

Brilliant!

[@kurniawanhendra2683]

I think Dan was have a problem with his English pronunciation at those moment. Is he from Germany?

[@joeyywill1234]

Think Russian

[@skoizumi291101]

humm... Hot Module is not redux thing. redux is only about the time travelling?

[@kuchumovn]

good thoughts

[@topsickred]

Thanks....

[@ThomasLeo]

Dan Abramov sure was thirsty.

[@stacymurray9574]

Fantastic! Thanks Dan.

this guy is fk awesome

[@TadThorley]

This... wow

[@channel-ug9gt]

sounds like he wants to use static types

[@mtheoryx83]

Options exist. Typescript and flow are popular examples.

[@iquabius]

Holy fuck!

[@ashwathbharadwaj3223]

what a genius at play!!!

[@王宇驰-v4r]

很有意思

[@Роман-т1ю5е]

5:49 ahahahah very funny ^)

[@chaoAn-kc7qp]

厉害厉害~~

[@p11atulst]

hey ho, lets go :D

[@Xenc5]

Very clever.

[@okoiful]

so he created redux out of frustration...? XD using redux is the ultimate frustration.

[@herbertpimentel]

super

[@messili4524]

1:58