Teaching NextJS To Primeagen

some point this month hopefully no my my windows installs are cursed enough as is streaming it is just begging for trouble uh don't yeah I mean if you want to have a folder to contain all the stuff that we do today maybe yes but yeah yeah make one actually cool sounds good to me I am excited for it the plan I think is we're going to start by doing nextjs the nextjs way initially get everything set up and then from there we're going to do nextjs the T3 way so I could show you what it's like if you trim all the fat should be fun also just realized my stream can't hear you hopefully I just fixed that uh howdy stream sorry about the weird time I know everybody I told you that we'd be live in like an hour or so but turns out Prime agent's bad at time zones because he's a programmer and we're all bad at time or date time that's what we do we [ __ ] up times and We complain about year 2000 but we're here we're streaming we're teaching Prime engine xjs it should be really fun I know nothing oh do you want me to stop my feed or do you want me to continue to have my feed as is oh keep having your feed as is this is great I actually am literally I just took your feed and put my camera over it on my end so it's like the thing ever I'm basically just raming you okay perfect yeah this will work totally fine for me nice and simple cool generally I want to like it be the the devil on your shoulder complaining as you start trying all these things out rather than like me taking over and also I can complain about your Vim set up while we do it should be super fun this should be good good stuff let's do it let's get start happen cool first and foremost let's get you the create next app setup so good old can you tell me what nextjs is nextjs is a backend framework focused on providing a good experience for users in react okay think okay kind of like PHP rails but instead of serving an HTML file it serves a react application okay okay I have a I now have a box okay good now I I officially have said yes to the next JF conference without knowing what it was I now know what it is I am now pretty good all right so npm npx NP is npm ex executable let you execute a package without having get installed create-- app create next an important Detail no kill it kill it stop it control C it Das DTS oh yes we we do not use JS in this Camp all right I like it I don't I don't want to use JS yeah it's emotionally painful I very much agree I have a hoodie that all my jumping to definitions just stop working and then I don't want to program anymore oh also painful I God I I was not a JavaScript or web dev fan for most of my career I started actually doing Elixir at twitch originally and I moved over to JavaScript because we had adopted reac and typescript in a rewrite of the twitch site and I fell in love with it then up until that point I couldn't stand front end but typescript made it a lot more viable for me typ scripts definitely more bearable I I would definitely agree with that I I I had a Time the amount of errors I've had that were just like ah dang that actually was undefined it's just it just hurts too much yep all right perfect I'm here what's the play let's hop into Pages first and foremost all right pages so the important thing to know about the Pages directory is that it works a lot like the or the view directory in or what's it called rails or traditional file based routing or something like PHP every file we put in here is now going to be a rout in our application so if we made a new file here like d gen. TSX that's now going to be a page in our application and in here we can export default function name it whatever does need to have a name oh F can we do that sure yeah just return some HTML just return div test yeah uh hello world right there we go classic actually really if we're going to do this we should probably be hello dent right perfect yep all right got that then mpm run deit quick hold on one second what was the thing called it was called next to J oh not Netflix nextjs sorry someone's turned off my monitor I can't actually see anything all right good there we go now I'm going to go into Dingle and Di it in here and let me open up another one all right so what do I need to mpm run Dev should have already installed everything run Dev classic cool all right 300 we should be able top into that locost 3000 there we are that's the homeage and change the url slen D Tada my goodness this was simple yep so let's go into the magic of nextjs the thing that makes it different from like because theoretically everything we have right here you could just have a a code gen router that takes these files and creates a single page app but there's nothing here that's through the backend yet this is just server pages one interesting thing we can see quick though if we go to the browser again oh the browser yeah yeah go to the network tab I will go to the oh wait hold I'm in Firefox I don't know actually how to I don't know how to use Firefox so here let me go to local 3000 uh I'm going to put you over on one I genuinely have no no idea how to use it cool wish I have light theme or there we go open up that oh God the light theme yeah gross yeah oh so refresh the page so we have data in the network tab the interesting part if we scroll up to the top here will have the dgen like file here go if you scroll to the response on the right there yeah uh click the prettier button on the bottom my face is going to cover most of this sadly but uh what you'll see here for those who I'm not covering it for oh perfect is that inside here you're getting the actual HTML contents of the page hello Deens we're not getting a script tag that runs on the client and then generates the page we actually did generate HTML on the server and if you were to turn off JavaScript on this page the content would still be there because it's being generated on our server running the react code okay okay that makes sense so we got the server side render of the actual page and then for whatever reason the other stuff came down that would allow it if I had more fancy things back like nothing happened [ __ ] is this man a Chad you need that 4090 TI that can't actually run because it catches on fire isn't that like the reason why the 480 is or the 490 is not coming out is because it it actually just explodes yeah the the 490 is insane amounts of power but it is very cool what they're doing with it I think av1 is going to be a really big deal in the next year or two but yeah right now it's uh we got a way go build that crap yeah back in the day before av1 we had what it was referred to as al1 aim low and coding because we used to aim low to be able to bring the best quality with the uh least amount of bits interesting very interesting yeah I used to be known as I only knew it as al1 until someone's like it's av1 now I'm like oh okay it's al1 my book what al1 is actually I I like that naming a lot better a1's confusing because it looks like Avi and we definitely don't want Avi we don't want Avi all right I'm ready okay so we now just done it so what do I do now let's do some backend let's go back to the pages dgen file quick we're going to show off one of the one of the signature features of nextjs I I will preface this with I avoid this feature at pretty much all costs if I can nowadays but it does do a good job of highlighting these problems somebody men I want Focus can be one sec to refocus my camera there we go quick question uh what would be the purpose of you I guess let's do it and then let's talk about why would you want to use it and why would you want to avoid it yeah of course all right so let's do it first we're g to use one of these fancy magic functions that next CH provides called get server side props so we're going to export const get server side props equals export cons get server side props equals equals and this is a function so we don't need the inputs for now yeah uh that should work with the equals function syntax yeah cool I normally I do aror function same difference yeah but what we want to do here is return props so we're going to return an object that has props colon oh it if it doesn't have props col and it gets very upset and then in this we can return so so I usually just a test it we'll have like time or subscribe perfect that works there you go yep so now in our press subscribe button already people watching on YouTube just do it this is ridiculous all right come on hit that sub button it's free so and so that must mean I can go in here and do some sort of props in here let's just console log it to see what we get for now uh it's angry that I haven't given it a type I'll just uh TS ignore just give it any for now there we go uh that means I should be able to go back here refresh it and see look at that it's printed it twice does it always print it twice okay printed it twice it's rerunning the component because react likes to do that a lot but the interesting thing if we check oh is it because it landed and it was already rendered so then when react started running it was just like I gotta run now with these things no uh there actually you'll see why go check your CLI where the dev is running right now and you'll see it's in here too I don't even get that at all why is it in here it's here is there a web socket that's set up during development time that pipes all console back here no what is happening here SP saying that my mic is too loud and you're too quiet I'll just knock myself down a little bit hopefully that'll bounce that out is it on my side we're golden yeah I think that on my side I'm just loud and I don't know why you're quiet but we'll deal with it no worries I balance things on my side so we're gonna talk about hydration here so the first thing that has to happen when we send HTML to the user is we have to generate the HTML for the user correct so the logs you're seeing in here are the logs from when we generated it on the server so it runs it twice on the server as well it actually only should have ran it once on the server but we refresh the page once oh we refresh the page oh yeah boom okay yes that makes sense so it runs once on the server why is it running twice on the client though because it's not taking these console logs and piping them over it is actually running it twice on the client can I make a guess before you tell me sure uh let's go uh console log I meant to say hello but we got fellow dang it that's not it I figured that maybe since there's props it always passes them in no okay nope this is react doing its thing in Dev mode so react likes to test what happens when your components have their renders interrupted so it's constantly interrupting and rerunning your renders at at least once per Mount so effectively what happened there is react silently unmounted and remounted your component to make sure that it doesn't break in a billion disgusting ways and hold on just to help me I read this somewhere this is because at some point when someone renates back from a different tab react is going to run some sort of hey you need to re-render everything type deal it's because in a concurrent environment where all events can be interrupted you need need to have your components written in a way where its render could be interrupted cleaned up and redone so let's say we have a chat we have a crappy chat website where we type in the name of a channel and it connects to their twitch chat but we are autoc connecting every time we press a letter and more importantly we are interrupting those presses when we or we're interrupting the connection whenever we type a letter because with react in concurrent mode input priority is above all render PRI priority so when I'm typing in the name of a channel every time I press a character it's going to kill and reset whatever the effect is that does the connection so it's important to write my code in a way where I can interrupt a connection event with me typing and if the fifth connection event from the last key comes in sooner than the third one it knows which of those to use as the connection that we care about so it's more than anything it's about writing your effects and your side effects in a way where interruptions don't cause weird things like connecting to your server incorrectly or out of order so does that mean that during a react render in concurrent mode you'll have a slower render because it must have to give up the process Loop so it does some sort of set timeout of some sort set next tick it's using some weird proprietary Chrome stuff that's not fully like shared yet where all events have priority and chrome itself is smart enough to deprioritize render events in favor of user-driven events so okay I I want how does it how does it stop job there must be some function or something you call to say hey you can now de depri deprioritize me kind of like next tick because you can't really stop Javascript running in the middle right you have to do something else right yes I don't understand any of that stuff well enough I just do what Dan abou tells me and what Dan abou tells me to do is to clean everything up regularly I see people in my chat like are not fully understanding like I literally said this is a bad example but it is an example of a render with consequences that is driven by user input and that's something that the react team is focused on a lot it's how do we handle a lot of renders happening when users are doing a lot of different things without everything falling apart and a lot of that is having a direct cleanup and garbage collection so to speak relationship with everything you do so if you have an effect that does a connection that same effect should have a return that cleans up the connection so that everything is handled correctly you you real okay I'm just happy long as we don't get to actual concurrent JavaScript imagine how bad true concurrency would be or parallelism at this point would be it would be it would be emotional the amount of uh code you could potentially swim through trying to figure out what is actually going wrong don't get they can give up yeah yeah exactly web workers is a great example where parallelism is really it's still just really hard even though it's two separate context you get two different isolates right V8 isolates where you're actually running completely unemori from each other and it's still hard because it's it's just like not easy I have seen one really good use case Forum though have you seen Party Town no is that an nft it's up there with quick City for terrible named things from Builder iio as good as they are the beauty of party town is it's it takes things that shouldn't block like analytics primarily and pushes those out from your like point of concern into a web worker so like if I have segment or Google analytics I can run those in a web worker with a really minimal binding between that and the Dom so it sends off these annoying tracking events to not be blocking which is really nice okay okay that makes sense oh hold on I I didn't say hey taste the Rambo I must have missed I don't know why this this event didn't kick off thank you tast tast Rambo where are you there you are thank you you're way up there I appreciate that I don't know what happened didn't I didn't hear a thing go off yeah anyways let's hop back into next now that we've seen I'm already there a serers side prop here we can try and do this the the correct type Safe Way which they don't make as easy as I would like for them to there's an infer get server side props uh helper I just want to find it quick Okay Google searching so I am sure uh infer yeah so there is a in next uh there's an infer get server side props type helper if we go to the props colon any I don't know if you're Vim set up to autocomplete Imports as we start typing things I can I can I can autocomplete yes cool so delete any and start typing in capital I infer oh capital I infer like that yeah get yeah in prer get server side props type that side yep and then are you impressed that my Vim just did it it says it can't do something's wrong here what's the generic yeah so yep now it needs to take uh so at the end it needs uh brackets and in that we pass it type of get server side props for our function above oh nice get server side props okay nice you called those brackets which emotionally hurts me but I'll let to go what do you call them they're angle brackets angle brackets sorry I I dropped a word keeping it simple all right I don't get any autocomplete for that props dot interesting it saying the we're doing something wrong oh I know what it is this is so stupid uh make the function async really yep is that is that really it they're built-in helpers are y That's What It Is they're built-in helpers are [ __ ] so I'm showing you all this because I want to show you next at its worst which is when you use nextjs oh that hurt me a little bit I I love that I love the fact that it is Ayn it gives you the opportunity to be able to do the things you want to do but the fact that it's not a sync and you just get nothing or never like yep the the type I if you want to look at the infate serverside props type if you just right click go to death or whatever you do to go to death GD yeah goto death some of the stuff in here is a little cursed they've improved it recently so I don't want to [ __ ] on them too much and I do appreciate what they're doing but for a while this was cast as uh a record string comma any it was very scary it already looks painful I'm at the I'm always at the point where when I look at this stuff I'm like I don't I don't quite get it it's okay I don't have to I don't have to be that good at typescript so yeah this is the basics of next from here we are now able to do whatever acing stuff we need to on our server we could fetch data from database we can hit another end point whatever we need to do get that data and then that will make it all the way to the compos opponent below with a couple weird inference points on the way okay and so whatever I put inside of here does that make it down to the client anything that can be Json serialized so if we go back to the browser quick and we look at the HTML that went down yeah hold on someone turn off my screen I'm gonna hold on everybody I got I gotta turn off this screen we're in the middle of someone teaching me here okay you can't be just turning off my screen it's no time for shenanigans okay this isn't all right there we go cool no time for shenanigans so back to the Chrome inspector cool so if we go back to the source for the page if we click D gen on the top in the network here yeah oh that this works too yeah and scroll the bottom here you'll see there is script ID equals next data this is a script tag that is literally just whatever we returned in the get server side props dumped in as a Json blob I don't see what do we say we say subscribe to Theo I don't see subscribe to Theo uh is this the you might have to refresh it because we changed it oh okay yeah there it is okay yeah there it is okay okay so so why did you say this was bad besides for that little like you forgot to do async business okay you learned how to do the async you learned how to do this magical thing right here this assumes you know all of the data your page needs at a page level not a component level okay yes I can I can see that yeah you won't know everything at the page level unless if you can somehow hide every single piece of State information from every single component in the URL is that what they are kind of going for yes okay because I mean imagine if you're on Netflix and it says URL row two column three yep open there's also some rough edges here so let's add a rendered at as a prop so just add rendered at new date rendered at uh our do I do a date now or new date I was just saying new date because that'll default to now cool so now in the component let's console log and do something with it so we can props do rendered at dot let's do something to it though something fun like format it like two local two local perfect yeah local day string and it's a function so call it yeah this looks totally fine and harmless right yeah let's go check the browser quick oh no it doesn't do it doesn't do objects does it because it's not as juston serializable right correct and what it does is even better it auto converts it to a string for you so we get back a string even though the type definition is for a date time because that infer date or that infer type helper isn't smart enough to know that the thing stored on the page in Json is not the same type as the thing that we returned and you can't yeah and you can't really ever do that can you yep so again a great place for rust right and you can put a trade on this thing right you could put something that say you know that I am this certain type of serializable and then you wouldn't actually get this a ever yep there's other Solutions too there's a thing called super Json people are mentioning in chat which is a a super set of Json that you can have hijack your build and whenever it sees Json for page props it will hijack that do its own magic thing and then you get better stuff from it but you are you are throwing away Json in the process so I know and I can't imagine it's probably Json is fast or it's become fast because of super sweet processing techniques in the C++ land and I assume doing that in the JavaScript land it better be tight you better have a very small amount because that sounds very painful yes it's bad so this is some of the problems another fun one is it looks like right here get serite props gets called and then whatever is there goes straight into Foo right yeah wrong it actually goes to the document. TSX file which we don't have so it provides a default for that then it goes to get server side props once the request has been honored through the document page then it goes to the app. TSX file which conditionally may or may not call your component so there's a lot of ways in which this request might not actually have props that make it to your page component five inod but I I I I think I I think I understand that it's it when it gets you're going to be all rainbows and wtfs for a second just nine cat Across the Universe okay sweet so we have this so what do what do I do with all this now now I got this I I want to build something one more piece of next I want to show you then we're gonna go build things the T3 way so go up to the Pages directory hold what's the better way of doing this if I wanted to send something down because you said this is the bad way and you you avoid this what is the better way to do this the better way is a a system where the types are inferred off of the data you're requesting not off of the name of a function and a bunch of infer helpers we'll show that in a bit trpc is going to be the key here but okay I want to show you the one last piece that is necessary to understand how trpc works and the value of it so go up to the Pages directory I think it made a folder named API for you automatically cool it did yeah underscore API y or or API yeah hello. TS this is the last important piece of what makes next uniquely magical you don't just have to return HTML on a next route in the API folder in the Pages directory you can do request processing just like you would in Express so it has a request and a response object that get called with a Handler and you do whatever you would in a traditional Express endpoint I'm pretty sure it's actually using like the express definitions under the hood here so very trivial to drop in stuff I use this for processing like web hooks I use this for forwarding data onto my own servers so like I will request an image from another service return it on my service with better cach headers so it gets cashed in rcdn it's a great way to stub out an endpoint without having to build a back end you make a file do whatever you want to in it and you're good to go okay H so so what is this so API hello how would I hit this thing right I should just be able to hit it from a curl Command right just curl Local Host 3000 or slash API SL hello oh yeah okay okay okay so that's your API route and this is assumed that obviously I get that sweet request response so I get to just do something if I had a database I need to call out I could call out to the database do whatever and then respond everything back okay I I think I understand more of what next is at this point yes most of what next is is what runs on servers so it gives you these two options either you can use a page route that generates HTML and the next JS app that react app that runs on top once it hits the client or you can hop in here return Json return graphql return images whatever else anything that you can process via JavaScript you can usually return in here okay interesting very cool y very I think it it lets me build my application as a bunch of functions rather than a ton of deeply nested objects that have weird behaviors that are existing in 500 different files here I have a URL I go to and I can find that file really quick and that's my end point I I I've always I always appreciated that about PHP I know everyone I'm going to get okay I programmed during ie7 days okay uh I didn't I never got ie6 but still like that's one thing I really liked about PHP is that you could almost guess where everything was at right you'd open it up and be like I have a general idea of where to go in new code bases I always kind of appreciated that I like I mean in some sense I like this but I know that if I was developing any big app page based routing would be kind of a pain in the ass but at the same time it's really nice if I'm just building something small yep I find that it's we're having a massive swing back towards the PHP patterns right now yeah and honestly it's I think for the better there's a lot of Elegance that PHP enabled for us to like write some code write some HTML now the user sees what they need to that has been lost as we've developed all of these super complex tools and you'll even see with like the get server side props example earlier they're kind of trying to channel that but the relationship between the function you wrote and the component you wrote isn't quite tight enough for my liking and generally I am very much looking to move more in the direction of the what what PHP enabled for us productivity wise I think this is the perfect place for us to transition into how I recommend doing things so let's hop out of this I have a general idea of how things should effectively run at this point perfect so yeah let jump out yeah yeah yeah yeah yeah yeah yeah yeah all right right so what cool uh I'm already there yep cool so npx create and we want to create T3 app you can remove the D DTS because it's assumed at this point am I right I we we do ask actually select JavaScript when we ask so just press enter you're good to go now please tell me you just say no we'll have to see if you don't say no I'm I'm unfollowing you on Twitter I want you to know that now what were your project be called Theo JavaScript wrong nice okay good yes this is beautiful that's perfect okay I assume trpc yeah definitely trpc I think Prisma would be worth playing with too but it's going to make setup a little more we'll just do trpc for now okay so quick question I assume this is like a check mark list right I just selected why didn't I get to select oh I think you have to press space and then enter when you're done bad UI I'm sure that plenty of the maintainers are looking and will catch that I would have never I would have literally never press space that is just like not that's fair it does say how would you go how would you go forward I wouldn't even know how to do that okay let's do it again Theo uh typescript this time uh space I assume everyone loves Tailwind right yep Tailwind great okay there we go I have those two in there not that we're actually going to do any Tailwind I'm just gonna show that I'm cool with the kids still damn all right got to appeal okay good thank you for do doing that let's see would you like to run npm install yeah why not nice has anyone here in chat have you guys used T3 app tell me about it what's T3 app like come on let me be cool with the cool kids it looks like it crashed but I just assume it's doing a lot of Stu there we go all right n doing this thing all right there we go let me go back here I'm going to close down this one CD into Theo and npm run Dev there we go awesome let's close down that thing uh and there we go we're back okay we're here let's hop into so we we do source as our base instead of uh like just dumping everything in the main because it makes it much Clear where your code is everything should start there cool we still have Pages if we go into Pages we'll still have an index file but we have a few different things too so we'll just start with index. TSX okay this looks fairly similar okay so this would actually be like the full thing here okay yep so oh cool this is using V10 now I didn't know we were using V10 in main I am very cool with that so here we have data that's coming from the server above trpc EX le. hello. usequery that's actually calling backend code so if we go to definition on hello all right here is the backend code that processes that request all right I don't know what is Zod must be something amazing yep Zod is an input validator it's a way to validate an input so if we wanted to make sure the string that we're inputting here is longer than four characters you could do at the end of after the n you could do Min length I think it will auto complete I'm sure uh no probably I assume it's this one yeah maybe I be earlier Ling so I can do something like that right and now it will error if the length isn't long enough before it even runs our query so we're able to validate all right there through a definition that it can infer a type from and also prevent our code from running unless the validation or uh criteria has been met and interesting here hold on one second uh yes beautiful wife uh JC said he's going to be here in in a while I I might done this he hasn't respond I sent him like several mes how you guys feeling so far about this this is quite the collab he's pulling like 1100 viewers right now that's nuts I also can't help but notice on YouTube I have an insane number of viewers and a disappointingly low number of likes so YouTube Friends make sure you hit that like button it's free there we go I retext I'll let you know I'll text you in five minutes he has I called him and text him I haven't had any I just have no idea all I know is he's picking me up bye sorry my wife I'm gonna go shoot some pheasants I'm gonna actually probably go Miss some feasant the rest of my family is going to actually hit the pheasants relatable I haven't went shooting in while yeah I do enjoy it but let's see all right perfect hold on now I got to tell my wife I told her I'd let her know the moment I knew ready for some hilarious mbers right now I'm hitting 400 viewers on Twitch and 650 on YouTube nice you're winning the YouTube all the YouTube guys you hey uh 3:45 3:45 guys I come from a farm town how are you losing your mind to that like I grew up where there was more cows than people oh he my bad I didn't realize he could hear me still oops you joined because of the twitch notification but you came here that's a first Aaron uh good to know yeah YouTube gang rise up if you really want me to move over to YouTube guys all you have to do is start subscribing on YouTube cuz all my subscribers are still on Twitch it's actually a much smaller number Cooper with the constant gifts God damn it man I owe all of you guys shout outs in a bit thank you all so much I will I promised I'll thank all of you after this I don't my none oh none of my events are going off which is so strange I don't have a single event that it's been going off something must be wrong hey yep I also have been getting a bunch of stuff I'm sorry for everybody that I haven't responded to I will write you personal messages including TJ I'll write personal messages too personal by the way yeah I'm I'm actually having the craziest time ever too I have almost 1,200 on on Twitch yeah this is nuts turns out people like when we talk to each other weird I know we should just upload more bathroom photos I think that's really the win here that is the key good thing we have plans for next comp all right have have you ever have you ever written any rust uh very very little I tried doing one of the Advent of code problems in it and wanted to die all right how about this one when Advent of code comes out we'll do Prime teachers Theo rust I am very down you can send me Fleet picks I'll send you rust knowledge can can we find some way to do community versus Community for mine versus yours rust versus it doesn't have to be rust versus types script but like primagen Deens versus theod Deens for Advent of code I want to see whose Community gets a higher score on average deal uh okay okay so okay so I like this I like this idea um how do we contain how do we have like cuz there's you can do your own custom uh leader boards how do we put them together so that we know who's in who's I guess I think we'll have to have three leader boards one that like everybody chooses to be part of that's like the intersection one and then we have two where you strictly you pick which one you want to be on for which team and then at the end we sum up those two boards and then compare against the main okay yeah okay I like it well how about this one we'll take your top five plus my top five Whoever has the highest score wins let's do it okay and then follow-up question followup what's the bet ah [ __ ] you got to have a bet I'm willing to I how about this one I'll put one week of vs code on the line now the here's the problem you got to put something that's going to hurt you because we want our viewers not to just troll us right they want it so that they do want you to lose because right now one week of vs code my whole chat just said I'm throwing it look at them they're I'll wear a T-shirt and a hoodie for two streams that's a high offer a t-shirt in a hoodie for two streams yeah but that means I'd do vs code for two streams two streams for me is two stream is two weeks you said one week it's still like what how many hours how many hours we really talking here fine not even close guys do you know how how insecure I am when I'm not wearing a nice shirt Theo grow a must guys member's already happening he's actually you don't notice that he's growing a mustache right now yeah clearly I haven't shaved in like two months all right all right I will use vs code for two streams if you use hoodie and and headphones over the hoodie works for me but you don't like that right that that bothers your ears doesn't it it it it I'll just take up my earrings I can survive okay okay cuz I don't I don't want to cause like I mean causes discomfort that is emotionally discomforting but physically fine okay okay yes because same here vs code is emotionally discomforting but it's not like I'm Gonna Leave it actually I might leave it I might have to go on do I might have to go on healthy gamer afterwards and talk about my emotional damage just go on healthy gamer to talk about vs code I gotta get coached out of that hole okay all right let's do this okay so now we have this vs code I don't like the input lag I can feel every keystroke in it just it gets me anyways all right so there we go we have all this stuff and all right so what what am I looking at cuz there's a lot more here than there was on the other one can we start with like a fresh slate or a little bit more of a cleaner slate like we just delete everything between the open pen and the closed peren and the return and everything below export default home is fine too yeah just return a div in the return so it stops complaining all right can I just yeah div that yep all right and what is it div okay good rad awesome nice and simple okay do do you do like something like this how how do you tell it to use hello do I do that just like that so hello is not going to have it's an object so it's going to complain so hello Dot will have things on it it'll be data there's a lot of things on here yep so start typing data Dot and this will autocomplete for the other things it has and since might not exist yet because this is fetching on client side initially then it doesn't necessarily know and that's because you put noish right here the input not the output the reason it's knowable is because this isn't running on server it is generating an empty page on server with all the react bindings and then on the client it is fetching the data all right how does it oh and data must be okay okay so that means data this isn't yours this is from some other object so that's not based off the return here that's based on some sort of definition off react query are you familiar with react query no react query but I get the general idea here yeah so react query is magical generally speaking it is two hooks a use Query and a use mutation hook that you pass a promise and it gives you back caching loading State error State and the data if it's like been ran so you can pass it in this case imagine that when we type the trpc example. hello it is generating a hook use Query that has an async promise that fetches SL API trpc example hello with whatever input we put at the end there is so let's see does that mean it's using some sort of proxy or whatever at the bottom because it's doing this generation yes there's a proxy somewhere in all of this that's happening yes there lives in two places on one side it lives in react where when we type out that object that's just typescript strings underneath and those get compiled into the actual string that's called to the right end point and if we go into the pages SL API directory oh Pages API API there's trpc trpc dots this is the end point that actually processes all of the trpc requests we make okay what is these brackets all the brackets are a catchall which means anything that happens in this route will be passed in as the variable named trpc so if we were to do another page like SL user slash and had uh brackets wrapping I d. TSX then on that page when we call get server side props it will know it'll have ID as like a query param okay okay I I'm a little I'm getting a little lost now because I still are are you familiar with route parameters the idea like in a URL you can have like an arbitrary number or string in it so like SL ID slash some nonsense slash profile I know I know how uis work I'm good with those the the brackets are just the syntax in file based routing to define a variable that is accessible as a rep path okay okay interesting okay so that means all right all right all right I think I I let me reset it to you so in API trpc Fu that would Fu would be some something in here is getting past in the the word f is that what you're saying okay okay okay okay okay okay and those inputs are the your or those inputs in the case of trpc are the different functions that you're going to call so in this case it would be example. hello is being called with the input we have here okay it's being called with this thing right here yes so if we go back to the definition of this so go to the example. hello just go to def on hello if we change text to be message on the input line uh this one uh I was going to change it uh in the one here first so that it's a different key and we'll see we have an error there but more importantly go back to the HTML or the client side we have an error here because the input for this thing changed even though this is client side code and the other thing is server side code it handles that correctly I I I really I do I do very much so enjoy good solid type definitions I like that that's very this whole stack at least the T3 side of it is focused 100% on full stack type safety another thing we can do here just as we ran into this problem before uh change message back to text just so that it stops complaining everywhere yep let's add another key to the return uh of fetched at or rendered at something like that oh R oh yes uh rendered at new date this guy and now if we go back to the client side we can console log do something with it and it'll be fine uh oopsies uh that's console log hello do data. render dat right yep and we can do something to it too like do to local date time just something that won't be we last time yep yeah yeah yeah yeah yeah yeah uh all right so we did that we don't have D gen that page doesn't exist just change the url to be the Y that's right yep and now it's able to fetch that and we can see in the console there that it ran so how does that work how does it know to send across a date we wrap the trpc implementation with super Json because we know all of the inputs and outputs of this one piece which is the trpc API and by condensing super Json usage to just this one thing that you can only access through this one client it's much safer it's closer to like how grpc Works funny enough and that the client and the server share this understanding of the world that understanding being both sides use super Json yeah okay okay okay difference being is that grpc uses a proper encoding format yep super Json is a madeup encoding format that happens to be be very useful for these use cases uh did we just get a Dr K raid oh we did think you might well I didn't know that we got that did we sorry I have notifications off so I'm not actually listening oh my goodness you didn't have to do that Dr K you did not have to do that thing oh man I appreciate that for those that don't know definitely check out Dr K yeah there you go thank you whoever did the shout out thank you Dr K is awesome uh shockingly enough I don't know how this has happened I don't know what weird reality we accidentally glitched out but I do feel like whenever I listen to Dr K uh I just feel like a lot of even though we've come from very different worlds very different you know it seems like very different raisings how we formulated our opinions and all that they are fairly close to each other and so it's really cool I really like that I'm very happy I've been listening to his uh show for the last few days I love I like the advice I love the advice on uh it's usually um what's it called comparisons the thief of Joy said something along those lines right uh I I really like that I think it's really really good and I think as especially on Twitch holy cow there's just so much there's so much need I don't even know how anyone who's 18 to 24 year old honestly does it my 18-year-old experience was so much easier it has to be literally a thousand times harder I just don't I just don't understand it so I love it I love what you do so thank you very much I appreciate that obviously all the same goes for me have been a a long time healthy gamer fan especially back when I was working at twitch it was so cool getting seeing twitch take mental health more serious as a result of the work that was being done by healthy gamer and Dr K yeah appreciate yall immensely nice thanks sh yeah shy I I I made a a silly YouTube where I just pulled out something that I think Dr K does really good which is making more room for people to speak I'm very good at speaking a lot and I realized that I should probably just take a step back and just be like hey what do you think what do you what do you think about this because I don't consent for uh descent enough if you know what I mean I feel you mhm thank you though appreciate it hello everybody we're talking about uh programming for those that are all brand new here uh lot a lot we're doing a lot of program we're doing some front end I don't do front end so uh Theo right here is teaching me how to uh do nextjs nextjs very fancy framework uh does back end looks like it's connected to front end and then now he's also showing me the T3 stack which is his own kind of personalized in which the community has taken over and massaged a little bit is that fair to say yes absolutely I said it would be really cool if NEX did these like three or four things differently and the community was like yeah we agree let's go fix that and then they did okay so for those that don't know this is what we're doing we're talking about that Theo anything you want to introduce yourself Theo right here I'm going to give him a shout out used to work at twitch love talking all things software Dev make it easy for creators to do collabs we're using some tech I actually helped build at ping. make it easier to do live collabs just like this why I'm coming in so sharp on a stream yeah this is not uh by the way way we are not currently using guest star this is actually his product right here it's fast and I I'm not going to open up the embed right here because I don't want you to see it but if I were to open up the ined right here and have his video right here they'd actually be talking in unison yeah the sink is nuts I'm really proud of our latency we're doing some fun Edge routing stuff to make all that possible so you're not trying out the New Shout Out command the SL shout out someone someone already did it someone already did this SL shout out by the way you have a question right here what position at twitch did you do I was a software engineer on a bunch of different stuff I write the code for the original Bob Ross marathons I wrote a lot of the code for internal external safety tools Marathon stuff I wrote the Prototype that eventually became uh uh what's the watch parties sorry about that I yeah the worst feature of all time I I didn't know that the hacky Chrome extension I was building was going to become like a 40 person team and yeah then I ended up working on safety built mod view really proud of what we built there and eventually ended up going to hang out on the uh the Creator team building twitch studio and the dashboard it was a a bit of a mess so I eventually gave up and started building tools on my own yeah mod views both nice and terrible all at the exact same time like the best part like we already talked about at twitchcon where's mod view Checkmate twitch where's mod view on my streamer page yeah hey I want to know I need to mod something really quickly too bad I actually put a lot of work into pulling all of the mod view components into the dashboard so you can add them manually but nobody ever does so it's like a lot of work for nothing gosh for those that don't know here we'll go to twitch.tv/ thee healthy gamer or healthy gamer G I'm glad I'm so glad they took off hosting I hate hosting go ahead and watch watch today's or yesterday's uh let's see was this yesterday's or was this more than yesterday's yes okay so this was yesterday I really liked there's a great part about jealousy and uh uh comparison and thief of joy and all that stuff in there I think is super relevant it really addresses impostor syndrome very very good cuz I can tell you that a lot of a lot of devs out there have impostor syndrome and I'm always Blown Away by it because they're talented and I'm like why why do you think this of yourself like what are you doing to cause this to happen also just saw Acorn raided me on my side huge shout out love you Tom thank you for the support as always if you're still here if not I will shut you out on Twitter anyways later youall are the best all right we're gonna do we're going to field one more question then let's jump back in right Prime I got a question we can both answer this one uh how do you find ideas besides work to work on personally I find it quite hard to find a project and stick with it till it's finished uh one I don't finish projects side projects right I don't I don't feel the need that I have to fix it right um I think that that is a it is an unfortunate side effect of our field is that you feel like there's some point that okay I'm finally done uh I really don't actually finish side projects some I actually do finish I know besides for what uh this guy's saying I do side projects because I'm curious I want to learn something I want to have something like kind of gained from it and it's and sometimes it's just removing something that's super annoying in my Dev life and so it's okay I don't go in there thinking I'm going to change the world or try to build the most complex thing try to set the ball bound small build something enjoy it once I stop enjoying it I just move on or else I get burnt out cuz the moment I make it into work then I have work plus more work and I hate what I'm doing then I hate what I'm doing and I just fall apart completely you want to go the not too difficult answer solve problems that you have not problems that you think someone else might have like it's a lot easier to know you have a solution if it's a problem that you have if the solution Works cool you can smile and be done and you don't have like it's a lot easier to know when to be done with something when it's solving a problem you have and if you stop having that problem or the solution works well enough you can stop at that point but if you're just out there like what if Twitter was better that's not going to get you anywhere plus it just starts to suck right once you get to that certain part where you're really making Twitter it's hard it's really hard you you're doing a startup right now it's at there's a point where it's like it's not fun it's now work and if you're not getting paid and it's not making money it's like it's just devastating sometimes I barely get to write code for my job anymore like that's the the thing that they don't tell you is the more successful you are the less you get to work on the so yeah yeah thanks for all the follows by the way really appreciate that all right all right so I know nothing about the front end the to me front end cool I forgot where we are so we just got done printing out this thing you're using that super Json which is somehow hydrating objects I'm very curious how that actually works especially with does it work with custom classes uh I would assume it does for properties but not for functions it's they have a list of the things that it passes on like their repo all right hold on that's Spanish so this would have to be in wherever uh oh yeah you are in the right place cool I'm very curious what this does come on Theo I'm a somewhat of a quick learner Theo I didn't see how fast you changed between files so fast I couldn't tell thank you did I call it yes yes I did uh oh look at that can't do that oh yeah oh [ __ ] 69 oh no it did print 69 hi I didn't see that one coming that was pretty cool okay awesome but that was obviously that was in the Constructor so let me can I do one more test I'm going to turn this into a bangable property here and go set Fu uh num number or uh num there we go and let's go oh wait where oh I don't have a place to actually run call on the client so we pass it well because I want to I want to set some oh I got an idea I got an idea I got an idea uh this is it capital this or is it lowercase this yeah return to this all right there we go and let's go like this uh set Fu 69 okay this is a pretty big test here let's see if this works out all right sorry this bothers me uh let's go back here and that all looks good all right I don't know how that works that's pretty neat I'm a fan I liked it yeah I didn't know it would do this I honestly had no idea good [ __ ] you you haven't tried that yet it just seems so perod I have not written a class in three years I'm clean okay okay okay you're clean you've been clean you've been off the street for three years now classes are for the library maintain write and not tell me about because when they tell me too much about them I stop using their libraries oh my goodness but never mind it's okay uh can you turn on key logger yeah we can turn on key logger uh screen key there you go they want to see the speed but I I'm sitting right here so I'm kind of ruining it you know what I mean I'm sitting in betwix the key logger here hold on one second Vim uh which sceny there we go uh I think that should be good sort of good good enough I guess all right uh looks fine all right so what what are we doing next H teach me something how do I do how do I do props how do you do props uh yeah there's serers side prop business don't I if you want properties to come from the server make an endpoint and call them using trpc if we want them to be there by default we can SSR I think we have SSR off by default but we can turn it on in the app file so Pages slore app oh I don't have anything in my uh Pages slore app yeah in here uh the with trpc I think that takes a second option after so like like my app comma that takes an object config I'm almost positive it looks like it only takes one thing it only takes one thing it takes next component uh maybe let just see maybe there's an overloading that I don't see does not appear there is uh any of the smarter trpc V10 folks oh NEX mentioned that they changed it cool where do we turn on SSR now in V10 somebody want to tell me quick so I don't have to go stumble around Google for it it's oh source utils trpc so if uh yeah if we go to def on tier PC Source utils go to where uh go to definition on tier PC itself cool yeah in here uh nice so SSR is false we can change the SSR false to SSR true oh I didn't even see that okay and then one more quick question well since we're going to do this let teach teach me uh what I'm going to do is I'm actually G to go out here I'm G to Echo uh hello Theo actually I'm going to Echo uh uh hello subscribe to Theo there we go and I got to escape these hold Escape them and I'm going to do I'm going to put that in uh let's see into temp the there we go so I have this nice file cat temp Theo and let's pretend this is like a backend service I want to read this file and pipe that to the client let's do it you want to walk me through that absolutely let's hop back to the page we want it on first so we'll just start on what is that Pages index so we're probably want to do is build a new trpc Endo so we can go to on the example and create a new procedure here so we have example router we can go to that and just add to there for now all right cool so we want to create a new procedure so make a new line we'll name this uh perfect public procedure is a custom definition that we made for a procedure in another file procedures are the base unit in trpc V10 where it's a a thing that has an input and does something so first we have to define the input so actually we don't even have to if it's no input we can I think just type do query okay yeah let's not do any validation or anything perfect uh so query takes in a function right yep and this could this uh we were going to want this to be an async function so just put async in front of the def there cool and then await or I guess we should uh put it somewhere so con contents equals oh8 FS see if it will import properly oh there's there's I have never really got FS to import properly because it always wants to uh there's too much here uh import FS from there's too many things named FS yeah I think there's a separate FS promises too I don't read from file system too often anymore yeah uh there is oopsies oh my goodness uh cons FS oh oh you can actually import it as yeah FS SL promises y I've never had a very good experience doing that anyways let's see read file and then temp Theo right okay good you like that little file autocomplete right there do you like that fancy yep and then do that Checkmate atheist all right what do we do here uh we're gonna want to parse contents so do we need to okay we can uh why not let's parse that cool and we can just return oh yes it doesn't like it because when you do that you have to do two string right I think so yes and to do a two string you have to get those things correctly there we go all right we got them yeah we just return contents just drop it in the object um I just all right hold let's see if I got this oh no do I not oh I don't have it on this computer dang it okay never mind cool there we go perfect works for me cool let's go see if the procedure Works hop back to the client uh the client let's see oh my goodness uh pages I didn't mark it like a n all right there you go cool let's make let's just copy The Fifth Line the one that we're on above make a new version of it change hello Theo change. example. hello to example. Theo you can kill the input there because it's not needed there we go like that let's see hello oh gosh I put a little dollar sign there data and let's go so we don't know what it is yet the Json St find is probably the safest solution there perfect there we go let's see what happens all right well look at that we just did it that was pretty cool that was pretty easy that was actually shockingly easy Yep this is what I love about trpc is it makes it very very cheap to write the right function and have that for your client it's super super cheap to just write another function on your back end it's two lines you call your procedure you give it a query or a mutation and that's an async function and you're done and in the end this is my goal with the systems I build and the like code bases I maintain so I want it to be as easy as possible for a developer to do the right thing for the problem they have yeah that was actually I mean it was it was it was very easy I was I'm a little surprised at how nice that was that was good I like it if I were to be building full stack JavaScript I think i' would probably end up using something along these lines now where are the what is like the major points you disagree with on next year especially as I'm about to go to the conference so I gotta be somewhat intelligible here the big thing that there's there's like three different levels of where do you get your data when you're building modern web applications the first one is Page level so we know this page exists this page theoretically knows all the data everything needs so let at the page level get all the data there is the new remix style which is Route level which is every route so every part of your url so slash user gets data slid gets data SL profile after gets more data and each of those layers can fetch in parallel and then there is what we're doing now with trpc with SSR which is component level where we don't really know what data a component needs until that component has been rendered so if we can do a first pass through your app where we render all your components with no data we figure out what data is needed and then we fetch all of that at once it lets us have a single Fetch batched with all the data you need I is there is there a problem with uh like the N plus1 fetching on that because if your components render components in which need data but your component doesn't know what it needs to render until it gets data wouldn't it get data will still happen on the client for things that are not blocking so if you have like a friend list and you have to fetch your friends like list which is just the IDS for the users you're friends with and then each of those renders a component that fetes its own data yeah that's still going to have to be on a second batch tpc's nextjs implementation is smart enough that it will batch all per render so if we have one render where it fetches my friends list and renders the list with all of my friends in it we would have another render where each of those friend or friend items even if each one has its own hook that it's calling those will be done in one batch generally I would advise getting all the data you need slightly higher up because of the power that gives you and something you asked earlier about like passing props we don't do it the traditional way with tipc and react query because you can fetch data wherever but let's say we had like 15 elements and we wanted a subcomponent to be past those props there are some really cool tricks for doing that so hop back to the code for a sec I want to show you something all right I'm here cool so let's say we wanted to pass uh Theo dat is not going to be a great example CU it's not strongly typed but uh yeah let's uh change it back from example. Theo to example. hello quick just so that we have data that we know the shape of cool let's make a new component just const demo or something and we want this or just go just yeah that's Arrow this what the cool kids do this is what the ks do now but we want the hold on hold on am I cool let's just do a quick manage poll let's do a new poll am I cool yes no I think this is this is this is scientific research here people let's go perfect all right anyways okay we got this what am I doing here we want to pass whatever we got from the thing above here but we don't know what the type is necessarily we want this to be able to change dynamically so let's do props colon we have to give these props a type of some form we have with trp see uh we're not going to use return type we're going to use tpc's infer so if we type lowercase infer I think this will come up automatically it should infer query from Zod no uh infer query we might have named it something else I haven't used the no we have not cool uh go to the go to definition on trpc quick all right so want to see what we have it named right now scroll the bottom of this guy oh we didn't put it here uh y'all create T3 app team where do we put the infer helpers help maybe app router if we go to the app router type above uh app router or what oh is it in here uh it was in the trpc file it was imported so the magic of how the trpc inference works is we're only importing type here which means we can run that code on client because all the types coming from the server die yeah yep uh infer procedure output is what we should be using Okay cool so go back to the client file and just see if that will work just type infer capital P procedure infer like this one infer procedure infer procedure output down one more that's us nice okay what do I put here uh this I believe you can I assume it's a generic right yeah I think we just passed the can't find it hold on here let's see which one is it trp server yeah probably trp server and then this one is what's the yeah there there I assume there's there there is a generic here right I haven't used the 10 version yet so I am just quickly checking the new docs to see what the right way there definely there's definitely an inference here I just don't or a generic here what is oh uh we passed it app router so capital A app router this guy from here all right cool and then that takes a string why is it a lower case ey uh because it's not a type it's uh a helper for a type generally things that are a type already we put a capital letter things that aren't yet but are a helper to help us get to a type type we use a lowercase Okay cool so app router the robber Dao by the way anyways uh brackets after to select things off it because right now we're just selecting the whole app router but we want examples. Hello we want that input so if we do brackets we can put uh uh not Arrow brackets square brackets oh square brackets and here if we do a string it should autocomplete it for us uh example example yep and then we do one more for hello like a comma delimited uh no it's after CU this is we've now selected the example so we have it's an object yes yes yes yes so we can do hello yep okay now that is the type of what that procedure returns okay and so that means props do yes which is a foo rendered at which is a date and how smug are you feeling right now well on a level Z not very smug I'm a little annoyed that this is harder to do than it used to be because it used to be infer uh query output and you just start typing the string and be done there are too many characters involved in this now and I will be talking to the trpc team on how to simplify this in the future actually so I'm not feel exp smug I'm feeling slightly annoyed but this is the bar we have set for ourselves so yeah the problem yeah if you don't if you have no prior knowledge yes it's still so much better than anything before but since the query key system has been kind of destroyed things got a little more complex but it's worth it for the benefits but yeah in here we can do div props do whatever and it'll be fine TR to do that and then I do the old uh props dot let's do yet or what is it greetings yep greetings there we go so we have that and that means we' go hello let's call this thing world can I do that and if you don't pass it it's missing something yep so what I would do here is rather than props equals I would just do the curly brackets and then triple. dump hello. dat I literally I want you to know right now you shouldn't be able to spread something that could be undefined yeah so since it can't be undefined what we want to do above is do a loading condition for if we don't have it or something else so if no hello. dat returns something else ah I see so oh what is going on with my indenting because of this hold on one second that was weird let's just go like that what where's my inting at it's like tree tree [ __ ] just fell apart uh all right so if uh what is it hello. dat dot so just if no hello. data return something else is what I usually do okay this no h data return is I am sad that works too and now we know it exists so we should be able to paste it in here why why Copy Quick question why are you copying why am I what coping once more Co coping copy c o p y what about copy well you're spreading all these goodnesses all over the place yeah I love for these things to be accessible and easy and I do a lot of copying and a lot of pasting oh no but why why why not props equals uh data do or hello. dat because that now you don't you don't you didn't I I didn't copy it or I guess props isn't the right thing I don't know what you pass into this thing the reason cuz it's oh jsx is stupid uh I now see what's happening here this is actually doing uh yes equal I assume this gets transported or translated into something that looks like yes uh yes equals hello exactly I'm hoping that's what actually happens yes that is exactly what happens so the problem is we can't just blind pass a value to props and it knows the right thing there's been multiple proposals in j xp2 which will never ship for lots of reasons so this is what we deal with the other thing you could do is you could wrap the the props colon like infer with an object and have data colon infer procedure output so you have to pass hello. dat to a specific keyed thing but the jsx does not allow us to blindly hand it a thing and then give it the right key the triple do dump is the closest thing we have okay what do I what is there a way I can view what that actually gets transpiled to cuz I am actually very curious uh is there a do I get like a disc folder somewhere we can if we npm run build quick so npm run build I assume I'll still get capital W World somewhere in here yes fail what's this mad about ops Oh unnecessary semicolon o o is that es lint uh router what is that one router example yeah what's it Mt about in here let let me see it's on line 29 oh there is an unnecessary colon I I will accept that that was my fault and then what's the other one uh empty Constructor yep that was my I was just playing around I'm sorry sorry you and your chaos dude just I'm I'm I'm stream braining here okay there's not a lot going on also shout out Le Rob I see you in chat good to have you here man one of like the OG nextjs uh for sell folks is here learning a lot mostly about Vim oh nice I am very fast at Vim uh let's see I am not I am not cool look at that 3% of the time I know I'm actually you know what wait hey people don't kiss my ass that should have been literally 420 not cools and zero yeses right yeah just let it happen you don't you don't you ever treat me well as ridiculous is Theo cooler see that's hard because then Chad has to decide who who do they want to troll more Theo or me yeah we we're we're both easy targets so that's tough and I accept all forms of it just broke 750 concurrent viewers on the YouTube by the way this is nuts on YouTube yeah dang that's huge all right so there we go we have all this stuff it looks like it's in uh I I don't know where it went so can I just RG uh world whoopsie that's W oh is it minified no it is not it is right here that's the server oh I bet you RG here GP are can I do that that is way too much what's something I say in here what's a good one I can do hold on uh how about oh example hello there you go I can just look for I can just look for that because that actually might be harder that all gets that I'm curious how that gets compiled out though I don't know the ma I don't understand the magic behind trpc V10 so I'm curious if we find that does anyone from your chat know how these things work all right let's see I got next next next oh there it is yeah yeah yeah yeah it's right there okay so let's just keep on looking for a second I'm very curious children hello I greetings hold on let's see what what did I am sad so we see that I am sad so Props doc reading right that's what we're looking for so what we're looking for is right above the the I am s and do reading children OC reading uh have children no that's one level too low so it would be the condition after it's this one yes that would be it what is passing I can't see I'm covering myself where oh it's it's shockingly not that crazy sorry I just get really curious about how these things work well I I need to myself let's see so it obviously passes some jsx magicalness right some sort of context then it passes some sort of I don't. data so what it's doing there is calling it is calling the function with n. data because that's where all of the props are in this case what could assum it's merging it into this right here right that's what's actually happening so that'll make it a little easier to see go back to the code quick let's add a we're going to add one more key to world so add one more where it's actually mounted just after the curly bracket closes that's like something equals what yeah Foo equals perfect that's going to be wrapped but uh we can't do that let's go it's going to complain who cares no here we go and uh Fu 69 Perfect Look at that it's so specific it Nails it see I'm not terrible at front end guys the audio is out of sync because I'm getting a return feed with myself on it sorry guys there we go all right solved there it is all right so there is this thing cool T equals God I I do not understand compile jsx output anymore is what I'm realizing from this I think there's a merge so I think what's happening right here is this is being called I think that's literally taking data and spreading it into this object that I think makes sense yeah so it starts with like an empty object item merges our data in it sets uh the key Fu 69 in that as well grabs own properties to know what it's actually working with and then dumps that in after yeah I think that's right that seems corre is in my head interesting crazy they should defin oh man there's so many sweet things you could do I'm finding I'm finding that object pooling is insane and these type of like when libraries control the data flow and they know how long something live like the amount of performance you can gain by object pooling is is nuts anyways very very excited called it merch yeah it's a merch very very interesting I like I like looking at those things I like to take the time to look at them because you just just don't get that I mean you don't know what you don't know until you look at it yep absolutely I am very pumped with this setup overall I since I'm overlaying myself on my end I can't set it up so that you're like on your stream you're green screening over me but on mine I can't yeah I hope my head's just going whoop and just disappearing behind you damn right awesome uh I haven't seen prime before this so what are some things I should know from the Geto I use that's pretty much all there is to know uh I have been called by a very famous internet person uh with whom develops very sweet things a leech um I've never completed a project and I have never contributed back to the broader web community no not fireship fireship is the man fireship just recently he featured me again oh look at that the guy's nicer to me than I am to him uh all right this was awesome Theo this was sweet I assume you're going to keep on on keeping on being awesome right that's the plan yeah I'm down to stay live for a little bit longer I am very behind on the content machine I have like three uploads left before my pipe is empty and daily uploads is a grind so hopefully we can squeeze two or so videos out of this one and I can get some more for the rest next hour or two you know what I have four children so I know all about the pipe being empty damn right got got to make things work for as long as you can 1,367 people guess people were really excited about this one huh I think so got him all right there you go look that I just gave you a short now you got a short look that I did that for you the content machine never ends just never ends all right you dog you're a dog hey but I really do appreciate thanks for taking the time to teach me about nexts for those that haven't followed hey give me a follow for those that haven't followed uh Theo give him a follow if you haven't followed him on YouTube give him a follow on YouTube and if you haven't followed me on YouTube well you know what to do thank you all again so much this is an awesome by the way what well how many likes do you have on your video right now versus viewers uh 617 versus 680 viewers so not too bad but still if you for some reason have not liked this on YouTube please do so the algorithm knows what we're doing we're going to keep talking nextjs so don't leave just yet we got a lot of cool things to talk about yeah you're about to talk are you talking anything about your uh your upcoming talk for next JS I will leak some details we covered a lot of the parts here but I'm very excited to talk more about it I also will probably be ending by in two or so hours so I can go finish my talk that I literally was recording when you dm' me that you thought we were doing this now so I was luckily dressed and set all up all up already because I was two seconds bye twitch peace bye um all right hey there you go thank you I just emptied my pipe on you hu huge raid I I appreciate the pipe emptying sorry know where to go with that one didn't know where to go with that one all right um hey thank you very much I really do appreciate that because honestly I feel like I have a much better idea of the conference I'm going to now and I think there's a lot of cool things about it I do like uh your typing that you put all the way through T3 app I think that if I were to do a full stack Javascript app I would in I would rather have something in which has typing throughout right I appreciate it a ton I do genuinely think the best way to get started with a full stack application right now is create T3 app and I really proud of what the community built there it's awesome finally getting to show it off and I think this is a great way to see specifically cuz it's was like oh here's nextjs here are all the pain points that like made us go build this other thing and then stuff I didn't think we addressed we did so it's always cool to like use something that you love see its like pain points get to vent about them and then show how strong the solutions are yeah no I mean I thought it was good thought I thought you did a great job well thank you very much I appreciate it I'm gonna let you go have fun with the viewers bye peace

Channel: Theo - t3․gg

Views: 212,010

Keywords: javascript, typescript, jack herrington, senior developers, web dev, full stack, trpc, youtube creators, tech youtube, software development, career

Id: CpBXikakzks

Length: 79min 51sec (4791 seconds)

Published: Fri Oct 14 2022