Sciwork开发日志：架构

结论

经过一段时间的考量，sciwork的前端架构规划是：

1. 交互：React+Redux
2. Ajax: Fetch+Promise
3. 模板：DotJs
4. 打包管理：Gulp+Webpack
5. 单元+白盒测试：Mocha
6. CSS：LESS
7. 兼容性：Babel
8. 语法规范检测：ESLint

后端的架构比较简单：

1. NodeJS+Promise作为路由处理逻辑
2. Mongoose作为数据库
3. Redis做为缓存
4. RPC+Kafka消息队列

其他的辅助功能：

1. 用于Markdown文档编辑与渲染的控件，优选stackedit
2. 用于搜索的后台服务，第三方或者java的elasticsearch
3. CDN内容更新与部署，采用python
4. 支付接口，暂时不考虑，后期采用独立接口

写在前面的废话

作为一个后端和移动端的开发者，有时候我会对前端出现的这么多的框架，插件，和工具感到非常惊讶。现在的软件开发，MVC / MVVM，异步操作，依赖，打包，测试已经是开发者所需掌握的标配，而这些概念在前端领域却是近几年材逐渐普及开的开发思想。早期的网页设计人员甚至都不能被称为工程师，而更多被叫做美工，切图的，只会做html和css编写真的和程序开发没什么关系。直到动态网页技术web2.0出现之后，前端开发才真正出现了程序的雏形。移动应用的出现为网页带来了更多的交互内容，换句话说，也就是为页面的操作逻辑带来了复杂的逻辑。可以想象，如果网页内容继续保持文本形态，那么在其之上的交互操作将变得异常复杂和低效率。无论是后来的MVC还是MVVM框架，所在尽力解决的问题就是将传统的文本形态的网页变成一个可以操作的对象。

这实际上也是前端向编程开发靠拢的一个过程，而这个过程因为javascript的天生权限和浏览器本身的定位，而变得异常繁复。

关于jQuery

早期的前端真的是很简陋，能用上jquery对前端已经是很大的突破了。jQuery出现的意义在于它让操作DOM成为可能。实际上，大部分的前端应用使用jQuery已经足够了，但是为什么我们还需要各种框架呢？这个问题没有标准答案，你可以说因为更好的轮子值得被使用。

为什么要上框架

框架存在的意义就是隐藏更多的DOM操作，让前端的交互以更直观的形式被实现。

1. 框架

框架的选择其实不多，react，angular，vue

其他使用度较小的框架，ember，backbone，jquery（是的，jquery已经不被频繁使用了）

事实上框架的选择并没有你所想的那么复杂，框架的作用无非是更好地完成DOM的交互控制

2. 异步

异步是为了解决javascript的单线程的多任务串行处理，ajax是异步的网页加载机制，promise和async是解决多任务执行与结果跟踪

3. 模板

模板可以用来替代后端页面渲染。传统JSP负责的view presentation可以部分被模板替代。

4. CSS模块化

用LESS，SASS把CSS进行参数化，目的是为了节省CSS的开发时间，避免重复的参数设置

5. 打包

gulp+webpack，gulp是一个通道，负责定义各种打包的任务，具体的活需要webpack来做

6. 测试

前端的测试一般分为两种，单元测试和自动化测试，后者的测试方式很难量化，和其他的GUI程序类似，前者的测试比较简单，用Mocha就可以实现软件开发常见的assert单元测试和白盒测试

7. 兼容

react使用了JSX，angular使用了ES6，两种语言在大部分浏览器中是不支持的，所以需要转译，我们采用Babel

8. CommonJS

CommonJs 是一种规范，目前可以不去关注