微前端、策略和藍莓鬆餅
作為 Culture Amp 龐大且不斷增長的前端工程實踐的主管，我在過去一年中面臨的最大挑戰是傳達一個連貫的策略，讓這 60 多名工程師能夠理解並支持。
解決方案是藍莓鬆餅 . 🫐
設置餐桌
我在 Culture Amp 工作了近七年，因為我相信讓公司能夠以人為本，讓他們的文化成為競爭優勢，這會改變世界，讓我引以為豪。
我們構建了一組基於 Web 的產品，我們將它們統稱為員工體驗平台。這是一個不斷增長的 React 應用程序集合，用於 1) 收集員工反饋以提高敬業度，2) 運行公平公正的績效評估，以及 3) 培養經理和個人貢獻者最重要的工作場所技能。
當我在 2015 年加入 Culture Amp 時，我是第 26 號員工，我們只有一個工程團隊，我們還沒有找到第 200 個客戶。
七年後，全球已有超過 5,000 家公司使用我們的產品，這些產品由十幾個不同團隊的 100 多名工程師構建和維護。
可以肯定地說，我們今天的前端工程師同時構建了許多 UI——新的和舊的、常規的和新穎的。我們最大的挑戰由此而來。為了讓它順利進行（我的意思是我們以經濟實惠、可持續的方式構建用戶界面 (UI)，並生產出我們客戶喜愛的產品），我們必須讓這些工程師能夠在不同的代碼庫中工作，但要抓住我們必須的每一個機會 利用這些代碼庫的一致性 .
我說代碼庫了嗎？我是說藍莓鬆餅。
購物清單
為了闡明實踐的策略，我必須從我們所處的位置開始。五年來，Culture Amp 擁有一群致力於前端工程的健康和可擴展性的工程師。以下是他們迄今為止所構建的：
早在 2017 年，我們就從我們的設計系統開始：Kaizen。一組設計指南、原子值（設計令牌）和 50 多個可重複使用的組件（還有更多！），Kaizen 定義了我們產品的一致外觀和感覺。總有更多工作要做，但 Kaizen 已經在我們今天所有的 UI 代碼庫中得到廣泛和成功的使用。
幾年後的 2019 年，Culture Amp 的 UI 標准開發、持續集成和無服務器基礎設施部署工具被稱為前端操作。在這個階段它仍然是一個內部項目，所以我無法鏈接到它，但這裡是它的一些功能：
那麼缺少什麼？
Culture Amp 已決定將使用 TypeScript 編寫的 React 作為其所有 UI 的標準平台。但是 React 只是一個視圖框架，它給工程師在構建 Web 應用程序時留下了很多問題需要解決。路由、數據獲取、狀態管理、表單驗證……每個 Culture Amp UI 至少還有十幾個東西需要，但 React 沒有提供。讓每個團隊為每個項目重新發明這些輪子並不是很好地利用他們的時間。簡而言之，我們需要一個功能更全面的 React 應用程序框架。
同時，作為練習，我們需要一起學習和精通一些東西。不是因為我們不擅長它們，而是因為 Web 應用程序工程的藝術一直在進步，我們需要跟上。測試自動化、Web 可訪問性、應用程序安全、動畫和其他用戶體驗改進、性能優化以及降低運行時錯誤率。
所有這些以及更多我寫的都是關於在未來幾個月和幾年中我們將作為一種實踐改進的許多方法的全面願景。都在裡面。它會提供我的工程師同事渴望的清晰度嗎？
Culture Amp 的價值觀之一是“通過反饋更快地學習”，因此在 2021 年 7 月左右，我與公司的幾位前端工程師和工程負責人分享了我的最新草案，並詢問了他們的想法。
我得到了很多很好的反饋，如果人們好奇的話，我可能會在另一篇關於編寫戰略文檔的文章中分享其中的大部分。但是，在與我的經理 Michael Ridgway（謝謝，Mike！）的一次談話中，我最大的收穫是我完全錯過了這一點：一個令人難忘的概念，將整個事情整合在一起。
我需要讓讀者記住一個想法 ，並隨身攜帶到他們的工作中。
一個美味的比喻
所以是的，藍莓鬆餅。
引用我的最終戰略文件：
改善成分是藍莓 因為它們是點綴在我們“鬆餅”表面的五顏六色的小點心。當您決定烤藍莓鬆餅時，肯定 沒有時間種植藍莓灌木並等待它生長，因此您需要可靠的優質藍莓來源。同樣，沒有人願意為他們的新應用從頭開始構建日期選擇器。
前端操作就是紙杯 因為它是一種容易被忽視的傳送裝置，它可以加快鬆餅從烤箱到嘴巴的旅程。大多數 UI 工程師 即使他們想，麵包師也無法從頭開始製作——它甚至不是食物！
應用程序框架是擊球手 因為它不是點 鬆餅——讓你流口水的是藍莓，而不是蛋糕——但它把所有東西都粘在一起了。沒有它，你只會有一堆藍莓。一碗麵糊做一整批鬆餅：你不會為每個鬆餅做新的麵糊！
鬆餅本身代表應用程序 因為這是我們最終要提供的產品。沒有兩個是完全一樣的，但一致的成分可以確保每個鬆餅都能提供相同的品質，儘管它是獨一無二的。
這個單一的比喻抓住了我們尋求實現的最重要的事情（讓我們的前端應用程序更相似，從架構到像素），已經進展順利的兩個方面（UI 組件和無服務器架構），以及一個缺失的部分我們需要每個人都團結起來創建（一個共享的應用程序框架）。
自從我發布了這個策略並在領導和實踐會議上展示了它，更不用說無數次工程介紹了，它被稱為“藍莓鬆餅文件”，工程師們已經開始使用速記，比如“這個項目會為我們的項目做出貢獻嗎？”鬆餅麵糊'?”這比什麼都重要，是告訴我策略已經落地的信號，並且對我編寫它的工程師來說很有意義。
地板上的碎屑
作為實踐，我們也在努力實現的所有其他事情呢：測試自動化和可訪問性、性能和錯誤率？他們是為了一個令人滿意的隱喻而犧牲的嗎？
好吧，這就是戰略的意義所在：它不僅僅是您想要的一切的清單。它需要縮小焦點，提升幾件事甚至超過 所有其他的也很理想的東西。
除了藍莓鬆餅所涵蓋的最重要的優先事項外，該文件還列出了五個“平衡點”：
對於其中的每一個，它都描述了當前的情況、已經為推進它所做的努力，以及對工程師充滿熱情如何有助於推動它向前發展的建議。
60 多名工程師可以完成很多工作，我相信我們將在來年在這五個領域取得顯著進展。但沒有一個比完善我們的藍莓鬆餅食譜更重要。
路上的鬆餅
如果您碰巧正在為您的編寫策略，我是說您應該接受同樣的鬆餅比喻嗎？ 工程實踐？一點也不！
但是，如果您需要將許多線索整合成令人難忘的事物，請務必尋找那個統一的隱喻。玩得開心。您的團隊中有濃厚的咖啡文化嗎？也許您正在嘗試製作完美的瑪奇朵！比如冰淇淋？誰沒有！？ Magnum 會如何評價您的架構？
甚至可能還有一些與食物無關的隱喻需要考慮；我現在只是有點餓。老實說，我從巧克力曲奇開始，直到我意識到這些曲奇不是在一盤相同的杯子中烘烤的！
就像很多事情一樣，這是一個創造文化的機會。玩得開心！
正如您可能想像的那樣，我們在 Culture Amp 經常想到這種事情。如果您喜歡從公司文化的角度思考工程問題，請申請！
與傑森·奧尼爾的對話
Culture Amp 前端運營團隊的交付負責人 Jason O'Neil 與我坐下來簡單聊了聊他的職業生涯，以及它與這篇博文的主題有何交叉：
感謝 Aneta Voborilova 提供封面圖片。
