Prime and Theo Talk NextJS Conf

you're [ __ ] I haven't muted there cool my bad thank you for the heads up we're about to get started sorry this total last minute setup a little more Jank than usual but we're good cool P will be here in a second they're getting started with the stream so let's move over to that cool I started building NEX nextjs seven years ago because I wanted to build a blazing fast website but I didn't want to deal with all the frustrating tooling and setup and infrastructure around it and it's been incredible It Grow till today to the tune of 850,000 monthly active developers that's a big number I know that I'm not exactly a professional with numbers but as far as I know it's a big number we're thankful for to you all because this is these are the folks that are building the web and pushing all your incredible deployments not sure how much I can do about that sadly by the way that's the population of the city that we're in right now San Francisco or 24 full Miami fum to see the goat oh no did that freeze the capture are you kidding play there we go windows so the community continues to did Warren do this come on I can feel it it's beik okay there we go I think there stream froze actually oh no what you guys are missing is like I mean he's laying down some facts right now it's it's super good I can hear it as like as we speak other stream is dead too okay great um nice wait all yeah no so the ethernet's fine the problem is that their stream went down let's go okay you know this happens you know if you've never streamed live you haven't crashed live that's a fact it's tooy right there how many times has that happened to you I crash once a month once a month once a month that's not bad apparently vsel stream is back may I refesh let's go by the way hello chat are you guys ready o this microphone sounds good I know yeah hi all right you're stop Whispering where's that chest going to be a Clos it's going be a Clos battle between next4 and performance we're good this is fantastic all right let's get some more people in Let's Go performance everybody hit that performance button it's getting really close all right I'll do all of them at once concurrently with sus oh yeah look at that that performance is getting so good in concurrent mode all right let's just go with next S14 it seems like the clear winner so far so the foundation of nexj S14 is of course the app Rider and it has three main pillars number one we built this app router on the basis of flexibility for the developer we wanted to give you all these apis like layouts and going to be metadata API deep of course app Rider had to be powerful the most powerful thing is this data fetching system with caching and invalidation built in that's very nice by the way last but not least we hate those two items specifically course F honestly the cash makes it hard for me to leave next behind for any reason just I it so much when I use anything else FS so most importantly one of the key tenants of the app router volume pleas is that you can adopt it incrementally alongside I can't make it any louder sorry even one page at a time now when we look at the public data how far we've come since that initial data it's been incredible that in the top 1 million websites on the internet we see tremendous growth in app router adoption this is folks using and deploying server components to production how that last than for everybody that's feedback tested it and we lost it in front of amazing experiences Mo to the bottom corner probably a good idea yeah that's usually the least build app router to the maximum level of quality possible so today I'm happy to announce NEX S14 and guess what that is one bigger than 13 see I can math no new apis let's go there we go that's actually huge so why is it a 14 are they not respecting sver not only does it have no apis we have device that will help you forget about some apis that you didn't everone Lear cause of the Tain is 14 the cause of the Tain so over the past year we've completely overhauled our documentation of course a framework wouldn't be great with I just boosted the stream volume manually stocks we updated the design of the next's documentation shout out to our design team and we improved search so of course you want to go to next.org dooc and find things quickly but did they use AI for feedback about education we heard feedback from the community probably the AI package install AI That's their pack more I don't want to know how much they for that to uh to help you learn do they use V Zer for their doite now I'm happy to announce that we've but I'm thatn all the new fundamentals it extends into areas like authentication dates everything you need to ship a production grade full stack nexs application n I'm really excited because ever since we launched the initial next.org learn I know that it's educated millions of developers that have gone on to create amazing things some of the which we highlighted earlier so I'm just really excited to see what you all are going to build after you go through next.org SL learn and in the context of that education the things that I hear about what you love about nexj is that ultimately it's opinionated it gave you this zero configuration Foundation I think I like but next sits on top of react opin that powerful engine behind the scenes and one of my favorite features of react itself is its ability to compose into reusable components whether it's the UI or whether it's the defa in the form of hooks oh my goodness common JS recently they do a lot of in the next model put things into components was limited pain point the Cent it's better than weird named exports you have some random thing named page whatever you exported it does magic stuff had an answer that's what I want I want page as a function or component over the years functions just components that's the confusing part is it a function that produces components or is it a compon side props why not both but we knew thats deserves an award for worst API of all time ofes make everything take 3 seconds longer as a function re Ser components and of course that's why we have something called suspense fror our duty was to expose this API to you and help you explore them and experiment with them so to do so we needed to do three things number one we built a new router that tries to set up itself on top of this react foundations number two we created a new data fetching system that is tightly integrated into that router it handles things like not just data fetching but also caching and invalidation and last but not least an architecture that is built on streaming so that you can fetch data and make it available to users without blocking experiences that Vision materialized into the app router that we have today for example with lar adopted with a new yeah everything we've been building upad en my application the comp is it true that it's very difficult because you hear a lot of people on t trust twit twit just what I don't any data coming from anywhere them for a sec we'll catch up so uh it's very different is the thing so in the old model there was a few parts that did a lot of different things and you'd often run into edge cases where the part you're using doesn't do the thing you need to do very well like if like use effect gets used for a thousand different things most of which suck with the new model there's more parts that you have to deal with but you only pick the ones that you need for the specific problem you're solving and they're all much simpler so it's a set of things but each one's depth is much shorter and my personal favorite thing is that when you use something incorrectly you realize that much quicker you get the feedback almost immediately when something doesn't work versus 6 months down the line users are crashing and memory leaking or you have a use effect firing a million times when it was suppos to fire once those types of problems are very much gone with the new model but there are different things you have to learn to adopt the new model okay I think I understand and this data F to me like sh on npm so uhom JavaScript in a daddy HTML had a baby components and even in validated when it's cached it's as easy as calling that function it's just a JavaScript function in this case called action of course this also works with forms so just like re server components these actions can be shared and exported to the community through npm with nexj S14 server actions are now stable bold scary excited because this was you canet and of can think the camera High to catch something integrated into chos so selfishly the best part is that you just write a lot less code so we have on the right hand side here the biggest thing is that you're not cre really DP if you the comparison here with all this for dat fetching any component has can access through the action Ser code the function server code and the form that end we're seeing incredible results from our community so this luxury brand Jennifer Fisher went from a monolithic e-commerce experience and went headless with app router on for sale and xjs and the results that we've gotten are pretty freaking incredible so not only does it load fast which I love but every measure of the performance profile of their page has improved and this is translated into World results for customers it means that customers are happier and of course Jennifer fer whever Google analytics beautiful earrings so all of this would not have been possible without the amazing individuals in the rect core team that have been incredible Partners to make all of this technology possible and all of this glorious results possible so huge shout out to the react core team that have been working on this foundational technology for so many years that team does sh the companies that basically work with us along the way in in betting on re so many of you are here today I want to give a shout out snubbed hard here Shopify payload sanity so many other companies that are collaborating on bringing their data into react components what they do I hope you're joking this companies they're not just not expl for becoming part of this emergent data ecosystem the SD can now be encapsulated as comparable and they will hide away a lot of that we never want to deal with as developers when inte so I'm really excited of this immersing data ecosystem around Rea components and it'll open up incredible opportunities to many many companies in the ecosystem third the team the Chrome AA team have been crucial Partners to every framework in the ecosystem providing guidance my just a quick WTF for second show CH the words came up and it was here the chome team has aw L I have some from that I'm going to be do for your contribs not just to this release but over the years in the course of next say it with me Madison our individuals in our community I'm incredibly indebted to you all so of course this no near cats in here so many folks but I really want to give all the Educators our community members who answer questions take time out of their day helpful friends who give feed I recognized a delicious beverage let's give it up for our community it's been uh it's been of course my hands are in my pocket it's cold and than some of us don't I want to give a shout out to The Visionaries the Risk Takers the ones who dared to go deeper HDMX let's go oh close I got close very close had it right all along more server simpler programming model the OG serverless you deserve your accolades Lee sent me this early I didn't know what it was for that is hilarious but Jokes Aside ecosystem have also been giving us incredible how to leverage more of the Stag maybe go back to some of the fundamentals of the web I have a video of him asking over and he's in his Lambo revving the engine got to use it I don't know I think they need a PHP rap for said Lambo yeah I got to do something with it now let's talk about performance which was that it was almost beating nextjs for re don't get Lambos we get Yachts so our goal with nextjs as far as performance goes back we always wanted to all of the complexity to get to a great developer experience the core idea of next is that just run one command you don't have to worry about assembling and configuring all of the tools we're talking about Russ this is your time FR and since we last spoke we made incredible strides in improving the compiler infrastructure in a way where you really didn't have to do anything else other than upgrade the framework to the latest version so we shipped a 22% faster initial compile that is putting up the dev server and getting to that first page a 2% faster Cod you guys were wondering what that sound was that was trash awkwardly scooting a stool next to us board pressing save and seeing them on the screen Josh what are you doing and it turns out gent chair we went back to board and we asked high for him if he next do some push-ups later the results will shock you it's performance still per that is a great graph that's my favorite graph right there oh we're super aligned and the key question here was how we know that we you want performance how can we deliver there's actually a very very tin sliver in there for new features where I clicked the wrong button accidentally in the survey and you know that talked about rewriting our entire nexj CLI and bundler technology in Rust we have to be careful of this we don't want this to get the MC R is it's been an awesome stream is not endorsed by the r those performance improvements so my question was should we rewrite language should we re Zig should we what do we do to new programming langu we rewrite in Zig should we what do we do to get you this improvements fast to you and I'm here to announce that we're still betting on Rust and we will deliver incrementally and fast so I'm going to tell you how we're going to do that they are doing okay so we're sticking with trust but we're refocusing our effort primarily in the next comper I can't hear anything want to see compter succeed with this new infrastructure and give you the improvements to Performance as incrementally as possible and we want to see that in small large applications we want to see that in the pages router and we want to see it in the app router wow and the three things that we're going to be monitoring very very closely to decide whether our investments are paying off are number one a fast Dev server number two fast code updates from save to screen and number three fast production builds so this is running next build especially when you that's actually an interesting change I wasn't sure if get next build on top turbo how do we give you all this what's our how do we track our progress how do we measure that we're on track this I regret to announce the bathro is not my GitHub contribution chart oh it's actually suffered quite a bit in the last couple years relatable this is how we're tracking the reliability of our rust based compiler so this represents running the entire test suit turbo we've accumulated over seven years with every bug fix every reproduction every race condition you can keep track of it at R turbo.com and all this beautiful blue square 91.1% of next Dev tests are passing % of tests passing with rust 91 so it's been incredible to make this huge stride and reliability so let's talk about some of the performance improvements that this is going to unlock number one we're seeing 53% faster initial compile with the most recent introduction of Turbo pack and up to 94% faster code updates again these apply to both routers the pages router and the app router to recap we're refocusing a r powered comp builer effort we're delivering to the tune of over 5,000 passing tests already in the most recent release everything is faster all around and the mo the thing I'm most excited about is this is the new Baseline of performance to give you a sense of this when you run next Dev D- turbo we're running everything cold no persistent file system caching yet and it already really really really beats the previous compiler infrastructure it's just way faster so this is the new Bas PR one compas TR of progress on turbo I'm glad somebody said hey you got some JavaScript compile that the moment been waiting for simplifying bootstrap call that Madison all want to deliver compt called Dynamic websites Simplicity typescript to the programming model so before I go into how we can deliver on this Simplicity and as promised with no new apis I'll talk about how I measure a fast website scared what what is what are they making simpler I'm scared they're going to deprecate something I use so this is opening my phone go to a page and I want to see you already know this is pre-wed for you I don't actually know I have been leaked details I was leaked to blog post but I haven't read it yet so I have no idea just for me you know he knows I also care about no I I go and HT this one for example the state of my car I think I know what they're going to do or I know this going to be on any ecommer why I feel so short why I'm like taller than you and most importantly in terms of we actually got your chair a little shorter made it go down a little so through this lens through this our chairs are bloed with now our chairs are bloated with our JavaScript bundles rendering strategies that we shipped it's the firmest direction I've had all started back in the day young r g with traditional server side run you're taller so this is the common SSR that you remember from backend Centric Technologies what happens here is I have a visitor potentially far away from a server that visitor is waiting until that server starts wearing that Mo your closer and what we're seeing is it took a while to get to this forward and the dynamic visual from that point on happened fairly fast diaphrag it squeeze let's see how we would rate diaphrag fast initial visual I would rate it sadness better why because well we saw those four white screens I know what this is going to be the white they're talking about the white screens yes finally Dynamic visual I went to our design team we settled on slightly smiling em face and the DX was actually great I hear a lot of your feedback that the beginning of next sh was really simple it was just get server side props throw throw some node.js code in there you're done the X was the inspo for what we're going to see today oh yeah The Next Step step is the community gave us feedback that some of their Pages some of their workloads were fully static so we added static side generation capabilities and nextjs became a hybrid framework it could do both on an entry point basis so let's look at a static page here that'd be pretty complicated that actually turns out later on I have to personalize so what Happ IED I give you the initial visual nearly immediately I'll let him talk then I'll interrupt and then to actually get to the final stage of personalized data that's where it gets tricky right I have to download lots of JS I have to fetch the data I have to render there could be waterfalls so as you could imagine FAL visual is lovely we rated fast Dynamic visual deadly and the DX was okay but keep in mind that in this model you were juggling two ways of fetching data for example get static props and all the hooks on the react side to fetch data on the client that's painful so not fully satisfying let's now look at the bleeding edge what do we have today we have streaming absolutely incredible technology we have things like the edge runtime we have the ability to put the compute right next to the visitor so the initial visual gets better Dynamic also gets better but it really depends on how you configure it all it really depends on whether the data is close to the compute or not um it depends a lot on what ecosystem packages you're using it's kind of likees there fully satisfying on everything this is what I do right now initial Vis could have been as fast as a stat this is the point where I interrupt so there's two methods right now if you're using next to do server side stuff with the new model model one is you use Lambda you block first bite on when the Lambda starts to respond you send a response whenever the Lambda comes up and knows what to send for the first response and then it can stream in additional stuff the other option is you can use Edge instead so it gets that first response a little bit faster but that edge compute might be farther away from your database so it actually takes longer to generate the rest or you're running apis and things like Prisma that don't work on edge so neither of those are ideal and what a lot of people do is they statically generate the core like pages so they can throw them in the CDN and then they run the JavaScript to fetch the additional data to then fill the rest of the page with a ton of water falling so your options are kind of faster first load or like slower first load much better devx and better user experience overall but I hate I have to eat a lamb to cold start for every page load that's just awful and I think they're going to fix that for example okay the dynamic visual could therefore have happened faster especially when you're juggling your computer being far away from your data in waterfalls in the DX well don't get me started on the DX because now I have to figure out run times figure out regions figure out what packages work what packages don't work so if I do all of this the situation was good but again we're in the quest to simplify my life dealing with edx cannot end up in a fast initial visual fast Dynamic Visual and RX and I'm happy to announce today that we're introducing a technology I've been asking for this for two years I have so much documentation of me explaining to like technology get activated at build time and it works into the nextjs compiler nice so what happens is this when you build your nextjs project we will extract a static shell for each entry point of your application including all of your Dynamic pages in this phase nextjs conract all the static parts and pre-render them so for example here I'm pre-rendering the logo of of the page the navig and very interestingly I'm also able to prender the fallbacks of the dynamic Slots of the page so notice here I have this Banner that I'm reserving for a promotion that is tailored to each visitor and of course I have my card and my profile picture so those are the personalized Parts what next can do is it can give you this shell immediately and then stream in the dynamic Parts if we look at it from the lens of the experiment that we earlier we can see now I can get my initial visual as fast as static and then the server starts streaming and there are no waterfalls most importantly this is it's really easy and I didn't have to learn or adopt any new apis it's a win win win we all win I love winning so having accomplish this again this technology is in preview you're going to be to really ship what we call speed of static not having to wor so let's recap what we War he's taking a shot every time H comper amazing new Baseline of performance also doubling down on and reliability with over 5000 test which amount to over 90% of our test Suite call Mrs buffering number two we have this incredible new nextjs learn force that not only teaches the fundamentals of nextjs and the app router but it extends into databases and O and everything you need to build a production ready app server actions are now stable which means that you can mutate data with a native react data model so this was the the missing piece of the entire architecture so we're really happy to make can you still accidentally leak stuff by actions uh they when things the form they're encrypted by defa without assum like is like a m like how's the encryption I we can we can go that ljs also T helps a lot with those or head to nextjs T helping withp that's everything I've ever wanted to say one improvements I am really hyped I pre-rendering is a bit Niche but it's specifically my Niche yeah and people I just saw the question in chat what is the use of the CDN if the pre-rendering takes place the pre-rendered asset gets put in the CDN so previously I'd make a request to the server if it's a Lambda has to spin up it has to generate the First Response send that to me and then stream in the rest effectively what this is doing is it's taking that first response the server sends and throwing that on the CDN so the CDN gives you the first bites immediately then things kick up in the background then it streams in the rest because they're doing that themselves on their own Edge and then every time you make a change it just Auto invalidates the cash of the CDN and long as you don't be stupid and sneaking user data you got yourself a really nice little I like that that's that's a great idea and the way it works is from any suspense down that will now be streamed and dynamic anything above the suspense is by default now static which is huge that's a W Madison there's more from next just like h your feedback about how caching has gotten really powerful and really flexible but you want to and we hear you the power of Turbo pack in a rust based compiler will not just be for development mode and it's also coming to production builds I'm really excited about how much faster production builds we get how much we can reuse that has gone into the efforts in the compiler so far and most importantly production B big part doesn't do still roll up for its production builds is reting roll I saw that roll down yep let's get into the rest from from techology Partners visit their boots here in you're going to hear all the sucess customers so thank you so much and enjoy the conference let's go that's actually some pretty good stuff I really like that partial pre-render stuff yeah it's very exciting I I have literally been asking for two years for that specifically to happen and we got it woo when's the next thing that was a ringing endorsement Theo yes woo oo I I yeah that was so much en I may have been I may have been reading the GitHub commits to next lately to see when that was going to happen and uh yeah I have been very excited to see they finally did that you want to come in are we letting trash in I'm just ch trash come one's for trash to join us oh my gosh he's actually nope no no I saw his hand you get that hand out of here we're not ready yet there's a couple ones we got a zero from bu fine seeing enough ones I guess that we'll let trash in for a bit go oh you're drink you're drink God damn it nice catch turtleneck Mark you're lucky I didn't finish off your normal name with that one okay it would rolled right out is my mic on yeah it is hey baby hello I don't I don't know how to use technology hello microphone we're like a cell service here we're a little thick in the middle I'd say I can't even read the chat it's so tiny I did my best you can't read that sorry I didn't see you there too small I'm sorry well yeah how are we feeling about the announcements y'all uh I couldn't hear it oh sorry I heard p no I'm just kidding I saw it it was good it was good I so I missed it so there's next 14 MH with no new apis is it just what are they focusing on just more stability turbo pack and the pre-render stuff okay okay yeah the pre-render stuff is huge do you know anything paral PR rendering stuff is going to be sick I I've I think you were in one of the Twitter spaces where I was trying to explain to Dan abramof why this was important hey that was like over a year ago oh yeah that wasn't that was a long time ago it's like like trying to like I explained cold starts and lamb to poor Dan because he just doesn't know enough about the infra side and I try to explain him like the new bottle's great except my page feels slower because you're stuck on that white loading page for longer even if everything else is measurably faster that felt bad enough that it wasn't always worth it and with the new model I don't worry about that at all like I'm actually going to stop shipping on edge now because I don't need to CU I still get the main benefit of a fast time to first load that I was missing wait are you all Edge on upload thing yep except for the things that hit S3 because getting the aw ssdk to work outside of node is impossible Goa Ed by the way Edge Master Edge by the way public edging really yes we're doing our best public and private edging does this have sound yeah that has sound that way you can monitor your voice I mean yeah it doesn't sound so cool is what it's like to be a content creator yeah you wouldn't know have I know I definitely don't know wait you don't monitor yourself oh what a like chat can you hear me self monitoring was like the best thing I ever did for my content it's how I learned how to talk like I was so bad at public speaking and recording and stuff until I started listening to myself and I only did that cuz I was editing myself and I sucked when I was editing I was like I can't chop this into a usable video I sounded like [ __ ] this whole time I was way too far away from the mic so I started self monitoring until I got good enough and now I don't sounds like me about every time yeah I was about to say that's this is a trash experience here guys we're in perfect order from tallest to shortest can believe you miss that entire conversation about I made the joke that we're like stand Okay Madison you do have giant heels on so you might be taller than me when we he I look extremely on the top side okay I'm tall on the bottom side okay it's okay it's okay to be short you guys how does the start to feel about it CEO not being within the like 6'1 plus of CEOs here's the deal okay you know i' I've told this to a lot of people when I was a young kid and all my family is like 64 and tall I felt in my body a 6'5 Spirit okay you identify a 6'5 I identify a 6'5 but unfortunately I didn't make it there but I still feel it deep down you know I'm 63 so I'm taller than you really yeah yeah trash you're 63 gosh I'm Goliath then yeah trash in a really short chair trash is in the tiniest of chair you heard him I'm actually standing on a stool right now I love how much people actually really want to know how tall Theo is compared to Prime like I see this all the time on Twitter he's like a good in taller than me right I know you guys but on never how tall are you I we don't share this info publicly do talking about this okay fair I'm 6'4 damn 6'4 yes I am actually tall it's a good height I know imagine if he was actually good at basketball you're pretty tall too though I'm like six foot in some change are you I think you're 6'1 okay now you're just complimenting me I appreciate that Madison making me feel good about myself bash is taller than me I can confirm bash is like 612 yeah it's insane 6 yeah you met you did me bash I met you too wait is she as tall as me cuz I'm super tall no she's not actually as as you you're beautiful man you're the tall don't worry you've eared your credit yeah it feels weird doing this experience that we're doing right here and then looking up and there's like aund people just an actual conference going on around us as we do this a literal conf not talking to anyone I I'd say it's it's having the Velvet Rope in front of us that makes it even better please don't come near this experi they swapped it from the red to the black momentarily or like a few moments ago and I was like oh I felt like the red made us Cooler why would they take away the red I don't know I oh actually I know why cuz it's versel everything's black and white I was so surprised with the blue banner up there I was like why are they doing that that's like a huge brand shift for them why are they doing a blue banner I don't know something's changing I'm scared because everything else is black Lambo is blue too did you notice that yeah but but that's PHP oh oh but are theying PHP is that how they announced PHP on versel the blue means something I don't know the blue means something we got ourselves a theory I like this dhh has been personally working with them yes that's what I heard he drove up in the lambo yeah it says Lambo yeah D and B they're about two letters apart in the alphabet that's pretty close that's close we're pretty much there yeah if you take a b and you remove the bottom part of it you get a p which stands for PHP like that's pretty much capital b capital B just like PHP it's capital P it's a lowercase p i mean really where you draw the baselines whether it's capital or lowercase b if you think about it I was picturing a lowercase b and I was like that doesn't work crime at all godamn going upside down let me quickly check oh wow we're doing great on viewers I'm not look atting like prime numbers right now damn 1.2k oh nice I announced in the Discord I got the D gen Legion in here yeah D gen Legion one's for the D gen Legion let's see you in chat yeah do you all even know what forell is if you are a part of the djen Legion press one that's a lot of ones let's go let's I see the T Jen here too the t t is not a is he going to react to us reacting to this for the channel sorry I didn't get back to you you should yeah we should probably talk about next at least once yeah what's next next is pretty cool yeah decent trash I know you're actually using App router for is a shilling nextjs so hard good stuff 1127 PT by the way want to give us a spoiler for that yeah tell us more well I just say what I like about it and I'm not going to spoil it did you say what you don't like about it there wasn't enough time we only got 10 minutes yeah trash give us a teaser us a teaser I had like sketched out like a 15 20 minute talk and then learned it was 10 minutes and like had to chop a bunch of stuff but the result more concise thing yeah I went over and I was like I wanted to say like the bad parts but I was saying so many good things wink wink you know yeah maybe that's actually why they made it so short so there wouldn't be enough room for the negative what was the wink that's that's the real conspiracy wink wink fig out maybe next maybe next year I do my talk on what I didn't like yeah do you know what my talk is I think he just named his talk was it like how do things the wrong way right it's cursed patterns versel won't tell you about there you go I'm pretty sure I'm doing all those yeah I I promise you you're for bad I promise you you're not doing any of these there's some deep cursed [ __ ] that like isn't publicly known that I found for this talk I'm very proud of it there things you should patterns you should avoid doing asbert uh I won't I won't endorse or unor these opportunities I'm not saying you shouldn't use them I'm definitely not saying you should though yeah and and they cursed yeah they're incredibly cursed did you know you can use a function generator as a server component and yield results down the stream that's interesting it's really bad it is really fun is that bad how did you find this out uh isn't that somebody who works on XJ has told me about it is that just like a 48 don't they just 48 the function it it's so you're awaiting in the body of the like component when you render it but you're yielding up different results over time yeah yeah on the just assuming it's an async iterator right yeah but I don't want to know how it works under the hood in terms of the actual that the ASN iterator that part makes sense on the server but now we're streaming the results to the client and the client is dynamically updating the HTML on a given component sounds complicated one example would be like you have a sign up component and it renders once you hit sign up it says okay we're authenticating with the server we're creating your account where you're linking and you could send the server up the server could send updates to the component as it does each step very cursed you shouldn't use it but it's cool that it works I like it you know generator like the thing that powers your house when uh your power goes out I actually have a generator that's why that's why I'm looking at you I know you have a generator cuz I don't live in the city I live on a ran it's true how's the well by the way the well is fixed they had the drill 700 ft to achieve water but I'm not going to lie to you guys I have a strong flow 100 100 gallons a minute okay I don't know if you've experienced such flows in your life measure that that be find out M the world's shittiest well ever would be like we dug a well there's water I don't know it could be fast slow I don't know we didn't we didn't even check my childhood well was like 12T down yeah that's because you live in a normal I live on like on a hill Wells are a little bit scary when you're a kid right yeah they're very scary they're very and they're very expensive when you're prime your kids might be kind of scary what the hell are you talking when you were a little kid Wells were very creepy you could follow she talking like an actual well old that's exactly what she thinks no this is like a tube in the ground that go 7 if there was a hole in the ground that went 700t down I would F that time your kids are going to fall in your kids fall they're going to fall for like 15 minutes before they hit the ground I saw your post yeah yeah yeah it's just it's it's literally just a metal rod but actual well is really creepy I feel like if I saw a well there'd be part of me that want to go into the well got to see if there is a little I live on a ranch away from the city I could see you having one of the old weird Wells yeah it's it's not it's it's a we it's it's a good time it's a weird Flex to say I have my own well but I do okay I'm not crazy that timer is moving way too fast right you're on 2x I'm not on 2x I am on live right now life is on 2x what's next it does look like it's moving alarmingly fast yeah I think we're just getting old and time's now moving faster that's not how it works when you get older the days are long but the years are short well are short the days are short or the days are long and the years are long thank youe Prime for this philosophy moment I am old so we know we should talk about the philosophy history stuff we were talking about no no Noe we're not talking about nothing something Prime doesn't want to talk about no it's what is it's just that I was giving people little history lessons over uh twitch it's not a big deal okay as you get older you find yourself reading history and then explain okay we're not talking about the Roman Empire all right that's just what's happening have you ever got head kicked to the face God damn it have you can you please tell me we need an answer right now head kick to the face I'm too tall tall as the is whose leg could reach that far I could I could kick him in the head I I will let you try no no no because I would hit you in the head I would literally head kick your face and then you'd have to come back on camera you can put your leg that far up well like that's flexibility right there I I willing to take the hit to see him try can you do a kick jump you can do a I realized that head kick implied to jump jump that's backwards I don't know I'm I'm gonna kick jump you in the face that's it I'm honestly okay hear me out I've been watching Prime's stream for so long that I say everything weird I pronounce everything Jon you know how do people at work feel when you say they just look at me like they're proud I assume they're like hell yeah you know what we could talk about is the discourse that's been happening recently but I don't want to say the word oh no which discourse I'm a lady yeah I don't know what it's about I haven't looked into the t word I haven't looked into it yet I can break down the taint experi I saw your video but I've been busy getting ready for this so give it to me in like the space between the server and the client so the the best TD is when server compon the servers have data some of that data is sensitive sometimes you want to fetch that data and not give it to the client you want to be sure like when you fetch user from database that the their off token or their phone number doesn't make it to the client unless you explicitly choose for it to so you can mark that object as tainted so now when you try to send it to the client you'll get an error that prevents it from going there so in order to actually get that data to the client you have to manually unfurl the keys that you want so instead of passing user to a client component and accidentally sending a bunch of data you don't want to you would pass user. username and user. email or whatever but you have to specify what to pass instead of accidentally sending data you don't want to to the client okay but you were like involved with the taint somehow right yes I started the taint discourse were you adjacent I was or were you in the taint I was deep in the taint okay okay I go hard in the [ __ ] taint I get it there's so many jokes I want to make I can't gosh come on you can tan it's trash only you make the most bizarre jokes on your stream and now you're holding back yeah you do this isn't this is a this is a verell stream isn't it yeah Not only was I deep in the taint I was deep in the taint on an airplane I was on the plane getting ready to fly home from Vegas the T and I saw a security and next article came out and I was reading through it and I scroll pretty far and I just see the word experimental taint in the blog post and I realized I have to make a meme before this plane takes off so I go off airplane mode right before we're flying out screenshot post the Tweet airplane mode again have no idea what the response is until two hours later when I land it has blown up that's pretty great it was wonderful that's what happened and then I saw it everywhere yep everyone was tweeting about it I I started the taint discourse was wait hold on hold on are you telling me that your Twitter timeline got tainted yes it did but I didn't want to look into it I just thought you could tell me here you know yeah yeah okay I see so many people I want to pull chat for a bit which means I think we have to say goodbye to trash and replace him with someone else get the hell out about Tanner Tanner Tanner want to come on to chat Tanner no come on do it take a spot he's not real bye everybody we SC a tiny bit bye trash see look at this I'm massively than you until we sit back down now I'm shorter than you oh I'm I'm caught rning so hard to be taller than me what's up hello love that you have a shirt with your name on it part of it I have one of the original tan stack shirts and I feel so bad not wearing it cuz I never wear t-shirts I promise you I wear it around the house all the time though so for those who don't know this is Tanner Lindley creator of tan stack we know him mostly for react query but also for every other helpful library in the react ecosystem react table react location now known as tan stack router and some really cool stuff with forms coming love to heator what you did you watch the kyot what were your thoughts I was there I watched it it's about what I expect Ed improving on performance and improving on existing apis so good stuff uh yeah I think it's great I mean it's always nice to see no like breaking changes yes last year was I was like all the things broke so so as a library author this conference does not scare you more thus far at least yeah I mean like that's exactly what I want to hear it's just like let me keep building cool things on things that will never change awesome how are you feeling about server actions especially over in the form world uh I mean we're excited about it we uh I was just working with Corbin uh last night uh on like this cool little Factory that's going to let you use tan stack form to do all of your client side validation and then with just a few like changes in code you just move all that onto the server with server actions uh and you get validation on the client and on the server uh you can split between the two and like do optimistic stuff on the Ser on on the client and then do like the mission critical stuff on the server uh and it's just really transparent I I like it so that's really cool to hear I feel like a lot of people have tried to solve forums but all of the attempts have focused on a very specific like sliver of the problem and nobody's really cohesively solved it all the parts are starting to really be there now though and what's exciting for me with hand stack form is it feels like the first time where like the considerations of what react needs of the validation layer and that that needs to be on server and client and then the actual method that we post to the server like you're figuring out all three at once which is cool yeah and we're trying to keep it uh like nice and isolated um I use remix I'm trying to make sure that we could do the same thing for them uh and I also have a large application that doesn't use either uh trying to Port that as far back into my server as possible you know the goang guys on my team like you know they're like hey you stop right there yeah so being able to do as much as I can on the client is also a good thing as well so there's so you go yeah yeah that you can't run Zod and goang wouldn't that be great wouldn't it be great you don't do Zod and goang because it already has a typee system yeah for us so we use buff build we grpc Checkmate atheist use a language with the type system no no we're using we're using protocol buffers uh with with buff build um prot it's actually type save across the wire which is great uh but like the validation stuff uh could always be better yeah um and buff build has some really cool things around validation that uh like they could support Zod as an official uh validating schema on their client generation so uh they've already generated clients that use react query so you can actually generate a react query client based on your on your protocol buffers it's pretty sweet we just want are annoying but especially like the Proto spec too where it's like trying to be a only we're back try to help you not break things but I love it yeah yeah you're like one of the only people in the JavaScript world that likes Proto Buffs don't say are we back on YouTube as well he gets like hot and bothered are we also back on YouTube guys yeah camera isn't quite right let me you're using OBS 29 did you know on OBS 29 you cannot do Stringer Stinger transitions I have to stream with two obs's at this current moment I have an OBS 28 for all my scenes that's streams into OBS 29 and then I used OBS 29 to stream out to two instances of OBS and two different versions yeah two different versions nothing goes out of sync though no internet went down it seems to be back again for the streamer illiterate what is a stinger transition that's where you know like it like imagine if if we would have pre-planned this and there'd be like and there's like a triangle that just jumps onto the screen and then comes off and then we're in a new new thing now what it do is the triangle would come on and it' come off and then it sit there black for like 3 seconds and then it would transition fun OBS 29 all right on the topic of transitions the next talk is starting and I would like to transition to watching that if we're cool with that yep yeah I gave Sam a lot of [ __ ] in my last video so I need to watch this talk and see if we still disagree so I'll knock that playback speed up so we can catch up unmute so we can actually hear it all right uh my name is Sam sakov and I'm excited to be talking to you about well next in react today and um some of the things that gam talked about in the keynot are actually a nice little te up for my talk because what I'm going to be talking about is how a lot of these improvements and Innovations gotten last year are really delivering on react vision for the future oh no I didn't this is uh when I first heard about react server components T I was really excited because I was excited that we were finally getting a first class way to do data fetching in react this is a great video and um Sebastian and Andrew kind of traced the history and the evolution of server components and suspense and how server components are basically data data fetching for suspense and we were all kind of waiting for a first class way to do data fetching in react apps so that we could all stop kind of using our own Solutions we could have things that work together and um server components is basically what we got but uh when I first heard about this I was a little skeptical because uh there's a lot I like about fetching data on the client um my use Sr hook does this mean I can't use this anymore you know when you get an Spa set up with a hook like use Sr or use Query on the client uh there's a lot of really nice things that fall out from this you get to drop this in your component it can render a loading State and fetch data it can revalidate it can populate a client side cash so that subsequent navigations are really fast and um so I was a little bit skeptical but I knew that API come to react with a lot of thought and so I kind of withheld judgment until I saw something that really stuck with me and that was this this is a server component it fetches data it's squeal right inside of the component boundary you're making a meme on your phone it has a direct handle to the database to fetch data but then it renders a component inside of a modal he is and this modal does all sorts of cool stuff in the client uh it comes up from the bottom not making a mem and uh it renders our news story inside of it and it attaches click listeners to uh keyboard events like a skape that we can press to to close it so I didn't know what it was at the time but this somehow struck me as more react than any code I had written before that accomplished everything that this component did ruin and so it's kind of what started getting excited for this new this react I should preface this with the thing that Sam and I disagree on he thinks that the like core value the thing that we should be talking about whenever we talk about server components is the new data fetching patterns that's the the one thing he thinks matters and everything else is implementation details and he's upset that I mentioned the HTML side as much as I do I think the HTML side's a much greater dve it makes me more excited about what's happening why is it a greater drive like what do you mean because that's what I think server should be doing I'm an hmx to work okay yeah it's I'm on team HTML the one of the big problems with the existing serers side rendering models is that you can render the HTML the server like that the client will have on the server but in order for the client to catch up it then has to have all the same JavaScript that has to rerun in order to synchronize the client in the server so if you have a like if you have a component that's a gantic like 10,000 line of code file that component needs to be like that JavaScript needs to be on the client as well with server components you can run that component on the server and then send the result of it to the client rather than having to send the JavaScript as well you also reduce a huge amount of clients like cuz what all traditional server side rendering you have you have your entire application plus special server nodes and then you have to somehow wiggle that into the client version of the same thing and then you have all those two states sitting there and you have to keep everything in sync and so you just come up with just horrendous amounts of code just to keep these two things in sync or that's why I at least like the idea is that it reduces that to like such a smaller points and that's much that makes me much happier in my emotional spots the taint we talked about that so let's hear I knew it would come up again he you know what let's hear why Sam disagrees with us feel more like react than stuff that we've had in the past well let's talk about react what do we like about react well a lot of people say it feels like playing with Legos uh it's fun and it's easy to use and it feels like Legos well let's talk about Legos lot people like Legos Legos let's go Legos come in all different sorts of shapes and sizes and colors but they can all be broken down to a single interface right it's a brick that has tubes and studs and you can snap them into each other they're called studs and that's it that is all you need to know basically anything you want you can start snapping leg Legos together and you can get smaller pieces into bigger pieces you can snap those big pieces into each other and uh you can keep going until you have what you want and I think this story uh is really what people like most about react what we love about building with react because it feels very Sim we can start with a new story and we can decide to put it in a modal that has all sorts of cool Behavior we can add a few more new stories and we can wrap those in a Carousel and so what we're really talking about here is a story of composition composability is really what makes building UI like this so easy and fun but this only applies to kind of the UI side of the app equation right uh these modals and Care cells are really nice and tidy and composable but this news story it needs data right so how do we get data into this news story well gently if I was using Sr I might do something like this drop my USR hook in and hit an end point to fetch some data and if we have uh we're waiting on the query we'll return loing State otherwise no I have a gripe already not that there's anything wrong this pretty cool uh he he's a letter he's not a conster he he's coming from the the Ryan Florence world of everything should just be let oh interesting why is that can can you explain that to me just so I understand that because maybe I want to mutate data that that can't be the only reason that's his only reason that that's the only reason yeah it's because technically con isn't really con cuz you can modify a key on the object so you should just use let everywhere and be honest well no it's a it's a constant reference yes yeah we need cons const so we can have a constant reference to a constant you are correct this is this is a Ryan flor's problem it's so just in case I want to change something when I'm a little further down the file I don't want to go back up change it yeah and it's less characters to typ inste I know there's a better I know there's a better answer is there actually isn't I've tried if you're listening tweet me the he's not listening he could be listening you know what I'll answer for Ryan say I'm typing three characters instead of four deal with it well the fact that you typed four for con makes me a little emotional a little bruised emotionally right now however you figured that out let me know because this sounds exciting drop this into my component render a new story and if we refresh the page here we'll throw the new story in a page refresh the page we see the loading spinner and then we see the data so this is nice but um we want to server render this page and so if we're only fetching on the client we can't do that maybe we want to use some of this data in an OG tag for a server rendered page or maybe we just want to server render for all the benefits that GMA was talking about so if we want to server render this component then we can't use um something like but we're next so we have so let's use get props to build out this and this is going to be our data and return it this is all going to happen before we start rendering the client so that we can get the data to our new story and to do this we only need to make a few changes go page and that in St that new St and now we have a server rendered news story component and if we refresh we're going to see the browser loading spinner and then we're going to see the page render so this is nice we're rendering on the server has all sorts of benefits we see the data right away the first time new story is rendered we it has its data that it needs in order to to show to display the article but we've lost something here right um by making the component accepted data as a prop it's no longer composable because news story now has a dependency on get serde props right because get servide props Returns the data and that is needed for news story to work so if we look back at our earlier example where we had a modal Carousel news story this is not really what we have anymore right we now have a modal Carousel news story and get servide props we broken the composability of this story and uh news story is uh not composable anymore the way the model is if we want to copy a model or a carousel around app all we need to do is copy and paste it but now every time we copy new story we have to remember the copy get serers side props it's something we have to be conscious of so it's kind of broken this react programming model that we all love and uh this is true anytime we add any dependency on a serers side API to our components right and the reality is that all of our apps need to interact with serers side apis and services whether it's our database or services like stripe or AWS uh every time we add that to one of our components then the component is not a Lego block anymore and this is the essential conflict on one hand we want the composability of react because it's what makes it fun and easy to use but on the other we want our apps to talk to external Services they have to like databases and third party services so uh we want to be able to copy around components but we can't as soon as they have a dependency on a serers side API we don't mix Mega Blocks we have a special shelf just for Mega this how we rendered but this was server render new story this is how we could render on the server a new story directly from our database well if that was the case and we wanted to copy news story over to our about page how did we do that we just copy and paste it just like any other component yeah and what if we wanted to put it inside of a modal and add a few more new stories and wrap it in car oh and it's all still happening on the server our new story is still rendering on the server if we could do that new story has become a Lego block again and it has all those benefits that we love about react so uh let's take a look at news story new story is a react server component it's an async function and it has a direct handle to a database within the component boundary everything it needs is contained so it's just like our originalr example because we can just copy and paste it around but it can be rendered on the server and we don't need to copy around get props to different parts that need it so it doesn't need external data passed in it has all the benefits of both previous soltions being leg recommended reads we'll throw this right below our new story and this is pretty cool we now have all these recommended reads and they're all still being rendered on the server so when the page is first ready all the see all the data but we're still playing with Legos we just Dro that into our reactory well post now there's interesting thing about this page if we refresh it it takes a little bit longer to render because both news story and recommended reads are fetching data and rendering um however the article here Travis and Taylor you know he plac my favorite position in the NFL he's got a $50 million contract and uh well now he's dating T with so you know I'm not J uh good for him good for him okay so the interesting thing about this page is that it takes up the whole browser width and only when we scroll do we actually see those recommended reads so wouldn't it be cool if we could defer rendering the recommended reads uh so that the page could have an initial Rend faster well let's add suspense so we'll wrap likeed reads and now if we refresh going to see a faster initial render and then when you that we'll see the suspense fall back and the PO and all of this is still happening on the server which is super cool and it's thanks to next supporting all react serers side streaming apis and suspense uh suspense feels a lot like a Lego brick doesn't it we're still just throwing it into our tree composing it with all of our other react components and uh finally maybe we can make these recommended reads a little bit bigger and throw them in a Carousel and we can add some animation there so uh let's take a look at what we end up this for one quick second yeah it looks like so when when you're talking about uh uh partial pre- renders how does news story work because it's not on a suspense boundary would you kind of f it up a little bit uh that wouldn't be or that would be included in the pre-render so yeah so if you had a URL okay okay so like new story had like user data in it for example then that wouldn't be or then you would want to wrap that in suspense otherwise the cash thing would be like whatever the user state was on the first hit but if you suspend everything that is user unique or dynamic reliably that just it works so to speak okay and my assumption here would be that the news story is like fetching from database and then rendering HTML based on like whatever it got from the database that represents the content of that post this would allow that to be statically cached and then the recommend or recommendations would be streamed in and could be unique to the current reader picked up after the stud yes really cool stuff like a very simple reaction treat but there's a lot happening news story and recommended reads are depending on server side apis within the component they're using server side apis on on the server and the modal and Carousel are using browser AP they're using anim they're getting references to elements they are attaching click handlers listeners listen for um hitting escape to close so is this on only only pieces fast yeah cool so here let's go to two this is the thing that literally nothing could do before the new model people always ask like but I could do everything with server components I could do with other stuff in terms of like the user behaviors and some amount of like the parts of the features yes but this concept of interweaving client code that has JavaScript in it like a modal that necessarily has JavaScript to Define its behaviors and a carousel that necessarily has JavaScript to Define its behaviors but within that mounting a server component that is fetching data on the server side this is the magic you can't do this inside of a client file so if you have a client file it's marked as Ed client you you can't or mount a server component in it but you can wrap a server component in a client component and you can compose in that way so as long as this page component is on the server you're able to mount children and they can have children that are interwoven between server and client components and you can pass a server component as a prop to a client component I honestly am too stupid to understand what you just said uh the basic example I give is imagine a tab component that has like three tabs and the contents of those tabs are rendered on the server because they're like getting stuff from database you have each of those tab components that are fetching that have like await seq calls in them and then pass all of those as props to like the tab container so you could have tab a tab B tab C all of those are server components and then the tab container itself is a client component that is a use state for which tab you're on okay and now the server can send the HTML of all three of those tabs to the client and when you click the button it's not fetching the data it's just swapping the HTML that's being shown classic okay uh by the way someone asked is is this Prime's wife no I think the other thing he's talking about here too is that uh you can put the data inside of the components themselves you could do some of that before but you would have to like split it out into this like get server side props and then you try and compose the components and you're like oh crap they're missing data so you have to like you're split you're splitting your efforts between two paradigms right exactly it's it's very similar I mean it's completely different but it's very similar to like hooks right like you get to put things that move together and change together together right you don't have to about like matching the constraints in some other like disate file or location or like wrapping your component with the right 15 Hawks in the right order in order to make sure that it can f fet your graphql data correctly those days arew please is a hawk the exact opposite of HDMX I don't want to talk about them cuz I'm still bruised okay okay I sorry mies you want to Hawk oh my goodness debugging those things are just just the worst let's let's Sam talk running in two different places they're running in a browser they're running in a server but in our template it feels like a single app the fact that these are running in different worlds hasn't hasn't hurt the composability story of this we're able to write client code right next to server code in a way that still feels like playing with Legos um and this is pretty amazing because usually when we start writing server code to interact with our react app is when it stops feel feeling like playing with Legos and we have to use framework specific apis um to to cross that yeah so uh react has given us the building blocks here to wrap both concerns with in the same interface the react component boundary and uh how the heck does this all work well if you look at this there is a lot happening between these lines in our editor and uh next is taking our server components running them on the server it's also route and code splitting all the client code and the client components and shipping that up to the browser next JS is doing all of that for us um effectively running two different apps but again from our perspective it feels like one so that's pretty cool and um let's talk about one more thing we'll add one more feature to this little demo app that we have and that is a bookmark feature so we have our new story here and we want to add a bookmark so let's make a bookmark component in our new story so the user can save it and let's take a look at bookmark so bookmark renders a button with a little icon and when we click on the button it sends a fetch request to an API endpoint and the API endpoint is in our next app it's just a simple API Handler here that inserts a bookmark using from the request htx now now that our new story has is it still a leg box strategy repl closest div it's kind of like a new story plus an API server running somewhere for it to actually work right so again the serers side concerns the dependency here has leaked outside of the component boundary and um this is where server actions come in so if we come here and look at our bookmark all we need to do is change on click to form action and then right here in the action we can use the server directive which tells this uh tells react and tells next to run this code on the server and that means instead of calling an API endpoint we can replace this with the code that was in our API API endpoint it has again a direct handle to the database and it goes ahead and runs that codee to insert the new bookmark so in other words they just that code us put our API endpoint back into whatever yeah whatever values they're using in the string whatever you know variables are coming from the client there's some function that will now exist there that's literally call form button whatever generated name RPC compilation it's actually it's actually simpler than that so this this will embed if you had like the value slug or something this will get embedded as an inv input the form for this button and this click isting to a specific end well it's the same endpoint CU it's just a default form post which has to be the same URL but it uses these invisible fields to figure out which action it's linked to and what variables are missing from that linking so that that will link in the slug and any other values that you're passing in which lets you with no JavaScript on the client side get this all working as expected that's cool the reason this is valuable is because this is a form action this isn't an onclick this doesn't need to send any JavaScript to the client now correct yes it well it generates JavaScript a touch right because it has to because you can't just submit any form it has to be a specific form with the hidden field being correctly filled in which one generated which action right it generates the HTML form yeah with hidden fields in it that tell the form like that tell the it tells the endpoint the generic endpoint which form is trying to Target oh interesting so there's they even generate a generic end point in which it has they changing the HTML spec I know this this sounds like you're making FAL last all over I don't like it but that's just me is it a post or a get it's a post it's a post okay that's good yes that's definitely like dinking around with like with form action and like like where forms are going scares me it's scary but it's how much you're working on forms right now and now they're going to be like and [ __ ] that they're like oh by the way magic yeah and a bunch of invisible Fields but the way this is working on the server is there's basically a giant switch statement for all the different actions that a given route has and one of those hidden inputs IDE indicates which of those actions should be run for the current post that way you could have 15 forms on a page that all have different actions that they supposed to run without needing JavaScript nice so just RPC I would rather have like a function that that gives me like a URL endpoint that I could just put onto a normal form that that's actually what happens if you import a server action in a client component because you can export a US server action from a file that's tagged us server and then when you import those yeah it is just like bling for those who don't know Tanner was working on a thing called Bling That is a generic RPC layer for server was you're still working on it it's coming back what's so hold on oh no I'm not going to ask you a question now I have plenty of questions I I too wrote a generic RPC layer once oh maybe we should chat I'm excited for this RPC chat in a bit yes but I I want to let datab and run that code to insert the new bookmark and so server actions have let us put our API endpoint back into the component boundary in the same way that server components let us move get serers side props into the component boundary and so now new story in spite of having a server mutation is back to being a Lego block and so now our tree is back to being a simple tree it's all encapsulated and uh we can copy it around without having to be conscious of any other part uh that's needed for it to work so pretty cool um this is basically I think the most compelling part of server actions and server components this new react Paradigm which next has done a really good job packaging up into next 13 in the app router over the last year and letting us all try out this new paradigm and figure out what it means for our apps and um basically we now have the tools to bring any serers side concern inside of the component so that playing with components that have serers side components feels like playing with Legos again and if you think about it really like the first 10 years of react could be thought of as having done this for browser apis right and in the earlier days of react uh there were sometimes where you would have a component like a modal that had to render outside the tree so that it could be rendered on top and not inside the children where the component is rendered and so You' have to maybe have some code that added something to the body or maybe a component would render and you'd want it to subscribe to a websocket service and so you'd have to write that code somewhere it wasn't neatly tied up into the into the component foundary and you know over time we got apis like portals and use effect and now portals let you just render a modal that's going to be appended outside the tree so that it behaves like a well behaved modal and uh you don't have to think about that or you can use effect to subscribe and unsubscribe to websocket channels and so these days we have this Rich ecosystem of react components for all sorts of UI concerns and we can just drop in a modal or a dialogue or a drop down and we don't have to think about it because all the implementation details are encapsulated inside of that modal component uh API that interface and now we're basically seeing this happen for our server side concerns and so what does this mean kind of going forward like where do we go from here now that we can fetch data and write data with server actions inside our component um what's next and so far we've really been talking about you dat we're for oured reads they can't really be reused outside of my app just my react or drop downs those aren't domain specific those I just grab from mpm these days that's the most fun and easy parts of what I do so um can you pause it for five minutes what other parts of our apps well when you add strip to your app usually have to some priv ke also have to have an AP point that respon to web hook events imagine if adding strip to rect was as simple as if you want to not it could be lose what about an S3 upload something inter usually have U something that lets you upload object to S3 but you also have make up to your bucket what if all that was packed inside of component boundary or what if you had an off service and this is how you rendered assignment form and again that was it reference add anything else if you wanted to copy this to another part of your app just copy this reactory you throw it in M that would be awesome talk a lot about actually this idea that was from the ground your your back end now can be well your service like as a software as a service provider like for us with upload thing or for Clerk or Katan or stripe that can be shared out as a component that can be mounted in your app and it handles both the back end and the front end concerns and we've put a lot of thought into this for upload thing and a lot of other devs are working on this too for their own stuff it's the idea that you can npm install someone else's infrastructure and all the backend in front and concerns are handled with like one package and one like component Mount is really cool nice nice future I'm excited about it'll be a lot of work but if we get there it'll be cool I've SE I've seen a lot of people do that uh with with various components where you can just use their entire service and it's just like a singular component that that seems very very nice yeah for Server actions and server components decomposed in the way these headless UI libraries do these days so we still have complete control over the styling but to render data from our CMS you just render it you point to the field and it takes care of pulling it down and then forms that let you update it and have actions bundled inside of that you never even need you just submit the form it hits your CMS you could view draft view you can view draft versions of your CMS content all just by rendering components and changing the props just the way we do with with UI stuff today so um I don't know about you but uh if this is what it's going to look like to add serers side apis to our app to write server code in our react apps and it's going to be this easy and fun just like it is with the UI stuff today then that makes me really excited about future react so thank you good stuff oh the next Talk's already started damn we're very late oh the next talk already started yeah well oh Google person nice why don't you pause it and run your ads I already ran the ads hello everybody my name is Jer and I'm an engineer at Google I just run them whenever okay let's go my talk today will be covering next third parties and the work we've been doing to optimize third party loading in nextjs all right to give you all some context of the work that we do a I work in a team called Chrome Aurora and our mission is to advance the web framework ecosystem by introducing better tooling I'm going to give a bit of context here because there's a talk that was at uh react or reactathon that got nowhere near enough attention where one of the leads from the Chrome like developer experience team spoke and she said like they had done a ton of research internally so cuz they had this core belief that like vanilla J asked was how like the real developers were building stuff and Frameworks were just for hobbyists so they went out and ran the numbers they pulled all of the biggest websites all the developers like who were working on building new applications and they learned that their intuition was exact opposite the vast majority of vanilla things were built by hobbyist students and by one developer most multi-developer projects by companies we're using a framework of some form and since then they've entirely changed the tune internally at Chrome where they're working closely with framework authors because they know how important those Frameworks are for making the web and making Chrome as good as possible but it took them like a while to get there and they only somewhat recently made this transition at Chrome but I've definitely felt the difference and that's why teams like Aurora now exist because they're accepting at Chrome that web components were not the right abstraction maybe we need a real framework I wish they were the right abstraction I I I could speak a lot longer on that but we don't have enough time at next comp for me to complain about web components so they're so close they're not that close Frameworks and libraries they're just like just they're close in the sense that like collaborating theam for years we share many be close but trying to reduce utilities and automatic optimizations to enhance the developer and user experience of nextjs we've helped Shi multiple Utilities in the past number of years including the nextjs image components which is using more than half of all next J sites but if I the next F utility which is using about 15% of all next jet sites next NexTrip components which is used in about 15% of next that's funny those being the same amount is actually very funny to me because next font is really new and solves a problem everybody has next script is really old and solves a problem I hope you don't have so these being equally used is very funny to me next image being used 54% that that makes sense next image it's like in the default template it's really good I love it is that the caching of the images yeah it's the image caching plus like rendering the correct size of image for the thing so like if you have like a 200 megapixel image and you mount that with next image it will on like the versel CDN or with cloud inary or whatever else you use as a plugin it will make that a bunch of different image sizes depending on the different sizes it can render at and then embed that correctly and there's lazy loading too right yeah it's really nice and they even have like a blur hash feature and stuff with it too so you can have like a blurry version embedded in the HTML and then the image lazy loads in after nice does it do that whole like uh jpeg small medium large generation okay cool yep it it it tries to use the best thing for the browser so it uses like webp or whatever the av1 equivalent is for like really like good image compression so you're loading images that are like kilobytes I love that you can't use webp on Google stuff yep context they invented webp just yeah webp always worked better on Apple stuff than Google me but yeah irony of life for today's talk however we'll discuss the script component in particular oh boy and the work I've been doing for the past while to leverage and extend it to make loading third party resources easier and faster I'm scared okay so what's a third party resource the HTTP web Almanac defines a third party as an entity outside the primary site user relationship it involves the aspects of the site not directly within the control of the site owner but with their approval it's good definition and third parties come in all shapes and sizes from ads analytics to content embeds chat widgets marketing and the list goes on and on and on tweet the third part calling it now they're going to mention workers and they're going to probably mention I I'm expecting them to mention Party Town by name yeah worst naming ever yeah don't get rest started on quick cityst is a massive one that makes so many developers lives Easier by not having to reinvent so many common use cases one thing that my team tries to do quite often is get some data on overall Trends and web framework in the web framework ecosystem I recently wanted to find out how many third party resources do nexj sites typically load this data is also from HW archive and we're looking at a sample size of about 160,000 nextjs sites you can see here that over 94% of nextjs sites load at least one third part resource this drops to about 67% that load at least five third part resources which is still quite the majority and the number goes on and on and lower and lower if you look at the end of the chart we see that 2% of next sites load more than 50 third party resources now 2% might seem like a small number this is that seems huge but we have to understand that's actually Google analytics 50 times you think so you think it's actually just Google analytics over and over again no but sadly for one person it is and for that one person very bad typ of sites have this many thir they're likely Master websites with a ton of complex features for many compies there may be marketing or business requirements that may require the inclusion of so many third parties interesting digging a little deeper I want to see if we could correlate the number of third parties that load in nextjs with overall side performance we can start with largest c p which is a useful metric that measures the time it takes to render the largest image or text Block in the viewport after a good deal of research we determined that a good LCP score is 2.5 seconds or less Okay so how does the number of third parties that load in next J sites relate to LCP again we're looking at the same sample size here you can see for sites that load at least a single third party resource a very significant chunk has a good LCP score about 39% but when we filter the subset down to sites that load at least five third party resources the number goes down and then with 10 it goes down and so forth that makes sense during the Keynotes guo shared some amazing work that the xjs team is doing to make LCP scores likeing a good LP what I want to highlight for this talk is the impact third party resources so% would be there's 30es interaction next which measures responsiveness by culating all click tap and keyboard interaction latencies a good inp score is 200 milliseconds or less really 200 we see a very similar looking chart when we try to correlate the number of third parties that load with inp next we have sites that load more third parties have poorer performance when it comes to responsiveness that seems more like correlation than now very important to mention that correlation does not necessarily mean cation we can't just look at the previous for a fact that the decline of performance was due Tod part however when we couple that data with the many studies I've shown in the past that we've done in the past it becomes clear that third party resources have a significant negative impact on user experience look at this from a different perspective we can also is high amount of third party resources a a different type of indication of like how the person is building the product more than it is not even I I would argue It's a combination of that plus the age of the product in the code base like a lot of more things being added in rarely are they being removed like I know we switched analytics providers three times for Ping and we didn't switch we added analytics providers for Ping more being added over time the product is getting older or it could just mean you have a marketing team that's using Google tag manager yep that very real sadly yeah it I would say it says more about the team structure than it does about the like philosophy of building okay okay yeah it's one of those like like I forgot the name of like the rule where like code bases reflect the structure of the teams there's some old like Linux guy who made some term for that but yeah there's some it's called stalman roll yeah stalman roll thank you is it stalman roll no it's not stalman roll you're just saying stman godam local test I did this with Shen's taxonomy website it's actually quick shout outen and some of the incredible work he's been doing in the next J yeah Round of Applause react plus Max right or is that taking to calling it react slash nextjs site was a it's open source and B it was actually a nice representative example of site with many routes and tons of functionality the nice thing too was that I didn't include any third party resources so I wanted to see what would happen if I tried to include some or 10 when I did that I found the total blocking time of the SI to increase 65 times so smart crime now total blocking time measures how long the main thread was blocked between first and when the site becomes interactive it's a really useful proxy to assess how responsive the page is going to be to user interactions and you can see how easy it is to just have your main thread blocked when you include third party Scripts if we take a step back and look at this from a higher level we can sort of see that there's two problems here all the data we' seen so far show that there's a serious user experience problem that developers run into when they load more third parties into application fa but there's also a developer experience problem a lot of developers don't necessarily know how to load popular third party scripts and when they do so they don't know how to handle the performance issues or even add new custom functionality here are some anotal evid actually and these are some things we see pop up all the time on sites like stack Overflow next developers often struggle with the performance impact of third parties here about how they includ gole someone said this guy looks like he's been taking pre-workout before the presentation lowlevel learning uh we're on 1.5 speed yes we're very far behind we're we're playing this fast forwarded to catch up this is he's not just jacked out of his mind right now it's just SP up I I'll speed it up slightly less so people can keep up a little bit better here next site and Lighthouse down slightly and this really is a cry for help here's another very similar example but on GitHub and this person says pretty much the same do Google tag manager is slowing down my lighthouse score and I don't know what else I can do to improve it I I will say I love that there is a Google employee currently on the stage at next comp showing an issue of somebody complaining about Google tag man yeah that's like this is the new Google this is Google like being willing to like same way like forel's letting us sit here and talk [ __ ] when I'm the only next user of the four of us like yeah they're they're understanding they have some work to do Google has become self-aware yes that's a scary thought but it's a good thought not AI yeah okay is this an AI reference no we're going to have the world's shittiest version of Terminator and we also see some very simar things developers I found an article quite recently when I was trying to see what developers do to try Google tag manager next and this person looked at the documentation for GTM completely decided not to follow it because developers try to find an idiomatic approach to including third parties they opted to use an entirely separate open source Library which is or may not be maintained anymore so what's the solution I think a very good question would be instead of trying to introduce framework utilities why can't third parties improve the performance at the source and for some third parties this may be I my own but this can take Years A lot of these third party resour by the vast majority really weird use any incremental improvements take a very Dynamic scrip loading where the scripts themselves have Dynamic cont for angle it's we expect the third party providers to build themselves why can't they build a react utility or an angular utility or an exj utility and so forth although this would be nice it's not also very realistic the framework ecosystem changes so frequently that it's just a lot easier for third party providers to build a one siiz fits-all solution what JavaScript releases Frameworks at a high rate when we built a component years ago we wanted to make it easier to low third part new javascri framework in like days dude I'm still using of the script component in nextjs is to load after some or all of your application hydrates but we also included a strategy property to give developers some fine grein control on when to load a third party resource you can decide to load it before hydration happens after hydration happens or even during browser idle time using the value lazy on load that's cool but it may be easy to use for like a single single script I have done this but let's say we wanted to try to use a script component is great we look at the Google tag manager documentation figure out we need to includ bigline scpt try to how to do with the comp get and then there's more that we also have issues with what's the best loading strategy to use do we just stick with the default approach or do we even decide to switch it up and do something slightly different and there's other questions as well should this be placed in a layout component or page how do you even try to send custom events I'm using Google tag manager an example here but this pattern will apply to any popular third party and for many like Google tag manager the majority of nextjs applications use them so one thing we decided to do is what if we can build on top of the script component to introduce a separate Standalone library that makes this process a lot easier instead of trying to figure out all those details yourself what if you just import a Google tag manage component and automatically know that it's going to load in the most performant manner what's happening behind the scenes is nothing new or magical it's using the script components but we're doing the research to figure out when to load it for you so you don't have to think about that yourself and what if you were like okay I want to try to send an event with Google tag manager we created a little function a little utility for you to send events as well that's nice they have roughly caught up to every other analytics provider here yeah yeah almost they're getting there got them hey we also tried rolling out a YouTube embed this actually if you want to include a YouTube embed and try to do with the script component you might realize the script component is specific for scripts right but we could do this a bit further and think about ways to make even embeds or Style sheet or any other third party resource easier for you I like that and again we can take advantage here of not only making a developer experience easier for you but we can also figure out what's the most optimal way to load it instead of relying on the typical YouTube Ed we decided to use light YouTube Ed to load that much faster and we did the same for Google Maps in bed and you're starting to see a pattern here we're making a developer experience easy for you but we're taking care of the performance concerns for you A lot of the times Google Maps are just loaded automatically when they don't need to be so we're like why don't we just lazy load them the device so it doesn't block any critical resources that page next third party is still under active development but we would love your feedback it's still very early stages we've only launched those three resources but we have a lot more plans to include future third parties in the near future so send us your feedback the more that we hear the more useful it's going to be and here's the link to the documentation of course they take a look feel free to also comment and get feedback there the more people that use this the more we realize the more that we know what to do and what performance issues that we can actually fix and overcome right super cool that he sold me with like the YouTube embeds the YouTube Ed and the map Ed the number of websites I've seen that have the YouTube embed in them but they have every single page loading the YouTube embed script because they just put that in the root and then every page like in almost no Pages have YouTube EDS but you're still loading the JavaScript you're still eating it that being at a component level actually makes a ton of sense and I'm really hyped to see that I'm going to go pee I know we got a talk goings good luck grab me water if you can don't mind my console L the tner as well peace thanks for bye man L sounds good I started learning how to code a little bit later in life around 26 years old but ever since I saw run teaching anyone around me whatever I had already learned so I started volunteering a lot after work for organizations like girls who code Flamingo coders path to college Code art and a ton more organizations the thing is is that I love to get back to my community in South Florida and I want to do I have the opportunities to grow meaningful careers in our region so they don't feel like they have to leave their support systems or the homes that they love in order to find success in life which is something that we see quite a bit in our region and a lot of great people are working on this problem but truthfully speaking we are still growing and there's a lot of work to be done so this is where my Story begins with react Miami and how I used nextjs and vercell to execute on the seemingly impossible vision of bringing a world-class developers conference to my home my name is Michelle B I'm a software developer Community Builder and Conference organizer I work at gtii on creating initiatives to support the health of developers and connecting these developers to Great companies and I am an avid Daydreamer I excel in zoning out and in 2020 I have a lot of time to zone out and I just dreamt about what it would be like together again I looked up all of these web conferences around the world and dreamt about exploring a new city and meeting all of my Twitter friends in real life and shortly after this the Miami Tech seed started to blow blow up and don't worry I'm not going to dig into this this is just for context but it was pretty bizarre like super exciting obviously but a little bit bizarre there had been so many people the whole Miami wave was interesting when it was happening I to visit for like a month I was I did not it was there was a lot of type people there at the time I feel like it was a web three bubble honestly that was my was a lot crypto yeah was a lot of web yeah I I find that when scenes form outside of the bay they tend to be more hype driven than when they're in the bay like there's obviously a lot of hype for like the startup scene out here like the the AI shit's just insane but other places tend to be almost well like the core is hype rather than being value and that's why I've been concerned about like the New York scene the Miami scene somebody it here oh that's me just we're talking about Miami hold onami The Pusher base in Miami a few years ago you're texting what now we're talking about the tech scene in Miami because she runs react Miami on scaffolding a tech industry she re and at it felt like the whole world was looking at is that the one da and everybody went to chaos no Dax lives in Miami but he still goes to that meetups and happy hour they call that place everybody was on Twitter headed to Miami who should I meet it's like okay awesome hotland thing we have all of these amazing Tech events happening now but what are we doing for developers and there were a few initiatives going on but I was like we need a conference we need a conference like the ones that I fly out to with industry leading speakers the Deep learning opportuni I not to Miami and so in the most send moment ever I see this Tweet someone should put on a react conference in Miami and at the time I didn't work for Gabe but now of course um and I was like let's do it let's do this conference but Gabe and I we didn't have any conference organizing experience so this is when g2i partnered officially with Dev world and thus created I haven't been invited to react now react miam Miami have to organize it spor sell some tickets this was the rudest Awakening of I am a great extremely difficult to organize confence there are endless emails and contracts contract Provisions call people wait look at me have you been to more react conferences or non-react conferences I've this is the only time I've ever been to a react conference is nextjs if you can call that a react conference react plus next but I have been to more react conferences than Russ conferences think about that one for a second really don't have to think that hard about that one for real I guess cuz there's very few dmca issues you know yeah yeah I'm just a walking live I'm pretty sure I'm in C conferences crab Ling I'd go I'd go got to wait for it to happen this was supposed to be fun oh Sho we just got a huge all my sorry for all the subs that I'm missing I don't have any access to any of my analytics on this thank you so much for that though we call him Crimson mama when you're organizing a conference you never know how long each contract or agreement or conversation is going to finalized and these are the most important things you have to focus on so whenever you're not working on these things You' be making the best possible decisions with your given time anywhere you can be so that if a potential sponsor reaches out or the venue has to go back on something if anything comes up immediately that you have to address you don't want to be like uh can we talk about this later I've had this cor for like two hours sorry guys so this is why we unquestionably chose to build our site for react Miami with nextjs and Purcell and it has been quite the journey organizing this conference so let's start with year one year one is the hardest year to organize a conference because you have to sell tickets and get sponsorships without any precedence for your event there are no tweets testimonials or videos online and so the only thing anybody knows about your conference is whatever is on your website so we needed to create a website and this is when I realized I had never created a marketing website before okay next thing is that I wanted us to actually build our website we were is still underrated I'll I'll it I would have used it for something like this and I didn't know just I wanted us to build our s my career started on WordPress change our implementation details we weren't locked down it was so easy and we also needed to utilize a CMS as well so again this is another new thing hadn't ever used the CMS before so lots of new things yeah but thankfully I didn't have to start from scratch because there is an entire Suite of free xjs templates online for you to be able to use so I found this one for the virtual event starter kit when you use this kit you get a whole application bill out for you with about a dozen routes set up for events fully responsive page layouts type safety from front to back a project set up in a CMS that's fully templated as well automatic build and deployment set up in and environment when they started competing with3 these things so if I were to do this on my own it would probably have taken me a couple weeks especially all the other obligations that I have but in reality this was a few Mouse clicks and this is exactly the kind of time-saving decisions we had to be making wherever we could so this gave us a great head start with a lot of well-written code and established application patterns that we could just continue following all the way up to conference day so then conference day arrives and we sold out which was wild totally unexpected didn't wheeler go to this there were still a lot of challenges one of the biggest challenges is that I did a terrible job preparing volunteers and delegating work so I created this situation for myself which pulled in a thousand different directions and there were some last minut items that I didn't get to and one of those things was to build a page on our website for the Afterparty where people would RSVP we send the head count to the venue and this was a need to have because the production team already made all the slides with this URL and sent it to the A team and so in the midst of everything I'm like how am I going to build this page right now my co-organizer had an idea he would create everything in an ocean document send me the link and we would just set up a redirect in nextjs genius okay great I actually had never done that before either but it was okay because I happened to be at this react conference with hundreds of react developers around me so I was sitting next to my friend Mark and I was like well Mark I have to do this thing right now and he's like I actually already know how to do this thing and so he's like you just need these five lines of code and then it's blop doopop minute and a half later pages deployed pric is averted party on so after that I knew forell xjs was going to be the stack for react Miami because it didn't matter if I was getting a huge Head Start from zero or if I had to make a code change to our website under a ton of pressure day of the conference there was always going to be an easily accessible fast and reliable solution at my somebody in chat asked wouldn't a rewrite work as well the problem with a rewrite is that if it has any local resources that it's requesting like if it's requesting SL script or slash image and you have that Rewritten it doesn't know the host domain so unless every single Source on the page you're rewriting has its source domain handled correctly that won't work which is why redirecting makes more sense more often than not do you do a 302 or a 303 I do whatever next does by default I'm pretty sure it's 302 you know what the danger of 302 is caching no no when let's say you hit an end point with a delete you get redirected with your verb as well ah 303 redirects with a get interesting good to know actually HDMX by the way it's on their website year two I worked off a refactored version of the literally dead from alol Poison this is a picture of jto a this actually a picture of me at nextjs last year seeing OG images being announced and then immediately using them for react Miami this was amazing for our site because our site links could be shared anywhere and they would be fully customized and based on the rout so this is example of our speaker cards from last year we able to put in this beautiful floral Miami speak information conference information this create Twitter or link posts that would combine like text and Link and image Al together but that messaging would only ever exist altogether in that post with OG images and being able to use this for react Miami we could just share links or other people could share links and that messaging would still all be together with really impactful and C information entirely unable to speak from the alcoh poisonings what does that translate to this another announ from last year drinks in drunk it translat to 13 drinks and I'm here business decision thank you so much for that let me go back to when I said I didn't have any time to do anything analytics was something that didn't get shipped in year one for react Miami and that's so bad but year two we can install analytics in our project in just a couple of minutes and it's like the world blossomed open I could see where our side traffic was coming from where in the world our visitors were which routes they're hitting how often they're hitting these routes and this was really beneficial to us because the last year has been very very hard for events the economy hasn't been good companies weren't sending their developers to conferences as much marketing budgets AKA sponsorship budgets were frozen so we needed a lot of help and analytics was a really great way to see what was important to our site visitors a really pretty analytics page who is that help move to front started as split B and they got acquired by versel so oh yeah that's great that looked it's just as as simple it load goaly we saw how many people were coming to our site and going directly to the speaker page first we decided to put together in November and that's actually the moment that our ticket sales kicked off for the rest of the time leading up to the conference so that is just something that was really really huge for us that we wouldn't have G who beautiful that is not me so now mini crisis again I just finished or CS the P CMS CEO just to up the stairs behind us I'm very familiar with on the beach and I'm literally running queen of CSS herself unic corvet is about to take the stage and I get this text message that our stream is down I still don't know what happened but our streaming platform it just wasn't going to work so I had to replace the stream minutes before this conference day was starting so the MC's are going stage hard we need to replace this stream so actually going to use something else and it failed last second so they had to switch to a YouTube embed minutes before the stream started oh my goodness never use I mean if you're going to not use twitch using just a third party crazy PL that's crazy no you got to use YouTube but like you YouTube is paying the money for this infrastructure and for all this effort to be done just just use them unlist the stream and embed it it's it's fine it will leak but who cares why would can you pause it one more second why does someone care if like I noticed that a versales is unlisted why is that a a deal I don't get it also you're not subscribed to forell I'm not signed in right now I'm not signed in my computer I'm not signing into my Google account on like a random provided by the company hosting the event P Fair yeah even giv them my stream key was scary enough but yeah uh the a lot of companies like they treat the stream itself as like a thing that's like to be part of like a paid ticketing system where they want to track it through their internal anal Linux and stuff and they want you to have to go to the next comp website or to be fair next comp's not bad about these things it's other events that are particularly bad about this yeah they treat it like their own like IP right yes interesting there actually problem I Hadad because I want to co-host and like do this type of thing with a lot of other companies and even getting them to like sign off on it like the execs will agree the people hosting the event will agree but some random like marketing team will be like yeah but but we can't track our UTM tags on that so uh sorry you can't do the event that's happened multiple times now I feel like having a high amount of YouTube views would be significantly better whatever other we're currently getting more concurrence across my twitch and YouTube stream than they were getting on their twt their YouTube stream by quite a bit yeah yeah this is huge for next and like ones in chat if you're watching this and you wouldn't have watched next comp otherwise let's see those ones yep make me my money guys we got one two three four 5 six case in points yeah we we're making vers a lot of money in a what'sapp message and then at 9:01 I commit the code change gets pushed 9:03 it's already deployed and live on our site and at 905 a prescheduled tweet goes out to join the live stream for UNIS talk and it's like nothing happened no one suspected a thing unless you happened to be in the room with me when I was making this code change and you for sure knew something was wrong but aside from those people it was seamless so we had another really great year and really happy with how it ended up in the end uh after the conference I wanted to Fork this other nextjs template for the image gallery starter kit and this is just a beautiful uh gallery that I thought would be great to showcase our images from our photographer Daniel shith and so I start working on this gallery and a week later forcella is like we do databases and blobs now and I was like what sick okay so what if this Gallery was like full stack for sale like what does that even mean so this was the stack I used blog store the images then I took those blob URLs stored them in vercell postc with additional image information like all text a few other things the whole could have used upload thing could used upload thing but uh I I guess blob find oh no she's not even using blob she's storing the image blobs as URLs with image data in versel postgress so she's storing the images as postgress data so don't do that either galleries go with nextjs and it's deployed on for cell really straightforward you grab the data from the database populate the image gallery it's deployed on for sell at that's how web applications work and it worked like a charm so another nextjs template win year three our site for year three was just uh deployed earlier this month and I decided to start it from scratch there were a lot of new things that changed between year one and two that I wanted to take advantage of and the first one was uh custom events from forell analytics so custom events allow you to set up tracking throughout your site uh to see exactly what's being clicked on and this post isn't that it was using set this on every L button in our it still using neon us neon okay did they open it up to other providers or is it still just neon so versell postgress is vel's infrastructure for postgress so it is just them reselling neon same way like Planet scale is kind of just reselling RDS but it's their custom weird way of doing RDS like all these things are just resells of other things but I use turo by the way yeah t great thr turo is great Planet scale slightly better but turo is really good oh I don't know local caching come on yeah local caching is cool but uh vest is very reliable battle tested technology and yeah it is what it is website and I can see how often these things are what areas of our site are getting most traction and just down a little bit deeper into understanding how people are using our site so going back to the speakr page example it's not entirely clear how people are getting to this route right are they going through the navigation bar are they coming from a Twitter post between just understand how people are engaging information our I also used app rouer this year so I personally prefer this directory layout because I like the collocation of functionality and resources to a route folder you can also have things pulled out like into a component folder wherever necessary um overall Everything feels a little bit less reacting obious calm down but you just see a lot less things see a lot props and with dyamic you have have uh flexibility as well so you can generate Dynamic routes on Demand by default or you can generate several Dynamic routes Al together at build time with generate static forams OG images also got an upgrade so there is a route Handler now um with the file convention open graph image where you can store the code for your OG images right into the route of the the route that it belongs to basically page that it belongs to um and so again same thing these are generated On Demand by default for dynamic routes or you can generate several of them all together with generate image metadata at build time I also got to use AI quite a bit for the site this year so number one B zero from ccell this is an AI powered UI generator so you Ty you kind of describe what you want to build on a website uh in a prompt box and it will generate layouts for you that you can edit and then you can copy that code and stick it right into your application so got to ship some of that and then also got to use b cs it uses the verell a SDK under the hood and this will generate your CMS templates and ALT text for your images and a ton more things with AI so very fun these things were very beneficial to me to use which brings me back to my attention from year one I wanted us to actually build our website so that we could stay open to implementation ideas and Integrations two years ago I would have never guessed that I would build a website with an AI powered CMS but by using nextjs our projects stay open to new ideas future Innovations and possibilities Sam from planet scale wanted me to clarify they're not actually on RDS this is really only correct my mistake there they know how to use my SQL well enough to not need that when I started using forel it was a platform for fast and simple deployments and year-over-year they've continued to deliver on their infrastructure and framework capabilities to provide that value of their deployments to more of the developer stack and so when I think back on my intentions for react Miami and why we wanted this conference it's not to build a website or to generate OG images they want to cut us bring the world ofct together in some small big moment coming soon so I'm going to connect ourcal skip through this real quick thank you literally kill your internet in the middle of streaming no promises of anything YouTube am I back we're back cool we're back on YouTube cool we're live again hi I can entertain the stream while you go do something I absolutely miserable because they took my internet out on me for 5 minutes and we lost everything so yeah yeah we're good to go now Zam cool uh what's up you everybody ready to get Muk banged you might uh let me tell somebody who's in YouTube chat say Theo said refresh YouTubers are probably going to have to refresh to fix it who's this new guy yeah good question I have no idea who that is hey hey the the name's Madison cool sorry again guys I did not know my internet would be taking out for five minutes that's always really painful to get a 5 minute internet cool yeah we are now on on the screen in the other room guys I did not know my internet would be taking for minutes that's always really a minut internet can yall not play the audio for the stream in here minutes that's always really there you go me never mind I screwed that up I'm so sorry uh yeah this is hard to do crazy enough streaming is shoot wrong button yeah streaming isn't easy when they yank your internet 5 minutes before you're supposed to be on the TV so shout out to everybody but whoever did that appreciate you a ton thank you nextcom for having us we've been sitting here reacting this whole stream we've had awesome talks we just watched or we just watched a great talk from the hosts of react Miami thank you so much for that one that was great yeah really cool seeing people using nexts to build awesome stuff and host awesome events just like this one the site did look a little similar a little familiar though did you feel that no no it looked completely bespoke and beautiful yeah you don't go to conferences what I'm I'm currently at a conference fair fair you know okay so you know me I love react and I was sitting there watching that uh the Google one M said get over here I'm not going to lie to you I would definitely use react for a YouTube button that's it if I could just be like make a YouTube video and it just worked every time but that's cuz you're a react content creator I am literally I am core value speaking wouldn't it be fair to say you have more React videos than me I have significantly more react vide we talking about how much prime loves react his number one favorite thing to work in passion meaning of life where all this VI come from is reacting got to make eye contact as you take the on stream damn right that was aggressive it was so how are you so cold that you're wearing a a like a little hat at this point beanie dang they believe I took that big of a bite and then you asked me a question okay okay so we're actually talking about the more muscles you have the more you're naturally less cold so I think that's what I'm I'm not cold right now we're talking about this makes sense Prime reaction we got to wait for him to finish his giant bike I'm not reacting that's a that's a scientific fact no how do you feel about this just do you want to feel my no it has nothing to do with that okay no you know what it has to do with I get so hot that my body tries to cool itself down but the warm the the coldest summer I ever spent was or the coldest winter I ever spent was the summer in San Francisco it's freezing out there and so I'm just not used to this kind of weather okay you quote like Mark Twain can a man not quote Mark Twain w I didn't think you were that classy sophisticate okay I use words like prescious all the time what it do picous mean it's me it's it's having really great insight into a topic sure yeah you you might be confusing it with precocious which is showing early adolescence ability in something which P people typically this is like the thing I would be saying if I was trying to troll somebody who has dyslexia like you go ahead look it up hashtag it Google it I I did see a really funny tweet recently that was like sorry not going to read this going to wait till another developer with dxi will read it for [Laughter] me that's a great tweet cuz who who would be reading in front of people with dyslexia that seems like a terrible idea do this hey I I have a terrible fear of public speaking so we all just embrace our problems we do TJ read for me and every single comment was who is this guy and how does he read so well it's fun he trying to read stream may you realize I'm not actually a great reader I thought I was good at it but then I did it on stream and I realized all my patterns and like how I parse things is horrible and really terrible to follow hard and then you you also realize when you read out loud that you fix people's bad grammar and stuff there'll be like an a an uh there when it should be an an and you'll read and you're like oh you are okay hold on wait hold on let's go backwards here and then you're just all screwed up yeah it's shocking I used to copy edit for a lot of people and Dev and open source stuff like I still help Ryan carado and Fred and friends with like blog posts randomly and the way I read when I'm reading something for stream is not dissimilar from how I read when I'm doing something like that and it makes it really hard to because I I'll just stammer over all of the grammar issues as I'm doing read through it's hard for me you know I think there's some pretty good stuff today I think so too okay what what's been your favorite so far my favorite so far besides for performance being almost the most important topic of the group during the the keynote uh I would say that I like what Google's doing I'm glad that they're embracing I'm glad that they're making things that maybe are great for developers cuz typically what Google does is they they they're like uh they're like the main character off of Idiocracy like they're not great they're not horrible they're just like the nipple of every bell curve luk it's just like yeah yeah that's a Luke again sophisticate okay uh like the smartest person in the world of dumb people basically basically if you had all the worst products Google would be not that bad but now there looks like actually going down on the uh they're no longer the nipple they're going all the way down the bell curve and the stuff they provided looked really great like that actually is good stuff yeah it has been really nice seeing Google more like embracing Frameworks in modern webd like it's not just like Google telling us how we should build websites it's now embracing how we're building websites and trying to help us do a better job using the tools that we're already using that feels like a huge like shift in like the entire web industry honestly and I hear they know a lot about the browser right like they're pretty good at it yeah they're they're decent at it check me out that one he what's your favorite browser Madison what's my favorite browser Safari good answer Safari so you're a bun user absolutely my number one I've never used any other browsers just why would you need anything else it has really good battery performance on Max I just use Firefox I'm actually an opera guy myself they thank you bash we need bash immediately bash can you please fly from Canada or whatever any via curl I don't actually want to go on I'm sorry okay so here's the deal is that clearly Brave is a great browser Brave is a browser and no one's mentioning it I haven't I feel like I tried Brave forever ago when there was like all this hype about it but I feel like it's I'm still hyping I'm still hyped up speaking of hype let's talk about how we build our javascripts I think that's one of the interesting pieces we were talking about before with performance I feel like most existing focus on performance for build has been Dev builds so making it so when you save a file you see the response you see the change as quickly as possible seems natural but actual build times for when we're making our production builds has not been a focus even something like vit which is incredible V is a wonderful technology that is a incredible developer experience it still uses roll up in production so our production builds with v still aren't much better than what we would see with something like webpack and one of the cool things about the turbo pack Stu they announced is that they're not just using it in Dev they're also using it to speed up production builds so what I'm saying is we are the first production next we're words nextjs is the first production rust framework because we're using rust in our production builds that doesn't make any sense rust doesn't go in production okay yeah fair you only do command line utilities yeah is CIS in your production though ooh yeah Checkmate atheist you just actually L literally right we don't have our CLI expert bash here today sadly she is in chat and thank you for helping keep chat slightly less chaotic than it normally is we wish he was here yeah thanks bash for leaving me out here yeah got sick at twitchcon apparently somehow we didn't I think she got sick of strong immune system us at twitchcon she's done with you guys she got a little allergic take another day yeah being surrounded by Gamers without being paid for it kind of sucks it does all right so so real talk though okay so I guess the thing I'm confused about a little bit with that previous statement was that rollup allows you to use S swc which uses rust so you can just do all your builds in that so you can get pretty Snappy production builds I've never seen roll up S swc before I've heard a little bit about that but I don't know if anybody using it I've seen it I seen it that's good I've seen an end product using it so you just you think most people just don't use it no I I I every time I spin up a project and I see that there's an S swc option I get confused why people would use it but it makes sense if that's using S swc for the production builds that checks out that makes a little bit more sense that all said like the solution V has chosen is their rewriting roll up in Rust so that's the other side they're doing the rust rewrite or Turbo packs a rust project too it seems like rust is taking over our build pipes yeah that's because the ins and outs are really well understood and so it feels like a natural win there I'm curious though I am curious how I I mean Zig Zig seems very exciting o camel mention o camel anybody in Chad o camel I know there's a lot of great Lang there's a lot of great languages today to do stuff in now I just why haven't we made a build tool in Ruby yet that's a great question um I think one of the problems with making a build tool in Ruby is that first you have to be able to find someone that actually does Ruby and then you have to actually write the Ruby and then you have to hire them from base camp which makes it a little bit difficult and then finally when you do hire them from base camp it just doesn't run fast at all somehow we got we're slower than JavaScript yeah python maybe but I hear Ruby is an incredible language I enjoyed my time with Ruby so much that I went to Elixir and elixir was great how look Theo how have you not mentioned Elixir boom Elixir there you go you got your Elixir mention Jacob I can't help myself uh we I do have our good friend Jose valim coming to the stream soon I'm very excited for that oh you got Jose to come yeah yeah we're going to talk all about type safety oh yeah because uh alixir is going to potentially have some type safety put in I'm curious if it's going to how how it's going to look I I haven't watched the talk it's very different it's very different it's like a hybrid of it it's somewhere between like o camel and rust in terms of how it is really strong on like the backwards inference stuff yeah hindley hendley Milner hindley Milner I know I I'm not smart enough with types I just like when my auto complete works so I'm not the right person to ask but they started on the math side like they mathematically prove out their type system initially sounds like Henley M yeah yeah type safety is hard quick math so you got the fastest mathematician in chat right now yeah I who's your quick math so my favorite mathematician is math geek7 he's on Twitter every year he does Advent of code in Excel and he streams it he it's like five viewers and me and my community are all five and it's incredible what do you mean he does it in Excel I mean he solves the Avent of code coding problems in an Excel spreadsheet for every one of yes because you don't submit code for AV of code you submit the numeric answer like the prompt will like have this crazy long input and you have to get an answer out of it you can do it by hand there's people who do it by hand for the first like five problems but then it gets too crazy he did it all the way to day 25 with Excel it was nuts what's his username math geek7 that's a great math geek7 great absolute Legend yeah Excel is the best programming language we all know that like why why would you ever use VB when you have Excel right there I like what I like where this man's head's at yeah right you know what okay so if we're talking about languages you know what language I've become the most curious about in my land in my in my days of just reading about every language oh no JavaScript nope try again come on uh C++ nope not C++ I've already done C++ plus and I choose to avoid it we' already had it set in chat not o camel is it hcal I am very interested in O camel as well but it's not o camel it's it's it's a tie between o camel and pearl Swift Swift oh yeah you have been nerding out about Swift lately Swift's a weird language have you been on stream nerding out about it no no I've only read articles about it I I feel very excited so I'm choosing what to do for Advent of code it's either oam what makes you excited about Swift or what causing this it's it's more like rust and also not like rust all at the same time you got to explain that one further okay so rust so here here's a great way to put it uh uh pretend this table right here is all potential safe programs but the ones that Russ recognizes is like this little circle right Russ recognizes only like a approvable set of safe programs where Swift allow has reference counting oaml has garbage collection but then you can also get into to ownership if you need to if you want to take things faster you can make the parts that need to be fast fast without all the pain in the ass that is the other part Swift does that which is something yeah Swift does that and O camel is now doing it too o camel 5 and it's also named after uh figures in uh what's it called what's the book Dune yeah that's the book oh love Dune read that forever ago really I'm on book three and it's weird I never read the second one I feel like it gets weird important question is there a swift HTM X package yet you wouldn't do a swift HTM X package why not you don't do HT hmx you HTML is there a swift templating language if there is then which there is then you already have htx the package would be for type safety of like routes being correctly handled so when you specify a route in your HTM X that that route exists it is returning the right format that's just not a thing lame I know that um uh it's not a thing because you don't have client side state it's not a thing Ethan ncer was working on this a little bit with the uh Beth stack stuff where his actual like the routes that you were specifying for your HDMX if that route didn't exist it would type error yeah that doesn't seem I mean the thing is that only works if you have a framework that is kind of scaling everything which is what he has so he knows what routes you've specified cuz he owns the router he knows what you know what pages you're writing which because you know if you know everything if you know if the missile knows where it is it knows where it isn't yep or the other way around the missile knows where it isn't then it knows where it is it it subtracts where it isn't from where it has been yeah to know where it is it's the classic difference right there so what I'm saying I guess is that you need to have a swift router a swift framework a swift compiler and then Swift HTM X yeah then you could then you could validate that yeah so somebody used to remake that stack with swift what I was thinking about doing is uh because I because I already wrote we already have a working and cargo installable HTM X autocomplete but I was going to make it so that it can also crawl all the files if you have like a little config it'll it'll just crawl whatever directories you tell it and it'll gather every htx tag and all of its routes and then give you an a dynamic list of routes for you and then technically I guess you could you could continue to add on to it in some way I'd have to think about that because the problem is I don't want to program at all you have to come up like a plugin it'd be that that one would be hard because you already know the tags but the hard part are we still on or I have no idea if we're still on or not I think we are yeah cool we are people are listening to this yeah they're just restreaming our YouTube stream on their YouTube right now double YouTube yeah we we're we're double trouble can you stream to Twitch which is getting restreamed to YouTube well with the new changes with the twitch policy almost certainly absolutely yeah any when are you going to start streaming Madison yeah Madison what when are you going to start streaming you know I tried to stream a few times it crashed like every time I streamed I want to get back into it but I have to say the setup is so ridiculous like OBS and configuring it all and I tried to stream from my Mac which was a bad idea yeah so I went I can do it but it was like yeah I it was just such a hassle I'm going to make a video eventually about my setup because I get so many questions about it I'm like regularly surprised I tried to copy a lot of your setup like I got the camera you told me to get I got the mic you told me to get and stuff and that stuff's really helped yes the uh actual machine that does the capture tends to be the hardest part though even here I insisted like For Better or Worse we are running a Windows machine right now but Windows does tend to be the most reliable thing for OBS yeah I think I got to get a Windows like that's because I just have a Mac Go anybody here happens to work at a computer company that makes gaming PCs feel free to hit any of us three up we're all looking for better machines to stream with let's just say if you if if you're oh I can't I we're on versel I can't I can't say what I was about to say I was about to make an Asen gold joke but I realized that you probably shouldn't make phallic reference jokes on a company can you replace the phallic part with a triangle o that's a great question you guys don't think we should make fic jokes but you were talking about the t- word earlier extensively yeah but that wasn't when we were on the versel channel but but also like versel owns the taint they've been very clear with that they they're the the the providers of taint so okay there there's the taint is the final line before you cross into too much right once you go past the taint then you're in the client then in the client and we just don't talk about those kind of things right here okay yeah you have a classy gentleman line yeah so you have classy Crimson or Mana Crimson mama is what you refer to them as with another 50 gift Subs we appreciate that a ton thank you for funding this stream at this point Jesus we appreciate the support so much absolute Legend out here familyfriendly stream yes yeah I really like to talk on the community website and building the conferences like conferences take so much I can haven't seen this conference amazing like all everyone putting in all the work here yeah Mich kills it I learned this year how much work goes into this I I showed up here at about 5:00 p.m. to set up for the stream and I left at about 10 p.m. dang yeah and I brought half of my studio here in order to make this all work yeah remember when we're going to do more than one stream Target and everything I mean we are I'm doing that right now I could have added the multi rtmp outs here with like three button clicks that's the easy part okay the hard part was the hard and getting all this set up and looking good we actually I had duct taped an an on air sign here and I guess it was too Jen cuz they took it down but yeah we had a super was it a black piece of paper with white writing no it was an actual neon on air sign but we had black duct tape pushing it up on the wall there but uh I the black duct tape would be enough for versell to be okay with it because like the black and white theming but who started skill issue like when did that come up that's an old Gaming thing okay that's something you say to people to OT bruise him oh you said that to me earlier that's how I got blocked by Jonathan Blow huh I Jonathan Blow tweeted that it was embarrassing that he could buy a brand new high-end Windows gaming machine and YouTube would still like be choppy to like browse and load videos in and I quot tweeted with skill issue and got blocked immediately yeah I mean it it was a skill issue but is it yeah on the side of YouTube probably but nonetheless there's a skill issue somewhere in here somewhere skill happened there that does sound brutal all right I am interested okay so I've never been to Miami and I've never been to a proper react conference I think there's only one thing to do hey can we get Prime to react Miami I'm sure Michelle's down I I don't want to speak for her but I would be very oh there she is I know she was right in front of us can we bring Prime to react Miami official blessing can we bring time to react Miami next year am I allowed to go okay sure cuz some times some conferences may or may not have mentioned in their code of conduct so I just wanted to verify cool there will officially be at least two mustaches at react Miami confirm no more Tain talk keep the taint talk on the TL keep the what talk on it's a react conference it's going to be mostly about the taint exclusive taint right oh my God like you guys waited your whole life to say this word as many times if you said it so much joy we grew up watching jackass absolutely we needed this this is the problem is that this is why companies can't do this okay cuz now I I find myself abusing the taint which is just completely inappropriate to even say did you see Sebastian's reply to my tweet about it no I didn't see your Tweet about it to be real just like I just screenshot the like like the part of the post that mentioned the Tain for the first time and he replied I see my marketing strategy is working thankful one name could get us to start talking about security this was the plan the whole time we are now regularly talking about Security in the new Full stack model he had full on fullon 40 chest that one yes he absolutely did it's not even a native English speaker too that's the best part I like that now that I'm here I recognize people from their Twitter pictures every now and then someone walks by I'm like I recognize that guy yeah I don't have that problem I don't look at all like my Twitter picture anymore I need to retake it you mean cuz your hair is a lot lighter now the hair is lighter and mustache yeah yeah I'll fix it eventually just you make sure the background color stays the same so you'll recognize me yeah it's a good color just smile like that yeah it's all I got to do I'll just switch to your picture there you should have changed your profile picture on YouTube to tee when you were gone that would require me to do actual work that's fair you it's a good joke I don't the mean you were creating earlier you were working okay I wasn't I I know well I was I I was going to try to find I wanted to find a good little online program to little paint on his phone like doing trying to like so I can just say I am not going to mention HTM X and so that way I could just like hold it open and just say I'm not going to mention it not going to do it doing our best poor is Warren even alive after all that is Joker gifting 25 Subs right now Jesus guys you're going crazy we appreciate the support so much so many Subs trash do you know what that's like trash comes it down yeah he has no idea when's your talk trash yeah when's your talk can we react to your talk oh it did I thought they only had one uh screen though this year didn't they Oh Oh I thought they were only doing one stage this year my bad on that cool well I I promise we'll go back and watch your talk eventually I don't know if it'll happen live or not but was it good was okay okay okay according to trash talk was okay so if if we have time for some okay content we might get there that sounds pretty exciting I I would love to watch watch mediocre content yeah yeah I want to watch it I didn't realize we missed it oh it's on yeah you can come sit this one's on yeah trage comes sit down yeah honor G to say this brownie is really good that's all I really wanted to tell you guys I appreciate that all we're live right now give me that brownie trash do you have any brownie in your teeth you good huh I don't want to are you guys live the whole time yes we're actually on the screen in the big room right now sorry you shouldn't have said that now I just put brownie on my teeth got it everywhere so good Toth knocked out I didn't know we were on the you okay nervous now they took the internet down as they were putting us on the big screen so I didn't actually know if or when it would be live which was fun but uh it worked out it all worked out yeah the teams working really hard to keep us online and get this all working I proud of the setup and how well this is all maintained especially with the chaos of like the noise levels and everything going on hey what uh what time is your talk I have no idea I should actually probably know the answer to that that I will go check my guess is that uh the internet is really hard to run particularly here considering hey you're using up a good amount of bandwith right to upload and there literally is 1,000 cell phones all connected to the same all trying to pipe through the same watching the stream hey look at that that's us yeah I so cold the uh yeah this is just for the main stage so I don't stage no I think no one watching the stream can see us do that oh yeah yeah nobody watching can see us do this I want to find look it's clerk. when my talk is is the stream going to go when you're talking and Prime post it is that it no I didn't realize that the this one run oh it's their schedule button cool that's actually a good thing to click on yeah wow we missed a bunch of stuff yeah yeah that's because we don't get to we don't get to see them all we only seen main stage oh there 212 the things versel won't show you so uh for whatever reason not only did versell invite me to be here for this they also invited me to give a talk about the things that they won't tell you about nextjs so uh there's some fun cursed pattern in there things that you probably shouldn't do but I'll still recommend you do so I have a quick question if there things that verell won't tell you but they invited you to talk at a conference about the things they won't tell you are they telling you to do that no that kind of sounds like a passive invitation I'm telling hey by the way we're not saying to do this but come on and tell us about it one of the things might defend from a versel employee but when said versel employee showed that thing to the other versel employees that actually make nextjs the response was wow that shouldn't work please don't do that so I'd recommend doing it yes enough people do it it will become a feature just like rocket riding in fortnite it'll be fantastic yep that paper sounds real good trash yeah thanks trash Oh my God amateur content creator sorry learning your best yeah you're not you're not at your home this is the real stream experience for anybody who's watching this this right now on the big screen you've never watched a twitch stream before it is just this us eating and making jokes at each other and occasionally bringing value I'd say like once every hour or two yeah I'm full of value yeah full of value value he's normally full of gummy Lifesavers but tonight it's value was that a center piece or was that an edge piece that you just had it was definitely not an edge piece it was pretty soft pretty soft it was good you had full Center it kind of tasted like full center it's pretty squishy you know the trash theem right which is within at any point within 4 days there will be a picture of a brownie with the center cut out of it that he will upload on Twitter there's like a 4 day period of time where you can always find one slightly more painful every time you like kings baby Kings e just the G we call it the gspot at home it's the good spot no it's the no it's the good spot you don't that's not it's not tainted at all the double corner is the taint whereas like the center the gooey the good mhm someone said trash is my spiritual animal uh trash is I I would not agree that feel that way like sorry I think that's oh we're we're bringing the claws out dunking over here yeah I personally would not agree with that stat person would not agree with that makes me feel slightly uncomfortable should see if there's anybody else worth bringing in for a quick chat it would actually be cool to grab some of the speakers to talk about their talks that would be great and also trash I guess no trash You' we no I hyped it up I already I hyped saw it I hyped up nextjs baby you know nested to be honest I mainly use the um app router for nested routes nested routes was just like something that just it just made everything so much easier with it you know it is Ryan but I also call I also called out that I like config configs better though yep you know there's part of me that likes configs better you know what I mean mhm I like a good config file you know I realize that no matter what you choose it always slowly devolves into something I dislike yep that's pretty much my take on anytime it comes to routing yep I find with conf almost said something you like leaned in like that's too hot too hot too hot I try to lean back so you guys can you know make that lovely eye contact so I'm in the middle I I find that configs like starting point is slightly worse where like a basic website it's just kind of silly that you have that all in a config file and like file based routing makes it easier to quickly grop like what is where but once things start to get really complex the configs carry you much further well there's a certain threshold where everything sucks but there's a decently large window between when configs like between when like filebase running gets chaotic and when can figs get unmaintainable I try to avoid hitting that point at all costs yeah try to make it simple my goal is to be simple enough for long enough that tan stack router is stable by the time I hit that level of complexity I'm go on me no I just took it off for you cuz you kept trying to put it on yeah I wasn't trying to put it on should I put it on yeah everyone was saying who has the bigger stash M 100% does not want to put that on I think I clearly have the B but she's feeling the pressure now yeah caving to Pure pressure that's upside down I don't know let me see yeah that's the right way you're good yeah that's who has bigger mustache me or trash Dev go one in the chat for me two in the chat for trash let's go wow it's huge I got a whole bag all right trash you you've won you grab your stash You've Won with your amazing stash my stash is on my name tag stash we're live right now on the so okay how can I ask a quick question so uncomfortable how do you guys like aren't you like itching your nose all day with this have you ever got used to something ever gotten used to something yeah you I guess have to get used to you um yeah I guess so yeah there you go do you think about wearing socks it's like always touching your body and stuff and weird and you just forget about things you know I know that was like math I just math you so hard Get Wrecked just genius uh I'll take this back bring someone else on find we can find Michelle I wanted to bring the speakers who we watch the talks of so we can talk so we can talk while we talk and react while we react you know yeah s doing our best okay I'm just reading the chat sorry never read chat okay reading the chat me and Prime were meant to be the ones who know nothing about next an attempt was made that's fair okay that's fair I have used next okay Theo taught me next yeah and then he showed me T3 right afterwards and was like look how much better all this is the n i remember that happened perfect looks great now we're talking perfect the new T the new T3 stack taint in it looks great T4 now T4 yeah T3 plus taint is that T4 I've been using next I feel like next has become like how you know as a front end of you had to learn react and now you have to learn next like it's becoming like that in terms of new people coming in you don't have to keep it on it's not staying an attempt was made we we appreciate the effort people are going say the following phrase well I learned next before I learned JavaScript am I going to hear that phrase out of but they are it is next is becoming the thing of like yeah next learn immediately my Hut take of why commit soku if this keeps going on my Hut take of why I actually really like people learning react through next is that you shouldn't just be thinking about the front end when you're learning front end like like front end is built on top of back end fundamentally even if you're just serving an HTML file that is being served by a server of some form and next isn't pretending that the front end lives by itself anymore so you are inherently doing a little bit of backend even if you're just using NEX as like a front end Builder you're at least thinking about it now and thinking about that relationship between the parts more and I think that's almost always a good thing my wife while we were at twitchcon called me up and she had a whole group of people on the on the phone okay there was at least six people and they were like hey hey we have two questions for you the first question was who hid the Bitcoins and I said B Maria and she responded with well you have to mine them and get them out so who put them there to begin with it was the most adorable beautiful question that six adult human beings ever asked me in my lifetime the second one was when I go to amazon.com where does that go understand where you're going this I very confused good to learn about a server okay full circle okay it's it's good to learn about a server but I really just wanted to mention the who hid the Bitcoins cuz it's my my current favorite thought that I have on the regular I kind of giggle to myself every now and then like someone did hide the Bitcoins if you think about it oh Prime I actually think I started using NEX more when I watched that video that you did about crate react app ah oh That's a classic and that's when I really started going into next I forget about that video it still gets a decent number of views that was that was a while ago I did not know how to YouTube yet that was like an hour and a half long for a video that should have been 10 minutes lots of good stuff about the you know issues I see if I could throw off the focus I've been noticing it's going sorry me and trash are having our own little side combo right now sidebar side side bar I would have manual focused if I had people here sitting in the seats when I set everything up so I got stuck left on auto for it that's okay he just said you're really late yeah dude I was late I walked in at like I okay I can't you I was standing out there I could like see into here and I was just like yeah I got to get in they're like where's your QR code I'm like what that's so funny because I just walked up and I was like I I'm on the live stream and they let me in immediately but then when you were talking to that guy and we came and got you and then the security guy he was like why don't you just tell me that in the first place PR I don't want to be one of those people like excuse me I can't be dealing with with lies and [ __ ] I I'm speaking get out of my way like so I was like I got to like participate in the QR code I mean you had to do it like that you you could have you know it's perfect timing I should just walked by said nothing I have a real question now related to why we're here here yeah okay this one's for Theo okay so if we want someone to learn next year yes obviously they need to learn the backend because you know API routes Etc do you think it's potentially too much for a newcomer to kind of grasp one react its ecosystem then on top of that whatever is specific to nextjs and then on top of that the whole backend stuff I think that learning fundamentals and building are different things and the problem I saw previously was that people would try to build the full thing with just create react app and then quickly realize oh I guess I need one of these backend things what is that that's how we ended up with the Firebase chaos that we're stuck into this day fire reference called it yeah I think that like they just announced the nextjs learn portal we already have the incredible react docs and all the resources and stuff around that I think learning react and learning like the basics of anything should be a separate process from building with once you've learned those core fundamentals which you should do on a website or a tutorial not in a project that you've scaffolded and built learn those things or even have a tab by the side that you're going back to as you try building with those things do I think you have to learn a lot of things to build a full application yeah but how much of each you have to learn depends on what you're building and what you're doing and starting from the point of having like I want to build a calculator for my World of Warcraft Guild or I want to build a website for my Minecraft server server or I Want to Build a Better portal for people to check dogs into my local vet when you have the thing you want to build starting from there trying and then seeing what you don't know and what you need to learn more of and then going and learning that tends to be a much better process overall and with next yes there is more surface area you have to think about because there's a back end in a front end now but it comes with the benefit of you now know where those two things are and have a better point to Google search from does that make sense yeah yeah I do think with the new RSC Paradigm it is kind of hard to understand at first where that divide is between the front end and the back end use client That's Where It's At use Cent the Firebase chaos that you're talking about oh God uh Google's a partner of verel so I will keep my mouth shut for now yeah I was about say this is a professional stream okay I've made no dick jokes today feel free to go through my go through any of my videos about databases or platforms and you'll hear plenty of me talking about Firebase so so this is something I've always been curious about because now we're kind of in the day and age where people how they learn is through a very practical means right a lot of boot camps a lot of like hey to get started we're going to start by you know moving squares in JavaScript and launching a server and express or whatever you know whatever soup dour of where we're at and now it's nextjs um I always wondered if it is a nicer path if it's better I'm not saying it is or isn't the whole university Realm is it still relevant today is it still good yes obviously some people just naturally do better in a four-year program that's just like hands down right but I also learned how to program via Java but nonetheless I still learn Java I still learned how to do it and built like a terminal app and so there's not like I didn't have to know what a server was or what a request is I didn't have to even think about how to get the datas I didn't have to think about encoding and decoding and you know like there's there's like thousands of steps you have to do to just do anything where it's like I kind of got all of that slowly over time and then it just felt so easy to make those transitions because I was like oh yeah server I I know what that is I took a Linux class I think the value of University isn't just in like learning how to code and like these specific classes you take and all that like blackout drunk I I learned how to code before going to school but I got so much out of my time at University largely like I also I dual degreed in audio engineering and software engineering which was really cool I got a lot more of my audio program overall but more importantly I was surrounded with peers that were in a similar place like just talking to programmers every day working with programmers having them like just surrounding you and being that deep that way for four years during like one of the most important Windows of your life from like like 18 to 22 that's when you're like most primed to learn most primed to make friends and to this day like half or more of my closest friends are programmers I met in school yeah that's fair take like my CTO and roommates I met at University most of my investors for the first seed round at ping and met in University these connections go so much further than any piece of paper ever could and even if you just go for a year make some friends realize it's not for you and you want to have a job and drop out A+ totally fine the value is not just the degree it's all of the opportunities of being surrounded by other people doing the same thing at the same time there's definitely a multi yeah there's definitely obviously you can achieve anything without a degree but well not fair you can't become a doctor without a degree but in programming world you can pretty much achieve anything you want without a degree but there is definitely like a multiplication factor of just having the same people that's why I recommend quite frequently I think TJ might have been the first person that pointed this out I know look at me I'm giving attribution properly uh which is that if you want to learn a new language a great time to do it is advent of code because Advent of code there's like 9,000 people also all learning a new language at that exact moment and you guys can all do the same problems on the it's like it's like a mini University field for just a moment and it's it's super cool what about people who are you know maybe you're over 25 and you're still thinking about that question cuz I do feel like there's this big debate the question of do you need a CS degree to be a developer I think it's easier yeah yeah if you're struggling to find community and like surround yourself and other people who are coding and learning to code something like college can help a lot with that but like don't I I would never recommend a remote college that would be very hard for me that would ruin every aspect I do think it's really interesting because this debate of like do you need a CS degree to be a developer and then you have this one side that's like yes you need a CS degree to be a legit developer you have like this other side that's like you you know you don't need a CS degree and that's gatekeeping The Gatekeepers right but I think it's really interesting because I feel like what we should actually talk about more is that computer science fundamentals are helpful one way or the other and you can learn them even if you didn't get a CS degree and I feel like that's what a lot of like the self-taught crew like including me we missing for a while is actually like understanding what is happening beneath the abstraction that you're working on and like digging into that that's why I've been learning some C someone in the chat just said that but that's literally why I've been learning C just trying to understand like what's going on beneath the hood more like when you learned JavaScript for the first time I didn't think about memory or what's happening and then you learn that in other languages you actually have to manually figure out allocate your memory and I just think it's so fascinating to you know peek under the hood like that will make you a really good developer so in like the whole debate I feel like that's the part that's missing like we need to focus on that more and more curriculum for that more video you guys both rent about this a lot and yeah I I actually really disagree on this point I think that there's two pieces that get missed a lot so that's one of them but the the one I think is more important and you've done a great job of working through this is surrounding yourself with peers that are in a similar point of learning like learning how to code alone sucks not just because learning how to code is hard but because you don't know how much success you're having how if you like you're keeping up with others and I've known developers who are some of the best developers I've ever talked to that feel like they're falling behind because all they're seeing is like the three influencers they follow on Twitter who are doing crazy stuff all the time they don't have peers that have been programming for a year that they could compare themselves to and work with and learn and gauge their own learning it can feel very very lonely and isolating to learn how to code and you've done a great job with this with everything from your book club to your like involvement in all these communities and stuff like you don't even see this to a point because you're just hanging out with us anyways but the average developer especially those getting started are very lonely when they get started yeah yeah I could see yeah yeah oh one one more thing that's positive about college is that it has Career Fairs yeah you know people like right now you TR try to just cold turkey all those different jobs hoping that you can get your first job by you know applying to 10,000 places you probably will eventually but it's way way harder whereas at a career fair at a university you walk up and you're like hey I'm in my third year they're wanting to talk to kids in their third year and then they're also talking you can talk to them right like just even having a conversation that is 10 times more valuable no matter how cool your Twitter is your GitHub anything they just get to see you and go oh I like that person yeah yeah let's get a resume hey yeah let's let's get you in for 15 minutes and then all your other stuff just multiplies yeah and so that's where it's like I don't know I like that so interesting because I I think a while back I wouldn't have expected you guys to have those takes like so much more Pro computer science and it's not a very popular take on Twitter it's my popular vide keeper if you say that that's because Twitter's filled with the stupidest people in the universe the problem is you can only you can only form one-dimensional thoughts on Twitter so if you say you need a degree then naturally people are like well technically you're like I mean yes you don't Tech you can't explain all that in a tweet unless you're going to be the person that writes those gigantic expanding tweets nobody likes that right I don't I've never written a tweet beyond the character like it's no one reads those right but I agree with Theo's point that learning to codee would be very lonely and unless you have some sort of community you're falling off and unless you really try hard to be online a lot I don't know I guess that's what I did I used to watch your guys' YouTube videos now I'm here so yeah it from the bottom but most people like like one of the hard things you have to deal with in that scenario if you're meeting these people online is that you're meeting the people who the people who are the most visible are the ones who are the most successful and keeping up with them is going to be incredibly hard oh me keeping up with these guys oh my gosh I mean and that's great cuz I love I don't want to be the smartest person in the room I want to be around developers who are better than me so I can get better and just like you know tonight everyone's having a drink and I can learn and listen but also it's hard to keep up yeah can I ask a question yeah would you leave the room if you were the smartest person in the room would I get up and walk away right now you mean no I'm just kidding um you know that phrase right don't be the smartest person I can leave if you want me to I'm not accepting that even as a joke look at not when I leave the room I was the smartest person in the room I have to I'm sorry okay I always hated that phrase sorry I know we're kind of tangent in here I love that phrase you know why I hate it uh what point do you stay yeah because the problem is is every room would have to be empty yeah because everyone leaves because everyone would eventually have to leave everybody is smarter than somebody else in some way yeah I mean that's the real answer is that being too smart is multifaced but nonetheless like if you if you really applied that rule judiciously there's sometimes where you enter a room and you just are the smartest person in the room because it's just like hey we're going to talk about the thing you've done for the last 10 years and you're like I'm really good at the thing we've done for the last 10 years it's like yeah I just don't you know I don't you want that person to stay in the room and teach others if they want be helpful every person has ability to multiply a problem it's just like I'd rather try to make people more multiplies and less I'm not trying to like [ __ ] on your favorite phrase or anything I just I just personally want to [ __ ] on that phrase okay I don't care makes me angry I get it I get it yeah there's something about the general concept of just always be learning from you know yourself and then will grow kind of thege that Theo was makinging yeah okay yeah see all I find that trying to teach someone a topic you know makes you learn it better if I want to get smart at a topic I don't try to find people smarter than me I try to teach people that are less qualified than me I just make a YouTube video where I use it incorrectly and read the comments that's also one of the single greatest ways to learn is to say something wrong on inter how you guys feel then about learning something and teaching it as you learn or like you know you you just learned this thing and now you're going to be immediately teaching it possibly on your how you yeah like if I was to teach next right now it would be much worse than if I taught it a year ago and I was much deeper in the weeds with it building with it every day but yeah I think it varies a lot depends on the goals like how definitive of a resource you're creating I like something I've got feedback on a lot is in a lot of my older like tutorials that weren't tutorials it's just me building live people loved that they were watching me debug and deal with errors but now that I'm planning my tutorials ahead actual plan thing way fewer mistakes I'll still intentionally bake some in but it doesn't feel the same and people definitely notic the difference there there's a lot of developers who it feels good to see what it actually looks like to work and learn through a thing so if it's a resource in the sense not that like this is the definitive way to learn HTM X but this is me learning HTM x with you so you can both learn the framework and you can learn how I learn things that's a whole different experience that could be very valuable yeah I love when I see you guys solving a bug live on let trash talk oh sorry trash go ahead oh no I have a lot of thoughts but I'm not gonna wait I like I'm still on the college part in my head I'm like do it I'm like empty on the inside really is what's happening of the things I want to say but I'm just someone comment no no so we're going to rewind to the college part I would say I'm telling to lean in okay I think at least specifically in America college is a privilege so it's like not everyone it's not accessible at least in the US right so it's easy to say yeah you should go to college and get a degree but the reality is in America it's extremely hard right like like in Europe and stuff I think I don't know from what I hear it's like free in some cases I don't know talking to like Julius and others it's like considerably cheaper but in America it's like for state universities like three grand a year you so back that's where I went yeah so like back to your comment about like you know you could potentially go to a career fair right but I will say like companies do handpick you know those schools right like ivy league etc etc which are like known for just being insanely expensive I'm not saying don't get a college degree but I'm speaking specifically in America it's just like you know it's tough It's for sure like way it's way tougher I'm actually much less for the like spending the big money to go to the big school that's not something I recommend very often at all and the career fair isn't one of the benefits I push for that reason what will happen though is one of the people from your state or local school will end up working at a cool company through like connections they already have or friendships or whatever and if they remember you as one of the peers that stood out in any way shape or form you will get that referral and the way you get your first job is almost always a referral it's so hard to get that first gig otherwise I agree with that but also like the internet now assuming you're like a somewhat outgoing person or extroverted you can make those connections online through open source and etc etc it it's it's easier said than done 100% but I will say you can definitely that route if it's if you can't go the other way right if you go to college planning to go for 4 years and then that route ends up working out in your first year there's no shame in dropping out I think that like the default like the the base recommendation the thing we the same way we say you should use typescript it's not because you shouldn't use JavaScript or you shouldn't use rust it's it's a really good starting point and when you're ready to move to something else you'll know and you'll make the right call I think you should go to college if you're wanting to become a programmer is a similar take where like it's not that you should you have to get a degree you're not a real programmer and it's not anybody who doesn't go to school is irresponsible it's the base starting point that I recommend if you're learning looking to get into code and you can go to university you should start there and if better opportunities happen you should take those better opportunities and if they can't I would say join your Discord server right yeah hell yeah got a lot of people that disc we're talking about U yeah I I mean I was getting a masters in ml you may have heard of it pretty popular topic these days and I dropped out to work at n Netflix you work there gross yeah gross trash kind oful it's just it is literally just like maybe like a like a kind of like a little brother to Hulu so you got the opportunity when you were in school and you decided go work at Netflix I said f that racket when straight to he's like give me that bag baby I didn't pause it I did not pause it I threw it in the garbage yeah I think that's the right call you have an opportunity to more exciting than college and you've made the connections you want to make ready to move on you can always go back too it's there forever yep that's harder that's that's not a real thing um I would do better in college now at my at my maturity level than I going crazy thank you CD for the gifts I'm curious about that I'm curious if that's a real a real thing I don't know but I feel like if I went to college now I would take it way more serious and cuz when I was in college I just played video games and partied you know I yeah see I was just on the recently quitting meth train so I was I was pretty dang serious at that point so I kind of I went I got a 2.16 and high school and I got like a three something up 35 36 I almost doubled my GPA in college in college versus high school pretty good yeah you switch to rust rust was even invented then this was like what 73 trash you are old making old people jokes I'm 21 yeah okay I don't have a must trash is in high school I he's clearly in high school I got to go to I got to go fly to UCA after this I have a class second most type safe high schooler mhm there you go oh my shut up Christine L learning it actually says Christine on his badge it does someone someone's trolling me have cell 100% yeah this is so good I want answers well yeah what's your position classic department head hair stylist that is clearly a it's not real it's not real clearly it's messed up I one of the hosts when I grabbed your panel or your badges for you guys I was so hyped that yours just said crime she like oh my God is that like a problem like I was Hing he would go be cool with that like the way that you use Theo it's like he's going to like that it just says Prime you're too worried and is I feel like Prime is becoming a thing I never call you the prime I always I feel like it's becoming a thing it's too long to say the prime a one thing drop the the Gen well first off I can't get that that handle that's like an impossible handle to get wait what what handle Prime Prime oh it's impossible yeah it's like trash it's like a basic word of the of the language wait someone said why are they ordered by height oh yeah uh should we stand up okay I can't I can't keep that position your gorgeous hair is adding a little height too it is it helps it does I was already tall extremely tall yeah it happens do this to myself we have another 20 minutes I think of being on the big screen before they cut back to the real content nice I'm glad we could not entertain for this log I I I would check the viewership but I'm scared to see the number don't check it it's not work it's not worth they're still getting 800 on the live stream so they only went down by like two 300 so that's nice yeah I guess we doing well on the live is doing someone I always check my twitch what's twitch at 1.1 oh not bad especially since we went down twice yeah I know hey that's pretty that's pretty neat it's you're want to be here trash I mean we want you On's in if you're here for trash one's in one in chat if you're here specifically I if I don't know you just please oh yeah there we go B bun yeah bash bunnies is this what it's like to be famous this is oh Jacob see Jacob wait he's putting zeros never mind yeah he mistyped and put a one I just realized Sam Lambert was texting me letting me know what when we were down that would have been very helpful for me to have noticed earlier all right I haven't act tell us about your book club oh sorry I talk let trash talk hash it hash that no I my book club uh was started when I was learning to code and it was very lonely like we were talking about you're just I was by myself you know living with my parents at the time trying to learn to code sorry keep press short it's very funny keep TR and uh so I started a book club that eventually got like we have like 10,000 people on our Discord but it's still ongoing weekly now and we've read like 10 coning books but we also do like leak codes and things too because you know there's a bunch of people on Twitter or in different discords but actually meeting up on Zoom is like people really don't do that as much like you know actually trying to have some sort of real interaction where you're talk speaking you know writing code and things like that so yeah it's all about trying to create a community if you didn't get the Cs degree but you're still trying to learn this stuff yeah we were just reading uh cracking the coding interview super famous book you like trying to go I those I feel like there might be some bias there with that book yes it's a it's a great book though I can't tell you how many interview problems I've had right out of the gates of that book do you got a commission from your sister no no no she she's not I wish that would be cool it is a good book though it is a good book I abused it all right followup question which is all right so I'm new to programming I'm looking somewhere to be first off Theo why haven't you linked her Discord Link in the chat second off I how do I jump on to this moving train is it is it really just joining the Discord is it moving fast do I need experience what does it take actually it depends on where we're at in the books like in the book series so I think like right like reading cracking the coding interview I wouldn't say a beginner should have joined that one because should you as a beginner learn algorithms immediately but we've done other beginner friendly ones I don't know I know you guys have opinions on data structures and algorithms but yeah one more question do you accept people who struggle with reading I know Prime's been looking for a group to hang out with do you have like are are you guys going to read the book like cracking the reading out reading out loud thing reacting to the coding interview reacting okay here actual question do you think the books are helpful like within like this specific like scenario of you all meeting up weekly like what's keeping you accountable like like do you find it do you think it's been like working in general so I think in the beginning so we've been doing this since 2020 it's been a really how many years is that um we've been doing it for a while I think that oh no I'm seeing F in chat is the stream down oh no is the stream down refresh it doesn't seem down back up okay we're back we went down I guess so anyway you guys miss it I just told a crazy story if you do coding problems if you just read a book that's probably not as useful if you do the coding problems and actively work on them with other people I think that's where it gets useful but I've run into the problem where you're just reading a programming book and you're not really doing anything right it's like watching a coding tutorial you're not actually really learning you're just watching you talked about this you're watching someone you got to add and code it up yeah sorry EV of code is incredible the best resources for but like the amount I have gotten from Advent of code as a single thing is just absurd do you have a video on that I I have a couple but there actually I think one is yeah I I forgot what specific title but like this programming challenge made me a good programmer or something like that that I put out end last year when I was doing it I I love those challenges for those who aren't familiar Avent of code is a yearly code challenge that starts in December for the entire for December 1st the 25th like an advent calendar like the little thing You' take chocolate out of as a kid who celebrates Christmas and the Avent of code challenge is a new programming problem gets released every day at around 9:00 p.m. Pacific Time midnight eastern time and when that problem comes out it has two parts and you can only see the first part you can do whatever you want to solve it you can write code you can do it by hand you this is one person who does it in Excel you just have to give the numeric answer that's based on your unique input they give you a long input you have to process it do whatever you want with it and as long as you get the right answer you get to move on to the next part and when you're doing this there's literally hundreds of thousands of other people doing the exact same problems many are doing in the same language many are doing in different languages many are doing it in the craziest ways you can imagine but it's this huge community of people that are solving these really increasingly difficult problems in increasingly unique ways and it's such a powerful way to improve yourself as a developer work with other developers solving problems in interesting ways and just do cool stuff I usually like to solve about Days 1 through 10 for me I know you go all the way masochistic by the end but I do the whole thing every year I think if if you're looking just to gauge if you can be successful in an interview if you can get through 1 through 10 that's like a pretty good way to know I I can do like other than getting completely blindsided by a question I've never heard of and I have no idea the data structure you're going to just kind of go through I agree with that 10 to 12 is like the sweet spot and after that it's like man you just suff hard it's just I can't even like my ad I'm just like reading halfway through I'm like I don't care anymore most years they'll usually have like between five or 5 through seven there will be one that's just like way too hard just soed it's always tedious ones too it's just like there's 19 States and you need to make a combinatoric of all of them yeah in COD there was only like two or three of those last year but uh the year before had a lot of really tedious ones there was one year where they had a recurring uh I forgot what it was like you had to make your own assembly interpreter problem would make you continue iterating on it so if you blew one day it sucked so they haven't done that since thankfully but yeah that was my favorite cuz that was actually rebuilding the int computer on the Apollo whatever and you're like effectively rebuilding what NASA had at one point it was super cool it was awesome that was yeah the op code one dude that that was so I I actually wish they did that again where they actually had like a progressively harder story over time oh man what that message sa it was I'm 11 years old teach JS so fun twitch fact even me like I'm 12 what is this will actually get you toss banned for being 13 or under on the platform so be very careful when you make jokes like that I've also kicked somebody out of a Discord because they're like I'm 12 or something like that I'm like you gota go so in order to get your Twitch account back if that happens you actually have to send a picture of your ID to support and if you're 14 good luck with your ID Yep this is a real yeah it's location oh dang you're 12 get the hell out of here J guys anyone old AOL days you guys are all young oh yeah I know see you're old you're yourself I'm normal ASL I'm normal baby what's normal uh somewhere between me and prime a value that is one would be normal you got your energy back you had your coffee you calm I know calm down I know I'm starting I'm starting to get a little juicy I need to find some caffeine at some point I'm dying out here straight over there don't drink coffee though Jamie give me some give me some lates there lates up there I need a tea what's your favorite tea if you say some regular ass tea you're not a real tea drinker I'm not a real tea drinker I'm a caffeine hunting tea tea bag you what is it what do you like Earl Gray or black oh I was right I just drink black coffee like a no you drink don't drink coffee not a coffee drinker so just only tees caffinated tees yep I don't normally have too much C honestly like a British coater they drink they drink yeah po and I are the the two the two British typescript guys once you get good at typescript you start finding yourself craving Earl gry yep that's how it goes you just start writing everything and like suddenly grow hey speaking of typescript and te's and all that when's your site coming out oh re in Early Access baby typ hero. death typ hero. death what the hell is typ hero. death it's for mass aiss that like typescript it's basically lead code for types okay lead code for types okay so if you know anfu who's done like bjz all that stuff he has the type challenge repo yes so Matt pook got me on that and I got addicted for like two months I'm just doing type challenges remember yeah you were live streaming them for a while I was I was live streaming doing type challenge remember that I was doing like type challenges you ripping out I was addicted and then I went to trpc I was like I got to apply this to real world so then I found trpc through Theo and I was like let's see what I'm made of and then and then I was like you know what I'm just going to make a whole ass website and here we go website if you can believe that remember the type challenge I gave you that we just devolved and build the bug yeah good times did you hear oh sorry keep going I I had one hard typescript problem ever I had an object that would take a validator that had like a type signature it would also take an action that was a function I wanted to infer the input on that from the validator in the same object but uh backwards inference in objects with keys just straight doesn't work it's entirely broken and it's like the one time I need to do a somewhat hard typescript I was like there's no way this is this broken like I I have been doing something wrong here so I posted the snippet I had trash I had a couple other like T Wizards come in they were going back and forth for like two weeks on it until multiple issues were filed on typt I think somebody put up a PR trying to fix it but like it was that was chaos can I tell you a story now sure I haven't watched SL rdit I don't even know if it's a video or an article but its article name is I made Flappy Birds in typescript types oh man I know so I'm just like I got what is what the hell is this I gotta look at it I'm scared there's also the other one where he did um the something of Life problem what's it called there go sorry my head keep someone typescript I did an HDMX what HDMX mention Warren buffering drunk oh my God I swear you are HDMX Prime yeah are you ready did you lick this microphone that's not yours oh does it stink no but I have face on it no no Tanner Lindley was he did put his face on saw oh it smells like d when you when you smell itell smell because it's all brand new so it has this really it has that new electronic smell and there's just something so amazing about new electronic I hate you all so think it's like gasoline some people think it smells good some people say gasoline gasoline yeah what the hell you like smell gasoline some people love the smell some people don't I do love the SM not I can lose all my brain cell I it I just want to sit there and draw my own mustache and Sharpie just to enjoy that oh my goodness just be like eyes Roll Just Just immediately filter out anybody who say they like the smell of gasoline they can't be trusted I agree with this I agree with this phrase my mom would let me smell Sharpie hold on I know that sounds really bad but she said just one smell cuz it causes brain damage if you do too much so I just just one smell cuz then I wasn't too curious and I didn't run away and like smell like 9,000 times yeah she's just like just once but you can you know oh man what are we talking about right now huh good parenting technique I could see it yeah it's actually the same way I recommend using unsafe and rust exactly just use a just once get a smell remember that one time that Prime taught us rust on having a code it was awful that was so hard God I was using Vim though and you were proud of me remember that dude hell yeah that's when you were on his stream right he on my stream by the way Superior stream Superior streamer on the better Netflix stream by the way by the way uh I'm not a Netflix stream by the way I'm just a regular ass man regular regular so Prime was teaching trash R Theo too uh trash was much more receptive uh clearly great coder um clearly Theo loves Elixir yeah I really I am Elixir curious my manager like div and he just keeps like Shilling it to me in my one-on ones y I was like man I'm Elixir curious yeah it's funny I have now coded in typescript significantly longer than I like did my Elixir production stint but I still miss it every day it's an incredible language although I did take down production cuz I used a lowercase p instead of an uppercase P once P small P mistake that's small P energy right there he can tell right away small P Big O by the way it works what what what what I need a I need a cafe I can show you where one's at we have six minutes guys you can you hold together for six more minutes oh we got this yeah we absolutely got this been are you sniffing that microphone right now you are I'm like in an internal struggle to know what I can and can't say cuz on my stream I say messed up oh yeah no you can lean pretty far into it I've leaned in the last six minutes what are I going to do oh it's a good point you got to be who you are already you guys hanging out tonight I have no idea what I'm doing tonight I have to get all my equipment home somehow at some point but other than that I have no idea what's up yeah what's up I don't know after party I think after party yeah potenti at the hotel lobby uh Prime and I have to Fil A video with GMO in a bit oh we do yeah oh yeah we do yeah we do we know what it is about this thing this thing is going to be 10,000 like this is be big 10,000 yeah right after last year same thing again which where we each do the thing yeah you know what mean abely I remember last year's which was like uh CEO of verel destroy open source Dev and it was you guys playing ping pong and you sucking at ping pong uh I won that game by the way did you yes cuz I let him get nine points on me and then I beat him from zero all the way to 10 you do that I had the hot dog him I hot doged the poor man he had no idea what was going on the hot dog was that mean yeah no I don't know what that means either I genuinely don't know I I don't know how it happened but I decided to start using the term hot dog to like replace it with Bamboozled it just is such a funny phrase to be like I hot doged that man they're like what gzy it doesn't even sound sexual but I don't even know how to like like take this in right now it's confusing that is confusing it is super fun yeah I like using words that almost sound right one of my favorite phrases is by cam from chat if Cam's ever in this one uh he would say left-handed cigarettes it's just like those like little PHR that like kind of kink your mind for a quick second that's the point there is no such thing as a left-handed cigarette Oh I thought it was like cigarette smokers know this I no these are left-handed cigarettes you can't have just like there's something so funny about a good one appreciate sorry my oh my goodness what is this thing so apparently they originally had planned to give us a folding table like a crappy like I'd rather have a folding table than a table with wheels honestly yes but I'm like they don't lock they should lock yeah those ones might have gotten unlocked at some point I can feel that later but I don't care enough yeah the uh apparently the other table that they had didn't have any way to mount the mics and they didn't have like normal freestanding mic stands so this is what we ended up with I'm happy that we pulled this together in just a couple hours cuz we were not ready at all before I had to bring I had to take multiple Uber trips to grab a bunch of stuff for it worked out hold it off see everybody yeah it's Weir just being in the middle of the room doing a podcast everybody else is like around people keep coming up with like y can we chat I'm like I'm literally live right now I'm sorry no one no one said that to me literally no one said knows who I am every thinks I'm Christine so no one knows who I am either yeah who's the girl who are you I'm the yeah you're you're who's that girl you right that's twitch chat right now is this oh my God you're the real girl you wouldn't understand oh I know this is actually say legendary goang developer you may have noted bash bunny right here we miss you bash money wish you were here we were going to get ready get our Madison command in YouTube chat Oh yay thank you yay what does that mean when you do that that's an arch user shocked that there's a real girl a real one wouldn't understand yeah I can't relate I've been on Mac OS for like eight years yes I I could start talking to my mom again because I went back to Mac oh nice yeah I still can't I don't have audio rip you'll get working someday I heard ala is doing okay nowadays right is that the one I programmed a little bit of the Elsa uh driver and uh I actually got audio to work by using C and and actual ala I feel but using Linux and just playing it with like a headphone I just I struggle sometimes I feel like there's more people who have contributed to allsa that have actually gotten it working reliably what is ala salsa without another Linux sound something no he's right it's salsa Sal salsa without I love salsa on chips is topic it's it's Salsa Salsa Salsa Salsa spicy ala is that that some spicy Elsa jalapeno Elsa I can go all day I keep is that habanero Elsa queso and Elsa y'all can't be stopped we were in the partner Lounge at twitchcon we were just saying the same thing for like 20 minutes there cracking up is that Pico DEA or Elsa dude I want Alla these ala ala nuts oh got so long ladies so long we've been on the stage for like an hour 20 you just L up the first duts I know I've been wait no you did have I thought there was one earlier ear there was one earlier but it wasn't on stage it was just yeah this one this one's put her on stage okay kind of a big deal the chat we are all Prime's wife are you guys all here the whole until the end of the conference what I don't know when the conference ends but I'll be around I don't know how long we be doing this for I'm honestly probably not going to go too much longer after we're off the big screen but uh I do think we're about to get off the big scen so one last thank you to next comp for having our chaotic little crew here if you're not already familiar I'm theo3 search theod Dev you'll find me this is Madison kanana with a k k and and a we have the primagen who you don't need to look up trust me it's for the better and trash Dev who has a really silly face on Twitter you see like a poorly like Ms paint draw where sh Shad did not make it sadly no way yeah yahe that's only reason why I came thanks for the shout out I appreciate for got quiet when people started moving was insane that was intense but no I'm so Shad now um a good one let's see if we're still on the big your mustache disgusting hey thank you everybody take care live if we're still on the big screen we still yes we're no longer live on the big screen for them at least we're still live on our stream but uh all right not on that one are you guys just uh just hanging out I'm want to hang out for a bit I want to get some like water and chill out for Chad can I say a big thank be a good time for us to sign off I think cool with that well before we do I just want to say a big thank you to Chad for hanging out making this really fun I think it's awesome that you guys all stuck around especially through all the stupid things we've had to say I want to say sorry to Warren buffering for taking 1,00 shots with me saying HDMX the entire time Madison it was great to have you on here I got to I got to have you speak with your diaphragm more though because I know you got to just really get it out there you know what I mean work on that and we I think we all owe one gigantic thank you to Theo for doing all the work to make this possible you should saw the email chain we had it was all of us linked on an email and then it was just Theo production team Theo production and it just went on for 900 email sorry we could have get you your exercise ball we tried it's okay I I really wanted to bounce but I can't now and it's just sad and then thank you for trash yeah I just showed up I just crashed it I just crashed it I'm sorry no this was awesome what do you mean that's bash not trash wrong bash bunny you know bash Dev I see I I see you're you're you made it out here I thought you were sick you're looking a little sick I can kind of see it in you you know what do you mean by that you know exactly what the hell I mean okay I feel good rude trash bunny right on the topic of bouncing I think it's time for us to bounce appreciate yall a ton thank you everyone and nextcom for having us and thank you to everybody who hung out for this chaotic mess of a stream this was quite the experience but I'm happy we got to do this thank you all and I'll see you for my usual scheduled programming next week God damn it I need to turn this off before they get too frisky peace there thanks again

Channel: Theo - t3․gg

Views: 63,274

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: HjCbrGRSvoY

Length: 183min 46sec (11026 seconds)

Published: Thu Oct 26 2023