React.js Conf 2015 - Immutable Data and React

[@secretfox]

Fantastic! One of the best explanations of the Immutable Data's concepts.

[@ChristopherBloom]

I come back to this presentation a couple times a year.

[@TheHTMLCode]

Probably my favourite talk from the React conference, thanks for sharing this!

[@darrenhwang900]

“I’m sorry that I long ago coined the term “objects” for this topic because it gets many people to focus on the lesser idea. The big idea is messaging.” ~ Alan Kay In a 2003 email exchange, Alan Kay clarified what he meant when he called Smalltalk “object-oriented”: “OOP to me means only messaging, local retention and protection and hiding of state-process, and extreme late-binding of all things.” ~ Alan Kay

[@sunnykgupta]

Brilliant introduction to Immutable.js Been using it for a while, but this video showcased how it is internally implemented using tries. 😀

[@dantrain]

Fantastic talk! Very good explainations of the data stuctures, and I'm sold on using immutable data with React + Flux. I also learned at 12:22 that Sir Michael Caine invented Trie data structures. Not a lot of people know that.

[@antonydelbeato6122]

I too was shocked to see Michael Caine. I liked that he coicided with the "Do your research" narrative.

[@Lee-qj4hk]

JCR: www.google.co.uk/search?q=jcr+licklider&tbm=isch

[@redstrike91dn]

It's worth my 45 living minutes to watch this video.

[@ejazkarimhunzai]

It is actually 31 mins and most people watch these at 1.25 speed. :P

[@openfengshui]

I see You watch this 2 years ago! I am laggard

[@chenshengzhou4810]

@@openfengshui I see You watch this 1 years ago! I am laggard

[@benjaminmoseslieb9856]

Great talk. Immediately clear and will change the way I work.

[@nikitayaskevich813]

So the time execution increase of x3 should convince me rewriting whole app into immutability approach? 24:44

[@AnonymousJon4567]

Amazing presentation! How did you do the coding part in the end, with blicking cursor and text dimming? All in Keynote/PowerPoint? (Interested in how to do better tech presentations)

[@raydot]

It's Keynote. He says it at 28:00 or so.

[@ericmiller3231]

Why do you need to check if the keys match @11:15? Is this because some hash collisions are inevitable? If they happen, what would the implementation do in that case?

[@generalco2554]

The 1st answer is yes, collisions are inevitable. The 2nd answer... I'm not sure.

[@wheredidhego1]

amazing talk. reminds me so much of iOS' core data model. Very cool someone figured out how to bring it over to the JS world :D

[@khoavo5758]

28:40 Wait it didn't skip to the end? It reconciled the other elements, too.

[@Daniel15au]

28:29 Is there a reason you'd use a Map for the todo object rather than a Record?

[@LeeByronW]

Limited time to introduce new concepts during a presentation. Records are a good structure to use for something like Todo. There's also nothing wrong with using a Map.

[@pawelmisiurski674]

Watch at 1.25 speed!

[@evroza]

1.5 master race

[@АрсенийИванов-г7г]

Just go right here -> 31:10

[@reactanttv]

shit ... I fell for it

[@malanjing3658]

2.0 speed. I love this sound!!!

[@treenopie]

I don't understand the point made starting at 11:20

[@bool29]

Hash function reduces data of arbitrary size K to data of fixed size V. As it is possible to have size K > V, it is also possible to have a collision where multiple keys are producing the same hash value. He is explaining how the hash collision is resolved.

[@BrandonGottesman]

What object is 'this' pointing to in 'prevResult = fn.call(this, arg)' at 24:05?

[@exiadbq]

Ha, you cannot null it because you don't know what's in 'this'. and it doesn't really 'memorize', good for demo though.

[@BrandonGottesman]

+exia dbq still not sure what object 'this' is pointing to, but thanks for the reply.

[@exiadbq]

+Brandon Gottesman it can point to Windows or anything where the function was called, and `this` might/might not be used in the logic of `fn`. It's really a SO question. Read more here if you are keen to find out. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

[@idemchenko-js]

+Brandon Gottesman it will point to global object unless you explicitly set it to something else.

[@bool29]

It is not very clear from the context. If not explicitly bound to different object, 'this' is bound to a global object since the nested inner function doesn't link to outer function's context by default.

[@camelCased]

How does it work together with "The Joys of Static Memory Javascript", where we are encouraged to reuse existing objects as much as possible, to avoid GC?

[@hotohoto2]

How can I visualize reconciliation(?) like 27:42?

[@dandymcgee]

I have a huge problem with 4:50.. and feel like that's one of the biggest problems in the web world. You CANNOT convince me that 83 "is pretty much the same number" as 288. If you order something on Amazon for $83, and they charge your card $288, are you really gonna say "well they're basically the same number, so oh well, close enough"? It's more than 3x as slow. That's a lot. You saying this kind of undermined the rest of the talk and I found it hard to listen to what else you were saying because of how absurd this statement was.

[@inwerpsel]

He's not saying "make every part of your app 3x slower". It's only because of the benchmark having a literal million operations inside of it that it is even able to reach just 83 or 288 milliseconds. This is an inflated benchmark scenario. In reality, when you'd choose between either, their impact would be more like 83 or 288 microseconds out of many milliseconds of runtime (according to the same scale, if you loop a more reasonable 1000 elements, which is already rare, most of the time you're looping things that are much smaller.). As clearly explained in the video, this small difference can be more than made up for if it allows to make other operations orders of magnitude faster. Performance is all about magnitude relative to the context. Would you care whether I'd give you 0.0000083 or 0.0000288 dollars? Both amounts are completely useless. But you may care if I would do it over and over again every second.

[@TheNavigateur]

Somebody explain to me if I am looking at code that only has a reference to a sub-sub-sub-sub object of my application model - how do I change the value of one if its properties and not break "immutability"? I can't, right??????????? So, what's the elegant way of changing it? Call appModel = appModel.subSubSubSubObjectChangeXTo(50) (or nested 'set' equivalent) - isn't this unmanagable? Is there literally no better way? Or am I missing something?

[@nagarjunab389]

why is using special model classes a bad thing? I find it a lot simpler to just churn out few model classes.

[@fredgentil9699]

He had me with his analogy to Back to the Future. 16:34

[@MaxCoplan]

This is scratching all my Scala-dev itches 🙂

[@JulienBis]

Great work!! Is there a way to get the slides? More developers need to learn on that topic. Is there any good resources/material to teach this stuff to colleagues, ...?

[@rezakeshmir8708]

Nice talk P.S. I had an interview yesterday and while watching the talk I understood I had a wrong answer :D

[@kerorojason]

xdd

[@klirmio21]

he was right about everything except that "Javascript is in trouble"

[@madsboyd-madsen3463]

I really like this presentation.

[@MrRicharddaniel]

Help Please... Hi I am starting to learn react and stumbled upon this. I want to have an indepth understanding of React, Redux and Flux. I understand javascript on an intermediate level (scopes, prototypes, callbacks, closures). But it is hard to follow along with this presentation. What are the prerequisites that i need in order to follow along with this presentation? I really appreciate the help.

[@nevilleachi6888]

hello how is it going? just starting out

[@mohamednabawy1170]

please add a short cuts for the topics

[@wheredidhego1]

The only thing I didn't like about this talk was the "undo" idea. Would be better to store this data in local storage, and *then* use the whole "get last record* (pop) to retrieve older data

[@converter]

+Jon Hibbard It's just an idea/possibility he's presenting i believe.

[@wheredidhego1]

Dgtl Monk yep just giving some constructive criticism. Doesn't mean I'm right either! hah

[@LukeSwart]

At kzbin.info/www/bejne/f2islYZjhcd4nas he says: "So most implementations don't use arrays with four elements wide, they usually use 32. ... So the largest version of this data structure that we can fit in javascript is 2^32, and in that, we only ever need eight hops" It seems that if we have an index trie with arrays of size 32, each additional level would multiply the data structure by a factor of 32 (ie 2^5). So why would a data structure of size 2^32 require 8 hops? 8 hops would make a trie having 8 or 9 levels, depending on whether you count the inital access. If we want a data structure that is 2^32, then our trie only needs to be (2^5)^7, or 7 levels. Or am I missing something?

[@amitpriyankar5577]

I might be late but what he was trying to say is that if we use index trie with arrays of size 32, then a trie data structure with 1 hop (2 levels) can have 16 elements. Because he was referring to using 2 bits to represent one element. Similarly, for 'i' hops, we can have 16^i elements. Then, for 'i' = 8, it would have 16^8 = 2^32 elements.

[@anoobcoder]

0:54 "I rock in Facebook" he say?

[@Elite7555]

I don't really get what the value of such a library is. With Object.assign or Array.from it is super simple to make a copy from any data structure and add something to it. And V8 does structural sharing all by itself to save memory. Like you said yourself: This is all implementation.

[@alexberezkin]

This comment must be the topmost upvoted

[@fredoverflow]

Object.assign and Array.from are _much_ slower than persistent data structures, because those methods have to copy each and every element (linear complexity).

[@frankzhang2997]

这么好的视频，为啥留言这么少，还有1.25倍率看完的大神，我对着笔和纸足足看了2个小时，two hours!

[@valnuke]

12:20 this guy is Micheal Caine...

[@Leeway4434]

hm I thought trie was pronounced like "try"

[@mukinha]

Nice talk!

[@TheWujuStyle]

24:47 500000501001 :D

[@jantzen216]

***** is the shit yo

[@kanma117]

new bee

[@akapoolka8325]

This guy is too excited about nothing. Not very prepossessing.