概述
一个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
