墨西哥支付方式：是什么?
StackOverflow 2023 編程語言統計
2. 實現門檻低，適合模板化：
前端工程師的準入門檻比較低，而且其對視覺交互、 SEO 都有直接影響，會和用戶留存這樣的業務數據緊密掛鉤。同時，與視覺元素的強相關使人類可以更快速給出 human feedback，就像 MidJourney 收集用戶反饋比 ChatGPT 要容易很多。因此和設計場景的 Canva 類似，web 開發有很多可以復用的代碼框架和網站搭建的模板可用。
相比之下后端開發的難度更大：簡單的后端開發與運維系統已經有云廠商產品化和 commoditize 了，而復雜高階的后端開發則涉及每家公司的核心業務邏輯， 自建是更普遍的選擇。
3. Gen AI 時代會帶來 web application 的文藝復興：
互聯網有著更深的知識密度，更開放的分享調用生態，web 的地位在歐美市場尤其高。這也是為什么如今 AI 瀏覽器、AI 搜索重新成為一個創業的熱點，web 生態為?AI agent?提供了學習知識并進行 grounding 的環境。
當前 ChatGPT 這樣 Chatbot 形式還比較基礎，未來的 AI agent 會需要響應快的動態 UI 來給用戶實時展現 agent 行為的關鍵過程，未來前端技術棧和 AI 前沿產品形態將一起持續演進。
前端開發的歷史始于 1990 年代早期，當時的網頁主要由 HTML 構成。這些網頁是靜態的，用戶交互性極低，HTML 為網頁提供了骨架。
但只有一個骨架是不夠的，CSS 和 JavaScript 的引入使得網頁變得更加動態和富有交互性：
? CSS 允許開發者將網頁表現層（如字體、顏色、布局等）與網頁內容層（HTML 語言負責）分離。
? JavaScript 則比 HTML 和 CSS 出現得更晚一些，它為網頁添加了交互性，使其能夠響應用戶操作。
同時，隨著 web 應用的復雜度增加，開始有了前端和后端的清晰分工：前端開發則專注于用戶界面和用戶體驗，負責將后端返回的數據以視覺友好的方式展示給用戶；后端開發主要關注服務器、數據庫和應用程序邏輯，負責處理來自前端的請求，并返回所需的數據。這樣的分工下前端開發者可以更專注地投入到用戶界面和交互體驗的優化中，不必同時擔心服務器的性能和負載。
隨著 JavaScript 成為 web 開發中最關鍵的編程語言，web application 的復雜度還在提高，僅使用原生 JavaScript 來管理大型項目的用戶界面會變得非常困難。這就是為什么需要像 React、Vue 這樣的庫（library）。它們就像是搭積木的模具，有了這些模具，開發者可以更快速、更標準化地搭建出高性能的應用程序。
Javascript 已經成為 98% web application 使用的語言
其中 React 是由 Facebook 團隊開發的開源 JavaScript library，用于構建用戶界面，特別是單頁應用程序。它的出現極大地改變了前端開發的方式，使得開發復雜的動態網頁應用變得更加簡單和高效。它很好地提高了 Javascript 代碼的可維護性和重用性，成為 Javascript 語言使用最多的框架。
React 成為最火的 Javascript 庫
而 React 也不能滿足所有現在網頁開發需求，在其之上有進一步優化的框架。其中 Next.js 是最近幾年增長最快的框架。它的開發者就是 Vercel CEO Guillermo Rauch，一個傳奇的開源開發者。Next.js 在 React 框架中的下載量遠超其他框架，并且仍在穩步增長：
圖中的 Gatsby 和 Remix 均為 Next 的直接競爭對手。Gatsby 是 Vercel 競對 Netlify 收購的框架，從數據看這次收購并不成功
Next.js 的流行背后是其技術選型更適合現代 web 開發需求：
1. 支持服務端渲染(SSR)和靜態站點生成(SSG)，實現更快的內容加載和更好的 SEO；
2. 內置功能豐富，如自動代碼拆分、強大的路由功能和圖像優化，簡化了復雜應用的開發；
3. 優先考慮開發者體驗，提供直觀高效的開發流程，如 TypeScript 支持和代碼熱重載；
總結一下，JavaScript、React 和 Next.js 之間的關系可以概括為：JavaScript 是構建 Web 應用的基礎；React 在此基礎上提供了一種高效的方式來構建用戶界面；而 Next.js 則在 React 的基礎上增加了服務器渲染、路由處理等功能，使得構建現代 Web 應用變得更加高效和強大。
自 ChatGPT 問世開始，大家對下一代人機交互的形式有很多想象，尤其是 Language UI 和 Graphic UI 結合成為了焦點話題。實現交互創新的前置條件是什么呢？
在之前的 Agent 綜述文章中，我們提到過隨著 coding AI 的發展，軟件開發將進入一個新的自適應生產階段（adaptive software）。就像 3D 打印技術一樣，軟件將根據用戶的具體需求自動生成相應的UI組件。
而打造 Next.js 的 Vercel 團隊打造了 V0：第一個能生成 production-ready 水平前端代碼的生成模型。
Vercel V0 是一個代碼生成模型，能讓用戶生成網頁 demo 和代碼，代碼能直接夠部署成為一個基礎版網頁，也在其產品 demo 上進行進一步修改。每次生成之后，v0 類似 MidJourney 會給 3 個版本 AI 生成的 UI，可以選擇一個進行深入編輯，甚至粘貼到自己原本的項目中進一步開發。
例如我可以先要求 V0 生成一個 Saas dashboard 布局作為底稿（V0 名字的來源，version 0），再在其基礎上進行交互。demo 中的每一個組件都是可以單獨點擊并進行修改的，例如，下圖中可以讓 V0 將 logo 改成藍色，模型就會直接進行對應組件。
V0 的使用體驗充分展現了前端代碼模型的可編碼性，這帶來了網頁生成遠大于圖片生成的可控性。其中的每一個組件都對應著具體的幾行代碼，如果我們要求對某個組件進行修改的話，這幾行代碼就可以重新生成，并用其他代碼作為上下文，保證新生成代碼有著很高的可用性，能直接融入原本的代碼。
這些能力已經對所有開發者開放，且已經被不少新團隊用于自己的產品開發中：Ingo 使用 v0 構建了他們的簡歷生成器產品的第一個版本。Braintrust ，一個新的 AI 平臺，使用 v0 構建了其定價頁面。以下 gallery 中都是用戶使用 prompt 對應生成的網頁和前端組件：
對比現在的大多 coding model 不是在做 Github Copilot 那樣的代碼自動補全，就是仍在不可用的 demo 階段。Vercel V0 在可用性上比其他模型強很多，其團隊對前端代碼的深刻理解是其中的重要原因：
? V0 模型的訓練數據有三部分：團隊自己積累寫的 code、開源前端代碼和 AI 合成數據。每次生成之后，v0 類似 MidJourney 會給3個版本 AI 生成的 UI，可以形成優秀的 RLHF 反饋閉環。
? Vercel 作為用戶做網頁開發的 go-to 選項，有足夠多的用戶web開發數據積累，有高質量模板和代碼庫。而且團隊自己本身是設計 Next.js framework出身，有 know-how 定義什么是從語言設計出發的高質量代碼。
v0 的野心是下一代用戶界面的起點。Vercel 團隊藍圖中的下一步有：支持自定義設計、多模態識別將圖像轉化為代碼，以及更強的代碼安全和訪問控制。這些路線圖很清晰，會有效地提升開發者體驗。
AI SDK 是 Vercel 為前端開發者設計的 Model Router。它提供了一個抽象層，讓開發者可以用自己熟悉的前端語言來處理數據，而不需要關心各類 LLM api 實現細節。
他們 SDK 第一批合作者接入了 Perplexity、11 Labs、Pinecone、Together 等公司。如果開發者要在 next.js 框架中使用 Perplexity API ，只需要一小段代碼就可以融入前端中，輸入一些基礎的參數就可以產生出高質量的 streaming response 交互。這樣的開發方式對于前端程序員而言更 intuitive：
而 AI SDK 3.0 是其最近的一版更新，接入了 Vercel V0 使用戶可以輕松地做出帶有 Generative UI 的產品。 Vercel 在這里給出了一個股票咨詢助手的案例，我們以這個 demo 為例：那么當我們要求它給出蘋果最近的股價并進行購買時，它就能直接給出對應的 UI，給我們展示蘋果股價，并生成實時購買功能。這是一種優雅的方式實現 Language UI + Graphic UI 的結合。
目前這個產品還在 demo 階段，而且 demo 本身展現的能力過于高頻，因為股票交易是一個非常常見可復用的操作。但隨著這一能力后續可用之后，可以滿足很多用戶使用 app 時的長尾需求，能夠在一個應用中生成出新定義的小程序來滿足一些 ad-hoc 需求。
這一技術有兩個關鍵要點：
? API 設計時要以發揮 LLM 強大的 function calling 能力為出發點，讓用戶盡可能感受到 LLM 的全面性和智能度。
? 發揮 React Server Components 對每個模塊組件進行渲染的能力，使用戶進行顆粒度更細、性能更優的交互。
為達到這些目標 AI SDK 中引入了兩個獨立的狀態：AI State 和 UI State：
AI State 是一個 JSON 格式的文字，包含了大型語言模型（LLM）需要讀取的所有上下文。對于聊天應用來說，AI State 通常存儲用戶和助手之間的文本會話歷史。還可以用來存儲每條消息的創建時間等其他 metadata。AI State 可以在服務器和客戶端上被訪問和修改。
UI State 是應用程序用來展示 UI 的狀態，它完全在客戶端（類似于 React的 useState）。它可以保留 LLM 返回的數據和 UI 元素。這個狀態可以是任何內容，但不能在服務器上訪問。
從技術文檔來看，AI SDK 的設計有效兼顧了應用開發者的性能需求和用戶的數據安全需求。期待這一能力為開發者使用之后涌現出更多的 use case，來驗證這一開發者接口的 PMF。
上一部分介紹了 Vercel 團隊最新在 Gen AI 前沿的實踐，那么他們在 Next.js 之后，Generative UI 之前所做的產品究竟是什么呢？
Vercel 把自己的主產品定義為 frontend cloud，是一個易用、且 scalable 的 web application 部署平臺。其高性能建立在幾個重要的技術趨勢之上：JAMstack、邊緣計算和 serverless 設計。尤其 Serverless 設計允許開發者在無需管理底層服務器的情況下運行和構建 Web 應用，幫助用戶能夠省去很多冗雜的 Infra 部署工作。
Vercel 產品根據前端工作流可以拆解為 4 個關鍵部分：(1) develop，(2) preview，(3) ship，(4) analytics。
??Develop:?Vercel 為開發者提供了一個快速將 web application 實現的 workflow。讓開發者可以從 Github 等源頭導入前端項目模板，并集成 MongoDB 等外部數據源。在代碼開發完成后，Vercel 還提供了從緩存到 serverless functions 的端到端測試。
??Preview:?這一部分產品可以類比為前端開發的 Figma。設計、開發和運維團隊可以擺脫復雜的測試管線，在每次部署之前協作測試他們對網站的更改。Vercel 會自動生成一個可分享的實時預覽站點，允許在網頁 demo 在上線前進行測試，團隊間互相 comment 給反饋。
? Ship: Vercel 基于對 Next.js 的原生支持， serverless 和 edge computing 的能力為開發者提供快捷的部署、穩定的性能，和對 SEO 的支持。同時他們允許在全球范圍內部署網站，并在300毫秒內進行修改更新。這項功能直接和開發者/付費的 value prop 相關，后續會在 business model 處介紹。
??Analytics:?2022年10月，Vercel 宣布 收購了 Splitbee，這是一個分析和運營工具，可以了解用戶的網站體驗。該產品和團隊被納入 Vercel 現有的分析產品。由于 Vercel 負責管理網站，因此他們旗下的分析平臺不需要第三方腳本或 cookie 跟蹤。
以上這些產品讓 Vercel 成為市場上開發者體驗最好的 web 部署平臺。不過前面提到過，web 市場集中度不高，所以 Vercel 在存量客戶中并沒有因為優秀的開發者體驗，而成為大幅領先的第一名，而是小幅領先 Netlify、云廠商等公司。
因此抓住增量機會就至關重要。在 ChatGPT 發布一個月之后，Vercel 就開始成為 AI-native 應用開發的布道者，通過博客和模板的形式引導大家最快地使用 Vercel 來快速迭代開發 AI 應用。
而在今年初，Vercel 產品定位進一步清晰：最好的 AI 產品部署平臺。由于他們出色的產品開發體驗，已經有很多公司使用 Next.js + Vercel 開發了自己的主力 AI 應用：
? Scale AI 強調通過使用 Vercel 和 Next.js 讓他們在團隊中只有三個設計師的情況下很快地迭代和部署了自己的 Generative data engine；
? Anthropic 工程師用 Vercel + Next.js 開發了 Claude AI 的 web 產品，團隊中有人是第一次開發 Next.js 代碼，表示其易上手且開發體驗很棒；
? Runway 稱贊 Vercel 讓團隊加快整個產品開發周期。比如團隊成員稱遷移到 Vercel 后，DNS 構建從 Netlify + GitHub Pages 的 5-8 分鐘縮短到 Vercel 的 40 秒；
? Jasper 用 Next.js 框架 + Vercel 部署，尤其強調網頁中的 content management (posts, tweets, short stories 等)體驗很好。
此外，Replicate、發布 Devin 的 Cognition 等一眾 AI-native 公司都使用 Vercel 開發部署了自己的主力產品。我們有理由相信隨著模型升級、應用爆發，Vercel 能成為 web development 中重要的受益者。
Business Model
Vercel 主產品采用 freemium 的商業模式，他們有三個主要的定價梯度:
1. Hobby: 這個方案用于吸引客戶來試用平臺，其 offering 對搭建比較少小流量網站的個人開發者也夠用，有一定的公共品屬性；
2. Pro: prosumer 用戶每月20美元的訂閱服務，這是他們對中小開發者的核心付費產品，按 seat 收費；
3. Enterprise: 這是為大型企業提供的定制解決方案和定價，具體價格不公開，但他們為企業提供更多網絡安全功能和更快的速度。根據客戶訪談，企業客戶平均一年的費用在十萬美金級別，最大的可以到百萬美金量級。
V0 向用戶全量開放后成為了單獨定價的模型產品，其定價和主產品基本一致：
70% 的 Vercel 用戶是 Next.js 用戶。當更多開發者使用 Next.js 時，Vercel 的增長也會加速。從 2020 年 4 月到 2023 年 5 月，由 Next.js 驅動的網站數量已經從 3.5 萬個增長到 400 萬個，包括 Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, Starbucks 等公司的網站。
優秀的 traction 讓 Vercel 的商業化收入一直在高速增長的狀態：2020 年成立的第一年，ARR 為 1mil USD；21 年達到 5 mil USD，22 年達到 25mil USD。在這一年他們以 100 倍 ARR，也就是 $2.5b 的估值進行了一輪融資。而在 2023 年，他們還是以 100%+ YoY 的高速增長，創始人在一次 23 年 6 月的訪談中公開提到他們的 ARR 已經達到 $ 50+ mil。
在整個 web 市場中，33% 的流量集中在最頂尖公司產品上：Google、Meta、Amazon 等，33% 的流量集中在第 10 名-第 10000 名的腰部 web 產品，最后 33% 則是獨立開發者開發的網站。
其中前十名的公司有自己非常成熟的 tech stack，完全自研；最后這部分用戶很多對開發的了解甚少，可能會選擇 Shopify、Squarespace 這樣的網頁模板產品。而 Vercel 目前客戶的基本盤主要來自腰部的 web developer。
Vercel 主要的客戶目前可以分為幾類：
? 業余愛好者：免費用戶，托管單一網站，未來可能會將其帶到公司使用。
? 小型初創公司及中型公司（認為這是 customer base 的一大部分；這些公司可能擁有有限的開發團隊，或只有市場營銷部門）。
? 電商團隊這樣需要 SEO 帶來轉化，付費意愿強的客戶在 Vercel 付費客戶中占比比較大。
創業公司中 Netlify 是 Vercel 最直接的競爭對手，這是一家 2014 年成立的公司。2021年，Vercel 通過 D 輪融資籌集了 1.5 億美元，估值達到 25 億美元；同時，Netlify 通過 D 輪融資籌集了 1.05 億美元，估值達到 20 億美元，a16z 是他們的主要投資人之一，據了解，公司最新的 ARR 已經超過了 30 mil USD。
Netlify 提供的也是一個 Jamstack 開發平臺，包括 Web 應用程序和動態網站的構建、部署和無服務器后端服務。但他們的產品沒有 Vercel 那么 Next.js 友好，同時對 Gatsby 的收購也并不成功（伴隨著 Gatsby 的 traction 逐漸下滑）。他們團隊對 Gen AI 這一波 catch up 的速度就要慢不少。
而大公司中，云廠商都有 Web Development 產品。AWS Amplify 是云廠商中口碑最好的，不過用戶的反映普遍是定價比較有優勢，但開發者體驗仍不如 Vercel。此外大家使用 ChatGPT、Perplexity 等產品時經常遇到的 Cloudflare，也從其云安全產品延伸出了 Cloudflare 這個網頁開發工具，和云廠商類似的是用戶選擇的原因是與原本選用方案的耦合度比較深，不需要上手新平臺。?
介紹到這里，Vercel 團隊展現出了幾個重要的特點：
? 開發 Next.js 時對前端技術的前瞻性，引領最前沿趨勢；
? 對 Gen AI 前沿趨勢敏銳且活躍，用新產品線抓住增量用戶；
? 產品中對開發者體驗的極致優化，帶來優秀的用戶反饋；
? 從開源到商業化的高速增長。
這背后離不開 Vercel CEO Guillermo Rauch 對產品 PMF 的持續追求、優秀的技術品味和極強的執行力。
Guillermo Rauch 在阿根廷布宜諾斯艾利斯比較落后的郊區出生長大。父親對計算機的興趣讓 Guillermo 在 7 歲獲得了自己的第一臺電腦，從小種下了對編程、對開源熱愛的種子。第一個任務便是父親讓他將 Windows 的系統替換成 Linux，之后便一發不可收拾地在開源社區自學編程和英語，十一二歲在開源社區成為 celebrity。后來有陌生人在網上對 Guillermo 說你可以用這方面的 expertise 建立事業，Facebook 也拋出橄欖枝想要招聘他，讓他意識到自己的 passion 和事業成就是完全能夠自洽的，更是從高中輟學到美國工作、創業。
這種特殊的成長經歷讓他天然更在意商業化和業務規模。相比很多技術小天才類型的 founder 喜歡做開源“玩具”，Guillermo 是希望讓產品有更高的商業認可度的。
他創辦的第一家公司 CloudUp 是一個云端文件存儲與分享平臺，CloudUp 其實就已經有了一部分 Vercel 的雛形，這款產品在當時的 killing feature 是拖放文件夾即可迅速創建超鏈接，便于在線分享文件和協作，若文件為 HTML 格式，還能獲得高性能的靜態網站托管。這滿足了 WordPress 在實時協作的需求，于是Guillermo 將 CloudUp 賣給 WordPress 實現了第一次成功退出、并加入了 WordPress，Guillermo 在 WordPress 的兩年間學到很多關于如何平衡開源項目和大規模商業運作的經驗。
Guillermo 來到灣區的時間讓他恰好成為 AWS 的第一批用戶，他由此認識到了云服務價值，于此同時也認為其易用性很糟糕。加上 React 越來越流行，但同樣難以快速上手，且開發者需要自己管理和維護服務器，他作為一個經驗豐富的開發者在開發網站時也深受困擾。在市場需求端，Guillermo 也由此想到那些正在經歷數字化轉型的傳統零售在從線下實體轉型中如果要和 Amazon、 “.com” 的競爭必然面臨更大的挑戰。Next.js 和 ZEIT 由此應運而生，在 2020 年 A 輪融資時，公司更名為 Vercel 。
Vercel 和 Next.js 成功的背后是設計原則和工程實踐的精細打磨。在正式創立 Vercel 之前，Guillermo 列出了 Web 應用開發的七項原則，底層的 philosophy 是必須 at big scale, at global scale，并且這七項原則的背后是 Guillermo 反向工程 Google、Amazon 等全球最大的網站的結果，這就為 Next.js 設定了一個很高的標準。而在發布 Next.js 之后，最重要的權衡就是如何兼具開發者體驗與企業級應用的性能和可靠性。作為 dev tool，Next.js 必須提供出色的開發者體驗；而作為支撐企業級應用的基礎設施，它又必須兼顧業務上的高 ROI 和終端用戶體驗。這在當時被許多人認為是不可調和的 tradeoff。而 Guillermo 堅持在這個 spectrum 中兩頭都要抓，為其產品后來獲得企業和開發者認同奠定基礎。
在從 Next.js 開源框架專做商業化產品之后，Vercel 的高速增長獲得了投資人的追捧，兩年間融資 3 億美金左右：
這一波 Gen AI 的趨勢中，Guillermo 又對 Software 2.0 做了許多預言。他認為，隨著 AI 技術從 paper-first 漸漸變為 product-first，軟件開發也將從 backend-first 轉為 frontend-first。我們非常認同這個判斷，且期待看到這波機會中 Vercel 在這個千億美金的市場中將領先的開發者 mindshare 轉化為持續的產品和商業化增長。
文章轉自微信公眾號@海外獨角獸
