Guillermo Rauch

Vercel

April 21, 2020 (4y ago)49,574 views

Also available in: Japanese.

Today we announced that we’ve re-branded as Vercel, alongside the news of $21M in funding from some of the best VCs (Accel, CRV) and individual investors we could have possibly imagined (Jordan Walke, Nat Friedman, Pete Hunt, Jessie Frazelle, Soleio, Naval Ravikant, and too many others to list).

So I wanted to share Vercel’s vision for how we’re redefining the frontend developer experience, on our mission to provide the ultimate workflow for developing, previewing, and shipping Jamstack sites.

Let’s start with the context that the backend has been commoditized by cloud infrastructure, Kubernetes and off-the-shelf APIs. Today the most interesting new opportunities for modernization have shifted to the frontend. That’s where the value is for most enterprises - creating new products and content that attract users and drive revenue. The Jamstack architecture (Javascript / APIs / Markup) has enabled the frontend to be split from the backend so that site development can happen ever faster and independent of the backend. Jamstack is an architecture shift that’s been proven out by Google, Facebook, and Microsoft (see how Microsoft Docs is 100% Jamstack) - and is quickly becoming the new modernization push for everyone else.

Dan Levine at Accel predicts that a “designer and developer-first approach to the frontend experience is what will separate the winners from the losers in businesses across all major market categories” and says Vercel has the opportunity to be "like AWS for frontend developers."

Three Megatrends for Frontend Developer Teams

So what is the best developer experience, given the rise of Jamstack architecture and the general push to modernize the frontend with tools for faster iteration (delighting Javascript developers) and faster sites (delighting users)? These are three frontend developer experience megatrends that Vercel’s cloud platform for frontend teams is built around:

1. Components Are the Right Primitive for the Frontend

As the demand for richer frontend experiences has grown, the pressure is for teams to deliver component and design systems - coherent frontend experiences across every platform. Your button should look the same on web, mobile and desktop, and even your emails.

Not too long ago, people weren’t talking about components, they were talking about selector engines and the DOM. Then React (out of Facebook) introduced this primitive of the component. Other frameworks allow you to define components, but the movement that really pioneered this trend was React.

Years ago, Tim Neutkens, Naoyuki Kanezawa and I co-created Next.js because of our belief that React was so powerful it could become the full engine for the frontend. We started Next.js to provide some critical new functionality to make React consumable for everyone who wanted to do everything with React, instead of just one specific component. We saw a demand for the component-based React approach to drive the full frontend experience.

Indeed, frontend teams today are experiencing an urgency around this component-first paradigm in their development experience. That’s driving them towards React and separating, splitting out, and re-thinking the entire frontend experience. Vercel aims to be their one-stop shop — not just if they arrived at that point by using Next.js, but on any other component-based technology they may have adopted as their entry point.

It’s worth noting that today there are many other compelling component-based frameworks like Svelte and Vue that are taking an aggressive approach to problems like reducing the amount of Javascript that gets sent to the client side. These other frameworks are staking their ground in a number of interesting problem domains within the component-based ecosystem and the Web's own standardized efforts. Vercel as a platform wants to support them all!

2. Deploy Preview > Code Review. URLs as the Collaboration Primitive

The code push and review workflow is way too complicated. Too many cycles are spent configuring your own CI/CD pipeline, setting up Jenkins, finding your optimal vendor for CI, finding your optimal vendor for CDN, and so on. It’s also hard to get your CI/CD and your CDN to talk, and ensuring the Rube Goldberg apparatus stays coherent.

Vercel made a huge breakthrough with the realization that the preview deploy URL was a superior abstraction for frontend teams. We created a workflow for deploying / reviewing code in real-time — similar to a preview in a CMS, but we accomplish this by integrating into Git and deploying with every push.

Sounds like a pretty basic evolution, but it tears down so much complexity and makes frontend teams so much faster!

The most obvious immediate benefit of the URL for deploy review is making it much easier to collaborate across any organization, from marketing and sales to legal and engineering. Frontend teams can send these URLs over chat, instantly seeing what their teammates are developing and what the next big push will be.

When you have a deploy URL, it redefines not just testing, but the entire software development experience, from idea to conception to QA. Now you’re testing against the real thing. You get a working URL that can be shared and tested as a full working version. You eliminate the entire staging process.

Another benefit of Vercel’s deploy preview URL is that you get to test your program and site with all the bells and whistles required to run the site. Vercel gives you automatic SSL support — every one of your deploy URLs is https. We’ve already done the infrastructure heavy lifting to give you a secure environment empowered by Let’s Encrypt. That means not only is it secure to share these URLs, but you are testing your website in a real production environment, because of these security constraints. When you don’t have this capability, you frequently deploy your website only to find security warnings and a deprecated end user experience. Not only that, but today browsers are not even enabling modern features—like Bluetooth support, webcam and microphone—if the site isn’t SSL.

3. It’s All About Speed

If you’re creating a modern frontend nothing matters more than great site performance for the user. Google’s Lighthouse score, for example, is measuring your frontend performance across multiple dials that are going to greatly influence your SEO ranking.

Vercel operates a global edge network and gives you a perfect Lighthouse score out of the box every time you deploy. You don’t have to think about what’s going on with our CDN or the serverless magic behind the scenes — your URL gets deployed to every edge in the world, all your static assets get cached, compressed with the greatest codecs (like Brotli, which is built into Vercel out of the box), and optimized for every frontend performance metric you could care about but couldn’t test on your local computer.

Vercel not only focuses on the speed of your sites, it’s also built to make your team fast, by bringing the developer experience closer to the cloud, and making iteration easy and fast by default.

Onward and Upward

We are still in the early days of a new beginning for the Web. A Web that's faster for end-users and easier to build for developers.

I invite you to join us at Vercel to be a part of this exciting movement. Don't forget to follow us to stay on top of our journey, which is open at its heart, much like the platform it builds on.