Prime Reacts: The Story of React

should we do the story of react does that look good I haven't I haven't seen this one before meh the one and true person here thank you Dev you know what Dev I appreciate that we're gonna react on react let's go I'm gonna react first launched it up hold on I gotta do this thing marker uh react to react Fu on the topic of LSPs I just saw your video why ts1 and I'm surprised at the comment about hey HBO pylons I did some digging it looks like open source MIT under uh repos is there something missing uh this must be a pretty recent change because this was less than a year ago I checked so about six months ago I tried to get HTML server to work or three months ago you had you can only get a built artifact you can't actually get the code it's not open source the last time I checked just the binary is is open for you to download off of GitHub that's the last time I tried to play around with it because I wanted to use it because it sounds really good you know what I mean sounds really good all right thank you Honeypot is going to release a react documentary February 10th are you going to be planning on watching it by the way we should do that should we do a group react watch physical thank you uh one day I'll understand half the technical stuff you're talking about you will too soon right on all right here we go you ready when react first launched it was not well received comments like these were all over developers really didn't like it and at first why what to me this is a little strange welcome to Costco I love you thank you I'll we'll get to that don't worry uh this is a little strange because when I first saw react I was actually genuinely excited I think react was an amazing uh experience right uh the story of react right like when I first saw it I was really really really really really really liking it and so I'm surprised that people were so upset about this stuff I don't know maybe I'm just like maybe I'm just stupid but I thought it was great at first why would they it was completely different than anything that had come before it so the question is how in the world did react go from sentiment like this to being a university loved and mostly respected to answer that we need to go back way back to before react was a thing at the time building for the web was different jQuery backbone and angular dominated discussion jQuery was the most let's go Mateo did you see the little Mateo popular way to build for the web and embrace websites for what they truly were a tree of Dom nodes with jQuery the state of your application lived inside of the Dom whenever you wanted to update that state you'd imperatively Traverse the Dom find the node you wanted to update and then update it jQuery revolutionized building for the web by creating a simple and unified I think so when I see this where people reacting so strongly to jQuery when I see that the first thing I think is that y'all y'all were you were you guys writing code for ie7 and IE8 jQuery was a godsend okay jQuery was amazing and so jQuery will always hold an exceptionally special spot in my heart right because like you don't know what it was like managing the web before jQuery you think tools hey you know what you do go yourself okay that was awful it was awful yeah jQuery was just overused everything became a jQuery plug-in I would agree with that but man jQuery was an amazing amazing start to things query selector no fetch API remember Ajax Greg do you remember Ajax dude you got you got dollar sign dot get and Dot post how cool was that like the crap you'd have to do to do HD XML HTTP request correctly never got it right I always had something wrong right like it was just so good okay don't don't dog on jQuery don't dog on jQuery it really doesn't deserve it it was just in a different time it was in a different time there was no such thing as Acorn or a sprema there was no tokenizing I mean granted it's like looking back on it's a terrible idea to build a compiler in JavaScript for JavaScript I mean it's just it's insane but like looking back on it it's crazy how good the tool was for the environment you had to deal with no I haven't you know what I mean you just do it attraction over manipulating the Dom that worked in any browser incredibly aggravating for me to have to do with all these cross browser issues all the time sure so I was constantly just I I wanted to develop my app in Firefox to have it just work in Internet Explorer and like it just wasn't possible I wanted something that was nice and terse and short that just could let me write and get done ironically jquery's biggest blessing was also its biggest curse turns out relying on shared mutable state is usually a bad idea with jQuery let's start it out as a simple way to update Dom State I wanna I wanna watch that again is usually a bad idea with jQuery what started out as a simple way to update Dom State typically devolved into a mess of spaghetti-like mutations that were both hard to predict and keep track of if you weren't careful what jQuery needed was something that encouraged a little more structure now it's time for you to jump into more backbone news Little Devils macbone.js invented the model view controller pattern that's a joke but it was the first popular JavaScript framework building for the web in Just 2 000 lines of code backbone.js allowed you to decouple your application state from the Dom instead of living in the Dom Backbone State lived inside of its model can I be real here I never learned how to use backbone I never learned how to use it um this this is a little bit phallic looking I'd agree yeah I never I I just stick I just stuck with jQuery because every time I started playing with backbone I really did not like it backhand Dev here what the hell's backbone don't worry about it's confusing jQuery is still my best language uh so easy to use it wait it's still my best okay now you're just saying craziness uh yeah now you can't stop saying the dick um this is C equals equals three wait eight wait C equals three yeah I wrote three backwards I wrote three like this and what am I a child from there whenever a model changed all of you would re-render and that was it backbone's entire philosophy was to be as minimal and uninated welcome to Costco so much stuff I love you thank you banana Farm next time get a banana hammock do you have a hammock on that banana Farm I've ruined the joke I ruined the joke minimal and unopinionated as possible so much so the default implementation of backbone's method responsible for rendering The View was a no-off that's just a fancy way of saying it was entirely up to you to implement your own View and templating strategy but you know what wasn't minimal and unopinated anyway so what is angularjs it's a it's it's it's what a web browser would have been we had missed go we had mishko on on on on this one he was a he was a great uh he was a great Cricket I have on there I pushed on him pretty hard and he did a great job he was a really good person to have on Twitch very I great a great interviewee is he wearing sandals yeah he's a developer in the early 2000s okay 2001 10. that's like that's developer where he took off his hoodie to look a little bit more professional angularjs is what you want to use when you have to sell rewrite the app within a year yeah head has been designed for web applications this introduction talk was the perfect representation of the angularjs project not because of what was said but because mishko did it entirely Barefoot a perfect analogy for the fact that angularjs did whatever the [ __ ] it wanted the idea was simple what if HTML was more powerful what was that cursing thing yo dog button okay just just okay it's really good because that way you can say words like and guess what it sounds like I didn't say you know what I mean what did I just say there did I say I don't know I don't even know if I did with angularjs you got everything you'd ever want out of the box two-way data binding data filters routing controllers dependency injection templates literally a mini version of jQuery angularjs changed the game because it was a true opinionated all-in-one framework for building web applications now you need to remember the environment we were in here too this was 2011 being a pure front-end developer was much more common than it is today the highly opinionated nature of angularjs was convenient for back-end developers who were given the unfortunate task of working on the front end this wasn't as uncommon as you might expect and it fueled angularjs's popularity the problem among others was that angularjs love two-way data binding eighty percent of what you do is just Dom manipulation and 20 of what you're going to do is the actual interesting stuff of what the application does and so we want to get rid of this I assume that 80 has only gone upward since modern percent portion so how do we do that well as I said uh angular is kind of like a spreadsheet so if I start typing you know notice same exact Behavior it updates immediately but notice how simple it is great data mining was its way of updating the view whenever the models go and updating the model whenever the view changed in theory this was nice because you didn't have to worry about doing manual Dom manipulation yourself hey hey is somebody making fun of Yahoo hey we don't make fun of Yahoo 2011 days okay 2010 2009 Yahoo was the tippity top the cream of the crop Okay Yahoo had all the best Engineers we all know that okay you just don't know how good Yahoo Engineers were Yahoo was the engineers of the valley if you worked at Yahoo you knew everybody else welcome to Costco I love you they had all the yahoos they had all of them they had every last one of them I wasn't Alive in 2010 well I hate you practice well implicit State changes usually lead to code that is both hard to follow and hard to debug it also led to Performance issues since angularjs had to constantly this is just the status phrase I've ever seen because it's 100 True Yahoo was by far one of the most talented group of people that have ever ever been assembled that I have ever seen and yet somehow they produced a Json Yahoo mail and a search engine that was just Rubble just pure Rubble and they didn't do anything about they like avoided buying Google for what 5 million or something like that oh my goodness definitely scan your app looking for State changes now though they were the most popular building for the web consisted of more than just jQuery backbone and angular but regardless majority of these where's mustaches but if you could avoid the problem entirely you know I take no selfies should I start taking selfies just uploading selfies all the time because I I upload zero selfies currently yeah where's polymer polymer was like 2014 wasn't it I think my dad still has Yahoo mail okay Anna get with the times here we're not talking about it anymore the simplest way that we've found to to build views is to just basically avoid mutation altogether and you're thinking to yourself wait what you need to update things right what we found is that anytime your data changes if we could just blow away our view and just re-render the thing from scratch like that would be so much easier from a developer standpoint we want to be able to say okay anytime anything anything changes we're just going to start over we're just going to blow everything away and re-render from scratch but we want to do it in a way that's actually performant and actually provides a good user experience right so the solution that we came up with internally is called react our tagline here is a JavaScript library for building user interfaces one of the core Innovations of react was that they made the view a function of your application State all you had to do was worry about how the state in your application this is a very confusing diagram changed and react would handle the rest and this is actually really simple because it's so declarative every place we display data is guaranteed to be up to date and we do it without magical data binding without dirty checking the model which can be expensive and of course this is a modern framework there's no more explicit Dom operations and everything is declarative but this was really only half the picture the real Innovation happened when you encapsulated this idea into a proper component-based API by doing so the same intuition you have about creating and composing together functions can directly apply to creating and composing components to truly Embrace a component-based API react needed a way to allow you to describe what the UI for a component would look like from inside the component itself this is where the most initial hate for react came from and it had to do with reacts interpretation of the separation of concerns principle if you're not familiar separation of concerns is a software design principle for separating a computer program into distinct sections historically the way you did that on the web was to have your that was utterly if there was a way you could restate the word without using the word that was that was a pretty good one that was a pretty good one HTML separate from your CSS which was separate from your JavaScript but react had a different interpretation in reacts opinion anything that had to do with rendering The View whether that be State UI and in some cases even styling was part of its concern to accomplish this react native yeah that was I mean those were the those are really amazing times I I feel like I I feel like one of the hard Parts about this video is that if you if you didn't grow up just using or if you didn't grow up discovering and and working on the web when jQuery came out it's really hard to tell you how magical this experience was right like I I don't think people realize like how amazing this moment was when react really started coming out you know what I mean like I I really feel like there's just this huge miss here it's it's it's very hard I don't know it man I just remember using it and just I could not believe that that was a real piece of technology you know what I mean like that was amazing it was mad it was a massive transformation for anyone that does not know about that it's just like it's so hard to describe what a transformation it was for everyone that's getting into programming today like you don't have that you didn't have to do it the hard way which hey bless your heart you don't have to do it the hard way don't do it the hard way but doing it the hard way also makes you remember all those little steps in between that were just really incredible seeing things happen a thousand Unix neckbeard echoed a scream of collective Agony into the ether when people stopped using HTML as their view concern language this is true but I mean apps have to be sufficiently complicated makes it kind of hard still likes felt though or solid soliders felt I feel like I could get I feel like I could really love svelt I just need to use it more solid I feel like is is awesome I like solid solid feels like the right abstraction for my brain just does way to allow you to describe what the UI for a component would look like from inside the component okay hold on someone's telling me to check Theo's chat log deal did I miss something sorry if I missed something this video is a banger I totally misread that you want me just to jump on your stream for a while uh you know it's not the worst idea I do think that that would be a funny thing you know I mean I think that would be pretty funny um JavaScript uh went from having terrible products to having terrible developer tool chain yeah JavaScript is really they really unfortunately react also did something on accident here I know I try I actually have a couple really good ideas that I'm about to that I'm implementing that are just like Banger ideas I'll I'll tell you about them um but what react didn't mean to do here was they kicked off the JavaScript now needs C make phase of life before it was kind of like you know you could we all maybe like maybe some people used clojure closure or whatever is called Google's like little compiler to build stuff and Minify it but for the most part the web was a pretty shitty place and that's that but then out of nowhere the need came in and it's just like it just it just blew it up and then all of a sudden we have like C make and for a decade straight we've had seeming fight I feel like is one of the first times I've enjoyed the Tooling in JavaScript more than I just want to cry Vite is probably the first time that I'm I'm happy enough with it I still cannot use chart.js I cannot use it I have a I have a library that's not of type module right a package.json that does not have type module I will not say Veet I've already we've already talked about this that's called an endonym I don't use endonyms I use x and Ms okay you use you should use x and Ms too and if anyone says Veet I expect you from here on out to call it Chile okay I you better not use the word China if you use the word China not their exonym or endoname I'm going to be very disa disappointed in you okay uh I'll invite you on that pronunciation yeah yeah I expect if you're gonna be really really you know you know a hawk on antonyms then you better get into it okay I don't I call it turkey okay I call it chili I call it Brazil I'm not like oh hey how was your trip to Brazil they'll be like what are you saying like did you go to Chile and they'll be like shut up you're from Montana stop it you're not gonna get in there and I'm gonna be like I'm getting deep in there boys what's that today like just shut up what about Dino I just called Dino but it probably should be Deno I can't tell which one that is because it well because Deno or Dino I don't think is French I don't know what language it is I'd have to agree with you if the first line of their dogs didn't include the pronunciation guide yeah still again that's such a French thing to do that's like the most Frenchy French thing ever describing us is the best that's what HTML is really good at but you can't mix HTML and JavaScript right if you pay attention to the API react is a JavaScript first Paradigm and there's a lot of reasons for that is Javascript is powerful it's flexible it's a language you already know you're able to represent interactions and logic that are just really hard to do in other more consistent languages like templating syntaxes a lot of other Frameworks are kind of I mean I do agree I the the original times of react when you had to like build everything I mean jsx was definitely a much needed improvements and I am happy that they did that letting you define your entire UI in JavaScript but it did lead the cmake problem but there's one thing about JavaScript that ends up kind of like getting in the way as you build these really deeply nested components as you start paying attention to these braces here and you don't even know which one corresponds the other one so what we did at Facebook is we addressed this problem by inventing a new syntax that's still every bit JavaScript but it's a little more familiar to somebody that has experience with templates or HTML you just say every bit JavaScript it's fundamentally not JavaScript that's okay that's what made it good that's also what made the cmake thing happen you heard it here first jsx was purely JavaScript why do I need a compiler well jsx different was it combined the power and expressiveness of JavaScript with the readability and accessibility of HTML I think jsx great abstraction I'm on think it was a great abstraction over relating to what's happening on the page I don't think that that's a bad take I think that's actually I think that's a pretty good take I was saying that back in like 2013 people were hating it I'm all about it I was all about it riding that if you were already comfortable with both JavaScript and HTML which you probably were if you were building web apps then you could get up to speed with jsx in a matter of minutes yes it was weird the non-js experts are crazy they did it at first I hate it but I love it once you used it in an actual application it became clear that react was awesome with their interpretation of the separation of concerns principle not only that but by embracing both jsx and reacts component based API I will say we did get into a hard part they keep showing that little the little the little squares coming together you need the half-assed ideas yeah yeah they they really are I agree with you Judo on this one they are really they aren't describing the pain here well enough the thing that sucked about CSS and it still sucks to this day and people just this is the whole like fundamental argument of the Tailwind thing which is that for anyone who's written enough CSS with more than one person two people and or had to come back to it in six months knows that writing J or css is horrifying and when react first came out and you could put CSS in JavaScript you just made more horrifying CSS that's all it was it was actually like the worst of every world ever was like that first little bit once you started using it you're just like not only do I not know what they mean I now have to go play the game of like find all the things that could now you have CSS important and JavaScript importante right like what the hell is going on in there it got so confusing it was so hard their interpretation of the separation of concerns principle not only that but by embracing both jsx and reacts component based API all of a sudden what used to require imperative operational light code could be abstracted behind a declarative API this not only enabled a better developer experience but also a vibrant ecosystem of third-party components so that was react in 2013. what's different today well from a philosophical perspective honestly not much you still create components which contain or receive everything they need to render the UI then you compose those components together to get your application though the API for doing this has changed over the years as JavaScript has matured fundamentally things are still the same what has changed though is how react is used from about 2014 to 2020 react was used usually in conjunction with react router to primarily create single page applications this was Spa single page application for those that don't know there's a lot of acronyms so buckle in buckle up get ready sit down shut up open your ears okay um react router isn't that the uh thing that believes that uh query parameters are fake news and should never be used for state am I correct on that one I make single Spa applications yeah is that the one because if I remember correctly react router is the one that was just like who needs query parameters when you could have state parameters it was like [ __ ] that was terrible that was also a bad design decision because uh hydration was just like if you ever remember that scene in Judge Dread when the judge was handed a shotgun and asked to go bring law to the Lawless like that was his retirement party was he got kicked out into the Wasteland that's kind of what I imagine this whole phase was was just like you got handed a shotgun and now you need to go bring law to the Lawless mostly fine but there were a few trade-offs first react isn't known for creating small bundle sizes this is especially problematic when you're creating a spa where nothing happens until the browser loads that beefy bundle next by the nature of a component-based what I don't okay I gotta re-listen to that because I was so distracted by the squirrel trying to tell me something that I I genuinely have no idea what just happened there but there were a few trade-offs first react isn't known for creating small bundle size six this is especially problematic when you're creating a spot where nothing happens that beefy bundle next by the nature of a component-based API since most components were in charge of the data they needed to render which included fetching that data if needed loading states were a prominent part of the react experience the solution ironically was and I'm probably going to get crap for this to treat react as more of a UI primitive than an application platform the project that pioneered this idea was next.js next JS is a framework built on top of react this allows next to give you all of the benefits of react while also providing some valuable features like support for SSG and SSR smart bundling route prefetching and much more remix is another example by building on top of react remix let's React to what it's good at rendering UI while Outsourcing what react isn't great at like Global State Management and data fetching to distributed Edge servers State management in general is just really hard you know that's always a hard thing State Management's really really hard regardless of how you feel about react there's no denying that it fundamentally changed how we build web applications and based on everything I'm seeing it shows no signs of slowing down hey go subscribe to the guy ui.dev great videos that's that's a lot of hard work right there yeah I mean I I that was good I think that that video is very very nice uh I wish I would have saw sponsored by herself that would have been so funny right at the end uh but real talk is a great video they I feel like it really does miss that whole feeling of of like what happened to the people living through that it kind of made it seem like it wasn't like it wasn't crazy I think that if you were to talk to any developer in this in that moment I I really do think you would get a much different response yeah Twitter's a bad in general I would just not look on Twitter for advice or ideas or things right uh you know Twitter can sometimes amplify just the worst things right like I mean think about how many stupid things I've posted how many stupid things have I posted today just today right not all the things I say are great advice and so I think you got to be a little bit careful on what you get what you get out of there all right just a little careful just a little next.js seems super overrated I don't know I I actually haven't really used next.js so I I really can't give you solid advice on that one the ogs know what uh the story is and generally to it on Twitter Discord Tick Tock and Instagram yeah they're not yeah so just remember like how awesome this experience was they missed a lot of the fun things about the story of react like remember the immutable days the set State days uh the the on Mount the on Mount Gate uh the move to hooks like there was a lot of like moments in react that were the next greatest thing repetitively and and it just felt like oh mixins forgot mixins forgot higher order components remember remember debugging your first higher order component and you press f11 and then all you see is a 140 stack frames going to beautiful react and you go I don't know what happened what happened and you just have you just have no idea and then debugging is just super hard remember those days like they skipped over the whole fun time of higher order components higher order components were the future right it was the future yeah I would say that classes to hooks rebooted uh this is probably where we why react is still relevant today is because they moved away from classes and went to hooks I think hooks in general give an easier welcome to Costco Mapes and through Mapes thank you very much let's go babes I appreciate it do you remember when debuggers generally did not understand how recursion into anonymous functions dude it was crazy talk nothing made any sense there were so many problems you just like it would just stop working debugging on IE anything was just like well I hope this break point gets hit I'm gonna console log and breakpoint because break points aren't reliable it was really hard those were hard days hello from Brazil oh thank you good days though it was good days uh so I I feel like I really wish they would have talked more or it would have been so cool to see any interview with people being like excited about jQuery besides for the inventor of jQuery or people being really excited about reactions I like I there's just like this there was such optimism in those moments it's really hard to describe that feeling it was really really fun I really really loved it and man if I could go back like there's been few technologies that have made my life better than jQuery real talk very few technologies have made my life better than jQuery Docker is like another one Docker might be the next big one for those that haven't dockered because you barely know her you should give it a shot okay it's really really good welcome to Costco thank you I love you it's just one of those moments where it's just like it's hard to describe how great those times were you know what I mean it's really hard yeah like docker was an amazing and amazing experience I have never I have never kubernetes so I can't tell you but I know that everyone that uses kubernetes and is good at it loves kubernetes so ansible is another thing that I've really appreciated what about Vin though I'm three years Colleen of Docker I'm clean man

Channel: ThePrimeTime

Views: 124,736

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: 3q67v12M31M

Length: 31min 43sec (1903 seconds)

Published: Sun Feb 12 2023