1. 程式人生 > >Worktile 技術架構概要

Worktile 技術架構概要

其實早就該寫這篇部落格了,一直說忙於工作沒有時間,其實時間擠擠總會有的,可能就是因為懶吧!從2013年11月一直拖到現在,今天就簡單談談 Worktile 的技術架構吧 。

Worktile 自上線到現在收到了很多使用者的喜歡,我們倍感欣慰,自己做的產品得到了使用者的認可是件幸福的事情,其中有很多來自IT的使用者,經常在官方群或者知乎上問一些關於Worktile的技術問題:

Worktile 採用的是怎麼樣的架構?
Wortile 前後端採用了哪些技術?
...

Worktile整體架構一覽

Worktile 是企業協同辦公軟體,所以一開始註定就應該是單頁應用(SPA),因為使用SPA後,使用者在瀏覽器端可以像操作原生客戶端程式一樣的體驗(速度和流暢度),對於開發者來說,前後端分離,服務端只提供RESTful API服務,移動端整合也非常的方便,具體可以看下面這張草圖。

Worktile 整體架構

前端

  1. Bootstrap (CSS基礎庫和一些Javascript元件)
  2. UI Bootstrap (Bootstrap 的 Angular.js版本)
  3. jQuery (取代Angular.js中的jqLite,並作為其他第三方jQuery外掛的基礎類庫)

Worktile的服務端基本上只是提供API資料服務的,不會渲染HTML,前端的程式碼在釋出之前會使用 Grunt 工具打包合併壓縮成一個js檔案。

Angular.js

既然是SPA程式,前端必然要選擇一個MVC(或者MVVM)框架,關於前端MVC框架有很多,當時面臨選擇的時候也是比較猶豫,因為在此之前我們只初略的使用過 

Knockoutjs 。
其實我們當時就是急切的希望一個框架能做到:

  1. 資料能夠雙向繫結(或者只單向繫結)
  2. 前端路由功能
  3. 簡單易學的模板語言

最終我們選擇了 Angular.js,具體其中選擇的細節就不一一描述了(之前在知乎上也回答過關於Angular.js 的問題:Angular.js 在實際應用中有哪些優缺點?),從開始使用到現在已經快2年了,事實證明當初的選擇還是沒有錯的, Angular.js的確很適合 Worktile。

Bootstrap 和 jQuery

選擇Bootstrap主要是為了使用它的基礎CSS功能,在它的基礎之上很容寫出規範的樣式程式碼,當然我們也需要使用其中的部分Javascrip元件功能,因為原生的 Bootstrap是基於 jQuery的,為了在Angular.js中也能很好的使用它,我們引入了 UI Bootstrap、關於jQuery大家再熟悉不過了,我們使用的很多第三方外掛是jQuery的,所以也一併引入了。

上面只是列出了 Worktile 主要使用的幾個Javascript框架和類庫,真正使用的類庫遠不止上面列出的這些。比如日曆庫 ui-calendarunderscorejs 等等...

服務端

Node.js

服務端是構建在Node.js之上的,我們的服務端MVC框架採用的是 Expressjs,剛開始是 Express 3.x版本,現在已經升級到 4.x,Expressjs提供了 Route和模板引擎的功能,由於我們的服務端基本只提供資料服務,所以關於服務端模板引擎這塊基本不使用(只有佈局和一些配置項輸出到介面時需要用到)。

選擇 Node.js 是因為它簡單,適合高併發的Web服務,而且我們的開發人員能夠熟練使用它,關於Node.js的優缺點我在知乎上也曾經回答過:使用 Node.js 的優勢和劣勢都有哪些?

Redis

Worktile 使用者的登入狀態,一些臨時使用的資料、部分業務資料快取 都是放在 Redis 裡面的,關於Node.js怎麼和 Redis 連線採用 Node Redis 模組。

MongoDB

Worktile 並不是那種高度事物性的系統或者傳統的商業智慧應用,所以MongoDB非常適合,效能非常高,叢集方便,而且以BSON結構儲存,和Node.js完美整合。
Worktile 的資料層和MongoDB之間並不是使用 原生的驅動 ,而採用了 mongoosejs,類似Java或者C#上的ORM框架,使用 mongoose 可以很方面的定義資料 Schema,讀取操作 MongoDB。

推送服務

前面也說了 Worktile 是 SPA程式,使用者登入到系統之後,基本上所有的操作都不需要重新整理瀏覽器,因為是一個協同辦公軟體,其他使用者多資料進行操作需要實時更新,所以客戶端必然要和服務端保持一種長連線,方面進行資料互動,我們的實時推送服務是採用 Erlang 語言編寫的,感興趣的可以檢視:https://worktile.com/tech/basic/worktile-real-time-notice

採用 Erlang 是因為我們的開發人員有這方面的經驗,並且Erlang非常適合做這個高併發實時推送服務。

如果你熟悉 Node.js 肯定知道 Sockiet.IO,我們最初的實時推送其實是採用 Sockiet.IO的,後來由於訪問量的增張,原有的Sockiet.IO 是基於Worktile Web站點的,沒有獨立成單獨的服務,重構的時候徹底採用Erlang重寫了。

其實這2種技術都非常優秀,選擇哪種主要取決於你擅長什麼。

檔案預覽服務

使用過 Worktile 的人肯定都知道,在系統中上傳一些檔案,比如:word、excel、txt、pdf、ppt等等,都是可以線上預覽的,關於 txt、pdf這些檔案的預覽其實好辦,txt直接讀取檔案內容即可,pdf採用瀏覽器自帶的預覽或者使用一些Js類庫都很方便的做到,但是對於 Ofiice 檔案,是不可以直接讀取的,所以我們自己搭建了一套 Ofiice的預覽服務,這個服務主要是基於微軟的 Office Web App服務

Box 檔案服務

Worktile 中所有的檔案儲存在阿里雲的OSS上,為了做一些許可權的認證和安全問題,我們通過一個Box服務做中轉,所有檔案的上傳下載都是走 Box 服務。這要感謝 5樓的Box之父 @Shaun Xu 寫出了這麼好的Box 服務。

以上是Worktile用的所有技術和架構簡單介紹。

Worktile 自上線以來使用者的增長也是非常迅速的,所以 Web伺服器從原先的1臺變成多臺,資料庫從單例項到現在的叢集,等等,關於目前Worktile的伺服器結構圖參考如下:

Worktile的伺服器結構圖