@@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...
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 RU-vid if you aren't good yet with it.
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 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
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.
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 .
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.
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.
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.**
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.
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
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.
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
After 10 years, this is still true. I completely agree. I love JSX. I don't know why people hate it. It could be the "Panini Effect" ( Representation of fans of who love you when you're small.), I used MVC type stuff with PHP and it was hell, just hell. And it is true, the controller becomes so fat.
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.
At ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-x7cQ3mrcKaY.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
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.
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.
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.
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.
I was told in React docs that this could convince me. I am not convinced. Aside from about 1/3 of presentation being a marketing campaign (bleh), the fact that you need JSX crutch just to make code human-readable again should trigger some alerts. It's a mixed bag of good ideas and bad ideas thrown together. There are a few things to carry from this (like thinking in components). But while I kinda understand and can support the idea of uniting logic and markup, how React does it is simply disgusting.
there's a reason why React got popular. You cannot say that is disgusting when earlier webdevs use PHP, to templating, to jquery. Making a reactive app back then is just the worst when you grapple changing state. Their implementation works and gets shit done as fast as possible compared to others
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.
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.
@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.
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.
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.
@@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.
I came here from the React documentation, they say there "check this (terrible) video, it may convince you that embedding JSX into JS is a good thing". Damn it. This is the most terrible idea of all times. He says that this will reduce coupling. I really don't see it at all, it does nothing except putting html in JS. This why I like Vue.js better, in fact, this is the first thing that got me away from React, even though it's the hottest UI library these days, but I really hate this JSX thing. Until I find an alternative to this, it'll stay the worst thing in my opinion, even if I'd use it for some projects.
I agree. He mentions coupling and cohesion, but forgot developer cognitive load. We separate concerns, so that code makes sense. JSX can get downright mofugly and it takes extra extraneously built and controlled rules and constraints from developers using React to contain JSX from becoming a big ugly mess and that is where Vue shines. It offers these constraints built in and they are still fairly easy to learn. This has a twofold advantage. Vue is fairly easy to learn to use and more importantly, it means any Vue app will be built in practically the same way, every time. That means devs who have learned Vue can dig right into other applications and understand, fairly well, how the application is supposed to work. This "jump in and get wet and swim fast" kind of process isn't so simple with React built apps, because the "best practices" aren't built into the React framework. Nope, it just gives you JSX and let's dev go for a free-for-all. Vue also has this same issue (as does React), as soon as the app gets to any kind of larger size. There is no standard way to put together a larger app. One might say this is flexibility, but in the end, a "best way" will always be found. The new Vue-CLI is supposedly taking on this area of best practice for larger apps. For React, there are also solutions being developed, but external to the core, and again, this is where Vue shines. So, separation of concerns all comes down to ease of use, reduced cognitive load for the dev including a quick understanding of legacy/ already built code. IMHO, that is the win Vue offers and where JSX, without those external "best practices", loses.
Nice comment, though I disagree.. soc doesn't boils down only to reducing cognitive overload for developers. Soc is also about reuseability of the code and not breaking existing features being used by other customers.
If you have a click counter state and a counter template, the template will inevitably depend on the counter state. You cannot escape it. They are therefore *coupled* (cohesive). If you change the counter name from "numberOfClicks" to "count", you'll have to go update the view to access .count instead of .numberOfClicks On the other hand, if you have a click counter and a todo list, they are not coupled at all. They don't need to know anything about each other - ideally they wouldn't even be able to tell if the other one exists. If you add a checkbox of completion to the todo list, the click counter... doesn't care, at all. The view templates know almost everything about the state. If the structure of state changes, the view must also change to reflect the state change. Therefore the view should live close to the state, in a new abstraction that combines both called "component". This is very much in tune with more abstract software engineering principles, like "encapsulate what varies" softwareengineering.stackexchange.com/questions/337413/what-does-it-mean-when-one-says-encapsulate-what-varies - instead of the more specific and dubious "separate logic from markup" we got as an over-reaction to the PHP spaghetti mess. Where you can and really should separate things is between components. There are of course sometimes different situations. If your design changes a lot, but the data transformations don't, it might be a good idea to separate them. Even then the first thing to try are components: display components without logic that render things with the appropriate classes and styles (Button, NavBar, Panel etc) + logical components use them for the conceptual layout of the page. And if that is still not sufficient (e.g. you have two different views, web and mobile), *thats* when you separate out parts of the model.
I don't think he makes the case for JSX either. The disagreement is over how cohesive markup and JavaScript are. I think it's telling that at about 6:08, he says markup and JavaScript do the same thing... and then he says *two* things: rendering data and handling events...
@Spiun666 So, having a dependency isn't the same thing as being cohesive. To take your example of counter state, maybe the server is keeping a count of every user to visit the site. Maybe that's stored in a relational database. Following your logic, because there's a dependency, your markup is therefore cohesive with your database schema. This isn't what cohesion means. What you will have is interfaces between different components (in the general software sense of the word "component"). In your example, the variable name ("numberOfClicks" or "count") is the interface between a template and the JavaScript. (In my example, there would be some API layer, probably with an HTTP interface. It would, in turn, consider the database schema an interface. But, none of that implies cohesion.) You are definitely coupled to the interface at each layer, but you're decoupled from the actual implementation. State can be stored and handled multiple ways in different servers communicating over different protocols, all without needing to change the template.
