概述
一個Spring-boot + Vue.js的web應用,用于展示一些通用的ElasticSearch使用場景. 這是一個相對比較激進的項目,使用了很多當下最流行的前后端技術.
前端:
ES6/Typescript+WebPack+EsLint+vuejs2+vue-router 2+axios+element-ui
后端:
Spring-boot+ElasticSearch+MySql+Spark
優勢
語法糖 -- 更易讀的代碼,更安全的代碼
- ES2015/TypeScript:異步編程promise,類結構，變量作用域，模塊化，函數默認參數，
箭頭函數與this，字符串模板，靜態類型檢查(TS) - Less:嵌套，變量，方法
工程化構建 -- 讓機器幫你優化代碼
- 多源構建:支持多種代(ES2015/TS/Less)碼編寫,忽略編譯/預處理過程
- 錯誤檢查:使用EsLint等工具檢查低級語法錯誤,讓程序猿集中精力處理業務邏輯
- 代碼風格統一:自動格式化代碼,保證團隊代碼風格統一,提高可讀性和可維護性
- 自動性能優化:讓工具幫你打包,合并文件,優化圖片,處理模塊加載
- 熱加載:自動編譯代碼,并刷新瀏覽器,保護你的F5鍵!
- IDE支持:讓js也能自動完成代碼提示,并且更準確. 更方便地閱讀和重構代碼
規范化編寫 -- 限制你的程序猿天馬行空的coding
- 框架結構清晰,層次分明:
- 使用Vue.js把代碼進行分類編寫(data,props,computed,methods)
- 使用vue文件編寫組件,一個文件就是一個組件,代碼在物理上進行隔離
- 使用js模塊編寫代碼,保證命名和變量作用域沖突問題,并保證代碼復用性
- 正統的js class編寫風格,遠離prototype的惡心寫法
- EsLint檢查代碼風格:
- 代碼樣式統一
- 自動格式化代碼
- 自動檢查低級語法錯誤
前后端分離
- 加速原型界面開發:前后端并行開發，縮短開發周期
- 降低耦合度,簡化邏輯:
- 封裝常用業務組件
- 模塊化代碼,提高代碼重用
- MVVM思想:UI模版綁定與業務邏輯處理數據分離
- 更容易的單元測試: action與UI代碼分離,方便單元測試
- 為后端微服務化打下基礎:前端完全從后端獲取JSON數據進行界面展示邏輯處理,后端專注業務邏輯,接收和返回數據都只是JSON,簡化后端與前端的耦合度
快速構建部署
- 前端: 與后端完全分離,使用webpack等構建工具打包生成靜態Html,js,css文件.直接在Nginx中同步靜態文件
- 后端: 使用Spring-boot單jar應用,節省war構建和tomcat等web容器構建, 直接java -jar xx.jar在Docker容器中運行
- 自動化構建腳本: 使用nodejs自動化部署腳本執行發布更新任務,減少人工操作,避免人工低級運維錯誤,并且任何人都能操作發布更新系統
- 服務器配置統一管理: 方便運維人員動態分配服務器資源,也使程序員發布更新時不需要接觸敏感服務器密碼
一次學習，多端應用
- 基礎UI組件遷移成本低: 開發人員可以根據實際需要快速切換到其他UI組件
- 方便支持多端App混合應用: vue.js與weex完全類似,學習后遷移應用支持weex非常方便快速
框架/類庫選擇 - 前端部分
MVVM: Avalon vs Vue.js
MVVM:相比JQuery可以大幅減輕前端開發人員的思維分裂,可以分別專注布局和業務邏輯,而且復雜界面的實現確實比JQuery的實現簡單易讀. 整體學習成本也較低,只需要半天左右就能上手實操.只是需要注意開發思路與JQuery較大,思維方式轉變才是學習關鍵.
-
Avalon之前一直在項目中實際用,包含了v1.4, v1.5, v1.6, v2.x各個版本,學習和使用過程中一直都是各種驚喜和折磨交織著.
- UI部分,開源貌似只有一個可用的UI庫Oni UI, 這個UI庫組件確實比較齊全,但是默認樣式實在太丑,對于我們這種沒有美工的小團隊來說就是一悲劇,所以最終放棄了,使用metronic和 adminLte+freemarker自己封裝業務組件,結果因為團隊開發人員的素質參差不齊,導致各種各樣的組件出現,各種難以維護,費時費力.
- 代碼風格較為靈活,怎么寫都可以,而且可以隨意增加model字段,所以導致面條式的代碼出現,組件復用和重構難度增大,而且可讀性較差;v2.x雖然也開始支持組件,但是版本差異太大,從v1.6遷移成本太高,而且各種詭異bug.
- 開源社區較為"冷淡". Avalon雖然是去哪網主推,一直也在頻繁更新,而且也有各種社區網站和論壇. 但是總感覺是一個人在開發,更新發布相對較為隨意,版本間兼容性也較差.而且現在的社區都是些新手在問一些基本問題,很難見到高手寫的blog文章或者開源項目.
Vue.js是最近才開始使用,之前都是聽各種演講時聽到,而且時常在微博刷屏中被提及,感覺作者是學營銷出生,確實比較懂得營銷自己,一直也沒重視.這次是實在被Avalon2折磨的夠嗆,想換個組件庫時看到awesome-vue中的UI組件庫部分,徹底被吸引了,決定在新項目中嘗試使用,結果近距離接觸后才發現不是簡單的Avalon like的MVVM框架,而是一個有著新思想新想法,并不斷進步的集合,最最重要的就是整個生態非常健全,配套的工具也很多,社區非常活躍,大量相關的開源項目可以借鑒學習.
組件化: React vs Angular vs Vue.js vs Avalon vs 后端freemarker組件
組件化的重要性就不再重復說明了,這個對于企業級應用真的很重要! 我們在組件化的道路上也嘗試了很多方案:
- React: facebook出品,質量有保障,社區也相當活躍,而且React Native也是期望著能一統web和app開發,但是學習成本實在太高,只有資深前端程序員才能掌握,雖然整體設計非常優秀,但是本土程序員水平就擺在那里,再NB的東西也要有人會用才好.
- Angular: Google出品,整體設計及社區支持都是沒有問題的,還支持了個人比較看好的Typescript,所以還是比較看好的,但她的語法實在是有點怪,各種不適應,再加上版本更新太過頻繁,擔心后期跟進成本太高. 學習Dart時留下的陰影還沒消散,總是擔心哪天就被cancel了.
- Avalon: v2開始支持組件,實現的也比較全面, 但是感覺還是不是那么成熟, 相關例子太少, 社區支持也少,而且支持的實現方式太多,感覺有點混亂. 項目從v1.6遷移到v2時也遇到各種詭異的bug,試了好幾個版本,坑太多實在是無心繼續嘗試. 最主要的原因還是支持方式太多,代碼怎么寫都好, 如果團隊內部沒有嚴格統一規范,那么很容易寫出各種各樣風格的代碼,這對于低素質小團隊來說就是噩夢.
- Vue.js: 第三方開源組件庫實在是太多了,而且都很快更新到vue2了,社區相當給力.一開始使用的muse-ui組件,后來發現這個庫的bug太多,就切換到element,結果只花了半天不到時間,全程bug很少.同時,vue.js把很多常用的細節設計得非常規范,大家都按照規范編寫出來的代碼很容易閱讀和重構.
- 后端Freemarker組件編寫: 這是之前項目一直使用的方式,也比較直觀易懂,但是就是太依賴公用庫開發人員的素質,只有資深的程序員才能編寫重用程度較高的組件,初級程序員編寫的就是各種噩夢. 而且自己封裝UI組件實在是非常原始的工作,需要團隊花大量時間打磨細節.在目前這種飛速變化的時代實在是件低效率,低成本的事情.
前端工程化
-
Grunt: 目前因為性能問題已經被社區嫌棄 - Gulp: 非常好的設計思想和性能表現, 社區非常活躍,相關的插件最豐富. 可以非常方便地完成一些簡單的代碼轉化,并且與webpack集成良好.
- Npm script: 過于底層,開發工作量較大, 目前只作為腳本程序統一入口
- Webpack: 模塊化所有靜態資源(js, ts, css, less, vue)加載,并集成本地開發服務器,自動編譯代碼并刷新瀏覽器
-
Bower: 暫時沒有發現亮點功能,暫不使用.
ES2015 vs TypeScript
-
ES4: 惡心的語法+各種變態"仿真"實現+各種詭異Bug=程序猿的噩夢 - ES2015: 增加了各種語法糖,代碼好看太多,而且還有babel轉化器實現,可以安心使用ES2015甚至是ES2016了,兼容各種瀏覽器和IDE
-
TypeScript: 靜態類型+支持混合js編寫(DefinitelyTyped)+大量語法糖+活躍的社區支持+VS code IDE支持. 確實很不錯, 但是還有待觀察和試驗;
IDE支持
-
Github Atom: 非常不錯的IDE,但是感覺實在是有點混亂,任何小功能都需要找插件完成,再加上國內蛋疼的訪問速度 - VS Code: 微軟的底蘊確實不錯,設計優秀,更新頻繁,并且整合了很多ts相關的功能,灰常好用,社區支持也比較給力,Atom的插件差不多都有VS code版本的.
- IntelliJ: 灰常給力的java IDE,更新速度和社區支持也是杠杠的. 就是太重量級了,啟動慢,編譯慢(Gradle的問題). 所以一般只是在開發后端時使用. 前端nodejs和web相關部分有待嘗試.
-
Eclipse: Eclipse這幾年開始各種"不務正業"的折騰,以前很多好用的功能變得難用,再加上糟糕的插件更新方式.
框架/類庫選擇 - 后端部分
環境搭建
前端部分
- 安裝nodejs, 去官網下載v7.x版本NodeJs,并安裝;
- 在命令行下安裝cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 進入web目錄,安裝相關全局工具和相關依賴:
cd web
cnpm install -g vue-cli webpack eslint gulp
cnpm install
- 運行dev開發模式
npm run dev
- 運行lint檢查代碼文件(注:dev模式自動檢查,build是也檢查,lint一般只是快速檢查時使用)
npm run lint
- 運行build工具編譯生成靜態文件(發布時使用)
npm run build
