React is a programming language for UIs

i'm not much of a details person [Music] if you talk to anyone who knows me they'll tell you just how bad my memory is now don't get me wrong i can be a perfectionist if i'm really focused on something but when it comes to the nitty-gritty i feel like my brain capacity just fills up really fast and that's one reason that i've always loved frameworks frameworks take care of so many little details i feel safe when i use them like they've got my back because i know they've thought through all the things that could go wrong while i'm building an app now when i started using react i was coming from years of experience with frameworks like ruby on rails and ember and these frameworks take care of so many things for you sometimes you don't even know how they work which can be both a good thing and a bad thing so what i want to do right now is compare how the creators and maintainers of these frameworks think about the tools they work on and i think the difference is going to surprise you to start off here's dhh from the initial rails tutorial that was announced almost 15 years ago now we create a template look at all the things i'm not doing look at all the configuration i'm not writing all these things are mapped together just automatically so rails does a whole lot of stuff to cut down on the amount of code and the amount of repetition you need in your field and here he is more recently in 2018 i like to think that what we've been doing is a lot of this conceptual compression that we've taken a lot of concepts that people use to worry about and have to figure out from first principles and then we've turned them into something that most people don't have to worry about most of the time so when i think about as a framework builder what is it that that i do it is to think about it in the sense that can we take a concept and basically compress it in such a way that you can get 80 of the value of that concept in about 20 of the effort or better and lastly i can't help but quote this beautiful line straight from the ruby on rails doctrine it says there are so many conventions and rails that a beginner doesn't even need to know about but can just benefit from an ignorance it's possible to create great applications without knowing why everything is the way it is this is more or less the world i was coming from so you can imagine the surprise that was in store for me when i started diving in to react i knew react was just a library but i still expected to get a lot of help from it when it came time to building my app i remember on my very first side project just trying to add a link that when clicked loaded some data and rendered a new page well there's nothing in react called load data or transition or anything like that there's something lower level called use effect which is meant for side effects okay i thought i guess that loading data is a side effect so let me try this thing out you pass in a function and okay here's where i can load my data and that seems to work out all right then we also have this rendering logic here but i can't render it until my data comes back so now recipe is undefined and i'm seeing this error and now i need to handle this new case now at this point i'm already asking myself am i doing this right i mean i've been through the tutorial i've read the docs but i couldn't find a single example of doing something which is pretty basic as far as apps go loading data for a page and this is where those feelings of doubt start to creep in see ember and rails have first class apis for this sort of thing and in fact most of the things you need to do in those apps there's kind of one right way to do it but here i am building one of the first features on my first react side project and i already feel like i've left the guides and i'm tinkering on my own something wasn't adding up well i continue to tinker i start adding checks here to see if the recipe has been loaded and if it hasn't just show a loading message i get something working but again i have that feeling of uneasiness am i doing this right is there something else i haven't considered sure enough i start clicking around some different links and i hit another bug almost immediately can't perform a react state update on an unmounted component eventually i realize i need to consider what happens if my data fetch returns but the user's already navigated off to another page after some more tinkering i land on this solution in my use effect hook i need to track whether the component is mounted and only call set recipe in the callback if it still is now here's where i'm really starting to lose confidence see while i'm new to react i have enough ui experience with ember to know that i'm really starting to write my own state machine here ember has this entire router class that is a state machine and does things like coordinates and discards data fetching logic as the user moves throughout the app and i know how complex this router is and how much of the heavy lifting ember is doing for me so writing my own state machine that coordinates data fetching logic with user navigation felt like a pretty big ask just to write a recipes app the code i was writing just felt so low level it was all about unmounted components and side effects i wanted to write code that talked about transitioning pages and loading data honestly it felt like i was using the wrong tool for the job over the coming months i kept learning and i kept running into these sorts of issues but i also started paying attention to the creators and maintainers of react on twitter and in conference talks how did they talk about and conceive of react and was it aligned with my own priors and beliefs that i was bringing to my experience i started to see certain sentiments crop up in their twitter conversations when jordan walk the creator of react was talking about his programming language reason he would say things like more explicit and verbose but simpler now even as kind of a off-handed comment this really struck me because it's not the kind of thing i would hear from the leaders of the ember and the rails communities and here's dan abramov who's on the react core team he was saying things like what i like about hooks is that they expose this lower level understanding of what react really is directly and this isn't magic take it apart and learn now the sentiment isn't only found in isolated twitter conversations it comes through in conference talks at official conferences as well here's jordan walk again i hear the stories about people adopting react and a lot of the stories have something in common people say react made my job fun again and i try to think about why is that they might say things like i really like that react is composable or they might say i really like that with react apps my code is easier to reason about and it's not really clear what people mean when they say reason about but i think i have a pretty good idea what they're trying to say would you reason about something it means that you can look at a small part of your code and you can understand a majority of the complexities and the interactions there without having to keep the whole entire program in your brain at once so it's easy to reason about part of what jordan is saying here is that he thinks it's better for developers to have a deeper understanding of their code instead of giving them higher level more powerful apis that they don't fully understand and here's sebastian mark beige who is a core maintainer of react talking about some of these same ideas javascript standard library doesn't have all the features of my library so what do i replace this with often the answer is just write some more boilerplate code this can be really annoying to have all this repetitive code that looks ugly when we all want beautiful code right except this process fundamentally has no end ever we're simply never going to realize a state of software nirvana where everything is supremely satisfying and that's an important emotional realization but nothing is free so what are we giving up implicitness react favors explicit apis and for you to write out your code explicitly as possible over built in magic so you see sebastian here is really coming from a very different place than dhh is i mean compare what you just heard to what dhh says in the rails doctrine that it's possible to create great applications without knowing why everything is the way that it is these two framework authors really see their jobs quite differently now after spending a lot of time learning these lessons and absorbing this sentiment i realized that react's values were really quite different from the values of tools i had used before and if i wanted to get the most out of react i should really embrace these values rather than trying to shoehorn my existing values into this new tool that i was learning and so as i did that i formed some ideas of things to keep top of mind so that i could really embrace the react way of viewing the world here are some of those things first the primitives that i'm working with are small and sharp they're there to empower me as a programmer but they expect a lot from me as well and just like with a sharp knife it's my responsibility to learn how to wield them safely and effectively next is to favor the explicit over the implicit now this one i've really struggled with because again details fill up my head really fast but every time i have prematurely reduced duplication or boilerplate in react it's come back to bite me so i've been learning to be okay with a little bit less magic and a little bit more code and in react it usually pays off finally fewer pre-packaged solutions more experimentation i learned to stop expecting react to ship something like a used query hook or a route or transition component primitives that were higher level and closer to the domain of my own app and i started to see react as a lower level toolkit that allowed me to experiment with the kind of higher level apis that were suitable for what i was building and when i started to embrace these values my relationship with react changed i started to get the most out of react now are there times where i wish i didn't have to spend so much energy on low level things of course my cognitive fuel still runs out like that but as i've gotten more comfortable experimenting i've also become more comfortable with the communities experiments and this is where a lot of these higher level apis come in things like a form component or a route or transition component or a cache aware use query hook as i've gotten better using these apis and libraries from the ecosystem and filling in the gaps with my own experiments i've become way more productive at building react apps and now that i've told you my backstory i can finally get to the point of this video you see over this past year as i've been learning react along with my friend ryan one day we just said to each other react really feels more like a programming language than it does a library or a framework and that idea really struck me you see the old definition about a library versus a framework is that you call a library but a framework calls you but that distinction never really captured react for me react felt closer to a whole environment that was designed specifically for writing uis and this idea that it's closer to a programming language felt much more appropriate you see when i'm learning a programming language i don't get frustrated that the language doesn't do things for me the language's job is to empower me and i need to learn how the syntax and the constructs all fit together to do what i want learning a programming language is a big ask but it also opens the door to unlimited possibilities it turns out dan abramov expressed a very similar sentiment back in 2018 personally i like to think of react as more of a language for expressing ui so react is a programming language for uis that's how i think about it that's how i think you should think about it and whether your next project is the right time to learn a new language is a decision you'll have to make for yourself

Channel: Sam Selikoff

Views: 3,355

Rating: 4.9863944 out of 5

Keywords:

Id: QiR9viVIJgo

Length: 12min 48sec (768 seconds)

Published: Sun Jun 28 2020