React and the Virtual DOM

this is the story of react and the virtual Dom once upon a time there was a view he was very happy painting the dom sometimes the model would give some nice data to paint he knew really well how to paint a UI given all the data a user named the points and a colored shape piece of cake and fun too but then the model sent the view an updated username he had to know how to change his painting to show the new username to do that he had to keep track of a username div he dutifully updated the Dom directly then the model sent to view another update this time it was the points the view added another update rule and started tracking the points div again he updated the Dom in place next the model sent the view a new color if you remembered yet another update rule and kept track of another Dom node then he changed the color right there on the Dom the view thought that that might be the end of the update rules but they just kept adding up he had to keep track of so much and sometimes the order of the updates events mattered it was all too much after a while he gave up he could not continue but then the view met a friend the friend was called react they worked together to paint the dom the model would hand the view a complete piece of data the view knew how to render this username points and colored shape he would draw a quick but accurate sketch then he would bring it to react who would scan it react had very accurate and fast memory banks it could remember exactly what was already painted in the real dom new painting at first the dom was empty so it knew to paint the whole thing it could paint very fast because it was a robot then whenever the data may have changed the model gave the view all the data again the view like this because he was really good at sketching an entire picture but not very good at remembering all of those dom nodes when he was done he gave it to react who scanned it difference detected blue circle is now red it quickly made a short list of all of the differences that it painted each and every difference but no more when the model would bring him data the view didn't really know what was on the real dom and he didn't want to know he just sketched the picture as it was supposed to look then passed it to react react would quickly figure out that there were no differences no differences everything was already painted correctly the view was so happy with his new friend react his mind was clear and free he could sketch the way he liked to and not worry about all of those updates react liked figuring out how few changes needed to be made to the dom because it tickled its memory banks they were good friends and they lived happily ever after

Channel: PurelyFunctional tv

Views: 189,618

Rating: 4.7114515 out of 5

Keywords: React, Document Object Model (API), clojure, clojurescript, web, javascript, functional programming java, functional programming tutorial, functional programming languages, functional programming in javascript, functional programming course, functional programming clojure, functional programming explanation, theory of functional programming, functional programming, functional programming haskell, functional programming advantages, functional programming benefits

Id: BYbgopx44vo

Length: 3min 50sec (230 seconds)

Published: Sun Sep 13 2015