如何與 Elon 的 Twitter 競爭，一個 DEV 視角

所以馬斯克收購了推特。這讓很多人感到不安（理所當然）並尋找替代方案。

雖然顯然不可能像一些開發人員聲稱的那樣在幾天/幾周內建立一個 twitter 克隆 ♂ 。。。

有一些方法可以獲得足夠的速度來

與 Elon 的 twitter 版本競爭。

我最近在“Fullstack Ghent”的第一次技術演講中深入研究了這一點，題為

“快速移動並構建事物”

。

由於缺少錄音，我在此推特執行緒中分享了演講中討論的技巧和竅門，並將在此處重新分享：

如何從一開始就以

一次性編寫的方式

為 iOS、Android 和 Web 構建

。（以及為什麼要這樣做）

如何

使用 Storybook 自動化您的文件

，以便您輕鬆擴充套件，專注於快速構建您的功能。

現在，為什麼會有這些特定的主題？好吧，讓我們繼續從應對現實世界問題的角度來看待這個問題。假設我們有一個應用程式：

應用創意 新的、更好的 Twitter

所以。您選擇與 Elon 競爭，後者正在以驚人的速度破壞他購買的平臺。然而，在它被毀之前，你需要提供足夠多的類似功能，而 twitter 有很多。

這意味著，從一開始，您就必須針對速度進行最佳化。玩

“功能追趕”

需要我們快速行動並構建東西。

另一件需要考慮的事情是 Twitter 的

影響力

。它

已經可用於 Web、iOS 和 Android

。如果你認真對待自己，你也需要為這些平臺啟動。

以“混合優先”

的方式構建成為必須。

為什麼？

好吧，如果你釋出了使用者真正想要使用的東西，但它只在網路上可用，你最終會得到如下評論：

雖然這可能只是 Elon 嘲弄你是他的新競爭對手，但真正感興趣的使用者會問完全相同的問題。

這應該不足為奇，因為使用者越來越喜歡在移動應用程式和網站中使用網際網路。

埃隆有一個觀點。

構建使用者想要的消費方式

考慮一下 Expo CEO @ccheever在 App。js conf 介紹中的 1 分鐘剪輯

統計資料不會說謊：

越來越多的移動裝置使用網際網路，

而不是桌面裝置

90% 的

移動網際網路使用來自應用程式

移動應用帶來的轉化率是瀏覽器

的 3 倍（

然而，我們仍然

專注於建立網站

如果您真的想根據使用者喜歡的消費方式進行構建，那麼應用程式 + Play 商店中的應用程式就是您的目標。

從Bothrs網站（我工作的地方）檢視此部分

Native 可以讓你走得更遠，但由於你想快速移動，構建你的功能兩次，一次使用 Swift 用於 iOS，一次用於 Android，效率不是很高。

如果你想快速構建，你需要的是與 Expo 原生反應。

您仍然可以從網路中受益

然而，我們的潛在使用者更有可能更喜歡移動裝置這一事實並不意味著我們仍然無法從網路中大量受益。

有機網頁搜尋

仍然是您的應用程式

免費流量的主要來源。

當用戶在尋找問題的答案時，他們往往會首先求助於谷歌。

更有理由出現在他們的搜尋結果中。

藉助@evanbacon的 Expo Router等新的 Expo 功能，您可以輕鬆地將使用者從 Web 引導到您的移動應用程式：

埃文培根@baconbrix此流程使使用者能夠透過網路搜尋和 SEO 發現您的應用程式（使用者以這種方式開始的可能性增加了 87%），然後迅速轉移到本機應用程式，那裡的銷售額增加了 3 倍。

同時使用相同的 React 程式碼庫和 fs 路由！

branch。io/glossary/smart…下午 16：12 - 2022 年 10 月 11 日

好的。我們堅信我們必須從一開始就跨平臺。但是我們如何開始使用 Expo 為 web/iOS/Android 構建呢？

如何開始混合優先？

有幾個選項：

網路優先，例如create-react-app，新增react-native到該設定

移動優先設定，react-native-web為 SSR 新增 + Next。js

從跨平臺模板開始

我不推薦前兩個選項的原因是因為它

很難弄清楚

。相信我，我知道。我一直在迭代這個“伺服器渲染 react-native”的概念，因為react-native-webNext。js 是一個東西。

讓我告訴你，通常至少需要幾天，有時甚至幾周才能達到你想要的初始設定。

此外，時間在流逝，如果您要嘗試擊敗 twitter，那麼您

不能在

這裡重新發明輪子。

請選擇 Expo + Next.js 模板。

一些榮譽獎是：

@nandorojo的Solito。dev（檢視他在 Next。js 和 App。js conf 上的演講）

Create-T3-Turbo by @t3dotgg（更自以為是，tRPC 用於 API 層）

這些解決方案非常可靠，您

可以

從其中任何一個開始您的“推特殺手”應用程式。

。。。但。。。

如何有效地擴充套件？

再說一遍：

我們在這裡與 twitter 競爭。

你需要更多的工程師。還有一堆。

您如何簡化他們之間的溝通，為新人入職的團隊增加一些效率？

本質上，我們想要：

分享一些可重複使用的積木的方法

記錄我們的工作方式，最好在 1 個空間內

不要花很多時間寫這些文件

在這裡，我們也試圖避免重新發明輪子。您不希望新開發人員進來，不瞭解發生了什麼，然後決定“嗯。我自己可能會做得更好。”

不。

如果你想走得快，永遠不要重新發明輪子。

故事書對此有一個很好的引用：

與其他模板一樣好，這是它們往往有點不足的地方。

文件對於您打算髮布的任何專案都是

必不可少的，即使它只是一個小團隊在做這件事。

但這裡也有一個榮譽獎。例如，Redwood

確實

隨 Storybook 一起提供。可悲的是，它是網路優先的，似乎沒有提供一種移動方式。

如果我們想與許多開發人員有效地開發“新鳥應用程式”，

您將需要另一個模板。

介紹。。。 以太空間

在 twitter 上尋找靈感時，你偶然發現了這個新的樣板，它是由你真正製作的：

Torr codinsonn。dev @codinsonn12/16 - 這就是為什麼我建立了自己的混合啟動器，稱為“Aetherspace”。有了它，您可以：

Start for Web/ iOS/ Android w。@expo + #nextjs 使用@storybookjs

自動記錄您的元件下午 15：38 - 2022 年 11 月 8 日

對這種自動生成故事書文件的工作原理感到好奇，您深入研究了快速入門以找出答案。

具有單一事實來源的自動 docgen

我們發現您可以透過匯出getDocumentationProps變數來選擇自動 docgen。這應該包含對你的道具的資料結構的描述，並且類似於 Next。js 如何讓你選擇使用例如伺服器端渲染getServerSideProps。

這是Aetherspace 文件中關於 storybook docgen 的部分：

您認為，

好吧，

所以我需要做的就是為元件提供與檔案相同的名稱，匯出getDocumentationProps和一些節點指令碼/自動化將拾取它並吐出一些 Storybook 檔案？這對我行得通！

不過，仍然會出現更多問題：

我應該將道具結構匯出為什麼格式？

我是否必須為我的型別重新定義這個結構？

我們繼續快速入門並找到問題的答案：

您意識到這是在資料結構方面不重複自己的好方法。您可以從中獲得型別安全（和編輯器提示）的實際“單一事實來源”，這非常簡潔

雖然現在這一切對您來說都有意義，但您很好奇這些 Storybook 檔案最終會以什麼方式呈現文件。所以你開啟 Aetherspace 的示例故事書來檢查一下：

您注意到，對於每個選擇加入此自動 docgen 的元件，getDocumentationProps在我們的故事書中它自己的標題下都有一個降價驅動部分：

該元件的

匯入路徑

+ 複製選項

預覽

元件的外觀

如何

在另一個 React 元件中使用該元件

所有

道具的表格，帶有描述、預設值和控制元件

您甚至可以在表格中

編輯這些控制元件並實時

檢視預覽和程式碼示例更新

，以測試每個道具最終會做什麼

這是以特定方式描述道具結構的大量價值。

最重要的是，該模板似乎

支援新增您自己的 Markdown

來記錄您的工作方式。這應該有助於我們的新開發人員在入職時瞭解可用的內容以及如何構建自己，而不是盲目。

用於 Web、iOS 和 Android 的 Expo + Next。js

處理完文件後，您還記得被承諾過 Expo + Next。js 設定。因此，您可以線上或透過克隆演示 儲存庫並執行來檢視模板附帶的示例頁面yarn dev：

aetherspace-green-stack-starter。vercel。app

要同時開啟 iOS 模擬器，請yarn dev：mobile改用（安裝了 XCode）

並排比較網路和移動示例，您會注意到它帶有一些非常基本的模板內容：

Image 由src指向公共資料夾中本地檔案的字串提供支援

堆疊每個部分的圖示單擊或點選它們以獲取更多資訊

指向我們要編輯哪個檔案以更改此螢幕的文字

確認我們已經啟動並運行了一些非常基本的 API

用於測試導航的內部連結 網頁上的網址，移動裝置上的堆疊

外部連結，例如Aetherspace 文件 新標籤或應用內瀏覽器

你決定接受文字中的建議，告訴我們在哪裡可以扔掉所有這些樣板並開始編寫我們自己的程式碼。

一次寫入使用者介面

是時候為我們的 twitter 替代方案編寫一些 UI。

在快速入門中，您閱讀了如何以一次寫入的方式執行此操作：

使用Text， View&之類的原語，Image您顯然可以為我們想要定位的所有平臺構建和設定 UI 樣式。您認為這是有道理的，因為所有應用程式和元件最終都是由它們組成的。

您確實想知道為什麼模板包含自己的原語。

react-native還沒有Text， View&Image原語？

當您考慮更長時間時，您會意識到如果這些原語針對這些平臺中的每一個進行了最佳化，那麼使用這些原語構建的任何東西也應該針對它們進行最佳化。

例如，要設定這些原語的樣式，您可以使用 tailwind，並且似乎已經進行了一些最佳化，以確保斷點和媒體查詢等內容也適用於所有環境。（雖然react-native-web不支援這個開箱即用，但是嘿，Aetherspace 有你覆蓋）

真正的原生移動端

可以肯定的是，您可以仔細檢視您的 react-native 包的實際外觀。

您發現的內容與這條推文非常相似：

埃文培根@baconbrix如果 React Native 不是原生的，那麼我不知道什麼是……2022 年 7 月 21 日下午 16：21

雖然以太空間原語似乎確實被翻譯react-native為（例如）引擎蓋下的本機 UIKit 層，而不是某種在下面渲染網站的 webview，但這並不意味著它們也針對 web 進行了最佳化，而 Elon 曾經可能打電話給我們：

SEO 的語義 HTML 和 Web 最佳化

作為文字平臺，我們正在與 Twitter 競爭，因此在搜尋引擎中排名靠前將是我們計劃在自己的遊戲中擊敗 Elon 的重要因素。

幸運的是，aetherspace 為您提供了一個圍繞@evanbacon的@expo/html-elementsaetherspace/html-elements的小包裝：

採取有效的措施並使其變得更好

這似乎是這個以太空間模板的共同主題。就像他們在引擎蓋下的Image原始使用一樣next/image，這必然會提高我們的 SEO 排名：

艾迪·奧斯馬尼@addyosmani自動化影象最佳化可能很棘手。這就是我們為 Next。js 構建影象元件的原因。它優化了載入、壓縮和響應能力。現在在 Next。js 12 中支援 AVIF！web。dev/影象元件。感謝@atcastle @karaforthewin！18：03 PM - 2021 年 10 月 26 日

這確實鞏固了我們在這裡也選擇帶有 Next。js 的模板的原因。與他們的團隊和 Chrome 開發團隊之間的密切合作可能會幫助我們在搜尋引擎排名方面領先一步。

伺服器渲染很好，但是後端的其餘部分呢？

一次寫入 API

認識到你是競爭對手，埃隆很快就向你投擲了另一個刺拳：

幸運的是，您還記得模板附帶的示例螢幕不僅有一個狀態徽章，還有兩個 API：

REST，由

Next.js API 路由提供支援

GraphQL，由

Apollo Server提供支援

單擊這些按鈕中的任何一個似乎都會開啟它們的端點。

對於 REST 而言，您最終會到達一個健康檢查端點，/api/health它會告訴您伺服器處於活動狀態並且正在執行：

{ “alive”： true， “kicking”： true }

當您檢查GraphQL 遊樂場時/api/graphql，您會看到完全相同的執行狀況檢查可用：

唔。這兩個 API 是否在下面使用相同的解析器？您能否一次編輯底層函式以（例如）回顯一些引數並一次性將這些 API 更改帶入 REST 和 GraphQL。。。？

再一次，快速入門為我們提供了答案：

回顧一下你剛剛學到的東西：

1。 定義輸入和輸出的資料結構

2。 您使用與atsdocgen 相同的模式構建器執行此操作

3。您可以在另一個（以及更多）模式中重用一個模式的屬性

4。 業務邏輯是一個常規的 Promise，用aetherResolver（）

5。 這將您的邏輯與您的引數和響應資料結構捆綁在一起

6。 圍繞該捆綁匯出一個幫助程式以建立 API 路由

7。 匯出graphQLResolver指向該包的指向以啟用 GraphQL

當您實現此回顯功能並在 GraphQL 遊樂場中試用時，您會注意到它現在還提示您為引數和響應定義的文件：

單一事實來源的又一次勝利。

在更短的時間內獲得更多價值

快速入門的最後一部分反映了“Aetherspace”模板為您提供的所有幫助：

將我們的假設情景快速推進幾個月，您已經成功地擴大了您的團隊。一些前推特工程師甚至加入了進來。透過文件激勵和分享知識，您的團隊很快就能夠重新建立許多核心 Twitter 功能，並準備推出第一個 MVP。

與此同時，在 Twitter 總部……

你看，埃隆犯了一個嚴重的錯誤。

考慮這張 Twitter 架構經過 10 年積極開發後的樣子：

也許解僱一半的開發人員並看著更多的人團結一致退出並不是 Elon 最聰明的事情。

最終，一些重要的事情發生了，我們都可以預料到會發生這種情況：

當這種情況發生時，你、你的團隊和你的替代者將準備好突襲併為那些逃離 Twitter 的人提供全新的體驗。

需要考慮的事項

避免我被推特禁止的強制性宣告：

因為知道何時不使用工具同樣重要：

如果您需要尖端的原生功能，例如構建下一個 Spotify，那麼這可能不適合您。React-native 需要一段時間才能擁有所有最新的原生功能，Expo 需要一些時間來掌握最新的 react-native 版本，……但是，這

可以

透過自定義原生程式碼來解決。

Aetherspace 是一個入門回購。除非您從頭開始重建它，否則嘗試將現有專案遷移到模板可能是個壞主意。

如果你不是 Typescript、Monorepos 甚至 React 的粉絲，這也不適合。。。。但是，如果您熟悉另一個基於 Web 的前端框架，例如 Vue 或 Svelte，請檢視 Ionic 和 Capacitor，而不是從一開始就跨平臺。

從業務角度來看，何時使用Aetherspace：

你想要兩全其美。無論您的使用者喜歡哪個平臺，您都在為兩者構建。

免費有機網路流量作為潛在客戶的主要來源。Next。js = 此處 SEO 排名中的一流。

輕鬆傳遞到移動裝置，發生更多轉化。

何時使用模板，從 DEV 的角度來看：

你已經熟悉 React，並且想跨平臺使用這些技能，這可能是一個很好的方法。

你想啟動你的下一個 Expo + Next。js 專案

您想自動化大部分文件或探索 Storybook 可以為您做什麼。

你喜歡單一的事實來源，並在短時間內提供大量價值。

連結和資源

［Github］ 以太空間/green-stack-starter-demo

［Github］ codinsonn/green-stack-demo

［故事書］ 模板快速入門

［故事書］ 以太空間文件

［作者］ 觀看我公開構建的社交連結

再次總結：

我做這個模仿的事情對嗎？