Web App架构

Web App 架构分为两种：一种是工程架构，一种是项目架构。

工程架构则主要有如下几个方面的内容：

　　1， 解放生产力，咱们但愿在开发项目的过程当中把所有目光都放到书写业务代码上，不须要去考虑一些重复性的工做，如文件复制，浏览器刷新等内容。 这些重复性的劳动，咱们但愿构造工程帮咱们解决掉。

　　2， 围绕枝术方案去搭建开发环境。开发webapp时，咱们有不少技术方案能够选择，好比vue, react.  可是这些技术方案，它们都有各自特定的语法，如使用vue时，咱们用.vue文件，使用react时咱们用的是jsx , 而这些语法呢? 浏览器又都不支持。因此还要进行编译，编译成浏览器认识的js文件, 让它们可以在浏览器中运行。咱们工程要解决的编译问题。

　　3， 保证项目质量。最基本的就是代码规范，每个项目，每个团队都会考虑定制一套代码规范。项目成员之间容易熟悉代码，看懂代码， 好比使用editor config， 其次就是提早发现咱们代码中的bug , 如eslint配置.  最后就是代码提交，git commit 预处理， 代码中有错误，不能提交态码。

　　　若是你用vue 或 react 开发过项目，你会发现，这不就是vue-cli或create-react-app 脚手架工具帮咱们作的事情吗？确实是，但它们太通用了，有时候不知足咱们特定项目的需求，因此还要进行修改，这就须要咱们有工程架构的能力，须要学一下前端构建工具。提及前端构建工具，你可能据说过gulp, grunt, webpack 等，但如今应该是webpack的天下了，咱们只要学习webpack 就能够了。

　　项目架构：考虑的是，业务代码如何分层， 更好地实现网页功能， 为未来项目的扩展性留有必定空间。

　　1， 技术选型。

　　要不要使用框架，使用哪个框架？ 这仍是要根据需求的大小来决定的，平时我开发项目是使用的vue,  有一天接到一个需求是一个静态的宣传页面，附带有几个动态效果，相对简单一点，而且网上也有现成的实现方案，我就没有框架，直接Jq 就实现了，也挺快的。

　　对于框架来讲，如今主要有三大框架，Angular, React, Vue，到底使用哪个框架呢？其实，这三个框架从本质来讲都一致了，都是组件化，虚拟DOM的思想，不一样的只是三个框架的语法，三个框架各自编程的思想。因此具体使用哪一个框架，就看你的熟练和掌握程度。

　　Angular 没有用过，很差评价，只是看过文章介绍，了解到它是一个大而全的框架，什么都给你提供好了，你不用选择用什么的问题。可是它的学习曲线比较陡峭，由于它首先用的就是TypeScript 语法，到如今，我也没有学习TypeScript.

　　React vue 都简单用过，相对于Angular的大而全，它们只是解决一个问题，就是视图层view。二者对比，Vue 简单一点。Vue 的语法简单， 它的模版和handlebars等模版语法很像，js 的书写，只要会ES5 彻底没有问题。但React 就不同了，它上来就是ES6 的class语法， 而且还发明了jsx 语法，在js中能够书写类html的语法，刚开始学的时候，也是比较难以入手， 学习React 以前，最好先学习，ES6 及 ES6+的语法。

　　React 和Vue 只解决视图的问题，那整个程序运行过程当中的状态变化，要怎么处理？ Vue 官方提供了vuex,  React 官方并无提供相应的状态管理，现有解决方案是Redux， 固然还有Mobx.  它们都是单向数据流的思想，只是实现方案不太一致。这种单向数据流的思想是最为重要的，确实和之前的开发大不同，思想的的变化，确实须要时间，只能一点一点的去适应。相对而言，vuex 是相对好理解的，但我当时也花了1-2个月的时间才算是明白。Redux 则是函数式编程的思想，最主要的还有一个中间件的思想。Mobx也学了一点，但不知道它要实现的思想， 在项目中没有用过。

 　　当涉及到单页应用的时候，vue 和React 都有相应的router, vue是vue-router, React则是React-router,  它们的不一样点是vue-router使用的是配置文件，react-router 则是彻底组件化的思想，但内部的思想都是同样的，学会一个，另一个也就差很少了。

　　2， 整个项目文件的组织方式

　　在深刻学习React 和Redux 一书中，它对此有过说明，对于组件化开发来讲，按照功能角色进行组织比较合理，也就是把完成同一功能的代码放到一个目录下，这个目录包含实现该功能的各个角色的代码。在React中，不一样的角色就是reducer, actions 和视图。拿TodoList 应用为例，它有两个功能就是TodoList 和Filter. 因此文件目录就能够以下组件

　　注意，每个目录或功能模块下，都有一个index.js文件，它的主要做用是，把该模块下的全部角色都导入到该文件下，再统一导出，至关于给外界提供一个接口。当外界想使用这个功能模块时，只须要导入index.js 就能够了，咱们模块内部的内容，它没有必要知道， 这样，即便咱们模块内部作任何改动，只要保证index.js 暴露出去的接口不变，就没有任何问题。

　　不一样的功能模块之间的依赖关系应该简单而清晰，也就是所谓的保持模块之间低耦合;  一个模块应该把它本身的功能封装好，让外界不要太依赖于本身内部的结构，这样不会由于内部的变化而影响外部模块的功能，这就是所谓高内聚。