Software Engineering Daily

Technical interviews about software topics.

Building Delightful User Experiences with Guillermo Rauch

Building Delightful User Experiences with Guillermo Rauch

Wed, 15 Mar 2023 19:05

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. Vercel’s Edge Functions enable you to deliver dynamic, personalized content with the lightweight Edge Runtime. Guillermo Rauch is the CEO at Vercel and he joins us today. This episode is hosted by Mike Bifulco. To

Listen to Episode

Copyright © Software Engineering Daily <> - all rights reserved

Read Episode Transcript

Welcome to Software Engineering Daily. My name is Mike Byfouco, I'm your host for the day. And today I'm super excited to be sitting down virtually for a chat with Guillermo Rout from Versel. If you are unaware, Versel is a company that produces quite a bit of infrastructure for JavaScript developers on the internet, as well as a bit of tools and technologies that have kind of been guiding and riding the zeitgeist for JavaScript developers for quite a while here. Next JS is part of the brainchild of Versel as well. And I'm super excited to be able to sit down and sort of pick your brain for a little bit. Guillermo, it's super nice to meet you. How are you doing today? Great. Is it having me? Registration is open for microservices March, a free event hosted by our friends at EngineX. This is a four week series of demos and labs on the fundamentals of microservices and how to successfully deliver these complex apps. This event is great because the training is also paced and flexible. You can choose the bits and pieces you need to learn about and do it on your own schedule. Register for microservices March at slash SED podcast. Yeah, of course, I'm thrilled to get a chance to talk to you. So I kind of like to start discussions just talking a little bit about you first. So I'd love to hear if you don't mind telling me a little bit about your work history and how long you've been building Vercel and sort of what led you on the path that got you starting the company. Yeah, as you mentioned, we've been working on the foundations and infrastructure for the JavaScript world for quite a while. And that's kind of been my career for spanning decades. My started with programming kind of led to the discovery of JavaScript through my obsession with web technologies. So I kind of wanted to build for the web. I was in love with a web browser and the idea that you could make it more dynamic, interactive, real time animated. And in order to do those things on top of all their web pages and the static web page world, you have to use JavaScript. Nowadays, even though Wassam exists, primarily the way to add dynamism to a web page and make it come alive to make it more app-like, to make it more like software is to add JavaScript to it. So my career started with making contributions to different JavaScript projects. The ones that I'm most proud of is in the very early days, it was Mood Tools. I was at Core contributor when I was 16 years old. And Mood Tools was a pioneering framework in many regards. A lot of the folks that were working on Mood Tools got hired by Facebook to work on FPJS. And later on, obviously, on React. So the DNA of a lot of the technologies that we take for granted they run very deep and a lot of those have been in the works for many, many, many years. So my work history is part investing in all those foundational technologies for web frameworks. I also created a real time framework for the NodeJS world called Socket IO to enable real time communication. And I was also very interested in the startup world. So one of my first jobs that was kind of created out of my contributions to Mood Tools was here in the San Francisco Bay area. And that's where I kind of fell in love with the idea of creating companies. And I had the opportunity to, and I saw the opportunity to create a company that was open source first, and that created infrastructure to scale up web projects. And the engineering teams behind large scale web projects. And that later the creation of Next.js and Versel as a platform to support it. Yeah, that's really interesting. I feel like in the past, let's call it 10 years, open source sort of had this ground swell of support from the developer community where there's really a moment where the support for devs who wanted to build things open source and kind of share what they were building with the rest of the world became the obvious way to do it. Because we all get to benefit from each other. And certainly from where I sit, it felt like a welcome change to happen. And it's really cool to see organizations that are embracing it wholeheartedly. I'm really interested. Maybe we can chat about this in a bit, in hearing your perspective on open source and the way it's growing. And maybe even about the federated internet, we can go in all kinds of directions with that. Yeah, so when it comes to, I guess, your current work at Versel, so when did the company start? How long have you been building it for? So the company was incorporated in, I believe it was November 2015. I started working on some of my first open source ideas in early 2016, always starting with open source. Open source to me is like that way of validating product market fit, right? Like fundamentally, and this should be obvious to people, right? It's free. So if you are not adopting something that's free, then you're probably, you should keep iterating, right? It's obviously such a great deal for adoption. And yeah, so early 2016, the Genesis story is super interesting, right? Like I've sold my previous company to Automatic, the company behind the, WordPress, and many other awesome projects, now Tumblr as well. And when I left, I knew that I wanted to make developers lives better. If there's something that I obsess about, it's developer experience, and removing friction. A lot of my love for JavaScript, nodeJS, and many other things came from like how succinct it is, how easy to get started, how quick, fast. I fell in love with node when I saw how quickly could start up, how quickly could run tests, how quickly could it spin up lots of web servers, et cetera, et cetera. So I left WordPress, and I knew that I wanted to have an impact on the web, and when I first started creating the landing page for my startup, I wanted to use the best tools available at the time. I was friends with folks in the React team because of my previous shared work history on MoodTools. And when I first tried out React, it blew my mind like very few technologies have blown my mind. Going back to the Genesis MoodTools, we're one of the earliest adopters of Git and GitHub in kind of the open source library world. I have one of my points of prize. I have a very old GitHub account, and Twitter account. Yeah, so part of that was realizing that, oh my god, React is going to change everything. It solved so many gnarly problems that had experience with MoodTools, with JQuery, with JavaScript in general, but even with this idea of reactivity, like creating real-time applications would be much easier if the world adopted React. And concurrently, in the world of infrastructure, the status quo or the state of the art was Kubernetes. So like every other developer at the time, I was like, OK, roll up my sleeves. I'm going to create a page. I'm going to put a web page online using all of this state of the art technology that has helped the biggest companies on the web scale. And they're being so generous to open source, right? So Google open source Kubernetes, which is a spin-off of Borg, which is how they orchestrated containers and millions of applications inside of Google. And React was how Facebook was basically turning into an incredible real-time application with chat, notifications, and infinite scrolling newsfeed and self-updating comments and all these things. But when I started creating that landing page using this state of the art technology, it was like, OK, I've spent weeks just configuring compilers and bundlers and trying to deploy the best practices. And it's kind of like that Simpsons episode where Homer is assembling the little playground for the kids. And he's staring at the instructions and he compares what he built and the beautiful picture on the instructions, like building an IKEA. And it looks completely different. And his creation looks horrible. Like, that's how I felt. I'm assembling React together with Babel and Wep back and front and gold and all these things. And I wasn't living up to the incredible promise of those technologies. If the output should be that you put out a great product on the web, why is it so awful that I'm just trying to use all this state of the art great technologies. And I can't be productive with them. And that's kind of the genesis that is still to this day we continue to create and bring a lot of value to our customers by helping them realize that they've got into traps like that. They've gone to hacker news, if they've gone to conferences or they've read the latest awesome technology and infrastructure as code and whatever. And at the end of the day, you go to and it doesn't perform well. It doesn't perhaps it doesn't serve a render. So they adopted React, but they adopted it as a supply inside technology, not truly fulfilling its potential, not truly using it the way that Facebook actually used it. So that's kind of a little trap of open source. Right? Like Google puts out Kubernetes and it's actually it's not quite like how they use it internally or Facebook puts out React. Oh, it's actually not quite, internally they have a framework that's very much like Next.js. So that's what inspired that creation of Next.js is like, hey, let's take this engine and let's actually make it work for the citizens of the internet. And ever since then, we've had tremendous success with it. And I was just looking at recent statistics of from the Google Chrome user experience report. And Next.js is not running a really large number of the top 1,000 web sites on the internet. And the distribution of traffic on the internet is such that the top 1,000 web sites actually amount for a tremendous amount of traffic. So Next.js is running a lot of the web today and we're very proud of that. And we continue to invest in improving the developer experience and improving the server side runtime execution model. And we can talk a lot about the things that we launched at Next.js Conf with Next.js 13, which we're really happy about. Yeah. You've touched upon so much in such a short amount of time that I'm sort of gobsmacked by how much has changed really since React came around. But even before that, on some level, there was this feeling that I remember spending a lot of my time as a web developer, swapping class names for things in the DOM that I had to keep careful control of and react kind of changed that. It also inverted the model for building things for the web. We're suddenly you were thinking about the way data sort of propagated in your applications differently. Very similarly, my sort of prism that I saw for a self-through was that I spent a lot of my life like SSHing and the servers and dealing with FTP passwords and doing all kinds of nonsense that was like, this was just the way to do it. There was nothing necessarily inherently wrong with what I was doing, but it was the process at the time. And there was this beautiful sort of marriage of developer experience of bringing about tooling that was built for the process that developers use. And FTP and SSH are sort of like the one-dimensional view maybe of how to deploy software, the internet, and a sort of containerized and graceful software deployment process that came about with for sale. And around the time that you're sort of delivering your first version of your product to the world was like an explosion of capacity for people to get things done. I'm very happy that I no longer have to be the administrator of a single Linux VM anywhere if I don't want to. I think that's really exciting for someone that doesn't want to focus on that. And the paradigm shift there like, it really hasn't been that long, but it's such a big change in the way that we deliver things for the web. I think there's a lot to be said for that. And it's really, really interesting to think about even just what's changed since, I don't know, let's call it 2010 just for around numbers, you know? I love the concept of the inversion that you're talking about, because I see that happening across so many different domains. So on one hand, we inverted the data flow model or the way that we think about UI as a function of data and state. So it used to be that JavaScript was this thing that came later on, you sprinkle it on your page. It has to almost like reverse engineer the state out of the HTML that's been rendered by some other technology that that software doesn't know about. It was this like incompatible world, like two forces fighting for like, who controls the experience. And with React, the next phase, we're saying, okay, like the front end of course, this is how software engineering should be done. Like, there's a render function. You bring data in and then that system takes over. And it's unidirectional, it's clean, simple as a pipeline. It's honestly just like how most infrastructure, even in the real world, should work. And it has to be smooth and direct. Another inversion I think is that idea of like, what matters more to your business? Is it the front end experience, which is where the customer interacts, buys, signs up, et cetera? Or is it the VM with Linux that you are as a staging into? And what does the customer care more about? Ultimately, what do businesses stakeholders care more about? And even what's better for the web, especially for the web in competition to world gardens, like iOS, something that I respect about Apple is that they were always about their Apple design guidelines, the obsession with good experience, the giving you frameworks that are not just frameworks for like computer science. Like, oh, here's a framework for, you know, how to do data structures, binary search, classes, functions, they do that with Swift. But that came way later like the things that they built that were cool to me were, oh, when you launch an app, it has to have this placeholder state that is instant. Like when you launch Twitter, you get the bird instant. Oh, that means that the user receives feedback immediately. And then they had frameworks for like, oh, when the applications in the background, it won't consume your resources, but it can communicate with the user through notification. Like the framework is much higher level, and it made for a better ecosystem. Obviously has all the downsides of a world garden, and you know, review processes and developer licenses and all of that stuff, but good results followed when you were in that garden. Now, for the web, I think that inversion means if you adopt technologies like NextShast that are so obsessed with that user experience, you will naturally just converge into that, you will err on the side of doing more things for the end user, more polished for the application, more animation, more customization, more, the other thing that I'd love to see more of in the web is more of your brand identity. One of the ways that we've scaled the web is we've said, oh, if you need to go to the knowledge base of this company, go to, which is run, the front is run by this other third party system, your login is not preserved, your brand is not preserved, and oh, and it opens up in a new tab, and it doesn't preload and it doesn't pre-fetch, like it's like another system. And then we saw that same problem with third party scripts on the client side. So everything that you wanna integrate onto your website comes from a third party domain, and it loads us an iframe or it loads later on in the lifecycle or it's some bubble that is popping up here. So we built this kind of like disjointed duct taped things because we didn't have a framework that govern the components of your UI that allow them to click like Lego bricks. And that I think is a true revolution that react and next shares are bringing to the web. Yeah, that's a really good point. And the Lego bricks effect, I think, is something that infrastructure, people working on infrastructure have been really good at for a long time, making these things that have interfaces on the input and the output side, that they're sort of agnostic of what happens on either end of them, but they work really well. And for the web, for a very long time, it was not that way. It was sort of like you have a very fragile deck of cards that you deeply understand how every little card was placed in there, and anything else that comes along is someone with a baseball bat taking us away in your card. Yeah, it's like, group Goldberg, there's this super funny meme that, like there's this guy creating this crazy group Goldberg apparatus in his kitchen. And he has to carry it along himself with his hands, like all the ideas that he had for its automation didn't pan out. Unfortunately, a lot of the modern web that people thought that they were going for is like that. It's like this jointed experience, like the CIP pipeline breaks down and the MPM packages out of date and like your DIY framework has no owner because that person left the company. And so we do need to bring some of those ideas of kind of like a cohesive system. Like we call this adversarial, the SDK that the web has been missing, the SDK for the web. And yeah, there's going to be multiple. And maybe you want to change some pieces of it. You want to substitute, react first belt and things like this. But overall, the system has to be in harmony to help developers to be productive and to help create those high quality user outcomes. The segment of software engineering daily is brought to you by Privacy Dynamics, the simple solution for anonymizing data intelligently. Development and testing environments are the number one source of costly data breaches. Privacy Dynamics creates a de-identified copy of your production data in minutes, allowing developers to maintain their velocity and improve testing without taking on unnecessary compliance and security risks. Using a proprietary approach based on the latest research, Privacy Dynamics automatically detects and eliminates PII while maintaining the schema, format, scale, and analytical utility of the source data. With this simple integration into any data store, Privacy Dynamics anonymizes data in Postgres, MySQL, Snowflake, Big Query, S3, and more. Are you letting sensitive PII land in development and testing environments? Eliminate the number one threat of a data breach and start using de-identified data in your development and testing environments by signing up for a free account today at slash seDaily. At Capital One, technology makes direct deposits available up to two days sooner, improves fraud defense with machine learning, and helps businesses manage data challenges in the cloud with slingshot, the first solution from Capital One software. Search Technology at Capital One to learn more. Yeah, I agree with you there. And I think it's really interesting that for a while, the web has purported to be the SDK for multiple screens, right, that phones and tablets and to a certain extent watches and TVs and cars and things like that all are web capable. But we haven't had a really great recipe for building just things, sort of generically, for the web. Yeah, there's a lot of potential there, and it's a really interesting perspective to have on the way that you're growing your products and the developer experience that people like me get to use. So let's pivot a little bit from there. You've been working on quite a few things. Versailles, your team has been hard at work delivering things. I know you had an event late in 2022. And along with that came the launch of NextJS 13. Do you want to talk a little bit about the event, the launches that came along with it and the things that your team is thinking about? Yeah, for sure. So we'd like to talk about NextJS as that core infrastructure for the modern web, right? And this infrastructure that we give you that you basically have to stop worrying about in building yourself has three primary layers. The first layer that gets developers really excited that I think relates the most to the developer experience is the compiler infrastructure. So if you go back in time to like, RouchG in 2016 and that pain that I had creating that landing page, a lot of that had to do with the fact that this story of using React was very DIY. React was this library and then you have to shop for the compiler pieces and you have to assemble them. So web back, web back plugins, web back config. A lot of folks, their first perception of NextJS was it's like web back as a surface. Like I don't have to, again, delegate that nightmarish compiler infrastructure stuff that is really, really hard and that actually also comes from a perhaps oversimplification or a little bit of ignorance, a splice from how much or how the front end has been perceived by many people. To create a world class front end, the way that Google or Amazon have done it, you need to invest in build systems. You need to invest in compilers. You need to invest in optimization, optimizing compilers. It's not the idea that you take JavaScript source and you just put it on the web page, which is kind of how JavaScript started. That idea is dead. JavaScript has to be heavily optimized, uh, unbuilt code split, um, transpiled before it gets handed to an end user. So we started out using web back and you've seen the growth of NextJS, you've seen the growth of React, the number two, React is number two on all of GitHub by stars. The number of front end processes grown exponentially, the number of NPM packages and NPM downloads continuous to grow exponentially. And all the tooling that was built for compiling that JavaScript was built in JavaScript itself. So it's all JS based. So it really cannot keep up with the growth of Lysofcode, code basis, complexity. So we are taken into this process of moving from JS based infrastructure to Rust based infrastructure. So Rust is a safe, native, compiled, um, safe, uh, from a type safety perspective language that produces in our, in our case, obviously it can be generalized, but really, really, really fast code, machine code. And what we're seeing is that we created this new project called TurboPack to replace Webpack. It's a general purpose compiler. So any project in the world can adopt TurboPack as the successor to Webpack. But NextJS bundles it in the, in the very same shape that it bundled Webpack once upon a time. And it basically makes everything about the developer experience faster. To the tune of, we've made a benchmarks. And obviously this is a synthetic benchmarks, but to give you an idea, it can be up to 700 times faster than Webpack. And again, no big deal. Yeah. It's astounding. And like, this is measured against projects that are really large. And sometimes developers come to me and say like, hey, like, yeah, that's a great marketing number, like 700 times. But I don't have 20,000 modules. So, or I don't have like 50,000 modules. And I can tell you that working with, working on Versel itself or working with like some of the largest NextJS users in the world, like Walmart, you get pretty quickly to that to really astounding numbers of files, modules, dependencies, components. So we're turning a world of that was already pretty fast. Like, compared to like, when I talked like folks that have, you know, minute long iteration cycles, this is the part of the pipeline that you're entering code into your editor and you're witnessing in real time the UI that you're making. And some folks live in the space of minutes there. I talked to a big retailer recently that was telling me that they actually had to write CSS and push it or prod to the staging prod environment to see what they had done. So they're going for like minutes, they were went to seconds. They were going to set from seconds, we already went into this process of moving parts of the infrastructure from JS to Rust. So NextJS already introduced SWC as a substitution for Babel. And that helped us for many projects go from seconds to hundreds of milliseconds. And now we're going with TurboBack from hundreds of milliseconds to single digit milliseconds for a lot of updates. It's actually pretty remarkable. And the key thing is that we're buying you a lot of time, right? Like, what's happening is that we can, you can now build larger projects. Now that both tails really well into the second category of really exciting announcements, which is in addition to TurboBack, we're moving more and more of the world's JavaScript code from the client to the server. So we introduced the app directory with support for React Server components. So React Server Components is this new paradigm for server first rendering. So if you combine that idea of we're moving the code from the client of the server, that means fundamentally that you're taking code that was obstructing your ability to deliver UI to your client. And ultimately deliver a sale or whatever it is that you know your business need to do on the web. You're now taking that cost. You're saying like, I'm responsible for delivering a fast product. So as your products get larger and more mature, the server can take in a lot more code than a client. You know, like it's not bandwidth constraint. It's not space constraints. It's not memory constraint. It's not battery constraint like a mobile device. So by moving a lot of that code from the client of the server with React Server components combined with being so fast and efficient at bundling that code and refreshing it during development, we're going to give you that best of both worlds of great developer experience and great end user experience. So a lot of this, I think it's important to note, especially for folks that have been thinking about NextShast, we're always obsessed with never breaking NextShast. So we still support a web back. You can adopt TurboPack incrementally with no basically very few backwards compatible breaking changes. Same goes for this concept of React Server components. You just introduce a new file system structure into your project, the app directory, instead of the pages directory. And now you gain all these new benefits of this. Basically, what's the future of React? So I wanted to circle back to that idea mentioned earlier of the way that Facebook used React and scale it to billions of users is a lot more like this app directory that we're introducing than even the framework that they open source themselves create React app. So a lot of folks just don't know this, but like the version of React that you were getting before is kind of like a diluted version of what the true potential of React was. So the React team has been working for multiple years on incredible advancements, like suspense in concurrent mode that allow you to now use React like the big leagues. So another thing that we introduced with the app directory is streaming support. So it's not only the observer and the edge begin the rendering, but the rendering pipeline is basically never blocked. Very complex applications grab data from everywhere in the cloud. Like we talked about that idea of like, okay, with the render function with React with next.js, we can get data and state from anywhere. And we give you a great developer experience to like create that UI on top of that data. The problem with data is that not all data is created equal and served equal. Some is faster, some is cached, some is cachedable, some data is not cachedable. You know, you don't want your financial data, your social security number, your bank balance to be cached at the edge. We didn't retrieve that from origin. So the new model allows you to stream data that can come from multiple places, have different policies attached to it, different levels of authentication and policy applied to it. And this is streaming based model makes that really not only a great developer experience, but you are actually rendering a page faster. You're rendering the page as the data becomes available, which is awesome. So yeah, this new app directory kind of enables to register with components, it enables a streaming, it enables layouts. So this was the most requested feature in next.js for a long time. And I'm going to share something in this spot because that perhaps I haven't shared before, but it was an obvious feature to add to next.js. But we've always been really careful to not fall for like local maximus and like give people something that we know will have to be refactored later. So that's just better not to have a certain feature that give you a half baked version of it. So I'm really happy that we're actually introducing layouts together with this innovations in React because I could have given you a regrettable version of layouts years ago. So layouts is quote unquote finally coming to next.js, but it's coming in the right way and I'm extremely excited about it. Obviously developers again are extremely excited and love this feature. If it's as the name implies, I guess, it allows you to define layouts like parts of the page are common across different sections of your application. And it has an ergonomic benefit in that when you develop your page, it's just easier to like distribute some of your content components, but it has a runtime benefit as well. So when you're when you were rendering page transitions, we can retain the layout. So essentially, it makes your page is more efficient, your navigation is more efficient. It's worth calling out to that what makes a great user experience is not just the initial loading time. It's this subsequent interactions. So I think the way that I thought about 2022 as a year is I was very focused at 22 and 22 and 21 obviously other years, but think of it as the journey so far has been to give you a great loading performance. What does that mean? You go to a website and you get the product page, you get the signup page, you get the landing page, extremely fast. And we've done that really well so far, I think. We're creating, we're adding more to that. So we're adding the as I mentioned, streaming. So if the data was not all ready, like we can now rent improve that loading performance, make it more sequential, make it more progressive. We're also adding edge rendering. This started back with next 12, but we're refining it a lot with next 13. We're making it more stable, which is that ability to run dynamic code to start rendering that page as close to the visitor as possible. So all of that that I'm talking about is in the service of loading performance, but we're also concerned with the transition, the interaction. What happens once it's been loaded and you want to buy. And a lot of the improvements that we're bringing into next Shs relate to improving that. For example, with a lot of the innovations in React, we can now hydrate faster. So we can make the interaction time when you press buy a lot quicker to circle back on layouts. When I transition to a page that shares a bunch of the page, I can make that more efficient as well. I don't have to re-render the entire page. So think of next Shs 13 as giving you the state of the art loading performance that is edge first, that is streaming enabled, and is fundamentally server first, with the state of the art and interactivity at page that hydrates extremely fast, selectively, and that when you make transitions between pages, retains as much as possible the work that's already been done. So that kind of sums up our improvements in the rendering infrastructure category, which is a lot. And then finally, the other layer of this infrastructure that you get for free when you adopt next Shs is what we call kind of the high level components, or the toolkit of next Shs. So we announced in enhanced support for fonts, which is one of the biggest pains by a huge margin on the web. I think a lot of folks have that experience of like, you go to a website and the text is not there. I think one of my biggest pet peeves period, that because the website is loading a custom font extremely inefficiently, usually from a third party domain, usually with the CSS is not there yet, or the font is over fit, meaning the font has glyphs that you don't need, and variants that you don't need like bold italics, semi bold, you know, like I'm a typeface aficionado, but there are folks that go so deep. Like one of our good friends, Rasmus Andersen, who the creator of Inter, those people like know every in and out of like the kerning on the font, and the glyphs, and whatnot, and like fonts nowadays come with like hundreds of different variants or dozens of variants and so on. And like the way that developers have shipped this custom fonts to the web has been naive, has infringed in privacy, because like now you're going to like when I'm actually going to, like why don't I need to go to Google when I'm loading my bank landing page. So we shipped this pretty incredible component for rendering fonts extremely efficiently. And I think it's also good summary of the approach of next JS and Versel to this problem, because the developer experience is literally that you import Inter from at next slash fonts slash Google. So like you can still use Google's phenomenal repository of open source fonts. But now like the dev experience is just like it's one import away. And then it gives you back a class name and you put your class name into your layout and you're done. So fonts, we made images better as well. We continue to improve images. It feels like the history of the web is just improving images more and more and more and like the web is made up of fundamentally images, especially with like generative AI and Dali and all these things that are coming to market. So more native, more web native, we call it internally image handling. Less usage of React, less usage of custom runtime code, more usage of the web fundamentals and the web primitives. And also we kind of re-announced but we stabilized more our approach to image generation. So you can now generate social cards with a package that we give you. It's a package that you have to import, but it has a very good integration into into next JS, especially with the edge runtime. So you can basically create images on the fly at the edge extremely cheaply. And these are the social cards that you find all over the web when you, you know, like you share a link on Twitter, you share a link on Slack and you see that beautiful summary card. Well, we can now create those programmatically using React components. So it's pretty pretty pretty tricky and awesome. So I think I got everything. There's a lot just on next JS. But I think to summarize, we predicted at the beginning of 2022 that the web would go edge first, that there would be a return at that inversion that you talked about that things would shift from client to server. That obviously developers would continue to demand performance both on the X and UX. And that the web is going to become more first party. So what does that mean? Like to integrate systems, you're not going to use a script text in the client. You're going to use fewer of them, hopefully. You're to get fonts, you're not going to go to third parties to optimize fonts. Next JS serves your images and your optimized images from the same domain. We also verse, I announced the acquisition of SplitBee to give you first party privacy first analytics. So instead of bringing Google Analytics, which is again, third party domain, band in Austria, you know, GDPR conflicting, Google Analytics, you can use verse cell analytics powered by SplitBee. So that first party aspect of the web is something I'm all extremely excited about. For many of us, driving has become a mundane experience, a chore to get us from point A to B. Nissan EVs are here to be the change we need. Nissan makes EVs, but not just any electric vehicles. They make EVs that truly electrify. The feeling of being in an electric vehicle is truly a step up from traditional gas vehicles. The smoothness of the ride and the quiet of the engine makes a car ride go from something average to something to look forward to. Nissan EVs are here to elevate your experience behind the wheel. And Nissan knows what they're doing. Since 2010, Nissan Leafs have traveled over 8 billion miles globally. That's the equivalent of driving to Pluto and back. One of their EVs even tracked to the North Pole. So elevate your experience today. Nissan EVs that electrify. Visit to learn more. That is a colossal mountain of things to have delivered to the world in the past year. And what I like about it is that I feel like for a long time we were optimizing server side things for a couple of reasons. One is if it takes a long time for a page to load people disappear. But also Google search engines stop valuing your thing. You start to be devalued for a certain circuit perspective. There's so many things to think of and there's a lot to consider in the way that works. And really a theme that lives through everything else you just mentioned. So the developer experience for build times, the experience of apps folder and code splitting and using suspense and layouts and all these things makes the once the page is loaded the end user experience better, which keeps people around. So now that the you know I've come to your page and it's loaded quickly and it's more pleasant to use that creates an attachment and that's something that I feel like is almost just an expectation of the way the apps work in 2023 now because people are so used to installing native apps on their phone right they have that experience in the native app and the web feels more and more capable of delivering native native plus experiences by the day. And I think that's massively exciting. Yeah I love what you mentioned about keeps people and makes people come back because it's as we go deeper into the ecommerce world and become more successful there. You know that you can use a web for multiple things and you can use for a cell for multiple things but ecommerce is a big one. And when I talk to the you know CEOs and chief digital officers of the largest retailers in the US, something that I always talked about is that loyalty that that brand loyalty that they work so hard for that they develop with their customers in the brick and mortar world in the world of atoms and you know beautiful storefronts and avenues all over the world. They've put so much care and so much design. Some of them actually have said things to me that make me think about like they've had the equivalent of those design obsessed engineers that we employ that craft custom components on top of headless UI and you know make it beautiful and choose the gradient and choose the color and choose the font and this is why custom fonts are so popular in the web right? Like those folks were doing that for decades if not centuries in the real world and they want to do it now in the digital world and that's why we're saying that investment into front end and that excitement over this technology is because what keeps people around and keeps people coming back is a great storefront experience and to your point it's about it's not just about that initial server rendered time it's about a did you render the right thing? Classic example are is Mike still logged in? Is your cart your profile picture? Is it there or does it come five seconds later? Does it shift the layout or was it just there? The product recommendations are they relevant to you and to your past history with that website or are you anonymous again? Or the only way for that comment of scale was caching statically at the edge. So they kind of were using edge but not really because they were just caching the same static version for everybody. So now the recommendations are pointless. So there's just so much about that experience that at the end of the day makes that person that visited the website say you know what? I come back to this because it's faster and better and I think the success of speaks to that like you know we always talk about democratizing the best practices of the giants of the web with for sale and like I've experienced that with Amazon it's fast so I keep coming back to it. Yeah it's it's fast and thoughtful in a lot of ways and I think one of the interesting things about this phenomenon that happens when we start to be able to build applications that fulfill and then surpass the expectations of people using them is that if if you're doing a really good job at for sale and I'm doing a really good job building the applications that people are using they may never notice that I did a great job of building the thing you know they just love the thing they don't think about the loading screen or they don't think about oh my gosh every time I come here I get this error and you you really feel the service that you're getting from whatever it is that you're looking at whether it's an ebook or you know a blog or it's a very very different experience and suddenly you're the value you're delivering is actually the value you're delivering and not like the marginal gains of a slightly faster load time. Yeah I think that speaks to the post dev ops world right like does the customer really care about that you use nomad or kubernetes or terraform or you know terra grunt or whatever the you know fat of the day is. Yeah we've come we've come a very long way from those times and I'm I'm grateful that you know you and I and all the folks that we work with are like we're standing on the shoulders of a lot of people's hard work to have gotten here and it's cool to be able to to start from where we're at today. I did also want to mention one thing that I'm I admire that for soldos really well with next is that you've you've mentioned actually a handful of things already that are features that are sort of released with next 13 in a somewhat experimental state turbo pack being one of those I think the apps folders another there may be a couple other features that I'm forgetting off the top of my head that you sort of opt into using that live alongside the prior experience in a way that's stable. I think that's something that's admirable from the perspective of it gives people like me who build with these tools a notion of what's coming and how to anticipate the changes coming down the road I'm sure on your end it's also shaking out lots of things that you didn't think of or bugs or you know to learn concerns that people think about it. Getting into people's hands and early has been amazing. Yeah my question for you is how do you manage to maintain both at the same time so the current state and the future state. Yeah great great question so there is a there's a hack a new thread that I have a very and popular opinion about that has become kind of a meme and it's it became super popular it's it's a comment that someone made about how Oracle has so many tests that the core database at Oracle builds has so many tests that is almost impossible to to work on Oracle and obviously like I'll take out the part about like making it impossible to work that's not a good property for any system right but like I truly admire systems that have extremely high quality test coverage and testing is an art and a craft when all of this is done like I think I'll be remembered for it's funny because a lot of people point out a tweet that I made that is like right tests not too many mostly integration and like articles have been written about this too hidden funny which is funny to me and but the idea there is like hey like you have to test the end as close as possible the integrated experience of your product that you're delivering to people you have to test it from the point of view of its usage ideally and sometimes of course implementation details like security we have a dedicated testing suite for security and like things like this but we always try to holistically test the system so secret super power secret sauce of NXAS is just how thoughtful we've been about its testing story so we move with confidence we evolve with confidence we can replace parts with confidence and that's for example what gives me the confidence that I'll be able to completely replace Webpack with Turbo Pack there's also a game of incentives right like sometimes you have to be thought on this again it's just like tests have art in science it's not that the best tester is the one that reached 100% coverage at all costs and like no there's economics there's how much time you spend there is understanding of how the product is used etc and I think that same thing applies to breaking compatibility like it's not that like the best system is the one that never broke compatibility I think folks also talk a lot about how Windows kind of went or Microsoft went a little too extreme with backwards compatibility and I think you can be a good steward of an open source community and project and bring people into the journey of the future with removing or crafting or warning and like thoughtfully deprecating and that's something that we pay a lot of attention to and fundamentally I think that for example from Webpack to Turbo Pack it'll be super seamless another funny thing is that we've been working on that transition without people realizing so for years I've been in nowadays you know I of course delegated this to our team and our CTO but I've been super thoughtful about okay can we start minimizing foot guns of configurations or plug-in hooks or things like that or can we prevent their existence at all such that then we can replace Webpack with something else and those thoughts go back to possibly four or five years so that's another quote unquote trick is that we've been thinking about the future without even being able to write the code yet because like writing this massive amounts of rust code is not trivial nor fast but we were preparing the architecture for it so that's one way that we bring kind of this like seamless upgrade experience or like backwards compatibility and and we celebrate it internally a lot we collect tweets when people tell us like I have created for and sometimes it's jokes or like maybe or like it's funny because like we're like how were you so out of date for so long like I have created from next year's one to next year's 13 and it didn't change anything like we've gotten tweets like that so the key thing to so the second category I spoke about which is like the rendering infrastructure side the app directory that is completely optional opt in and a lot of benefits are still there when you upgrade your next year's 13 even if you use the pages directory you can use a fonts improvements you can use the image improvements there's even the x improvements that we bring sometimes to the to the table that that apply to pages so there's never we we work really hard to never give a recent developer some not to upgrade a major version the changes are usually very minimal yeah it's interesting to see on launch day the excitement that comes from the new features launching and like the the ground swell of information that seems to propagate across places like Twitter and YouTube while people are watching these things and then this kind of realization that like oh you know my my upgrade process so I my personal site is built next my upgrade process for that I think was maybe eight lines of code to be compatible from 12 to 13 and it was I had to remove nested anchor links under the next link component and there's a code mod for that yes right it was a very thoughtful thing to do yeah if you run the code mod you can append to the link component then attribute called legacy behavior if you don't actually want to change the code and then there's a code mod for actually changing the code so yeah I love that and this is a space that I'm really excited about because I think AI will help tremendously it's already helping by the way link just more like ad hoc not fully automated but the idea of migrating code with AI is just so exciting to me yeah I think we'll see a lot of exciting changes come in the the next few months here and uses AI sort of hits it's stride here too so Guillermo I really appreciate you taking the time to hang on chat with me today I have hours and hours worth of additional questions I could ask you and I'd love to follow up with you sometime in the future for now I'm hopeful that you will have lots of you know exciting changes coming about this year as well but where can people find you online if they have questions follow up things like that and where can they find for sale in next JS for sure so on Twitter I'm rouch g r a use the hg I strongly recommend following the versell and next JS accounts in particular with over the recent weeks we've been tweeting out a lot of very short videos that help you understand and like break down some of the concepts and improvements that I've been talking about today so huge fan of that I also recommend checking out next JS that or slash learn if you're interested in picking up next JS skills we added a recent addition to that which is the fundamentals so we can take you from not all of JS but like we tell you like okay what do you need to know JS to react and then from react to next JS it's kind of like smooth journey which is you had a deploy as well and and if you're thinking about larger and more ambitious enterprise grade projects and things like that I'd recommend checking out and is like enterprise but even like you said for your own blog like my own blog runs on versell your blog runs on versell so we make it extremely easy to deploy front end projects of 35 plus frameworks so it's not just next JS you import your git repo onto versell and we take a lot of pride in how quickly we can deploy that and we deploy astro and solid start and veld kit I'm very excited about veld kit 1.0 which just launched so yeah head to and start importing your projects wonderful well GamerRuch thank you so much for coming on today it was really great having you here I'm looking forward to chatting again sometime in the future thanks again great