The Frontend Cloud: Crafting superior web experiences

Hey everyone, how's it going? My name is Malta. I'm the CTO of Vercel. And today I want to talk about the front-end cloud and generative UI, which is not the same as gender FAAI but obviously very related to kind of set the stage here.

I think there's this observation we're in the middle of a rise of the front-end. This is, you know, sample data from Stack Overflow kind of showing how Ruby and Rails have more of a backend framework. It's kind of tapering out while React is really kind of rising to the moon. And I think it makes a lot of sense that the front-end being the place where you turn your product, your IT capabilities and your services into something that people could actually interact with, it's where you meet your customers, users and partners and it is where you differentiate yourself from the competition.

Our general thesis is, and this might be a bit of a hot take, that companies have underinvested in their front-end capabilities relative to their back-end capabilities, right? And I think you can see that here as well. It's what people do and it's fine. And I think especially in the age of AI, this might actually become even more of a problem because AI is kind of commoditizing much of the knowledge in your organization. And so the front-end becomes kind of the final frontier of differentiation. It's where you leapfrog your competition and become the leader in a business.

We describe ourselves as the missing part in the application stack where you actually run your front application on the front-end cloud. Our systems both deliver applications and websites to users and our developer experience platform helps you iterate on the user experience to reach the best possible outcomes.

So speaking of user experience, the front-end industry is in the middle of a journey from monolithic systems to composable architecture. However, when I'm talking to brands and enterprises, what I'm seeing is lots of monolithic systems where you buy a vendor like Adobe CMS system or a Shopify system and you're stuck with their capabilities. They really like this old school kind of shrink wrap software buying system. And in fact, it really often looks a little bit like this, where you have this huge system, it's very hard to change and user experience takes a backseat. And that's particularly problematic in the age of AI.

Imagine your website is built on one of these huge legacy systems and now you wanna add like an AI chatbot, which I think everyone here probably has thought about a little bit. But what do you do? Do you now wait for your vendor to actually give you that capability that might take forever? So these monolithic front-ends are not adaptable, cost of running them is often very high, scaling is hard and it's very difficult to implement best practices for speed and user experience. You're just not flexible. Remember that AI chatbot, how would you implement it in this analytics system? Clearly this is what we want - everything to be seamless, speed, scalable.

I think there's relative consensus that the answer to this problem is to implement composable architecture. And the way that works is you build a composable front-end, you have complete control over the user experience and then you talk to other services as APIs - and that your legacy system might actually be now exposing an API that your modern front-end talks to. And so again, like I talked about this AI chatbot, you wanna integrate - in this world it's just another service and your composable front-end just does it. There's no place for even checking in and waiting for anyone's roadmap. And that's really where we move to this composable front-end approach and the role of Vercel, the front-end cloud.

When you ditch your classic vendor and turn them into an API and you have all these APIs, now you suddenly need a place to run your front-end workload, right? And that is on the front-end cloud. Now that also sounds like a lot of work - previously you just bought something from a vendor, now you have to build it yourself. And that's where frameworks like Next.js have come in, which are at the center of making this work efficient. So you're building your own front-end, but building your own front-end has become much cheaper than it used to be. And then you connect it to your CMS and other data services to assemble the user experience of your choice.

On the technical side, when you actually deploy on Vercel, it runs on AWS's global edge, giving you excellent performance. My favorite study that shows the impact of having great performance is this study from Deloitte that was commissioned by Google. What they've shown is that user experience is really evident in terms of business performance. What they saw is that for every 100 milliseconds, 0.1 seconds on a retail site, conversions grew by 8%. And on travel sites it was even 10%. So it's really clear that better user experience, better developer experience, really makes a big impact.

I mentioned frameworks and how they're a key enabler for enterprises to ship their own composable front-end experiences without exposing costs. We had re:Invent and I think we should check in with Werner about what he has to say about frameworks. A couple years ago he had this big slide saying we're doing primitives, not frameworks. I think it's a really interesting point - yes, that's right about how to design AWS, but it's not necessarily the right way to build applications. My thesis is the opposite, which is that you should build applications with frameworks, not based on primitives. The primitives are there but you don't want to touch them.

What front-end frameworks do is they're the foundational backbone for modern web development, offering a robust toolkit, empowering developers to create dynamic responsive user interfaces. And what the front-end cloud is bringing is the shift to what we call framework-defined infrastructure. In framework-defined infrastructure we compile your application built with a framework to run on the cloud by determining the primitives on the cloud that you need from the code you write. You don't directly program the primitives, instead you just write code to your framework and it just runs on the cloud. That gives you the benefit of very fast iteration velocity without having to run everything in a monolithic application.

Speaking of frameworks, we're the makers of Next.js, which is the number one framework for web development with over 5 million downloads per week. It now runs very large chunks of the web, including the largest brands and game changing technology like ChatGPT.

I talked earlier about how user experience and developer experience go hand in hand - developer experience is developer productivity, how fast you can iterate, and the faster you can iterate the better outcomes you get. In fact my hot take is that iteration velocity is the solution to all known software problems because as software engineers I think there's one thing we know is true - we will make mistakes and we aren't gonna build the right thing on the very first try. So the only professional thing we can do is iterate and fix things because we know everything won't be perfect.

When I talk about iteration velocity it's important the velocity part is a vector - it's both about speed and direction. Velocity means iterating faster but also making better decisions on every step of the way. Our developer experience platform is designed to optimize iteration velocity at every step - instead of one slow development cycle we help you move faster every step of the way, from early iteration over quick fixes, and then experimentation on the production product you're optimizing as you go.

I'm structuring the way the platform helps you at every step of the lifecycle. The first thing you do is develop your application - I already talked about Next.js which is important for being fast at developing. We're making technologies like Turborepo and Turbopack that dramatically improve performance both during development and deployment so you can ship faster.

We heavily invested in a technology called React Server Components that makes it way easier to iterate on integrating data into your front-end applications. Once you build something you wanna preview it, you wanna share it with stakeholders on the Vercel platform. Every time you push a commit we give you a direct immutable deployment that represents that change and you can share with stakeholders. That's one thing that's already cool - that's something people expect now - but it doesn't stop there. On that preview deployment you have the capability to add comments, just like you would on a Figma file or Google Doc.

So you have a feedback cycle where you send that preview deployment to stakeholders, actually ask for feedback from a product owner or something, and they can inline give you feedback. Then obviously also important is that the builds are super fast - they actually get you the primitives so you don't get out of sync with your process.

Finally once you ship, once you have that application in production, you want continuous deployment so things are quickly in production. We developed a technology called Edge Config that allows you to globally push configuration of the application to the entire edge, to every compute unit in your system, and very quickly run stuff like A/B tests and other forms of experimentation so you can learn from what you have in production.

Finally I mentioned how we know we will make mistakes - we have a technology called Instant Rollback where at any moment you can roll back to a known good version and that takes a second or less. Very different from redeploying a Kubernetes cluster which takes seconds or minutes to rollback.

To show you a few examples from our customers, this one I love - an AI startup called Anthropic utilized our commenting product. An engineer makes a change, does a pre-deployment, and then you have this commenting feature that looks very similar to Figma or Google Docs, and it allows you to give inline feedback. It avoids having to go through heavy issue trackers, making screenshots, posting in Slack that get lost - this just gets you a comment, it's inline, but it also blocks your GitHub PR from being submitted, similar to giving feedback on code but on the application.

Another customer of ours, Sonos, when they migrated to Vercel they saw a 75% reduction in their build times, which is something we'd all appreciate. And at the same time without any other changes they got a 10% improvement in performance. They had a very successful Cyber Monday on Vercel.

I mentioned early on I wanted to talk about the front-end cloud and generative UI. That's where our new product Vize comes in. Again, iteration velocity matters at every step and Vize comes in at the very, very first step - the literal v0 of the application.

What Vize does is it literally builds the v0 of your application from prompts in a similar manner as ChatGPT does. You can generate code you can directly copy/paste into your application. Let's take a quick look at how this works in production.

You start thinking about what you wanna ship, you write a prompt, whatever you wanna do, you submit it and the system makes the UI - usually it looks really nice, you click on the code button, and there's the source code you can copy/paste into your application.

This is very fast - let me give you some concrete examples of what this means. If you have a public website you probably have one of these cookie dialogues, and that's probably not the most important part of your application but it's something you have to do. With Vize you just tell it you want a cookie preference dialog, tell it what you care about on your website, and it will write the UI. You click the code button, copy/paste into your app.

Very important - it's not done, that's why we call it v0, it's not meant to replace the entirety of making the application. It just gets you started. I'm one of the most expert front-end engineers but I don't know CSS - this is a big deal for me, it does the stuff I don't know how to do, then I can tweak it.

Another example is if I'm starting a SaaS and want a pricing page - it does a good job, this looks reasonable, you can iterate on it. The most important use case is dashboards - where it doesn't matter how it looks, you just want to get it out quickly. Imagine you're an FTE engineer, not a CSS expert, this is how you start your day - took 5 minutes, now you can iterate.

Again I want to emphasize this is about getting started - new projects in seconds. It gives you generative UI - you enter a prompt and get fully styled HTML. We're betting on the idea from ChatGPT that it's cool to just describe what you want and get help with what you want.

The code you get isn't production code you'll ship, but it's production grade - you're expected to tweak it but not rewrite it. So it's expected this could be in production.

To bring it back - iteration velocity is the solution to software problems and our mission is to tweak every bit of the lifecycle to let you iterate faster. We'd love you to join us on that journey. I'm happy to answer questions - I'll be at the booth after, or find us online. But that's all I had today!