如何看待 WordPress 的新項目 Calypso 將改用 Node.js + React 重寫？

01-09

Dance to Calypso

Today we』re announcing something brand new, a new approach to WordPress, and open sourcing the code behind it. The project, codenamed Calypso, is the culmination of more than 20 months of work by dozens of the most talented engineers and designers I』ve had the pleasure of working with (127 contributors with over 26,000 commits!).
Calypso is…

Incredibly fast. It』ll charm you.

Written purely in JavaScript, leveraging libraries like Node and React.

100% API-powered. Those APIs are open, and now available to every developer in the world.

A great place to read, allowing you to follow sites across the web (even if they』re not using WordPress).

Social, with stats, likes, and notifications baked in.

Fully responsive. Make it small and put it in your sidebar, or go full-screen.

Really fun to write in, especially the drag-and-drop image uploads.

Fully multi-site for advanced users, so you can manage hundreds of WordPresses from one place.

Able to manage plugins and themes on Jetpack sites, including auto-upgrading them!

100% open source, with all future development happening in the open.

Available for anyone to adapt to make their own, including building custom interfaces, distributions, or working with web services besides WordPress.com.

GitHub地址：
Automattic/wp-calypso · GitHub

今天心血來潮，回答一波技術問題。總體來說，我看到這個消息是非常興奮！一顆賽艇！緣由是之前好歹也用過 wordpress 去搭過一段時間自己的blog，對它有感情。同時也試過其他一些blog，比如 jekyll 和 hugo，一直覺得 WordPress 的技術結構已經很老了，UI也看起來比較像80年代產物，早就應該到了改版的時候。這次 Calypso 就是對於wordpress的dashboard進行一次全面的升級，整個dashboard是用 single page app 來和server的restful API通信。

首先看它的codename：Calypso：是古代一個神的名字。國外的公司在做一個項目的時候，經常喜歡用拉丁神話里的名字來命名，比如 Iris，Zeus，Hermes（包包）等：具體可以看這個頁面 Twelve Olympians Facebook里我知道的項目使用過宙斯，Iris，普羅米修斯，Titan等名字。

具體來說 Calypso 的技術棧。除了這個問題描述里所說的之外，我們再具體看看它的github上面的詳情：

Calypso is the new http://WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application, powered by the http://WordPress.com REST API. Calypso is built for reading, writing, and managing all of your WordPress sites in one place.
It』s built with JavaScript – a very light node plus express server, React.js, Flux, wpcom.js, and many other wonderful libraries on the front-end.

精簡起來： server: node + express; front-end: react.js + flux + wordpress自己的js。這裡使用的技術棧的確是當今最先進同時穩定的。從客觀結果來看，感覺他們也是比較喜歡JS，所以整個技術架構都是基於 javascript 來布局的。整體框架的選擇以輕量級為主，比如 express server：Express - Node.js web application framework ，比如 react.js 也是。如果真的要提出一些建議的話，就是用 redux 去換掉 flux，具體理由見：Read Me | Redux 上面收集了來自我們Facebook內部對於redux的看法，而且Facebook內部也在積極地使用 redux。Redux和Flux在總體架構上區別不大，具體比較看來自redux作者的答案：javascript - Why use Redux over Facebook Flux?

另外UI方面的改進也不錯（用過wordpress的admin頁面的人都有感wordpress的UI都像上個時代的網頁）。新版的UI：

另外看github上的文件列表：

還可以窺視一點有趣的工具：

1. Webpack用來打包和混淆等；（替代了grunt）

2. Vagrant 用來配置；

3. Dockerfile：說明使用了docker，而且docker肯定是未來的方向所在；現在在docker方向的創業我們覺得是很好的選擇；

4. npm：依賴管理

5. 各種linter。

6. 在 wp-calypso/server at master · Automattic/wp-calypso · GitHub 還有對於server side rendering 的列表，另外可以看到使用node和jade。

我最喜歡這次Calypso的幾處改動：

1. Single page app + restful API

Single page app（單頁app）在2010年開始流行（Backbone.js時代），主要好處就是反應快，所有的UI變化都在本地瀏覽器上完成，不需要重新去server請求一個頁面，也不會有明顯的頁面跳轉延時。和server的通信基於網頁API（一般是 restful API），而傳輸的內容只是數據而已，沒有了冗長的 html、css和javascript 的傳輸，所以速度要比原來快不少，即使 on-wire data format 用得是 raw json（如果換成 thrift 里的 TCompact 或者 google的protobuf，或者 iOS 上比較流行的 messagepack，可以讓網路上傳輸的數據量更小）。另外更大的好處是可以復用這一套 restful API，用來給 iOS 和 Android 端使用，也可以後續開放給 3rd party developers，做成一個開放平台。本質上也就是說：將前端邏輯和渲染做成獨立的mvc結構，使其和其他移動端並列，用統一的restful API來提供服務。

2. React.js 和 Flux（Redux）的使用

喜歡這個並不是我之前是Facebook的人，只是單純從技術上覺得這個的確是以後前端的方向。因為什麼？因為簡單和清晰的邏輯。在Facebook的時候，我們工程師被 tech lead 們（再次強調，是 tech lead， team lead， engineering lead，而不是 tech leader！！！不要再說 chinglish 了！）反覆強調： complexity is the source of all evils. 降低複雜度是關鍵的關鍵。而我在國內這一年，發行很多創業公司的技術棧是怎麼老怎麼來，或者怎麼fancy怎麼複雜怎麼來。可能技術人員在這樣情況下會特別有成就感（虛擬的），而且可以出來一些炫耀的東西。這是一個公司的CTO或者tech partner要極力禁止的。在Facebook奉行的是：」Move fast break things」，中文翻譯過來就是「糙快猛」。而react + flux/reduct 正是在這種場景下誕生的。react主要解決view（UI）上的問題，讓UI的書寫可以像邏輯代碼一樣有復用和聚合，同時 flux/redux 的單向數據流可以將你前端的程序邏輯梳理地極為簡單和清晰，不僅讓bug發生的概率變小，而且代碼的後續可維護性特別高：也就是說整體的開發速度和工程維護度都提高巨大！

最後解答大家的一些疑惑：

React技術夠成熟嗎？ ---- React.js 已經非常成熟，而且在Facebook內部各種項目都在使用。比如Facebook首頁的整個search功能的UI都是react來完成的，還有裡面很多詳情頁的展示也是react。新項目 -- 比如之前的一個在線教育的項目，也是全部依賴於 react 寫就。所以 react.js 可以放心大膽地去使用。另外和其他一些常用的開源框架（比如 backbone）不太一樣的地方是：react後面是有Facebook這樣一個乾爹的，所以不會沒人管。整個facebook現在工程團隊和公司現金流都是杠杠的，所以更新速度和bug修復速度都會有保證。React會比起一些業餘時間完成的開源項目有保障很多。

唯一要提醒的一點的事情是： react native （特別是 android 上）由於最近剛剛完成，可能坑很多；而且Facebook內部對於 react native 幾乎沒有怎麼使用。所以使用 react native 要謹慎。（特別是 Android）

作為一個一直用 WordPress 建站，最近轉了 Node.js＋React 的人，我很興奮。

現在 Calypso 還只是一個 http://wordpress.com 的前端工具，你可以用它來跟蹤 http://wordpress.com 上的網站（類似 RSS 訂閱）和管理自己託管在 http://wordpress.com 上的網站。

從現階段來說，Calypso 和 WordPress 本身還沒有太多關係。而且目前它還只是放在 WordPress 前面的一層，通過後端 WordPress REST API 工作，並不是讓人第一眼容易看成的「WordPress 用 Node.js 重寫」。

對 WordPress 本身來說，Calypso 未來一段時間內帶來的影響可能是 WordPress 完全 API 化，變成純後端應用，前後完全分離。

題主問怎麼看，拿我自己舉例，從一個 WordPress 使用者角度來看的話。目前我正維護著一個 WordPress 站，已經做了大量定製開發。在看到這個消息之前一直在考慮用 Node.js 重寫整站，因為我自己對 PHP 並不熟，而我做的其它東西都是基於 Node.js 的，如果為了維護一個 WordPress 再去補 PHP 性價比太低。

所以第一眼看到這個消息我是挺興奮的，不過暫時對我還沒什麼影響。只要不是「用 Node.js 重寫 WordPress」，就還是需要 PHP 做後台的開發和維護。所以我需要的是真正的完全用 Node.js 重寫的 WordPress（或者其它名字）。

不過，Calypso 是一個起點，讓我看到了未來的可能。

這是一個歷史特別悠久的故事了。

編輯-發布分離是第一種趨勢，下一次這些都會變成靜態HTML。使用WordPress的個人和企業，根本就不需要動態的頁面。

引自自己之前寫的CMS相關文章：

編輯-發布分離

我們的編輯和發布系統在某種意義上緊耦合在一起了，當用戶訪問量特別大的時候，這樣會讓我們的應用變得特定慢。有時候編輯甚至發布不了新的東西，如下圖引示:

或者你認識出了上圖是源自Martin Folwer的編輯-發布分離

編輯-發布分離是幾年前解耦複雜系統游來開來帶來的一個成果。今天這個似乎已經很常見了，編輯的時候是在後台進行的，等到發布的時候已經變成了一個靜態的HTML。

已經有足夠多的CMS支持這樣的特性，運行起來似乎特別不錯，當然這樣的系統也會有緩存的問題。有了APP這後，這個趨勢就更加明顯了——人們需要提供一個API。到底是在現有的系統里提供一個新的API，還是創建一個新的API。

這時候，我更願意選擇後者——畢竟緊耦合一個系統總會在後期帶來足夠多的麻煩。而且基於資料庫構建一個只讀的RESTful API並不是一個複雜的過程，而且也危險。這時候的瓶頸就是資料庫，但是似乎資料庫都是多數系統的瓶頸。人們想出了各種各樣的技術來解決這個瓶頸。

于是之前我試著用Node.js + RESTify將我的博客重構成了一個SPA，當然這個時候CMS還在運行著。出於SEO的原因我並沒有在最後採用這個方案，因為我網站的主要流量來源是Google和是百度。但是我在另外的網站里混合了SPA與MPA，其中的性能與應用是相當的，除了第一次載入頁面的時候會帶來一些延時。

除了Node.js + RESTify，也試了試Python + Falcon（一個高性能的RESTful框架）。這個API理論上也應該可以給APP直接使用，並且可以直接拿來生成靜態頁面。

編輯-發布-開發分離：靜態站點生成

如React一樣解決DOM性能的問題就是跳過DOM這個坑，要跳過動態網站的性能問題就是讓網站變成靜態。

越來越多的開發人員開始在使用Github Pages作為他們的博客，這是一個很有意思的轉變。主要的原因是這是免費的，並且基本上可以保證24x7小時是可用的——當且僅當Github發現故障的時候才會不可訪問。

在這一類靜態站點生成器(Github)裡面，比較流行的有下面的內容（數據來源： [新姿勢]我用過的靜態站點生成器們）:

Jekyll / OctoPress。Jekyll和OctoPress是最流行的靜態博客系統。
Hexo。Hexo是NodeJS編寫的靜態博客系統，其生成速度快，主題數量相對也比較豐富。是OctoPress的優秀替代者。
Sculpin。Sculpin是PHP的靜態站點系統。Hexo和Octopress專註於博客，而有時候我們的需求不僅僅是博客，而是有類似CMS的頁面生成需求。Sculpin是一個泛用途的靜態站點生成系統，在支持博客常見的分頁、分類tag等同時，也能較好地支持非博客的一般頁面生成。
Hugo。Hugo是GO語言編寫的靜態站點系統。其生成速度快，且在較好支持博客和非博客內容的同時提供了比較完備的主題系統。無論是自己寫主題還是套用別人的主題都比較順手。

通常這一類的工具里會有下面的內容：

模板
支持Markdown
元數據

如Hexo這樣的框架甚至提供了一鍵部署的功能。

在我們寫了相關的代碼之後，隨後要做的就是生成HTML。對於個人博客來說，這是一個非常不錯的系統，但是對於一些企業級的系統來說，我們的要求就更高了。如下圖是Carrot採用的架構：

這與我們在項目上的系統架構目前相似。作為一個博主，通常來說我們修改博客的主題的頻率會比較低，可能是半年一次。如果你經常修改博客的主題，你博客上的文章一定是相當的少。

上圖中的編輯者通過一個名為Contentful CMS來創建他們的內容，接著生成RESTful API。而類似的事情，我們也可以用Wordpress + RESTful 插件來完成。如果做得好，那麼我想這個API也可以直接給APP使用。

上圖中的開發者需要不斷地將修改的主題或者類似的東西PUSH到版本管理系統上，接著會有webhook監測到他們的變化，然後編譯出新的靜態頁面。

最後通過Netlify，他們編譯到了一起，然後部署到生產環境。除了Netlify，你也可以編寫生成腳本，然後用Bamboo、Go這類的CI工具進行編譯。

通常來說，生產環境可以使用CDN，如CloudFront服務。與動態網站相比，靜態網站很容易直接部署到CDN，並可以直接從離用戶近的本地緩存提供服務。除此，直接使用AWS S3的靜態網站託管也是一個非常不錯的選擇。

原文鏈接： repractise/refactor-cms.md at gh-pages · phodal/repractise · GitHub編輯-發布分離

很興奮，但是這個只是給http://wordpress.com用的，不是給開源的wordpress

官方的行動證明了，我們可以只用wordpress來做純後台提供數據，而用新的基於react的前端來進行二次開發。

往遠了說，意味著將來wordpress的後台也許都可以換成node的版本

往近了說，很多現有的基於wordpress的網站都可能在將來換到新的前端

儘管目前這些都只是針對http://wordpress.com api，將來的版本應該會支持開源的wordpress api的

先區分一下WordPress和http://wordpress.com吧。。Calypso只是http://wordpress.com的項目，跟WordPress沒什麼關係。。

怎麼看？上 github 看啊

我以前博客上寫過類似的文章，很好解釋了這個問題： http://blog.wpjam.com/2015/12/01/calypso/

http://WordPress.com 發布了 Calypso 這個全新的界面和 Mac 桌面程序，然後網上一大堆人說 http://WordPress.com 放棄 PHP +MySQL了，基於NodeJS+React重構了。

首先來了解下 Calypso 是什麼，Calypso 是 http://WordPress.com 新的前端，基於 http://WordPress.com 的 REST API，全新設計的 WordPress Dashboard 的單頁 Web 程序，讓你可以在一個地方閱讀，撰寫和管理你所有的 WordPress 站點。

仔細閱讀上面這段話，可以得到幾個信息：

Calypso 只是一個前端單頁 Web 程序，從它界面可以看到它是博主更新和管理博客內容的後台，並不涉及到 http://WordPress.com 的核心。

Calypso 是基於 http://WordPress.com 的 REST API的，http://WordPress.com REST API 是基於什麼寫的？當然還是PHP+MySQL。

所以 http://WordPress.com 並沒有放棄 PHP，只是使用 NodeJS+React 重構了博主管理後台。

基於PHP的流行內容管理系統WordPress開源了一個全新的前端項目Calypso，代碼在GPLv2許可證下託管在Github上。Calypso採用node.js和JavaScript開發，WordPress並沒有完全拋棄PHP，而是將其用於後端，前端使用Calypso，以擁抱今天的Web趨勢。WordPress發表了一篇博文描述了Calypso的起源：大約一年半前，他們重新思考了構建WordPress的技術和開發工作流。現有的代碼庫和工作流一直行之有效，但十年的遺產開始嚴重阻礙他們去構建用戶期望的現代化、快速和移動友好的體驗，所有他們問了自己一個問題：如果今天開始構建WordPress.com，它會是什麼樣的？

哇咔咔這個叫『擁抱變化』(^o^)/~

前一陣子在朋友圈看到實習公司的同事轉的消息，當時一驚，卧槽Wordpress這廝原來一直在憋大招啊，立馬跑去玩了一下，跑起來，走你，突然發現不對，頁面載入出來就一個底部圖標，打開控制台一看原來是靜態資源載入沒有許可權，用new tab打開鏈接，然後點允許訪問就ok了。

談一下感受吧，光從Wordpress本身上來說並沒有什麼太多可討論的，其本身也就是提供了一個不錯的CMS，讓人們可以可以方便的進行內容管理，不過是做成Blog或是深度定製成商業網站。其本身的商業化也是中規中矩，靠賣定製主題和定製域名賺錢。

於技術層面，這裡要說的就不止千言萬語了，上面有盆友已經提了『互聯網世界的25%都將被nodejs佔據』，其實這裡我想說的是即時Wordpress僅僅是使用了calypso作為前端部分而後端處理依然採用PHP連資料庫，我想官方也算是充分看到了未來web在前端渲染上特別是SPA等等對用戶體驗將是一種質的飛躍，另外看官網的介紹視頻，裡面還提到可以在任何一個地方管理自己的網站，這就包含了移動化甚至移動優先，不在性能上做一次大的提升何以完成這種轉變？

而轉變性能最可能產生最大化收益的就是頂層技術架構，所以選用目前最為有前景的node+react生態無疑是個不錯的選擇。

最後，我不用Wordpress ==

運營 WordPress 的 Automattic 公司近日也終於發聲「將放棄使用 React」。

趨勢。越來越多的公司會基於 react 搭建自家公司的組件庫。

說實話確實喜歡 WordPress，可是它太慢了，怎麼優化都是慢，你看看 Discuz 的速度，對比下，雖然兩者不是同一類型

wordpress插件和主題製作要用新的方式了

好事，web市場快被腳本語言佔領了

java web 已經完敗

只能靠服務端和Android了

意味著wp可以做介面了，可以把自己博客打包成webapp了&>3

這個意思是互聯網的 25% 網站要被nodejs佔據了

同興奮、react在國外很火，在國內不怎麼樣，不過他理念很不錯，又可以加es6，webpack的新東西，感覺會火的。

wp api已經在整合進wordpress的過程中了有了wp api 前端react、後端node也可以自己搞起了

說明數據和展現徹底分離是wordpress所認定的web發展方向。

而這個方向，其實與php和node誰更好以及如何取捨無關。