团队内部践行的技术栈

[iAmHades]

团队内部践行的技术栈

系统环境

Mac系统，整套技术栈也围绕着mac系统来打造。至于为什么选择mac？理由太多了...

系统架构

系统整体采用微服务架构，其中前端部分的开发采用前后端分离的开发模式。这样前端只负责数据的渲染和提供页面路由；后端只负责提供restful风格的数据接口，后端所有服务以rpc的方式进行相互调用。

相关技术

项目管理

• git : 版本控制的最佳方案....
• git-flow : git虽好，但是具体的branch管理方案并没有提供，而git-flow则提供了一套非常完整的流程管理模型，为自动化打好基石。
• gitlab : 开源的git服务端，提供各种webhooks 的回调，为自动化部署，发布，集成做好铺垫。
• slack: 用于工作沟通，文档管理，异常通知。对于新加入频道的人，其也能看见频道之前的聊天记录，这个特点对于需求沟通或者事情告之，非常方便。其跟邮件系统，gitlab ，Jenkins 都可以进行很好的集成，集成后，slack由于其全平台覆盖的特性，其能变成一个事件通知软件，任何时候都能获取状态通知，非常方便。
• 有道云笔记 : 团队内部的wiki分享，这个挺好的，如果能私有，那么更好的了，哈哈。
• Jenkins ：它可以自动远程部署，执行远程脚本命令的工具，自动化的关键。
• swagger: 前后端分离开发的重点在于接口api的准确性和规范性上，swagger则提供了自动生成并提供交互性测试接口文档的能力 ，比如：兼客api。
• gitbook : 开源的文档编写软件，采用markdown的方式书写网页版文档，比如：vue-router文档
• EditorConfig : 让文本编辑器能够对换行，空格等style上的作出约束。
• ESLint: 让团队编写js的代码风格保持绝对的一致。我们选用airbnb的eslint-config-airbnb-base的代码风格作为团队中使用的规范，不论node后端还是前端，均采用这套规则。

  后台开发

• 工具 ：WebStrom, Idea, Sublime.
• nginx ：用于设置跨域，请求转发，gzip压缩等。对于微服务架构，前后端分离的开发模式，非常有用，视为核心组件。
• node ：当web服务和中间件使用。
• java ：使用solr cloud 的搜索，webmagic的爬虫。
• redis：缓存，简单系统需要的队列以及geohash，性能非常强劲。
• mongodb : 为配合node和集群的需要 而使用，他跟node的配合非常适合敏捷开发的需要。
• ngrok : 本地项目，外网访问的神器，需要自己搭建ngrok服务，自己编译client端。用于微信开发，接口对接等。

  前端开发

• 工具 ：WebStrom(vue中对es6的支持不太好), Sublime.
• ES6: 完全按照es6的js特性进行编码，使得项目更容易管理。
• angularjs : 缺少组件化的开发方式，是硬伤，优势也就只有网上模版资源多了。目前已经被我抛弃掉。
• vuejs : 数据监听，依赖收集，组件系统，动画钩子，轻量级...这些特点完全让我抛弃了angularjs，投向vuejs。目前它的唯一问题就是 太新，生态资源还在成长中。不过经历过几个项目的迭代，组件轮子都造的差不多了，非常看好它（目前淘宝的勾股大叔分享的无线电商动态化方案的思考中系列文章中介绍的淘宝的全新开发框架Weex, 其就大量借鉴了vuejs的语法和特性，其中数据监听和依赖收集的核心代码，直接复用vuejs的，这说明了vuejs的优秀）。
• reactjs : reactjs的组件生态中，有一个叫Antd的第三方组件，其出自阿里。这套组件所提供的多样性，全面性，灵活性实在是太适合做后台管理系统的开发，所以毫不犹豫的让团队选择了reactjs来做后台管理系统界面的开发工作。
• webpack : es6 , sass的实时预编译; 项目发布的打包，压缩，混编; 开发阶段的热部署，浏览器同步....非常赞，给前端开发带来完全不一样的开发体验。当然部分功能，glup中也可以实现，但是在团队中编写团队需要的扩展插件完全不如webpack方便。
• glup: 目前被webpack所取代。
• fastclick : 彻底解决移动端点击问题。
• fetch : 移动h5端中，取代ajax的api。
• psd2html : 自己编写的将设计稿自动转换为html文件的node插件，目前还在持续进化中，后续会配合上vuejs的组件，会非常强悍，让人期待。
• ESLint : 使得团队拥有统一的代码规范，可读性，管理性增强。

  App开发

• swift ：因为个人关系，没有用oc，而是直接使用的swift，但2.0的升级，有点受伤。
• react native: 考虑到团队的特点，或许以后采用react native 的方式来开发app，会有更好的开发效率和掌控力，以及让app具备动态化的能力。但是我个人还是觉得在移动端，性能非常重要，无论是angularjs的dirty check，还是react的vitural dom ，都不及vuejs的数据监听 来的更有效率。
• electron : JavaScript的一个运行时，其跟vuejs 或者react 的结合能让前端人员轻松开发垮平台的桌面应用。

  测试

• browser-sync ：node的一个工具包，用于浏览器同步，其流弊之处在于你用不同的浏览器访问其启动的服务，你的所有操作，能在不同的浏览器间同步执行，大大提高测试效率。配合一些脚本，可以实现前端测试的自动化工作。
• postman：一款chrome 的支持rest http请求的插件，后台人员能够通过该插件，完成自己开发接口的请求测试工作。
• mocha ：其可以运行在Node.js和浏览器环境，使异步测试变得简单，其能串联运行测试，允许灵活和精确地报告结果，同时映射未捕获的异常用来纠正测试用例 。
• chai : 断言库，配合mocha使用。
• faker.js: 可以在浏览器和 node.js 中生成大量的虚假数据，非常方便。
• Karma: 是一个测试任务管理工具，可以很容易和Jasmine、Mocha等测试框架打通，通过其插件可以快速集成到各种环境中。例如：本地环境、持续集成环境。
• jmeter ：java的测试工具，可自己编写测试案列进行功能，压力测试，其jar包可以轻松整合进Jenkins，以完成每次git commit后的自动测试工作，非常灵活方便，大赞。

  设计

• sketch ：移动端设计的必备软件，基本上团队所有的设计，均用sketch来做。开发人员这边也会装sketch，用于自己进行2X,3X的切图，各个元素的间距测量。
• 磨刀 : 移动端的原型设计工具
• 网上主题资源 : 其实对于pc web来说，所有的设计都有现成的主题，在设计偏弱的团队中，可以从themeforest上寻找符合业务需要的主题，购买下来即可，但是有一个问题就是其是jquery的。所以最终就变成了设计师自己在themeforest上寻找样式灵感，然后由开发人员进行vuejs的实现。

[yekz]

glup 写错了