Pete Hunt: React: Rethinking best practices -- JSConf EU
Вставка
- Опубліковано 15 лип 2024
- 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. - Наука та технологія
I'm here to see if this talk might convince me otherwise.
Lmao. Me too
@David Smitherman heroes? Seriously? Learning react is now a heroic act?
@@Gioeufshi Lmao my thoughts exactly
did it?
@@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...
who came from the react documentary ?
What's the point of this comment and why does it matter?
What react documentary?
On the React Docs, they told me : " this talk might convince you otherwise." so Im here.......loooooool
same
Same. I'm fairly new to React and following it's official documentation. Can you suggest me any good resources you are following?
Me too :D
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 UA-cam if you aren't good yet with it.
Same here :D
10 years later and I still got a lot of new insights from here 🤯
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
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.
@@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
8 Years later and you still should avoid all of these bloated and pointless frameworks that are bigger than entire well structured apps.
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.
"Re-render don't mutate," my biggest takeaway.
This is amazing to watch at this point in time!
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 .
Really interesting. I felt same emotion & motivation when I watched Clojure presentation from Rich Hickey. Thanks.
Who else is here from Reactjs docs. Lol. I'm here to be convinced!
x2
I'm not convinced otherwise. Handlebars is just so clean.
Watching this in 2018, came from the documentation and loving React !!
Thank you, Pete and React team!
The talk that kickstarted a new way of JS & GUI dev
great talk. As a backend engineer, I wish people showed me this when I tried to understand the design patterns for Frontend.
I'm here from react docs...what a valuable video
That was a great talk Pete. I'm very exited about Reactjs. :)
Best part of the talk, as a novice programmer, is diving into virtual DOM as 19:30
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.
" this talk might convince you otherwise."
wow, at the end realised this is from 2013 !? wtf. great talk
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
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.
4 years later it is same
@@sfafsashfdh6589 Functional components and hooks have changed things greatly though.
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
I spent this whole video thinking "Dude! Drink some water!"
Pete hunt left no stone unturned to market React, but no doubt React is awesome. Thank you team facebook!!
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.**
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.
Amazing talk, wow
someone give him a glass of water!
LoL I was thinking the same thing after watching for like 7 mins. Glad this is like the second comment in the stack.
Watching this video made me drink lots of water.
A defibrillator would have been important as well.
My thoughts exactly. Do not start a speech while being dehydrated! :-)
Great content but its so painful to watch!
The video and content is marvellous. But gosh, Pete is struggling, I need a glass of water for myself after that.
So JSX looks like html but it actually is function. Thank you. I have less anxiety using it.
nah, its an expression
Thanks a lot man!
You king of convinced me
I have been convinced
Love React...ur right frameworks shouldn't force us to code in a certain way...
Thank you.
Can someone recommend a talk or book that just speaks about the theoretical concepts, principles of React. Like this video.
This should convince me to ditch my classical understanding of html and js being sparate... hmm I guess I should give it a try
Just re-visited this video ~4 years later for the nostalgia. Still loving React, still using it every day, still re-thinking best practices!
The intro soundtrack ... I did react :-p
These pretzels are making me thirsty
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
Two years later: "in terms of speed, debugging, available UI options" Angular > React
@@JuanPablodelaTorre lol wrong.
React is in NO way, shape, or form better than Angular!
This should be mandatory for every JavaScript developer in a bootcamp who is now learning about react
Ahhhhhhhhhhhh. I'm convinced :)
amazing to watch this in 2017 when react is now the framework to beat!
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!
@@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.
I am thinking to LEARN React
I'm also here to be convinced otherwise!
Crazy to see how it started. No JSX. The ‘var’ keyword
At ua-cam.com/video/x7cQ3mrcKaY/v-deo.html
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
this talk did NOT quite convinced me otherwise...
Here to just check why it all started
Oh yes, it convinced me
best video !!!
Suggest to subtitle video，thanks
Here to convince myself ;)
From React Docs?))
Good video, I’m surprised there are only 30~ comments on it though
React is amazing
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.
Amaziing....
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.
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.
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.
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.
I'm not convinced otherwise
"Just don't write spaghetti code"... One could say the same about PHP
Thank you!
One could say the same about every programming language.
ASP.NET code behinds are lasagna code 😬
I wish I knew what the @cowboy tweet said. The account is suspended. Anyone know the contents of this fabled tweet?
I hope this talk might convince me otherwise.
Nobody can refuse tasty food ... 7:30
Dude made me thirsty.
Why people are not REACTing to presenter.
Pete hunt is the senior team lead I wish I had so I can be one to my team
Does react still work the same way? rerender, don't mutate
This has convinced me otherwise
What did the @cowboy twitter say? Does anyone know?
"child"... "partial" 7:20 ... react lapsus. Love it!
idempotent
Mathematics
1.
denoting an element of a set which is unchanged in value when multiplied or otherwise operated on by itself.
Give him some water Jesus
Phantomjs, phonegap lol. It says something at least that React has survived while these other technologies haven't.
lmao rip indeed
Watching this in 2021 feels exactly like Steve Jobs presenting the first iPhone
Or every next iPhone.
There are useful bits but you still feel like you've been fed a pile of shit.
I don't think this convinced me as stated. I still support separating the presentation logic from data and its manipulation.
Me too. i cringe whenever using React or anything else that has to deal with a hundred dependencies.
It's a very mediocre and grotesque Framework that every shitdev pretends to love.
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...
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"
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.
anybody from Honeypot documentary? :)
Curious to see how React handles updating of millions of rows.
better than Angular?
you also shouldn't be displaying millions of rows at once ;)
Is there some reason you want to show millions of rows on a Web page?
All I hear is is "we do the same what vue.js does now, except our syntax is ugly as hell"
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.
is it outdated?
Not convinced... Why to keep it simple when you could do it complex... Native web components is a better alternative.
So, React is basically VBScript for modern era. Fair enough.
rethink stablished best practices
Well, I'm not convinced
React is saweeet!
If you are stupid, yes. But wait.
same, funny they show a 7 years old video
Great content. But someone please get this man a water, he's dying up there
Those generated sub-titles are kind of useless. At exactly 12:00 they get downright obscene.
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.
Is that still valid? Pete talked it 7 years ago
For god sake someone give him some water
Gulp...
I like his laptop sticker :)
Jeez someone should have just given the guy a bottle of water
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.
强
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.
Weird, I find routing to be a tiny part of the app and it being declarative doesn't buy me anything at all.