SegmentFault 技术周刊 Vol.3 - 前后端分离与前端工程化

小编：听了这么多前后端分离，今天小编就来和各位好好聊一聊。
编小：请问小编，前后端分离是什么？为什么要这么做？具体怎么做？
小编：咳咳，前后端分离的问题啊。简单的说，就是前端负责浏览器端用户交互界面和逻辑等，显示数据；后端负责数据的处理和存储等，提供数据。要详细说……还是要具体到项目里理解，再编就编不下去了 还是看我们这一期的周刊吧。

本期周刊，是社区的小伙伴关于前后端分离的内容，包括何为前后端分离，前后端分离的意义，以及各家在前后端分离上做过的尝试等。我们从前端技术发展，来看这几年越来越成熟的前端工程，组件化和模块化的大势所趋，或许会更好地理解为何前后端分离越来越重要。

前后端分离探索之路

n͛i͛g͛h͛t͛i͛r͛e͛ - 前后分离架构的探索之路

探索前后分离并不是像很多旁观者说的“为了分离而分离”，反而是“为了更好的理解 web 开发这回事而分离。”

劳卜 - 我们为什么要尝试前后端分离

• 项目一开始制作前端页面的时候，我不再需要后台给我配置服务器环境了

• 项目的前端文件可以在需要调用后台接口的时候丢进服务器就好了，完全不需要事先放进去

• 增加一个项目页面需要配置路由的时候不再需要让后台同事给我加了，自己前端搞定

• 页面跳转比之前更加流畅了，局部渲染局部加载非常快速

• 页面模板可以重复使用了，前端组件化开发提高了开发效率

• ……

好处太多了。

戴嘉华 - Web 前后端分离开发思路

在原始的前后端分工下，会经常有这样的疑惑：既然前端数据是由后端提供，那么后端数据接口还没有完成，前端是否就无法进行编码？怎么样才能做到前后端独立开发？

你会说，可以本地前后端连接一下，使用 API 模拟数据请求，那又出现新的问题，难道每写一个 API 都要把前后端连接测试一遍吗？而且，我如果需要测试某个 API，而你的这个 API 还没写好，那我这个功能模块的进度就“阻塞”了。

后面还有那么多 API 需要写，所以不能这么做。

arccode - 前后端完全分离之 API 设计

前后端完全分离后，前端和后端如何交互呢？答案是，通过双方协商好的 API。本文详细介绍 API 的设计及异常处理。

Justin_lu - 前后端分离实践 — 如何解决跨域问题

“后端提供 API，前端消费 API”。而即使这样让分工更专注，跨域也还是一个需要解决的重要问题，本文就来说说如何解决跨域。

更多阅读：

• wilee - 趣店前端团队基于 koajs 的前后端分离实践

• 将就 - Vue.js + LeanCloud（node.js）前后端分离开发样板

• 飞龙 - 我谈前后端分离

还有前端工程呢

“现在的前端早已不是几年前的前端，再也不是 jQuery 加一个插件就能解决问题的时代。”

kuitos - 前端工程化知识要点回顾&思考

「一套好的工程化解决方案，能在提高开发效率（包括代码编写的舒适度及多人协作）的同时，确保整个系统的伸缩性（各种不同的部署环境）及健壮性（安全），同时在性能上又能有一个很优异的表现（主要上各种缓存策略加载策略等），而且这套方案又应该是对工程师无感知（或感知很小）趋于自动化的一套方案。」

lixiang - 公司前端开发架构改造

统一多端的问题、组件化开发、模块化开发和打包、自动更新缓存……看作者如何利用 Gulp 和 Webpack 这两个工具，对公司前端开发进行改造，对团队整个开发的思想与模式进行改造。

keelii - 京东单品页前端开发那些不得不说的事儿

以京东单品页的前端开发为例，从前端发展历史说起，介绍了单品页前端模块的结构与划分、前端的技能树、前端工程化的应用、程序设计以及产品等多块知识，这是一篇不可错过的前端学习图谱。

dmyang - 基于 webpack 搭建前端工程解决方案探索

• 提供开发所需的一整套运行环境，这和 IDE 作用类似

• 资源管理，包括资源获取、依赖处理、实时更新、按需加载、公共模块管理等

• 打通研发链路的各个环节，debug、mock、proxy、test、build、deploy 等

• ……

前端工程，起码需要这些基本开发环节的问题，本文以开发一个多页面型 Web App 为例，介绍 webpack 的基本原理，以及基于 webpack 搭建纯静态页面型前端项目工程化解决方案的思路，给出以上问题的解决方案。

xiaoyann - 使用 webpack + react + redux + es6 开发组件化前端项目

标题就能看出来，这是一篇真·实战，文章最后还有对使用 webpack 的问题及性能优化作出的总结。

fwon - gulp + webpack 构建多页面前端项目

这篇是最近很流行的工程中工具化的代表，使用 gulp 和 webpack 工程化构建多页面项目，还有比这适用性更高的么？

kuitos - 基于 git hooks 的前端代码质量控制解决方案

当前的 code review 过程总是不尽人意，你是否尝试过基于 git 的 hook 功能来做一些自动化的事情呢？作者就想这个办法，通过 git hooks 里配置预处理脚本，让每次提交代码时做 code check，如果没有通过直接拒绝接收 push。（是不是够狠…

更多阅读：

• kuitos - 2015前端生态发展回顾

• 欧雷 - 前端工程优化之路、团队中的 Node.js 实践

• 题叶 - 以 Flux 角度从头考虑后端架构

（本期完）

往期周刊传送门：Vol.1 - Vue.js 起手式 | Vol.2 - 666，ES6

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。

每周二更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。