新WordPress.com背后的故事
英文原文:The Story Behind the New WordPress.com
譯者:杰微刊-Leo Xu
一年半以前,我們對使用 WordPress 構建網站所需要采用的技術和開發流程進行大范圍的重新思考。
現有的代碼庫和工作流程我們已經玩兒得很轉了,但是 10 多年的歷史遺留已經開始嚴重阻礙我們著手去構建用戶所期望擁有的現代、快速并且對移動端友好的體驗。看起來似乎開發者和設計師之間的協作還沒有發揮出全部的潛力。所以我們曾經這樣問自己:
“如果現在來構建它,那 WordPress.com 將會是什么樣子的呢?”
新的開始:原型和迭代
我們以前問過自己這個問題,而且公正的分享了對那些并沒有產生什么有用改變的舉措的意見。回首過往,我們能指出自己最大的一些錯誤:一開始我們的視野就是一片泥濘,還要嘗試去解決一個并沒有定義好的問題。這些想法確實幫助了我們改變做法。
Calypso 最開始的原型界面之一,列出了你所有的 WordPress 站點。
Calypso,它是新的 WordPress 管理員界面項目的代號,它有一個同以往不一樣的起步。為了呈現一個清晰的視覺效果,我們構架了頗具抱負性的 HTML/CSS 設計原型——它所基于的是定義清晰的產品目標——使我們可以想象得到新的 WordPress.com 在完成時看起來會是什么樣子。我們已經向用戶推出過一部分東西了,所以知道它應該會隨著時間而發生些改變,但其視覺效果已經提供了所有 Automatic 旨在實現的東西,并且為此感到興奮。
Calypso 設計原型一就位,開發伊始的那幾天就都是要做一些諸如使用哪一種編程語言、要不要使用某種框架,還有就是會怎樣去擴展 API 這樣的艱難決定。Automattic 剛剛已經收購了 Cloudup,它是使用 JavaScript 構建的一個 API 驅動的文件共享工具。Cloudup 的團隊向我們展示了一條堅實、可維護、可擴展的道路,這條道路將使 WordPress.com 完全基于 JavaScript 并且由 API 驅動。
由于 WordPress 是一個由 PHP 驅動的應用程序,所以我們在公司層面的開發技術設定歷來都是重 PHP,還有一些高級的 JavaScript 技術。那時的這種現狀使得 Calypso 在其開發的最開始的六個月令公司其他的工程師和設計師有點望而生畏——我們正在構建的是一個很少有人一開始就可以摸清門道的東西。
即使是 Calypso 項目核心的團隊成員也得克服一些我們令其產生的畏難心理。因為我們誰都不是強大的 JavaScript 開發者。不過隨著時間一天天的過去,經驗會慢慢積累,我們犯下了錯誤就會審查這些錯誤,然后修復它們,并且得到了教訓。我們一把這個項目玩兒轉起來了,就 可以更好的給其它的工程師做示范,并且在全公司分享我們所學到的知識。
其中一個很大的變化發生于我們在構建一個早期的設計原型時:我們使用 GitHub 改善了協作能力。Calypso 設計原型的工作是由 GitHub 上一小撮設計師之間的分工協作來完成的。盡管我們中的許多人都長期在個人項目中使用過 GitHub,但對于內部項目而言它相對還是新的事物,因為在內部項目中歷來是將 Trac 用于大部分的項目管理和 Bug 跟蹤工作。GitHub 的使用讓我們發現內部的分工協作可以如何變得更加容易,還有就是如何讓個人的工作在完成時能有更強的意見反饋。
同行代碼審查沒有顯示任何放緩的跡象,而且現在已經被廣泛的接受。
鑒于 GitHub 在原型設計階段的表現如此出色,所以我們在 Calypso 所有的開發工作中都采用了它,這使我們能利用其 Pull Request(PR)系統來進行同行代碼審查,并且建立起我們自己定制的基于 GitHub 的工作流程。代碼申請對于許多開發者來說是新事物——Automattic 的傳統中,在 VIP 團隊的客戶端網站日常代碼審查之外,我們是沒有系統性的同行代碼審查系統的。代碼審查,即使它在最開始助長了在 Calypso 的開始階段人們的畏難情緒,但它還是極大的提升了我們的代碼庫的質量,并且幫助了每個人提高他們的 JavaScript 技術水平。
一個 7 人的團隊在 Calypso 上所做的初始工作迅速地擴大到了 10 個人的團隊,然后是 14 個人,接著就有 20 個 Automattic 員工積極地為 Calypso 代碼庫工作。在第一個由 Calypso 驅動的功能特性在 WordPress.com 上推出的兩個月之后,我們就有了來自于 5 個不同團隊的 40 位貢獻者工作于 Calypso 項目。我們在“盡早發布、常發布”的 Automattic 思維模式下將項目迭代到了下一年,在 WordPress.com 上推出了 40 個由 Calypso 驅動的各種功能特性,個人貢獻者超過了 100 個人。
到了 2015 年中期, Calypso 的代碼庫的形態好到足夠能被應用到瀏覽器之外的領域。因為 Calypso 完完全全就是一些 JavaScript、HTML 還有 CSS,所以利用一種輕量級的 node.js 服務端設置就能在終端設備上本地運行。利用一種被叫做 Electron 技術,我們構建了原生的桌面客戶端,在它上面運行的是捆綁到應用程序中的相同的代碼。我們開始了打造首個運行在原生 Mac 上的桌面應用的工作,目前已經可以使用了,而且接下來就繼續著手即將要推出的 Windows 和 Linux 應用的工作。看到這些應用的一起到來,并且能在內部將它們利用起來,才真正證明了一切我們所花在構建 Calypso 代碼庫上的辛勤工作。
開放源代碼的 Calypso, WordPress.com 背后的驅動力
一個目前在建的我們的 Calypso 開發者的好去處,還有就是 IO 團隊,是他們構建了 Calypso 編輯器,這是他們在 10 月份全公司大聚會上的合影。
在過去的一年半時間中,Calypso 已經歷經從一個想法變成有抱負性的一個原型設計,再成為一個功能完整的產品構建,反復迭代,并且為數以百萬計的 WordPress.com 用戶所使用。 在內部,這段時間已經成為了一個發生過重大變革和成長的時期。我們已經借助 GitHub 擁抱了跨團隊的協作方式,并且通過 PR 審查系統實現了同行代碼審查,擺脫了只有幾個不錯的 JavaScript 開發者在公司的現狀,并且在日常中看到了設計師和開發者之間展開令人難以置信的協作。
方便向你展示老的和新版 WordPress.com 之間差異的表格。 (pdf,img)
對于能將所有投入的辛勤工作開放源代碼,我們感到很榮幸,并且會繼續以開放的方式在產品上進行構建。你可以在我們的 CEO Matt Mullenweg 的網站上了解到更多有關于開放 Calypso 的開發工作的東西。
在接下來的幾個月內,我們將發布更多深入探討 Calypso 背后所采用的技術和工作流程的帖子: 我們是如何管理自己獨立的 GitHub 工作流程的,我們如何利用其它的像 React 這樣的流行的開源庫,以及像 Flux 這樣的概念,還有就是我們捆綁和推出原生應用客戶端的相關經驗。你可以通過這個博客來留意這些東西(在右下角),同時你也可以檢出我們的這個活躍的 Calypso 庫,因為我們將會繼續在它上面進行迭代。