## 前后端分离
[Swagger - 前后端分离后的契约 - 破狼 - 博客园](http://www.cnblogs.com/whitewolf/p/4686154.html)
> 比如很多团队采取了后端的模板技术（JSP, FreeMarker, ERB等等），**前端的开发和调试需要一个后台Web容器的支持**，从而无法将前后端开发和部署做到真正的分离。
* * * * *
前端开发就是写模板？为什么我一个做后端的也成天的在写模板？什么鬼？
在开发时就能前后端分离，互不影响开发进度，这才是真正意义上的前后端分离。前端开发时需要后端部署同样的环境，写好控制器功能，前端写模板，这样不算是分离，后端套模板，这不是真正意义上的前端开发，不叫前端工程师，而是模板工程师。
* * * * *
### 终极的分离实践
**如果要彻底的前后端分离，那就不要再把模版交给php处理了**，哪怕再简单的单页着落页也不要后端管，就在中间加一层node.js，可以做页面拼装和简单的逻辑处理和路由等等。后端完全专注于提供接口服务就行了（后端完全专注于接口，即API 和 RPC服务），这种方案应该是前后端分离的最佳实践了。
从此前后端的边界不再是浏览器到服务器的距离，再说node.js本来就是前端应该掌握的，所以服务器上的前端也是前端，这和以往相比，对前端要求更高了，大前端，哈哈。
如果使用node进行前后端分离了的话，那么用于防止 “跨站请求伪造攻击”的 `__token__` 就不能使用api接口获取了，只能使用RPC服务得到了。（传统API是客户端的API，RPC相当于是服务端的API，对外不可见。）
>[danger] 前端（html/js/css） > 中前端（node/nginx/php） > 中后端（php） > 后端（php/swoole/c/go/java）
[狼叔：Node全栈为前端带来更多可能](http://mp.weixin.qq.com/s/IOC7Vv9plh7171Bdz8Z1fQ)
> 页面即服务，而不是后端api为服务，因为只有页面是直接面对用户的。并且一个功能往往是要多个API联合使用的，所以单个API不算是服务。只有页面才算是服务。至少对用户来说是这样的。
> 项目 前端和后端完全分离来做，两个git项目，分开管理。
[专访彭星老师：探究前后端分离存在的意义](https://mp.weixin.qq.com/s/SlwvqEFKrcSRr8FZgBImUQ)
> 控制器要交给前端了，也就是以前由后端控制的url(面向用户，用户看到的，地址栏的url，而非后端api地址)，现在由前端掌控。
>
> 如果把它当应用来做，页面不是很多，使用场景网络环境好的情况下，倾向于使用单页前后端分离方式，如果还是比较传统的网站，页面多，使用场景多样，网络环境不稳定，那么还是传统的模式，直接用node多页模式前后端分离比较好（后端多页渲染现在直接交给了前端而已）。
[前端发展闲聊](https://mp.weixin.qq.com/s/PEIVQe0KEw1JY3IACQnl3Q)
> 其他开发当然也可以来做前端，不过要想做的好，学习代价大到令人发指——而这往往是不能被接受的。
>
> 我甚至认为，前端会成为终端开发的最终解决方案，包括但不限于手机，电视，车载中控等等。
[大家都在说的前后端分离到底是什么？](https://mp.weixin.qq.com/s/EcwargTYzeRcjAx9NEZPjQ)
~~~
对node层不太了解 没太看懂。。。我们的结构是html js css 全部署在cdn上，js访问后端的api
这是最简单普通的一种方案，但是不够强大，还是用node + rpc的方式最好，是目前最好的方式。
~~~
[那些前端MVVM框架是如何诞生的](https://mp.weixin.qq.com/s/UNud9JF23Ba5ncSGxz7fmg)
[渐进式Web应用（PWA）入门教程（上）](https://mp.weixin.qq.com/s/LRxyuLe8cCE_S917yOkMbA)
[前后端交互如何确保数据安全性？](https://mp.weixin.qq.com/s/3QiaO7-Z9q7lowanQsgbpg)
[前端重构方案了解一下](https://mp.weixin.qq.com/s/H9Dvm_5F8hdBrZynlNdlfw)
[【原创】分布式之闲侃前后端分离的必要性 - 孤独烟 - 博客园](https://www.cnblogs.com/rjzheng/p/9185502.html)
> 然后，前端就满脸不爽的在你那调代码了。更有些情商低的后端就直接在旁边开摁手机，实在是。。。。。
>
> 需要数据填充输出基本骨架的部分，用rpc内网调用（同步输出）；其它的数据，首屏后再发起请求调用（异步输出）。
>
> 同步输出的可以做SEO，异步输出的无法SEO。
>[danger] ### 其实我们就是想结束套模板的日子！不想变成所谓的「前端phper」
给页标绑定事件，阻止默认跳转，而是用ajax请求分页链接，后台检测到ajax请求就渲染html片段，检测到是蜘蛛请求就渲染整个页面。可以提高用户体验，但要注意用h5方式无刷新更新url，这样就能提供友好的无刷新翻页体验了。实际使用中就看有没有这么必要这样来优化用户体验了。
[为什么前后端分离了，你比从前更痛苦？](https://mp.weixin.qq.com/s/3fFJth2FYjJYYF1u8r7aTw)
[微前端 - 将微服务理念延伸到前端开发中](https://mp.weixin.qq.com/s/VgcIy3wCLE8J9h_ODWx1Ew)
[前端如何高效的与后端协作开发](https://mp.weixin.qq.com/s/fGQj8eDn7UPURbV4RPKtLA)
[mpvue 在前端项目的应用设计](https://mp.weixin.qq.com/s/0vnEnMwkxv1zcLv_EM6biQ)
[细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）](https://mp.weixin.qq.com/s/bQh-PssTgtnK4aPbTxB4xQ)
[苏宁的Node.js实践：不低于Java的渲染性能、安全稳定迭代快](https://mp.weixin.qq.com/s/kX23axjtgPRb64jb1HQLOQ)
> 使用 Node 模板，去替换 Java 模板，去除了模板文件谁写这样的模糊地带，让后端的 Java 工程师，只写 JSON 服务，实现前后端分离。
* * * * *
### 扩展
[你真的懂前后端分离吗？ - Phodal | 豆瓣阅读](https://read.douban.com/reader/column/5
[哔哩哔哩（B站）的前端之路 - 掘金](https://juejin.im/post/5a473a2df265da431441098c)
[前后端分离的思考与实践（一） - 文章 - 伯乐在线](http://blog.jobbole.com/65513/#tt_daymode=1)
[前后端分离的思考与实践（二） - 文章 - 伯乐在线](http://blog.jobbole.com/65534/#tt_daymode=1)
[如何做好前后端分离？](https://www.toutiao.com/a6312072190104715521/?tt_from=weixin&utm_campaign=client_share×tamp=1515260495&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1)
[web实战开发--前后端分离之js模板渲染](https://www.toutiao.com/a6307131893104738562/?tt_from=weixin&utm_campaign=client_share×tamp=1515261075&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1)
[Mock.js](http://mockjs.com/)
> 让前端攻城师独立于后端进行开发。
[JavaScript 全栈工程师培训教程 - 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2016/11/javascript.html)
[前端开发的历史和趋势](https://github.com/ruanyf/jstraining/blob/master/docs/history.md)
> 互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。
> 那时的前端工程师，实际上是模板工程师，负责编写页面模板。
[ruanyf/jstraining: 全栈工程师培训材料](https://github.com/ruanyf/jstraining)
[React 技术栈](https://github.com/ruanyf/jstraining/blob/master/docs/react.md)
[分层架构，前后端分离有啥坏处？](http://mp.weixin.qq.com/s/ZKjKUkWkNqxiwNEjBDXtiQ)
[互联网分层架构，为啥要前后端分离？](http://mp.weixin.qq.com/s/Nhyo969WnEwyCWpr34ECcA)
[一分钟了解互联网动静分离架构](https://mp.weixin.qq.com/s/Kpsq8MH2TvXQEECyGrmj9A)
> 总数据量不大，生成静态页面数量不多的业务，非常适合于“页面静态化”优化。
[必备，前台与后台分离的架构实践](https://mp.weixin.qq.com/s/d65cXGXp_jcEeELyDZxGVA)
[网站PC版和移动版的模板方案 · 前端笔记 · 看云](https://www.kancloud.cn/xiak/quanduan/411654)
[token是什么东西，登录提交以后后台一定会返回一个token吗？ - justjavac的回答 - SegmentFault](https://segmentfault.com/q/1010000010834287/a-1020000010834335)
> 用在不支持 cookie 的终端。
>
> 原生app。除了浏览器，基本都不支持cookie。
[移动端开发者眼中的前端开发流程变迁与前后端分离 - 掘金](https://juejin.im/post/57b7a88679bc44005b95ebd4)
[优化技巧 ：如何设计一个高质量的URL及页面标题 - Phodal | 豆瓣阅读](https://read.douban.com/reader/column/5945187/chapter/31584440/#)
[专辑：淘宝前后端分离 - FED社区](http://frontenddev.org/column/taobao-full-stack-development/)
[趣店前端团队基于koajs的前后端分离实践 - CNode技术社区](https://cnodejs.org/topic/57b062ed144011da12ff4183)
[参考淘宝团队实践：一个简单粗暴的前后端分离方案 - 51CTO.COM](http://developer.51cto.com/art/201501/463338.htm)
[也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离） - 51CTO.COM](http://developer.51cto.com/art/201404/435984.htm)
[前后端分离实践](http://mp.weixin.qq.com/s/nKvjsU2frT5NDU4DLWqvYg)
> AJAX 异步请求过多等问题。毕竟后端思维和前端思维还是有所不同——前端思维倾向于用户体验，而后端思维则更倾向于业务的技术实现。
[Web 研发模式演变 · Issue #184 · lifesinger/blog](https://github.com/lifesinger/blog/issues/184)
> 1、**前端开发重度依赖开发环境。** 这种架构下，前后端协作有两种模式：一种是前端写 demo，写好后，让后端去套模板。淘宝早期包括现在依旧有大量业务线是这种模式。好处很明显，demo 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大。另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发，支付宝是这种模式。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。
>
> 2、**前后端职责依旧纠缠不清。** Velocity 模板还是蛮强大的，变量、逻辑、宏等特性，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现。Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。
[Web应用的组件化（一）——基本思路 · Issue #6 · xufei/blog](https://github.com/xufei/blog/issues/6)
[如何通过nodejs来实现php的前后端分离？ - 知乎](https://www.zhihu.com/question/26598306)
[基于node的前后端分离初识 - 简书](https://www.jianshu.com/p/61ec19f33018)
[Nodeway--基于node.js的轻量级前后端分离框架 - CSDN博客](http://blog.csdn.net/xingkong0128/article/details/53690400)
[实现前后端分离的心得 - 陈陈jg - 博客园](https://www.cnblogs.com/chenjg/archive/2017/06/12/6992062.html)
[也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离） - 51CTO.COM](http://developer.51cto.com/art/201404/435984.htm)
[图解基于 Node.js 实现前后端分离 - CSDN博客](http://blog.csdn.net/goodmentc/article/details/53576680)
[基于NODEJS的前后端项目分离实践 - - ITeye博客](http://jiangxiao-2000.iteye.com/blog/2219921)
[javascript - 怎样用node和php实现前后端分离，有具体的例子吗 - SegmentFault](https://segmentfault.com/q/1010000009301531)
[node PHP 前后端分离_百度搜索](https://www.baidu.com/s?wd=node+PHP+%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB&rsv_spt=1&rsv_iqid=0xcd62721f0005f537&issp=1&f=3&rsv_bp=0&rsv_idx=2&ie=utf-8&rqlang=&tn=baiduhome_pg&ch=&rsv_enter=1&inputT=5281)
[互联网风雨十年，我所经历的技术变迁](https://mp.weixin.qq.com/s?__biz=MzA4NTg1MjM0Mg==&mid=2657261437&idx=1&sn=c21c3a6f821ecdb17627d9431b9116ad&chksm=84479ea4b33017b286f4b7f43c3d511511de3bc8d7ece978bf9bf18e3c6babde7c829533c587&scene=21#wechat_redirect)
[讨论：开发大型后台管理系统，应该采用前后端分离吗？](https://mp.weixin.qq.com/s/WFWz02sVU1W-477t7BQAUw)
* * * * *
last update：2018-1-25 14:51:12
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗？
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践（一）
- 前后端分离的思考与实践（二）
- 前后端分离的思考与实践（三）
- 前后端分离的思考与实践（四）
- 前后端分离的思考与实践（五）
- 前后端分离的思考与实践（六）
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑，为什么要设置成百分比，为什么又是62.5%
- 为什么以一个标准适配的，其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配：都用百分比？
- 番外篇
- 给你看看0.5px长什么样？
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px（二）
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖