Pete Hunt: React: Rethinking best practices -- JSConf EU

Slides: www.slideshare.net/floydophone...
React, the new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React's philosophy quite accurately: / 339858717451362304
At Facebook and Instagram, we're trying to push the limits of what's possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, "re-rendering" your entire application when your data changes, and a lightweight implementation of the DOM and events.
License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.

[@samasama2627]

I'm here to see if this talk might convince me otherwise.

[@kushalupreti509]

Lmao. Me too

[@Gioeufshi]

@David Smitherman heroes? Seriously? Learning react is now a heroic act?

[@musicdev]

@@Gioeufshi Lmao my thoughts exactly

[@muhammadasadhaider6893]

did it?

[@guilhermealveslopes]

@@Gioeufshi The bane of "business talk and job culture", and the famous "hero everything" in web frontend... Hero section, Hero app, Hero Carrousel, Hero highlight, HERO ANYTHING WHATSOEVER. Annoying how a bunch of people take one word, and use it to imply only one small facet of what its meaning invoke, and overused it ad infinitum...

[@ismailbenlaredj]

who came from the react documentary ?

[@recursion.]

What's the point of this comment and why does it matter?

[@catharsis222]

What react documentary?

[@pengwang5800]

On the React Docs, they told me : " this talk might convince you otherwise." so Im here.......loooooool

[@gduran3]

same

[@Saurabh2816]

Same. I'm fairly new to React and following it's official documentation. Can you suggest me any good resources you are following?

[@hegdevishwa]

Me too :D

[@ezesundayeze5159]

The doc is fine. It's four months now, I'm sure you must have gotten a hang on it by now. You can take Maximilan's free course on KZbin if you aren't good yet with it.

[@MenukaIshan]

Same here :D

[@DioArsya]

10 years later and I still got a lot of new insights from here 🤯

[@codenamegrant]

Almost 8 years later and this talk is just as relevant and informative about how React works and why we should be using it. Did anyone else shocking whisper "Holy shit" when you saw what React code looked like on 2013? :D

[@benzemamumba]

I still don't buy into the grotesque looking code of React, that's why Angular and Vue will forever be my go to technologies.

[@SimonLevesque]

@@benzemamumba I was finding the code awful as well when I was looking at the small examples, but when looking at a real example, the JSX part in the render function pretty much looks like a template and everything else managing it is just pure JS. I wasn't sure about not using bi-directionnal binding since I am so much used to it, but that actually makes everything simpler to not have to care about how the frameworks does bi-directionnal binding (which leads to different limitations per framework). After trying the short tutorial, I was actually hooked

[@AlexanderTrefz]

8 Years later and you still should avoid all of these bloated and pointless frameworks that are bigger than entire well structured apps.

[@danielvega646]

well... To be honest, I just learned React because the job asked it, because you get jobs really easy if you know React. Now, if you ask to my neerdy heart what is better? I have a long list of frameworks way better than React. For me, React is bad albeit popular.

[@jmrossy]

"Re-render don't mutate," my biggest takeaway.

[@Felix-un7yp]

A talk that made it into the history books of app development. From React to SwiftUI to Flutter , the reactive frameworks have transformed the whole industry .

[@jamjam3448]

Who else is here from Reactjs docs. Lol. I'm here to be convinced!

[@walterdanielhuaynapataagui8716]

x2

[@tomascarignano5002]

This is amazing to watch at this point in time!

[@popopome]

Really interesting. I felt same emotion & motivation when I watched Clojure presentation from Rich Hickey. Thanks.

[@ervinsabic1104]

I'm not convinced otherwise. Handlebars is just so clean.

[@ginger-bread_man]

The talk that kickstarted a new way of JS & GUI dev

[@arindam1249]

" this talk might convince you otherwise."

[@atulpatil2289]

I'm here from react docs...what a valuable video

[@lightninginmyhands4878]

Best part of the talk, as a novice programmer, is diving into virtual DOM as 19:30

[@yikan1107]

yeah, they havent explained how fibers work but it feels like they are doing depth first memoization of the app component tree. The fibers are compared, not the object-in-object vdom model. From videos, they compare fibers to a virtual call stack but i prolly need to EFF around with it. I think there virtual dom is a vague word to describe what the component based frameworks are doing. Anything that uses nested component instances represented by is going to be a virtual dom by nature of these objects in objects representing the document object model.

[@Sid2896]

Being a React developer coming from a Mechanical background the whole story of REACT give me goosebumps. I wished i was there in the infant stage of React back in 2013

[@rishacha]

Watching this in 2018, came from the documentation and loving React !!

[@user-ht6hs6io8w]

Thank you, Pete and React team!

[@Stevenchustudio]

17:40 - React components are just idempotent functions, that describe your UI at any point in time, just like a server-rendered app. **Again, because they're just functions that take some parameters, and output a description of the UI, they are very easy to unit test.**

[@lazykid9167]

wow, at the end realised this is from 2013 !? wtf. great talk

[@dvdrtrgn]

This is a seminal discussion about the beauty and utility of a virtual dom. It loosened up hard notions about what separation of concerns means.

[@milahu]

sounds like a talk on unix philosophy .... modules vs monilith, bazaar vs cathedral, villages vs empire sounds like part of the "paradigm shift" towards an actually functional "one world" order conjunctio oppositorum .... mutual completion of opposites

[@dbug64]

That was a great talk Pete. I'm very exited about Reactjs. :)

[@roolebo]

I like how React API was designed. It's almost the same as it was 4 years ago! That can be a sign of carefully chosen abstractions that as good today as they were a while back.

[@sfafsashfdh6589]

4 years later it is same

[@stpedro-ht9ng]

@@sfafsashfdh6589 Functional components and hooks have changed things greatly though.

[@johndough6978]

someone give him a glass of water!

[@louismaresca]

LoL I was thinking the same thing after watching for like 7 mins. Glad this is like the second comment in the stack.

[@micgol]

Watching this video made me drink lots of water.

[@funmeister]

A defibrillator would have been important as well.

[@nickharalampopoulos]

My thoughts exactly. Do not start a speech while being dehydrated! :-)

[@bitsplz]

Great content but its so painful to watch!

[@m.a7473]

So JSX looks like html but it actually is function. Thank you. I have less anxiety using it.

[@lazykid9167]

nah, its an expression

[@madhurgarg8866]

Pete hunt left no stone unturned to market React, but no doubt React is awesome. Thank you team facebook!!

[@avimehenwal]

Amazing talk, wow

[@dante_ele]

Can someone recommend a talk or book that just speaks about the theoretical concepts, principles of React. Like this video.

[@MiSt3300]

This should convince me to ditch my classical understanding of html and js being sparate... hmm I guess I should give it a try

[@NortheastGamer]

I spent this whole video thinking "Dude! Drink some water!"

[@aarc2010]

The video and content is marvellous. But gosh, Pete is struggling, I need a glass of water for myself after that.

[@hotmandead1]

The intro soundtrack ... I did react :-p

[@nitsanbh]

Crazy to see how it started. No JSX. The ‘var’ keyword

[@catharsis222]

This should be mandatory for every JavaScript developer in a bootcamp who is now learning about react

[@edchelstephens]

Thanks a lot man!

[@klingonprogramming3868]

Love React...ur right frameworks shouldn't force us to code in a certain way...

[@zooroish]

I'm also here to be convinced otherwise!

[@conw_y]

Just re-visited this video ~4 years later for the nostalgia. Still loving React, still using it every day, still re-thinking best practices!

[@EddyVinck]

I have been convinced

[@swyxTV]

amazing to watch this in 2017 when react is now the framework to beat!

[@yfzhangphonn]

I felt like this brings us back to the age of web form but who knows, having html in js and having a middle layer between js and dom gives react supreme advantage over angular. Overall, in terms of Template: Angular > React but in terms of speed, debugging, available UI options... : React > Angular

[@JuanPablodelaTorre]

Two years later: "in terms of speed, debugging, available UI options" Angular > React

[@rutiancoren]

@@JuanPablodelaTorre lol wrong.

[@benzemamumba]

React is in NO way, shape, or form better than Angular!

[@-cj-]

I will always serve static html that works without any dependencies whenever possible. Because css and js can always fail to download. And I love that I can still do this with React!

[@-cj-]

@@carldrogo9492 I've come across several occurrences where files fail to load, hardly unrealistic. Going by your other comments, you just seem to hate programming in general.

[@rogerrodriguez9540]

These pretzels are making me thirsty

[@sabuein]

Thank you.

[@sharabiani]

this talk did NOT quite convinced me otherwise...

[@IAmIndraTheGod]

At kzbin.info/www/bejne/rmjGgmajp8h-l7s Instead of calling it composition, it should be called association. Because react can have components which can work/reused independently regardless of the parent type. Sometimes there can be aggregation as well as composition relationships between components. So should have been callled association

[@Dehhloki]

You king of convinced me

[@colinren9692]

Suggest to subtitle video，thanks

[@boredhead]

Here to just check why it all started

[@niteshsetin]

I am thinking to LEARN React

[@GomesNia]

8 years late to the party, but I have to point out the fact that the entire premise of his argument arises from him putting presentation logic inside the controller? Putting a "tableRowColor" in the view model is such a glaring violation of separation of concern. Presentation is style. It concerns the style sheet and nothing else. If you absolutely have to put it somewhere else, it belongs in your template, but in the example uses it's inserted into the view model (i.e. by the controller/component logic) which seems like such a textbook example of violation of SoC to me.

[@andriiyurchuk3299]

From React Docs?))

[@jeremymurray-wakefield8011]

I wish I knew what the @cowboy tweet said. The account is suspended. Anyone know the contents of this fabled tweet?

[@thejimmylin]

What did the @cowboy twitter say? Does anyone know?

[@SebLeFrenchie]

Good video, I’m surprised there are only 30~ comments on it though

[@soumadip_skyy_banerjee]

Here to convince myself ;)

[@nescau2.0silva88]

best video !!!

[@mahdi914]

Oh yes, it convinced me

[@muhammadnabeelasif1235]

Ahhhhhhhhhhhh. I'm convinced :)

[@barboshaa]

"Just don't write spaghetti code"... One could say the same about PHP

[@dinocajic]

Thank you!

[@superharryboy]

One could say the same about every programming language.

[@kxmode]

ASP.NET code behinds are lasagna code 😬

[@rishabhgusai96]

Does react still work the same way? rerender, don't mutate

[@xcatliu9191]

React is amazing

[@dennistel734]

Curious to see how React handles updating of millions of rows.

[@NathanJohnson815]

better than Angular? you also shouldn't be displaying millions of rows at once ;)

[@caseymorris2937]

Is there some reason you want to show millions of rows on a Web page?

[@user-kx6ym6zs4e]

I'm not convinced otherwise

[@depiction]

The debate of whether it's best to add JS to HTML or add HTML to JS is merely a preference. I'm not convinced after watching this that adding JS to HTML is any better. This video and React's documentation claim that doing so separates concerns. Per this video, separation of concerns occurs by reducing coupling and increasing cohesion. Creating small reusable components reduces coupling. How a developer chooses to organize code that make up layers of a component (presentation, data, etc) does not affect coupling. I could create a single file component or a folder with separate files for each layer. Grouping components into modules increases cohesion, but again, the organization of the various code layers within the components that make up the module doesn't really matter. Therefore, I'd argue that adding JS to HTML doesn't separate concerns. It has nothing do to with separating concerns.

[@JuanPablodelaTorre]

You shouldn't mix languages. It's more difficult for the entire tool chain to work with multiple languages in a single document. You should only use dependencies. Also, I agree.

[@lazykid9167]

IMHO - There shouldnt be HTML and JS together in the first place. HTML was meant for mainly static stuff and to be amended a little by JS. These days we have superpower-ewwb-apps. If you ask me , there should be only JS + CSS.

[@tstcikhthys]

Agree mostly, except for the point about it being a preference. The web is fundamentally about documents: information being served and retrieved. JS had essentially nothing to do with this (unless you're running it on the server). It seems like these days, most people get lost in the shininess of JS and the technology du jour and don't seem to understand the fundamental purpose of the web. That's how you get incredibly misguided comments like the one above mine, where this person is claiming that the web should not have HTML because it's redundant.

[@saliabbasraza]

Why people are not REACTing to presenter.

[@alexgabriel5877]

is it outdated?

[@Kirshach]

Watching this in 2021 feels exactly like Steve Jobs presenting the first iPhone

[@andrewmelnikov292]

Or every next iPhone. There are useful bits but you still feel like you've been fed a pile of shit.

[@dulcisfate6060]

I hope this talk might convince me otherwise.

[@aroodt]

Those generated sub-titles are kind of useless. At exactly 12:00 they get downright obscene.

[@jsconf_]

Andre Roodt Just switched the flag, so you can fix them! The 2014 videos have sub titles from live captions created during the original talk.

[@siyangren6623]

Nobody can refuse tasty food ... 7:30

[@JuanPablodelaTorre]

Dude made me thirsty.

[@SpaceGaia4Life]

"child"... "partial" 7:20 ... react lapsus. Love it!

[@franklinokolie8322]

Amaziing....

[@catharsis222]

Pete hunt is the senior team lead I wish I had so I can be one to my team

[@brendonblaze]

This has convinced me otherwise

[@gi66itz]

The row color example couldn't be a worse argument for coupled code. It can be a strong argument for RTFM. nth child has been handling this in 80%+ of browser marketshare for how many years? Styling logic doesn't belong in your templates, it's not 1999, those problems are solved. If you want to argue that this reduces HTTP calls that's fine, but when HTTP2 is up and running there wouldn't be as strong a need for this IMO. Less about the video at hand and more about the industry... As a developer who was working on the web at the turn of the century, I fear the future of using a framework instead of learning the underlying technology. Though web properties turn over every few years (or even months) these days, some don't and maintaining sites is "a thing". With each new framework turning the conventions of the technology on it's ear and then fading away when some new shiny framework comes around, this is just going to get harder...

[@tstcikhthys]

This. Every bit of this. I've seen this "let me make a completely controversial statement that throws decades of best practices out the window because _we_ are different and think we have something better" schtick far too many times. A few years down the line, they go, "Oops..." I mean even Facebook's original motto was "Move fast and break things", and now that they've actually grown up, it's "Move fast with stable infra"

[@bigmistqke]

We are now almost 10 years later and frameworks are more relevant then ever. Those decades of best practices describe a www that just isn't anymore. Ur talking about the internet of the 90s and the 00s, lol.

[@julianzaltron9774]

idempotent Mathematics 1. denoting an element of a set which is unchanged in value when multiplied or otherwise operated on by itself.

[@ElectricChaplain]

Phantomjs, phonegap lol. It says something at least that React has survived while these other technologies haven't.

[@indiegamespotlite]

lmao rip indeed

[@arunaveerappan4749]

I don't think this convinced me as stated. I still support separating the presentation logic from data and its manipulation.

[@rodwinpieterse1950]

Me too. i cringe whenever using React or anything else that has to deal with a hundred dependencies.

[@benzemamumba]

It's a very mediocre and grotesque Framework that every shitdev pretends to love.

[@fwd79]

So, React is basically VBScript for modern era. Fair enough.

[@longnguyenxuan5190]

[@babakardiop7071]

Not convincing. Especially when you know Vue.js where there is no "View-Model" so no coupling of modules leading to cascading changes

[@mayson12381]

All I hear is is "we do the same what vue.js does now, except our syntax is ugly as hell"

[@baldcoder_]

You realize which one inspired the other, right? Also, as someone who worked with Vue well before touching React, JSX is only ugly in the hands of bad developers.

[@pongtime]

Give him some water Jesus

[@romankostelnyy6033]

Is that still valid? Pete talked it 7 years ago

[@kjellrasmundson4538]

same, funny they show a 7 years old video

[@kisanpakhreen]

I like his laptop sticker :)

[@jez9999]

No matter what else you make of React, the best thing about it IMHO is React Router. Declarative routing is so much more intuitive than having to go to a separate router config like in Vue. It's almost worth using React for that alone.

[@alexgalays910]

Weird, I find routing to be a tiny part of the app and it being declarative doesn't buy me anything at all.

[@abdelrahmannour3450]

Well, I'm not convinced

[@rewazilol]

Great content. But someone please get this man a water, he's dying up there

[@r3gum]

rethink stablished best practices

[@vinny142]

So, if I change a template I have to check where it's used. fair enough, but that's true for *everything* that is re-usable, incuding react components. I get the scary feeling that Hunt is just making shit up to make his new product look like a solution to a problem that doesn't exist, while not being a solution at all. I get the feeling that React is very much like PHP and MySQL where in the beginning: pretending very hard that the established practises where bad, only to later evolve into exactly those practises because... well they work best.

[@schenn686]

To be fair, this video is 4 years old and React has updated a bit since then. But yea, there's a lot of "We never had to do X so you shouldn't either" declarations in their docs. Never had to !== shouldn't. But that's how it gets interpreted by a lot of people. "Don't write spaghetti code" - easy to say, a lot more difficult to enforce on an enterprise level.

[@kartikkraze]

@vinny142 This is exactly what I was thinking when he said that. For example suppose in my React app I have created a custom button component and used it in 50 different components. So if I add a new property to the button component I will still need to track down all the locations where it's being used and set the new property where it's being used in other components. I am really new to React so please correct me if I am wrong.

[@schenn686]

Yep! That's why I get frustrated when he's like "You don't need any inheritance". If you have a button, and it only needs that new property some of the time. You might as well just extend the button into a new subclass which uses the same components but has that extra property. Ta-da. Problem solved. Oh, but in React that's bad. You need to rewrite your button for each use case.

[@andreasmuller6365]

Actually I kind of disagree with your first sentence. If I have a rating component inside a product review component, if I change the rating from using yellow stars to silver stars, why would I have to check its usages? How could that possibly affect the component which uses the rating? I can only speak from an Angular perspective, but in Angular components are supposed to be small building blocks, just like classes in OOP. You can then think of the possible usages of a component as its interface to other components. And as long as an interface doesn't change the implementation should be able to change as needed, that's a fundamental principle in OOP. In the same vein, as long as the rating component displays a rating in the way I want ratings to be displayed on the site, why should the components incorporating the rating component care about changes to its template? EDIT: What I'm saying is, it depends on what the respective component does.

[@DylanYoung]

@@andreasmuller6365 Precisely. And the exact same principle goes for templates, which also presents an API to those looking to use it. We just don't like to think of it that way because change-management is hard.

[@connerjensen8170]

React is saweeet!

[@user-nj8vn3xm1p]

If you are stupid, yes. But wait.

[@conw_y]

1:05. Give it 5 minutes - agreed. Be Shoshin (初心). Give it a chance.

[@rooneywayne8646]

Jonathan Conway Are you Chinese ?

[@frdomirlo3361]

Not convinced... Why to keep it simple when you could do it complex... Native web components is a better alternative.

[@SethGoldman89]

Has anyone been convinced otherwise as of yet?

[@tstcikhthys]

Not anyone who knows how the web fundamentally works and knows how to program properly, no.

[@baldcoder_]

@@tstcikhthys How exactly does the web fundamentally work, oh enlightened one? Templates and controllers were there when the fundamentals of the web were established?

[@tstcikhthys]

@@baldcoder_ Yes, in a sense; separation of concerns essentially always existed. Templates are HTML; controllers are JavaScript, and styles are CSS.

[@w0mblemania]

Question: if React is so good, why is the Facebook page so appallingly slow and resource-intensive? It's one of the worst offenders out there. It's a showcase for how NOT to make a web page.

[@user-hc7vz8on4e]

强

[@tamonanjester]

anybody from Honeypot documentary? :)