{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文首發於"},{"type":"link","attrs":{"href":"https://ourai.ws","title":null},"content":[{"type":"text","text":"歐雷流"}]},{"type":"text","text":"。由於我會時不時對文章進行補充、修正和潤色，爲了保證所看到的是最新版本，請閱讀"},{"type":"link","attrs":{"href":"https://ourai.ws/posts/architecture-of-frontend-application/","title":null},"content":[{"type":"text","text":"原文"}]},{"type":"text","text":"。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從事前端開發的你，不知有沒有被問過：「前端有架構嗎？」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"問你的人的身份，可能是你的 boss 或上司，可能是後端同事，也可能是前端同行；問你的人的目的，可能是刁難，可能是嘲諷，也可能是請教。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端開發"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"衆所周知，做前端開發所依賴的核心技術就是 HTML、CSS 和 JS，就像好基友一樣形影不離，我們將它們仨親切地並稱爲「三劍客」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過這二十多年，尤其是在 V8 引擎及 Node.js 出現之後，以「三劍客」爲基礎的衍生技術如雨後春筍般大量出現，前端及其關聯社區與前端工程師這個職業得到了空前的蓬勃發展，甚至讓很多人覺得一個前端工程師不僅僅可以做 web 前端開發，還可以寫後端，替代客戶端工程師——前端技術一統天下！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"工作內容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了做網頁，前端技術還能應用於命令行工具、客戶端應用、服務端應用、聊天機器人、爬蟲、IoT 等場景。只要腦洞足夠大，就不怕場景不夠多。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，絕大部分的前端工程師在工作中都會接觸到這些嗎？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"試想一下，自己的工作歷程是不是這樣的——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在一家 150 人規模以下的創業公司，可能業務還在摸索期，需要不斷地快速試錯以找到可以鉚足勁兒去發力的點。這時前端團隊也沒幾個人，可能就三五個吧，並且 leader 不是什麼大牛，也沒有一套方法論作爲團隊建設的指導，也許你是這個團隊裏實力最強的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時期所需要的就是能夠快速迭代產出成果，然後去驗證是否有效。根本不會給你時間去思考、規劃前端團隊的發展方向與基礎設施建設。如果特意花費時間去做這些，沒準兒公司會認爲你「不務正業」，到時 KPI 打個不及格。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經歷一段時間的焦頭爛額，在此期間工程目錄、代碼提交很可能都很隨意，並且沒有 code review。有空閒下來回頭一看，代碼一坨一坨跟那個什麼似的，實現與「優雅」這個詞絕緣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着業務的快速發展，項目、應用越來越多，團隊人數也越來越多，然而規範約定、基礎設施依然幾乎沒有。在業務線做開發的前端，也不太會想着整個團隊的工具統一，自己怎麼爽就怎麼來。最終導致一個團隊用了多種視圖層庫、多個組件庫，給收斂技術棧帶來很大阻礙。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"終於，公司的業務開始走上正軌，前端團隊也已經有二三十人了，胸懷大志、急他人所不急的你覺得再這樣野蠻生長下去是肯定不行的，靠堆人力去滿足快速發展且多變的業務需求是非常低效且低級的方式，必須要有技術上的基礎設施去支撐！即使公司層面不允許工作時間去做這種長遠看來對公司是百利而無一害的事情，也要去做，就業餘時間去做！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在所有基礎設施中，最初級、最能直接體現出開發提效成果的，就是高度抽象的 UI 框架。經過了不知多少個的「下班後」和「週末」，可算搞出了個能夠滿足一定業務場景的，在自己負責的幾個應用中初見成效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正當你爲自己所做的事情如期望中那樣得到了收益而感到欣慰時，突然有人冒出來質疑你所做的事情，並且有可能就是前端團隊中的。還好有其他人對你做的事表示認可，覺得有價值，讓你有動力在這件事上繼續下去。也許他是個後端開發，願意去用，或願意幫你在部門中推廣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你不斷地給 UI 框架增加新的功能，並想方設法去改造舊系統。在公司拓展業務所需要的新應用和以前老應用的維護中，你所做的東西確確實實節省了不少人力和資源。在有新的一批後端開發入職時，還會邀請你在新人培訓上給他們講解如何使用你所開發的 UI 框架輔助完成工作。這結結實實地打了當初質疑你的人的臉。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後臺系統頁面的常見模式就是供數據 CRUD 的列表頁、表單頁和詳情頁，當把支撐這些場景的交互和數據處理的核心邏輯都已經抽象了之後，你發現再怎麼完善 UI 框架也不會有像之前那樣比較明顯的效率提升，頂多是優化了交互和開發體驗，使功能更穩定而已。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你陷入了思考：「該做些什麼才能繼續爲開發提效呢？」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前做的 UI 框架，是對交互邏輯和數據邏輯進行了高度封裝，並提供了大量的 CSS class 和工具方法。雖然使在做頁面時可以少寫很多 CSS 和 JS 代碼，但對於 HTML 代碼來說並沒有減少。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"貌似找到了該突破的點，但要怎麼去做呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"左思右想，你突然靈光乍現，想起了自己曾經用過的基於「世界上最好的語言」開發的博客系統——WordPress。既然後臺系統頁面如此模式化，何不效仿 WordPress 將不易變的部分作爲「主題」，易變的部分作爲「文章」？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣做會帶來另外一個好處，就是將頁面代碼數據化了，有什麼純前端的問題修改就只是數據修正，而不用走冗長繁雜的運維發佈流程。日後如果公司有了自己的設計語言，再加入可視化搭建的特性，業務後臺系統的開發和維護前端就不太用參與了！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"理想情況下，產品經理用已有物料拖拖拽拽生成「原型」，該「原型」就是最終界面；業務功能確定後，後端開發定模型、寫接口，然後配置界面的數據展示。這樣一來，業務系統迭代的整個過程中，基本可以忽略前端這個角色了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼前端幹什麼呢？在這樣的協作模式下，前端的主要工作就是完善物料庫，並且讓產品經理和後端開發使用起來更方便。這種提效方式所帶來的收益，與開發 UI 框架相比，根本不是一個層次的，想想都覺得興奮！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，理想的豐滿遮不住現實的骨感。聽到你的想法的人，要麼質疑地問你一些問題，要麼嘴上表示支持心理暗地譏笑——不想些怎麼讓業務發展起來的事情，整天想什麼亂七八糟、花裏胡哨的東西！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你覺得心裏憋屈，認爲他們目光短淺，看不透本質。但爲了自己所認爲所堅信的「正確」，就算沒有人在心理上或行動上有所支持，也要朝着那個方向努力，嘗試做一把！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過一段時間的折騰，你開始感到有些做不下去了。一方面是因爲，雖然 Node.js 的出現讓前端開發人員也能夠開發服務端，但數據庫等服務端開發領域所需知識和思維方式匱乏，致使設計很不合理，寫出來的程序也不好；另一方面，公司層面不期望你投入較多的時間在短期內對業務發展沒有太大幫助的事情，就連 KPI 的指標設定都是很業務化的，等 KPI 評分時分數肯定很低。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這家公司裏，你也算是「老員工」了，對公司的品性也較爲深刻了解，自覺自己所認爲所堅信的「正確」在這裏得不到認真對待，至少很長一段時間之內是，你甚是失望，甚至絕望。其實，你早如此感覺，只是不願面對，總是希望自己的信念能夠多多少少影響到組織的認知，然而徒勞。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從 UI 框架到頁面數據化，在做這些事情時你都是獨自一人、孤軍奮戰，忽然心裏感到一絲悲涼。你最終黯然離開，想去大廠裏去看看，也許那裏能夠讓你實現技術理想。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當你真正進了大廠，而且是個業務部門時，你會發現做的事情和之前並沒太大差別，仍然是業務爲重。不同的是，可能你的領導和身邊的同事，對你的想法是真心認同的，他們會盡力支持你想做的事情，併爲你提供幫助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你幡然醒悟：無論在小廠、中廠還是大廠，只要是在業務部門，UI 框架、命令行工具基本就是在技術上所能做的極限，要想更上一層，就得在平臺部門。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"提效方式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面多次提到了「提效」這個詞，它是什麼？簡單粗暴地講，就是縮減業務需求的研發時間，這是所有開發人員所追求的。如果有可能，只需需求方自己動動手操作下就完成。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼該如何提效呢？我所能想到的，大概有："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於各視圖層庫的具有一致 API 的 UI 框架；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"能夠覆蓋整個研發流程的命令行工具；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將一份源碼編譯/轉譯成不同目標平臺代碼的工具；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面數據化並支持可視化搭建的平臺。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這幾點，每個展開往深了弄都是很有價值的事情，需要耗費很多心血，甚至可以作爲一個產品或開一家公司了！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端架構"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在繼續往下進行之前，先讓我們來稍微探討下「前端有架構嗎？」這個問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"有架構嗎？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「架構」是什麼？架構是一組抽象概念，像「人」，像「寵物」，讓你不必關注他是誰，它是什麼動物；架構是一張圖，讓你能夠清楚地瞭解不同事物是怎麼歸類的，它們之間是如何聯繫到一塊，如何進行協作的；架構是指導思想，告訴你什麼該做、什麼不該做，指引你把代碼寫到正確的地方；架構是一套方法論，讓你知道在哪些場景下遇到哪類問題該怎樣去解決……"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"引用維基百科的話——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Software architecture refers to the fundamental structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations. The architecture of a software system is a metaphor, analogous to the architecture of a building. It functions as a blueprint for the system and the developing project, laying out the tasks necessary to be executed by the design teams."}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於上述描述，如果前端開發只是單純的靜態頁面，即只有 HTML 和 CSS，或 JS 只作爲添加特效使用，不操作數據，沒有通信，那麼可以說「前端沒架構可言」。但，現在從事前端開發的人，有幾個人的工作是這樣的呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我想，從事前端開發的你的工作不是做頁面，而是應用開發吧？那麼，架構就是必不可少的了。你也許會疑惑：「我連這聽起來逼格很高的詞具體是指啥都不知道，怎麼可能會有？！」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之所以無所察覺，是因爲你沒有刻意去思考並進行架構設計。想想看，你是不符合以下情形："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根據社區裏總結的最佳實踐，或者與他人交流時受到啓發，在開發時將代碼邏輯拆分成不同模塊，並將幾個具備一些相同特徵的模塊放到一個目錄下；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用 Umi 或 Vue 全家桶開發單頁面應用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這兩種情況都可以說是使用了分層架構模式，前者是你無意間進行的，後者是人家幫你做好了的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"好的架構？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然「前端有架構嗎？」這個問題的答案是肯定的，「什麼樣的架構是好架構？」就成爲了下一個問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在說「什麼樣的架構是好架構？」之前，先插入另外一個問題，有興趣的話可以先行思考下：一個足夠複雜的前端框架，與瀏覽器、操作系統之間有什麼相同點？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"迴歸正題。我認爲一個好的架構應該是這樣的——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"幫公司更輕鬆地賺錢。這點是最重要的，對於一個企業來說，如果軟件不能讓自己賺錢，爲什麼要用它？幫助公司賺錢的方式無非就兩種，「開源節流」。「開源」比較難，需要了解行業並洞悉商機，對人本身資質的要求太高；「節流」相對就簡單了，減少研發投入，即上文所說的「提效」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二重要的，就是「穩定」。一個差不離兒的架構，至少得能支撐業務發展三五年吧？雖然公司未必能活那麼久。這就需要在做架構設計時能夠面向未來：一是業務的未來，二是技術的未來。面向未來的架構必須擴展性好、足夠靈活，這樣纔有可能應對各種業務場景及突如其來的業務變化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上是我覺得一個好的架構的兩個核心標準，每個點都會牽扯到很多事情，就不在此多說。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在對一個系統進行架構設計時，會用到多種架構模式，如：分層模式、管道和過濾器模式、微內核模式、微服務模式、MVC/MVVM 模式等。在實現時又會用到多種設計模式、數據結構與算法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，要學習並掌握它們，然後根據（潛在）業務目標與（潛在）應用場景去選擇最適合的運用到架構設計和框架實現當中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"核心原則"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在做前端架構時，我認爲該遵守幾個基本原則——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一個是「以不變爲中心」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"軟件開發的本質就是操作數據，放在 web 開發的場景，後端是存儲、獲取數據，前端是收集、展示數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數據在前、後端流轉時，數據的基本形態不會變：基本類型、對象、列表；數據的傳輸協議也不會變：HTTP、WebSocket。在前端開發中，離它們越遠、離 GUI 越近的東西就越容易變。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，首先要做的就是梳理出哪些東西是不易變化的，哪些是很容易就變了的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二個是「各層皆可替換」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將根據易變性梳理出的模塊按職責進行分層，定義好層與層之間的對接協議（接口）。除了因自身進化需要，對接協議是基本不會變的，也不應去改變。以此爲前提，各層實現可在業務需要或技術升級時進行替換。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三個是「視圖層儘可能薄」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"視圖層的職責是展示數據，理應只有交互邏輯，而大多數前端在寫 UI 組件時會摻雜較多的業務邏輯，使視圖層變得很是厚重、臃腫。這樣一來，業務邏輯不利於複用，也會增加視圖層技術的遷移成本。應將業務邏輯進行抽象，並提取到領域層，讓視圖層保持純粹。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於視圖層的易變、多樣，並想讓它儘可能薄，最好有什麼方式能夠增加它訪問邏輯層的成本，就像前端只能通過網絡請求訪問後端一樣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"忽然想到在做業務開發時有遇到過這種架構，你有印象嗎？沒錯，就是微信小程序！微信小程序的架構是將邏輯層與視圖層放到不同的線程中運行，從而做到了天然隔離，它們之間交流的媒介只有「數據」："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d5/d53e30db5332cc37123ee4fb53c5bcd4.png","alt":null,"title":"圖片來自微信小程序開發文檔","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"微信小程序是建立在客戶端應用提供一些原生能力基礎之上的，那麼在瀏覽器中能夠達到相同或類似的效果嗎？當然可以！瀏覽器提供原生能力，視圖層運行在 iframe 中，邏輯層則在 web worker 裏："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/41/41d6634628a15033cbc3a3dc498c4bc5.png","alt":null,"title":"圖片來自《小程序底層實現原理及一些思考（2）》","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://github.com/berwin/Blog/issues/49","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"覺不覺得這很像「微前端」架構——據我理解，簡單來說就是一種能夠讓不同技術棧的模塊同時運行在瀏覽器中，它們可以是組件也可以是應用，並且相互之間能夠通信、協同工作的架構模式。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於這種架構，可以開發出一個類似於瀏覽器、操作系統的「超級 app」，成爲平臺級應用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你在平臺部門，上文說的也許就是你要面對的事情。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"開源項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前段時間，某廠的前端團隊開源了一套組件庫，當時我在想：如果做不到比 Ant Design 優秀，開源個組件庫的意義在哪？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"出自螞蟻金服的 Ant Design，無論從設計（視覺設計、代碼設計，各種設計）還是從實現來看都已經很優秀了，API 設計十分考究，國內很難有出其右的作品。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果說在某個視圖層技術或某個端沒有其對應的實現，與其自己從頭造輪子，還不如實現一個在那個視圖層技術或那個端的 Ant Design 版本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我一直認爲經過幾十年的發展，GUI 的交互形式已經相對固定，不太會有什麼突破，如果已經存在了一套很是優秀的交互模式庫，後來者若是沒有什麼能夠與其抗爭的亮點，在競爭上無疑是以卵擊石。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"直到聽到叔叔說："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開放的意義並不是代碼，而是有自身對交互的理解，如果做不到這點，那開放組件庫就沒有意義。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一開始沒怎麼理解這句話的內涵，之後的幾天時不時會想到這句話，琢磨其中的含義。之後忽然明白了——這不就跟寫文章一樣嗎？！寫作難道是爲了讓別人看到自己的文字？當然不是！是想用文字記錄並表達自己對這個世界、人、事、物的理解。難道已經有人寫過相同或類似觀點的文章，且寫得十分好，自己就不能寫了嗎？當然不是！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原來如此。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實任何帶有創作性質的行爲都是一樣的，都是通過某個途徑來表達自己的思想，寫文章是，寫代碼是，繪畫是，做菜也是。正如荒木老師的書上所說——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4d/4da5a734894e6b42f4b80caaf8db9919.jpeg","alt":null,"title":"《荒木飛呂彥的漫畫術》封面","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最近，我要開始做一個「大」項目。實際是前幾年就想做的，只不過當時沒想好到底要做些什麼，但核心理念是一致的——反混沌！連項目名都起好了，就叫「Anti-chaos」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼要做這麼一個項目？還不是因爲前端圈太混亂？雖然與前些年相比稍微好了那麼一點，但跟 Java 圈相比，亂太多了。我希望「Anti-chaos」能成爲盤古之斧，劈開混沌，清者爲天，濁者爲地。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼「Anti-chaos」要做些什麼？就如剛纔所說，這是一個「大」項目，因爲它基本要覆蓋當前前端開發的方方面面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我並不是想開發一個大而全的框架，而是要遵照「反混沌」的思想拆分成多個小項目，每個都是解決某個固定場景的問題，它們可以組合並擴展成適合某個團隊、企業的解決方案，從而使前端開發乃至前端圈變得更加有序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我也是基於類似的想法，想讓「前端工程師」這個職業相關的一些事情變得更加標準、有序，然而這件事操作起來實在是太困難了，比安靜地寫代碼難上不知道多少倍，所以目前處於擱置狀態。等「Anti-chaos」有所成效之後，再看情況是否重啓那個項目吧。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"思想總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲前端工程師，在業務部門所能接觸到的技術以及眼界的提高是有限的，一是在做業務時用不上什麼太前沿的技術，二是業務部門的性質不會允許也沒有資源讓你做太多深入的思考和嘗試。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要想真正地提升自己的技術能力和眼界，最好還是去平臺部門吧！剛開始時也許會覺得很吃力，這是因爲你爲了適應環境而在進行思維模式的轉變。等你適應了，你就會發覺自己在思考問題時與後端越來越接近，也會越來越覺得無論做前端還是做後端，所需要的知識和能力是差不多的，只是要解決的問題不同。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個人的水平不能用年齡和年限去衡量，要看他有多少經歷，都經歷過什麼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文主要闡述了我最近一段時間對前端開發、前端架構以及開源項目等方面的思考及現階段的理解，不一定對，但是我目前的見解。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正所謂——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"參禪之初，看山是山，看水是水；禪有悟時，看山不是山，看水不是水；禪中徹悟，看山仍然是山，看水仍然是水。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上。"}]}]}
前端有架構嗎？
{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文首發於"},{"type":"link","attrs":{"href":"https://ourai.ws","title":null},"content":[{"type":"text","text":"歐雷流"}]},{"type":"text","text":"。由於我會時不時對文章進行補充、修正和潤色，爲了保證所看到的是最新版本，請閱讀"},{"type":"link","attrs":{"href":"https://ourai.ws/posts/architecture-of-frontend-application/","title":null},"content":[{"type":"text","text":"原文"}]},{"type":"text","text":"。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從事前端開發的你，不知有沒有被問過：「前端有架構嗎？」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"問你的人的身份，可能是你的 boss 或上司，可能是後端同事，也可能是前端同行；問你的人的目的，可能是刁難，可能是嘲諷，也可能是請教。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端開發"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"衆所周知，做前端開發所依賴的核心技術就是 HTML、CSS 和 JS，就像好基友一樣形影不離，我們將它們仨親切地並稱爲「三劍客」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過這二十多年，尤其是在 V8 引擎及 Node.js 出現之後，以「三劍客」爲基礎的衍生技術如雨後春筍般大量出現，前端及其關聯社區與前端工程師這個職業得到了空前的蓬勃發展，甚至讓很多人覺得一個前端工程師不僅僅可以做 web 前端開發，還可以寫後端，替代客戶端工程師——前端技術一統天下！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"工作內容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了做網頁，前端技術還能應用於命令行工具、客戶端應用、服務端應用、聊天機器人、爬蟲、IoT 等場景。只要腦洞足夠大，就不怕場景不夠多。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，絕大部分的前端工程師在工作中都會接觸到這些嗎？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"試想一下，自己的工作歷程是不是這樣的——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在一家 150 人規模以下的創業公司，可能業務還在摸索期，需要不斷地快速試錯以找到可以鉚足勁兒去發力的點。這時前端團隊也沒幾個人，可能就三五個吧，並且 leader 不是什麼大牛，也沒有一套方法論作爲團隊建設的指導，也許你是這個團隊裏實力最強的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時期所需要的就是能夠快速迭代產出成果，然後去驗證是否有效。根本不會給你時間去思考、規劃前端團隊的發展方向與基礎設施建設。如果特意花費時間去做這些，沒準兒公司會認爲你「不務正業」，到時 KPI 打個不及格。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經歷一段時間的焦頭爛額，在此期間工程目錄、代碼提交很可能都很隨意，並且沒有 code review。有空閒下來回頭一看，代碼一坨一坨跟那個什麼似的，實現與「優雅」這個詞絕緣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着業務的快速發展，項目、應用越來越多，團隊人數也越來越多，然而規範約定、基礎設施依然幾乎沒有。在業務線做開發的前端，也不太會想着整個團隊的工具統一，自己怎麼爽就怎麼來。最終導致一個團隊用了多種視圖層庫、多個組件庫，給收斂技術棧帶來很大阻礙。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"終於，公司的業務開始走上正軌，前端團隊也已經有二三十人了，胸懷大志、急他人所不急的你覺得再這樣野蠻生長下去是肯定不行的，靠堆人力去滿足快速發展且多變的業務需求是非常低效且低級的方式，必須要有技術上的基礎設施去支撐！即使公司層面不允許工作時間去做這種長遠看來對公司是百利而無一害的事情，也要去做，就業餘時間去做！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在所有基礎設施中，最初級、最能直接體現出開發提效成果的，就是高度抽象的 UI 框架。經過了不知多少個的「下班後」和「週末」，可算搞出了個能夠滿足一定業務場景的，在自己負責的幾個應用中初見成效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正當你爲自己所做的事情如期望中那樣得到了收益而感到欣慰時，突然有人冒出來質疑你所做的事情，並且有可能就是前端團隊中的。還好有其他人對你做的事表示認可，覺得有價值，讓你有動力在這件事上繼續下去。也許他是個後端開發，願意去用，或願意幫你在部門中推廣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你不斷地給 UI 框架增加新的功能，並想方設法去改造舊系統。在公司拓展業務所需要的新應用和以前老應用的維護中，你所做的東西確確實實節省了不少人力和資源。在有新的一批後端開發入職時，還會邀請你在新人培訓上給他們講解如何使用你所開發的 UI 框架輔助完成工作。這結結實實地打了當初質疑你的人的臉。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後臺系統頁面的常見模式就是供數據 CRUD 的列表頁、表單頁和詳情頁，當把支撐這些場景的交互和數據處理的核心邏輯都已經抽象了之後，你發現再怎麼完善 UI 框架也不會有像之前那樣比較明顯的效率提升，頂多是優化了交互和開發體驗，使功能更穩定而已。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你陷入了思考：「該做些什麼才能繼續爲開發提效呢？」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前做的 UI 框架，是對交互邏輯和數據邏輯進行了高度封裝，並提供了大量的 CSS class 和工具方法。雖然使在做頁面時可以少寫很多 CSS 和 JS 代碼，但對於 HTML 代碼來說並沒有減少。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"貌似找到了該突破的點，但要怎麼去做呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"左思右想，你突然靈光乍現，想起了自己曾經用過的基於「世界上最好的語言」開發的博客系統——WordPress。既然後臺系統頁面如此模式化，何不效仿 WordPress 將不易變的部分作爲「主題」，易變的部分作爲「文章」？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣做會帶來另外一個好處，就是將頁面代碼數據化了，有什麼純前端的問題修改就只是數據修正，而不用走冗長繁雜的運維發佈流程。日後如果公司有了自己的設計語言，再加入可視化搭建的特性，業務後臺系統的開發和維護前端就不太用參與了！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"理想情況下，產品經理用已有物料拖拖拽拽生成「原型」，該「原型」就是最終界面；業務功能確定後，後端開發定模型、寫接口，然後配置界面的數據展示。這樣一來，業務系統迭代的整個過程中，基本可以忽略前端這個角色了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼前端幹什麼呢？在這樣的協作模式下，前端的主要工作就是完善物料庫，並且讓產品經理和後端開發使用起來更方便。這種提效方式所帶來的收益，與開發 UI 框架相比，根本不是一個層次的，想想都覺得興奮！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，理想的豐滿遮不住現實的骨感。聽到你的想法的人，要麼質疑地問你一些問題，要麼嘴上表示支持心理暗地譏笑——不想些怎麼讓業務發展起來的事情，整天想什麼亂七八糟、花裏胡哨的東西！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你覺得心裏憋屈，認爲他們目光短淺，看不透本質。但爲了自己所認爲所堅信的「正確」，就算沒有人在心理上或行動上有所支持，也要朝着那個方向努力，嘗試做一把！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過一段時間的折騰，你開始感到有些做不下去了。一方面是因爲，雖然 Node.js 的出現讓前端開發人員也能夠開發服務端，但數據庫等服務端開發領域所需知識和思維方式匱乏，致使設計很不合理，寫出來的程序也不好；另一方面，公司層面不期望你投入較多的時間在短期內對業務發展沒有太大幫助的事情，就連 KPI 的指標設定都是很業務化的，等 KPI 評分時分數肯定很低。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這家公司裏，你也算是「老員工」了，對公司的品性也較爲深刻了解，自覺自己所認爲所堅信的「正確」在這裏得不到認真對待，至少很長一段時間之內是，你甚是失望，甚至絕望。其實，你早如此感覺，只是不願面對，總是希望自己的信念能夠多多少少影響到組織的認知，然而徒勞。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從 UI 框架到頁面數據化，在做這些事情時你都是獨自一人、孤軍奮戰，忽然心裏感到一絲悲涼。你最終黯然離開，想去大廠裏去看看，也許那裏能夠讓你實現技術理想。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當你真正進了大廠，而且是個業務部門時，你會發現做的事情和之前並沒太大差別，仍然是業務爲重。不同的是，可能你的領導和身邊的同事，對你的想法是真心認同的，他們會盡力支持你想做的事情，併爲你提供幫助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你幡然醒悟：無論在小廠、中廠還是大廠，只要是在業務部門，UI 框架、命令行工具基本就是在技術上所能做的極限，要想更上一層，就得在平臺部門。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"提效方式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面多次提到了「提效」這個詞，它是什麼？簡單粗暴地講，就是縮減業務需求的研發時間，這是所有開發人員所追求的。如果有可能，只需需求方自己動動手操作下就完成。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼該如何提效呢？我所能想到的，大概有："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於各視圖層庫的具有一致 API 的 UI 框架；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"能夠覆蓋整個研發流程的命令行工具；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將一份源碼編譯/轉譯成不同目標平臺代碼的工具；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頁面數據化並支持可視化搭建的平臺。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這幾點，每個展開往深了弄都是很有價值的事情，需要耗費很多心血，甚至可以作爲一個產品或開一家公司了！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端架構"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在繼續往下進行之前，先讓我們來稍微探討下「前端有架構嗎？」這個問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"有架構嗎？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「架構」是什麼？架構是一組抽象概念，像「人」，像「寵物」，讓你不必關注他是誰，它是什麼動物；架構是一張圖，讓你能夠清楚地瞭解不同事物是怎麼歸類的，它們之間是如何聯繫到一塊，如何進行協作的；架構是指導思想，告訴你什麼該做、什麼不該做，指引你把代碼寫到正確的地方；架構是一套方法論，讓你知道在哪些場景下遇到哪類問題該怎樣去解決……"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"引用維基百科的話——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Software architecture refers to the fundamental structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations. The architecture of a software system is a metaphor, analogous to the architecture of a building. It functions as a blueprint for the system and the developing project, laying out the tasks necessary to be executed by the design teams."}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於上述描述，如果前端開發只是單純的靜態頁面，即只有 HTML 和 CSS，或 JS 只作爲添加特效使用，不操作數據，沒有通信，那麼可以說「前端沒架構可言」。但，現在從事前端開發的人，有幾個人的工作是這樣的呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我想，從事前端開發的你的工作不是做頁面，而是應用開發吧？那麼，架構就是必不可少的了。你也許會疑惑：「我連這聽起來逼格很高的詞具體是指啥都不知道，怎麼可能會有？！」"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之所以無所察覺，是因爲你沒有刻意去思考並進行架構設計。想想看，你是不符合以下情形："}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根據社區裏總結的最佳實踐，或者與他人交流時受到啓發，在開發時將代碼邏輯拆分成不同模塊，並將幾個具備一些相同特徵的模塊放到一個目錄下；"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用 Umi 或 Vue 全家桶開發單頁面應用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這兩種情況都可以說是使用了分層架構模式，前者是你無意間進行的，後者是人家幫你做好了的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"好的架構？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然「前端有架構嗎？」這個問題的答案是肯定的，「什麼樣的架構是好架構？」就成爲了下一個問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在說「什麼樣的架構是好架構？」之前，先插入另外一個問題，有興趣的話可以先行思考下：一個足夠複雜的前端框架，與瀏覽器、操作系統之間有什麼相同點？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"迴歸正題。我認爲一個好的架構應該是這樣的——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"幫公司更輕鬆地賺錢。這點是最重要的，對於一個企業來說，如果軟件不能讓自己賺錢，爲什麼要用它？幫助公司賺錢的方式無非就兩種，「開源節流」。「開源」比較難，需要了解行業並洞悉商機，對人本身資質的要求太高；「節流」相對就簡單了，減少研發投入，即上文所說的「提效」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二重要的，就是「穩定」。一個差不離兒的架構，至少得能支撐業務發展三五年吧？雖然公司未必能活那麼久。這就需要在做架構設計時能夠面向未來：一是業務的未來，二是技術的未來。面向未來的架構必須擴展性好、足夠靈活，這樣纔有可能應對各種業務場景及突如其來的業務變化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上是我覺得一個好的架構的兩個核心標準，每個點都會牽扯到很多事情，就不在此多說。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在對一個系統進行架構設計時，會用到多種架構模式，如：分層模式、管道和過濾器模式、微內核模式、微服務模式、MVC/MVVM 模式等。在實現時又會用到多種設計模式、數據結構與算法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，要學習並掌握它們，然後根據（潛在）業務目標與（潛在）應用場景去選擇最適合的運用到架構設計和框架實現當中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"核心原則"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在做前端架構時，我認爲該遵守幾個基本原則——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一個是「以不變爲中心」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"軟件開發的本質就是操作數據，放在 web 開發的場景，後端是存儲、獲取數據，前端是收集、展示數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數據在前、後端流轉時，數據的基本形態不會變：基本類型、對象、列表；數據的傳輸協議也不會變：HTTP、WebSocket。在前端開發中，離它們越遠、離 GUI 越近的東西就越容易變。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，首先要做的就是梳理出哪些東西是不易變化的，哪些是很容易就變了的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二個是「各層皆可替換」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將根據易變性梳理出的模塊按職責進行分層，定義好層與層之間的對接協議（接口）。除了因自身進化需要，對接協議是基本不會變的，也不應去改變。以此爲前提，各層實現可在業務需要或技術升級時進行替換。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三個是「視圖層儘可能薄」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"視圖層的職責是展示數據，理應只有交互邏輯，而大多數前端在寫 UI 組件時會摻雜較多的業務邏輯，使視圖層變得很是厚重、臃腫。這樣一來，業務邏輯不利於複用，也會增加視圖層技術的遷移成本。應將業務邏輯進行抽象，並提取到領域層，讓視圖層保持純粹。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於視圖層的易變、多樣，並想讓它儘可能薄，最好有什麼方式能夠增加它訪問邏輯層的成本，就像前端只能通過網絡請求訪問後端一樣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"忽然想到在做業務開發時有遇到過這種架構，你有印象嗎？沒錯，就是微信小程序！微信小程序的架構是將邏輯層與視圖層放到不同的線程中運行，從而做到了天然隔離，它們之間交流的媒介只有「數據」："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d5/d53e30db5332cc37123ee4fb53c5bcd4.png","alt":null,"title":"圖片來自微信小程序開發文檔","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"微信小程序是建立在客戶端應用提供一些原生能力基礎之上的，那麼在瀏覽器中能夠達到相同或類似的效果嗎？當然可以！瀏覽器提供原生能力，視圖層運行在 iframe 中，邏輯層則在 web worker 裏："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/41/41d6634628a15033cbc3a3dc498c4bc5.png","alt":null,"title":"圖片來自《小程序底層實現原理及一些思考（2）》","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"https://github.com/berwin/Blog/issues/49","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"覺不覺得這很像「微前端」架構——據我理解，簡單來說就是一種能夠讓不同技術棧的模塊同時運行在瀏覽器中，它們可以是組件也可以是應用，並且相互之間能夠通信、協同工作的架構模式。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於這種架構，可以開發出一個類似於瀏覽器、操作系統的「超級 app」，成爲平臺級應用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你在平臺部門，上文說的也許就是你要面對的事情。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"開源項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前段時間，某廠的前端團隊開源了一套組件庫，當時我在想：如果做不到比 Ant Design 優秀，開源個組件庫的意義在哪？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"出自螞蟻金服的 Ant Design，無論從設計（視覺設計、代碼設計，各種設計）還是從實現來看都已經很優秀了，API 設計十分考究，國內很難有出其右的作品。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果說在某個視圖層技術或某個端沒有其對應的實現，與其自己從頭造輪子，還不如實現一個在那個視圖層技術或那個端的 Ant Design 版本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我一直認爲經過幾十年的發展，GUI 的交互形式已經相對固定，不太會有什麼突破，如果已經存在了一套很是優秀的交互模式庫，後來者若是沒有什麼能夠與其抗爭的亮點，在競爭上無疑是以卵擊石。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"直到聽到叔叔說："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開放的意義並不是代碼，而是有自身對交互的理解，如果做不到這點，那開放組件庫就沒有意義。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一開始沒怎麼理解這句話的內涵，之後的幾天時不時會想到這句話，琢磨其中的含義。之後忽然明白了——這不就跟寫文章一樣嗎？！寫作難道是爲了讓別人看到自己的文字？當然不是！是想用文字記錄並表達自己對這個世界、人、事、物的理解。難道已經有人寫過相同或類似觀點的文章，且寫得十分好，自己就不能寫了嗎？當然不是！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原來如此。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實任何帶有創作性質的行爲都是一樣的，都是通過某個途徑來表達自己的思想，寫文章是，寫代碼是，繪畫是，做菜也是。正如荒木老師的書上所說——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4d/4da5a734894e6b42f4b80caaf8db9919.jpeg","alt":null,"title":"《荒木飛呂彥的漫畫術》封面","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最近，我要開始做一個「大」項目。實際是前幾年就想做的，只不過當時沒想好到底要做些什麼，但核心理念是一致的——反混沌！連項目名都起好了，就叫「Anti-chaos」。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼要做這麼一個項目？還不是因爲前端圈太混亂？雖然與前些年相比稍微好了那麼一點，但跟 Java 圈相比，亂太多了。我希望「Anti-chaos」能成爲盤古之斧，劈開混沌，清者爲天，濁者爲地。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼「Anti-chaos」要做些什麼？就如剛纔所說，這是一個「大」項目，因爲它基本要覆蓋當前前端開發的方方面面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我並不是想開發一個大而全的框架，而是要遵照「反混沌」的思想拆分成多個小項目，每個都是解決某個固定場景的問題，它們可以組合並擴展成適合某個團隊、企業的解決方案，從而使前端開發乃至前端圈變得更加有序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前我也是基於類似的想法，想讓「前端工程師」這個職業相關的一些事情變得更加標準、有序，然而這件事操作起來實在是太困難了，比安靜地寫代碼難上不知道多少倍，所以目前處於擱置狀態。等「Anti-chaos」有所成效之後，再看情況是否重啓那個項目吧。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"思想總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲前端工程師，在業務部門所能接觸到的技術以及眼界的提高是有限的，一是在做業務時用不上什麼太前沿的技術，二是業務部門的性質不會允許也沒有資源讓你做太多深入的思考和嘗試。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要想真正地提升自己的技術能力和眼界，最好還是去平臺部門吧！剛開始時也許會覺得很吃力，這是因爲你爲了適應環境而在進行思維模式的轉變。等你適應了，你就會發覺自己在思考問題時與後端越來越接近，也會越來越覺得無論做前端還是做後端，所需要的知識和能力是差不多的，只是要解決的問題不同。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個人的水平不能用年齡和年限去衡量，要看他有多少經歷，都經歷過什麼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文主要闡述了我最近一段時間對前端開發、前端架構以及開源項目等方面的思考及現階段的理解，不一定對，但是我目前的見解。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正所謂——"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"參禪之初，看山是山，看水是水；禪有悟時，看山不是山，看水不是水；禪中徹悟，看山仍然是山，看水仍然是水。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上。"}]}]}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章