浅谈前端开发以及现代前端工程架构

最近和鹅厂，pdd的前端大佬们聊了不少前端相关的东西，再加上最近做的项目实训（InspirationNotebook）是一个相当典型的前端项目，所以在这最后一篇实训日志里，我想写点自己实践出来的东西。

一、稍微聊聊前端开发

前端开发这个事情，发展得非常迅速，变化也日新月异。曾经的前端，就是写点html、css、js。写好了之后，交给后台，部署到服务器上。再后来出现的jsp之类的东西，给前端提供了一定的灵活性，但还是很难满足我们真正的开发需要，这集中体现在以下两点：
1、面对复杂数据的处理逻辑，html、css、js可能需要写相当大量的代码。而且代码很难进行复用。
2、不同界面之间重定向的操作非常多，很影响体验。

后来，“组件化开发”这个概念得到了推广，react，vue等构建单页应用（SPA）的前端框架得到了大范围的使用，使得我们的前端逻辑、前端组件能够得到复用，大幅降低了前端开发的工程量。同时，router的使用，使得前端能够避免重定向带来的相当差的用户体验。

另外一方面，TypeScript等语言的出现，对JavaScript进行了一个极大的补充。TypeScript作为JavaScript的超集，对JavaScript的弱类型、继承等功能进行了一个非常大的补充，使我们能够使用更加工程化的方法去编写前端逻辑。

还有，webpack等模块化打包工具的出现，也极大地推动了“前端工程化”的发展，尤其体现在工程部署上——直接引用张云龙大神的知乎回答吧，说的比我这条咸鱼强多了
https://www.zhihu.com/question/20790576

以及，nodejs的出现，使前端可以承担一部分后端的工作，也提供了相当强大的拓展功能。而又因为nodejs跑的也是JavaScript代码，所以为前端工程师提供了相当大的便利。

所以前端开发发展到现在，出现了非常多的有意思的方向，也出现了非常多有意思的技术。移动端相关的知识、老生常谈的优化与资源加载的问题、前端安全性的一些探索（XSS，CSRF等）、nodejs的相关技术、http 2.0、http 3.0、html5、css3、JavaScript ES6 ES7等等，都是一些非常有趣的方向，也非常值得人去探索。

二、稍微聊聊前端工程架构

1、先举个栗子吧

我觉得有句话说得很好：“后端要求接口分离，功能分得越小越细越好。前端却要求减少请求次数，减少加载的时间。这其实是一个矛盾”

的确，这是个必然的问题，前端当然想一次请求，能获取全部数据，希望“大而全”。但是后端在实际开发的时候，接口一定是“小而美”的。那么我们如何解决这个矛盾呢？

一个很简单的措施——在前端和后台之间搭一个（甚至多个）中间层。采用nodejs等技术，搭建中间层，进行请求转发、接口数据聚合、缓存数据、文件访问等操作。

就拿我自己的InspirationNotebook的架构来说，如下图：

InspirationNotebook的中间层是使用nodejs的express框架来搭建的，提供了前端和后台的请求转发、接口聚合、数据缓存和手机端与电脑端的数据同步操作。

由于nodejs层和真正的后台服务器是同源的，所以请求数据时也不会出现太久的响应时间。
其请求转发功能，可以解决一部分跨域的问题。
其数据缓存功能，主要是用于缓存记笔记时笔记本进行的修改操作（这种操作相当频繁，若每次修改都直接请求后端接口，会带来相当大的负载）。
其数据同步功能，则是通过websocket对手机端和电脑端的数据进行一个同步。

当然在本项目中，有部分接口（登录注册）是直接请求的后台接口，并未通过中间层进行传输。个人感觉这种设计有利有弊吧，大家可以根据自己的实际情况去权衡。还有本来要在node层做的服务器渲染，由于时间原因鸽掉了，也是蛮可惜的吧。

另外一方面，针对InspirationNotebook的前端应用，我们首先选取了vue作为前端框架来构建web应用。使用vuex和router来实现状态管理和路由跳转功能。这些都是比较常规的操作了，这里也不做过多的解读了。

2、稍稍总结下

所以就目前来说，一个比较合理的前端架构，需要关注以下三点：
1、nodejs：提供代理，聚合以及根据情况选择服务器渲染。通过api和后端通信。
2、web应用开发：框架的选取、状态管理工具的选取等等（这个有相当高的自由度）。
3.、运维工作：前端项目构建、部署以及系统监控服务。

三、最后说两句

前端开发发展到现在已经有了十多年的时间了，出现了非常多有意思的方向。笔者很想通过这篇博文向大家展示出这些前端比较有魅力的方向，但无奈自己太菜OTZ，只能根据自己的经验浅浅地和大家聊一聊。
如果有什么错误还请指正，不喜勿喷哈。