基于 LeanCloud 云引擎的 Web 全棧方案：LeanEngine-Full-Stack

很多工程師使用 LeanCloud 之后，發現一個人就可以 hold 住一個完整項目，尤其是一個 Web 項目。原因很簡單，本來復雜繁瑣的數據庫操作，通過使用 LeanCloud 的 JavaScript SDK 變得輕而易舉，再結合 LeanCloud 提供服務器端容器 —— 云引擎 LeanEngine（支持 Node.js 和 Python 兩種環境），就可以很高效地開發出一個 Web 端項目。

背景

開始嘗試 LeanCloud 時項目并不大，也不算復雜，大家都是很簡單地去寫代碼，但是隨著使用的深入，開發變得越來越順手，有些工程師開始嘗試設計復雜的項目。只要項目復雜了，就 會有很多底層的事情需要考慮，比如協作分工、自動化流程、代碼組織結構、框架選擇、國際化方案等等。LeanCloud 的很多項目就是基于自身所提供的服務，在開發過程中我們遇到過很多問題，也為此糾結過，所以我們將目前使用的 Web 全棧方案整理成一個新的項目，作為一個 Generator 或者 Seed，供大家交流和使用。

簡介

項目名為「 LeanEngine-Full-Stack 」，就放在 LeanCloud 官方的 GitHub 倉庫中，地址為 https://github.com/leancloud/LeanEngine-Full-Stack 。

LeanEngine-Full-Stack 是基于 LeanEngine Node.js 服務的 Web 全棧開發技術解決方案。它整合了當前 Web 技術中通用的技術方案，并與 LeanEngine 緊密結合，將基礎架構、自動化構建、國際化方案等底層技術解決方案組織成一個整體。用戶可以通過最簡單的方式，直接開始業務開發，不必再糾結那些底層的技 術選型了。

主要技術棧：

• 語言層面，整套方案 JavaScript 代碼全部使用 ECMAScript 6。
• Server 端運行環境基于 LeanEngine Node.js 環境，依賴安裝通過 npm，服務框架主要基于 Express 4.x。
• Web 前端自動化方案主要基于 Gulp，框架基于 Angular 1.4.x，UI 框架主要基于 Angular Material，構建依賴基于 npm，Web 前端依賴通過 bower 安裝，樣式通過編寫 SASS 而非直接寫 CSS 文件。

整個腳手架 Server 端完全基于 LeanEngine，其底層已經將 API 路由的基礎結構做好，并且將一些常規處理也整合在內，已選型的技術方案主要包括：

• 服務端基本代碼結構、組織結構
• 基礎的路由分層，默認在 /api/ 路由下
• 對 API 的 HTML5 CORS 跨域協議的設置
• 對訪問域白名單控制，集成的可配置文件
• 常規錯誤處理等

Web 前端，從整體技術棧選擇上可以看出，是一個穩健并且有一定前瞻性的技術方案。基于已經非常成熟的 Angular 架構體系，UI 設計層面基于 Google 積累多年而發布的設計語言 Material Design，所以前端 UI 框架基于 Angular Material 框架。Angular 1.4 在性能上有很大的提升，并完全面向現代瀏覽器，可以直接使用 ECMAScript 6 來開發。內部已經寫好并整合的方案主要包括：

• 代碼基本組織結構，趨向于 HTML5 Web Compoment 的組織方式。
• 底層配置，包括 HTML5 CORS 協議的底層支持、域名白名單等配置。
• 純前端路由方案，基于 HTML5 History API 和 ui-router 。
• 自動構建系統，基礎的代碼壓縮、合并、ECMAScript 和 SASS 編譯等過程，也會將構建后的生成代碼拷貝到 public 目錄中，供發布使用。
• SASS 的基本結構，以及一些 Mixin 和基礎單元的處理方式。
• 純前端的國際化方案，可以實時切換語言資源。

基本結構

.
├── public          // LeanEngine Web 前端發布目錄，HTML\CSS\JavaScript 構建后將放置于此
├── server-modules  // 服務器端代碼模塊目錄
│    ├── app.js            // LeanEngine 服務端代碼主入口
│    ├── api-router.js     // API 接口路由配置
│    ├── tool.js           // 工具方法
│    └── hello.js          // 示例代碼
├── web-project     // Web 前端項目目錄
│    ├── gulp           // 自動化構建的邏輯模塊
│    ├── dist           // 構建之后的源碼目錄
│    └── src            // 源碼目錄
└── server.js       // LeanEngine 的環境配置

LeanEngine-Full-Stack 目錄結構

整套架構 Server 端與 Web 前端完全分離，在 Server 端編寫 REST API，Web 項目則是完全的 Web App，而不是通過模板來耦合。web-project 目錄包含了 Web 項目的全部代碼，是完全獨立的一套體系，也可以提取出去，作為單獨項目維護。

整套技術方案有很多細節，具體的使用方式可以到 GitHub 倉庫中直接查看使用說明及源碼。我們知道該項目還有很多地方需要改進，所以我們非常歡迎感興趣的開發者一起參與討論，積極貢獻代碼。如果你對 Web 全棧開發有需求，歡迎來試用。

其他問題

前端框架為什么選擇 Angular？

業內最新的技術以及解決方案 LeanCloud 也都有持續跟進，并且我們也積極同 Angular、React Native 等團隊積極交流，目前構建 Web App 的框架選擇主要會在 Angular1.x、Angular2.x、React 和 Ploymer 之間有所糾結，而我們最終選擇了 Angular 1.4.x 版本。

主要解釋下為什么沒有選擇 React：目前 React 應該是大家最感興趣的框架，但是并不成熟。React 本身最創新的地方是解決了 View 層的分離，將渲染與編譯過程分離，在 Web 端表現為將 JSX 變為 Virtual Dom，再將 Virtual Dom 每次 Diff 后的部分渲染為 HTML。而開發一個應用程序不僅僅需要這些，還需要一套完備的處理各種底層問題的方案，如我們在上面技術棧列出的那些方面。React 數據層 Flux 編程范式并不成熟，UI 層面組件稀缺，即便是前端路由方案也是頗有爭議，黑科技不斷。

所以，在這種情況下，為了能做出一個長期可維護的產品，我們暫時不選擇 React 來做 Web App。當然，LeanCloud 會持續跟進 React Team 的最新動態。另外，推薦一下 React Native，雖然 React 構建 Web App 優勢并不明顯，但是 React Native 則大大提高了 Native App 的開發體驗，其優勢遠大于目前的劣勢，所以歡迎大家嘗試一下。LeanCloud 的 JavaScript SDK 也 支持 React Native 中使用 。

為什么全部使用 ECMAScript 6？

一門編程語言會影響一個人的編程思路，ECAMScript 對 JavaScript 這門用了七天設計出來的語言做了很多優化和革新，比如箭頭函數、語言層面的模塊化、原生的 Promise 等，這些都是讓人眼前一亮的特性，其他大大小小的改進也很多。而且在 2015 年 ECMAScript 6 已經定稿，所有瀏覽器最終都一定會支持這個版本的 JavaScript，那么我們有什么理由不開始嘗試呢？而且通過很多的前端構建，可以讓我們不用去過多考慮瀏覽器的兼容性，所以我們選擇全部使用 ECMAScript 6。

服務端通過在 LeanEngine 中運行 node --harmony 來實現對 ECMAScript 6 的支持（因為目前 Node.js 4.x 剛剛發布，等我們的 LeanEngine 完全對其支持了，harmony 參數就可以去掉了）。前端通過直接寫 ECMAScript 6 的方式來編碼，而沒有選擇如 TypeScript 之類的 ECMAScript 6 超集，這是因為我們還是希望能夠編寫更純粹的 JavaScript，前端會通過 babel 自動化編譯處理。總體來看，這也算是穩健且有前瞻的選擇。