Building a Simple Virtual DOM from Scratch - Jason Yu

[@afuqua]

This is incredible! You cover great content in a very concise presentation. I also love how excited and joyful you are! You are a great instructor!

[@ycmjason]

Thank you Aaron!!! Glad you enjoyed it!

[@jameslay6505]

That was honestly one of the best, most concise, and easily understood programming tutorials I've ever seen.

[@l-cornelius-dol]

Jason, you are possibly one of the most engaging, and entertaining presenters for coding that I've ever seen. Well done.

[@ycmjason]

Thank you!!!

[@damonwu9658]

If I was in your class, I will definitely be thrilled as you did, this is a real deal !!!!

[@YCMJasonCodes]

thanks man!

[@Totiimon]

What a wholesome person :) And was really interasting, I had an idea of what virtual dom is and how it should work, but I think I learnt a lot with this talk, thanks

[@sushrut24]

very well presented 👏 loved Jason's enthusiasm and clarity

[@cui.cui.]

the sound is crappy but your smile makes up for it

[@ichigo_kurosaaki]

Thank you for uploading the video. It was fun :)

[@mathematicalninja2756]

Diffing is honestly amazing and you coded it in mere 20 mins that's achievement :D

[@tjkandala5650]

Great video! This is a very elegant implementation of a virtual DOM. I believe that the randomized list was broken because you are iterating directly over childNodes in diffChildren(). childNodes is a live collection, so when you delete a node from it, the indices of the patches become inaccurate.

[@YCMJasonCodes]

thanks TJ!

[@blue_benjamin]

Thank you, Jason, love your energy!

[@shangli8257]

wow , incredible , what a concise presentation

[@aravideo79]

@ycmjason You have such great energy! Thank you for sharing, and please consider teaching courses in the future! It would be a treat to be a student in one of your classes :)

[@ycmjason]

Awww thank you so much!!

[@tseponkalai6528]

Coolest coding video I ever saw! I swear this guy's not human, at 30:53 he raises his left hand and right continues to type "return $node;"!!! WHAT?!

[@tseponkalai6528]

oh, no wait, he just types faster than comp can follow 😯

[@punkweb]

This was great, I would have watched another hour to go over events.

[@HeinekenLasse]

Legend. Live coding something like this under 30 mins, few mistakes and using Vim. Ballsy

[@amitkrgupta094]

was learning about middlewares and js weekly pinged me a mail and I see Mr.J(a)S(on) making React from scratch! My eyes are wide opened now..with surprise

[@ycmjason]

HAHA Thanks!

[@bfoot239]

awesome, I have been using React over 1 year without any idea what virtual dom is.

[@ycmjason]

That is exactly why I chose this topic!

[@GRIFTYRODRIGUEZ]

what if something occurs that adds 5 new nodes but removes 6? i.e. maybe a menu is opened or a page view changes, or a modal opens. wouldn't this pose a problem with the way you designed diffChildren? isn't it possible for many new nodes to be added as children but the new list still ends up smaller than the old list?

[@pradeepgowda7660]

Awesome! you helped me in understanding virtual DOM Better.

[@northicewind]

Awesome talk. Thanks. And additional respect for vim )

[@yotsaisu9346]

how to install this tool -> "gitignore init node"?

[@MarcinPyta]

we always talk about her to a vampire - subtitles are great

[@moschopsd2047]

Would it be possible to get a link to a repo so a newb like myself can look over the code at non-hyper speed?

[@ycmjason]

the repo was already attached in the comment! There is even an article attached if u find it too fast. :) Enjoy!

[@moschopsd2047]

@@ycmjason There are no links in the comments, and the only ones attached to the video are for the Manchester Web Meetup and the video category, unless I'm missing something. Was it a private comment, by any chance?

[@ycmjason]

@@moschopsd2047 omg youtube must have thought that my comment is a spam.... here is the comment: The repo to the code I wrote at the talk: github.com/ycmjason-talks/2018-11-21-manc-web-meetup-4 dev.to/ycmjason/building-a-simple-virtual-dom-from-scratch-3d05 Here is a write up of my talk with some extra bits clarified.

[@moschopsd2047]

@@ycmjason Thanks, man. You rock.

[@martien15]

Thankyou, the explanation is so clear

[@andresfelipemezamendez1194]

thanks a lot, amazing this job, god bless you man

[@TheVitkuz]

Man this tutorial is gold. They should put it to react docs

[@ycmjason]

Thank you so so so much! I'm so glad you enjoyed it! ☺️☺️☺️

[@ZaidQureshi]

This is great, Am I too greedy to expect a part 2 ??

[@ycmjason]

Thanks Zaid! What should part two be about? Completing react from here? 😂😂😂

[@amitkrgupta094]

@@ycmjason , Am I too greedy to expect Js lectures on your actual youtube channel ? 😂(You motivated me learn Js more and build more..after watching 15 mins..)

[@ycmjason]

@@amitkrgupta094 😂😂😂😂 Thank you very much! I am glad I motivates people to learn more. I did think about starting a youtube channel doing coding. My idea was to do live coding stream and upload a summary video of length

[@ycmjason]

@@amitkrgupta094 I am actually planning on this after your comment. Thanks for the motivation! I am going to do a live-coding video on Wednesday at here: kzbin.info/www/bejne/d3OUfYGnoZyjmbc

[@ZaidQureshi]

​@@ycmjason​ haha, but I like Vue more. What about "Create your own bindings using proxies from scratch" or something related to bundling or transpilers ??

[@hooligansofts7430]

Which editor are you using?

[@ycmjason]

vim :)

[@hooligansofts7430]

@@ycmjason brother please create more tutorials covering these deep topics that no one really talks about. we are very much interested in learning more from you.

[@YCMJasonCodes]

@@hooligansofts7430 Thank you so much for supporting! I have created this channel and I will be sharing more from here!

[@wixnarara]

Great video, but why is he editing in a terminal? Just showing off or something?

[@ycmjason]

😂 No. It just happens that some developers like using Vim and I am one of them.

[@wixnarara]

@@ycmjason I mean I respect it, and in retrospective my comment is dumb, I do like the keyboard only appeal. However this can also be done in all of the other IDE + you have a better UI, and im my opinion with the amount of extensions required today (eslint, prettier, version control) that are one click away in IDEs like VSCode you end up being more productive. I know this can be done in Vim but with a lot more boilerplate and not so intuitively. Not to talk about the awful font and color quality. In short: im not right, and you're not wrong, use whatever you feel best with!

[@ycmjason]

@@wixnarara I mostly agree! The UI in VSCode looks amazing and the functionality are actually awesome! I recently used VSCode because I picked up Flutter and the Flutter plugin in VSCode is absolutely amazing. I also use IntelliJ for Java simply because it is virtually impossible to code Java without an IDE. 😂😂😂I have installed a Vim plugin in both VSCode and IntelliJ, but they just don't feel as fluent as native vim. Furthermore, I have always been coding JS in Vim so this is what I feel most comfortable with for now. The VSCode vim plugin is actually pretty good so I might switch to VSCode in the future.

[@l-cornelius-dol]

@@ycmjason: I must not have got the memo. I have been coding Java for 18 years with a simple text editor. :-)

[@namespace242]

讲得非常好，我都听懂了：）

[@bl1tzQ]

Thanks man, that so lit

[@عليالمرسي-ه2ل]

for anyone decided to watch this now. He is talking fast but try to play it on x2.It's more fun. But great presentation

[@lyingcat9022]

This is great! Only really bad thing is his vim setup; with the error markers popping up and shifting his code over every few seconds! It’s giving me damn motion sickness.

[@YCMJasonCodes]

haha! time is limited!

[@Samuel-ql7tq]

Great explanation!!

[@naveenda2064]

Now I am planning to move vscode to vim

[@yun-ruzeng5026]

gooooooooood!

[@code_with_om]

amazing :)

[@O1zo]

Cool, but your createElement does not create any element.I would move it from the render function to the create element

[@ycmjason]

That's why it is virtual, isn't it? :)

[@gompro]

You just built simplified version of React.js from nothing. I really want other people to know that it is possible to make React.js less than an hour :)

[@ycmjason]

Haha! There are still a lot more happening in React. This is a very very very simplified version of a tiny part of React.js.

[@tweakmy]

It would be nice if there is less of the clapping noise and more focus on the content otherwise it is good video

[@BerinWong]

Good English, bro.