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 技术周刊 #

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

每周二更新，欢迎「关注」或者「订阅」。你们也能够在评论处留言本身感兴趣的主题，推荐主题相关的优秀文章。