现在所谓的前后端分离，本质是不是都在组织和解析 json ?

[libasten]

本人属于 web 开发新人，最近接触一些内容，有些认知，不知正确与否。

现在所谓的前后端分离，本质是不是都在组织和解析 json ? 或者说序列化和反序列化 json 显得更专业一点？

前端，是不是本质还是读取 api 出来的 json，然后控制显示隐藏啥的。

与后台交互这块，前端处理好 json，一把推给 api 。

而现在流行的啥框架，vuejs 和 angular 之类的，是不是把原生 js 做了一些封装，可以“便捷”地进行 json 处理，甚至有些时候 json 对前端开发者都是一种“不可见”状态。

而早期的 jQuery 和原生 js 都能实现这样的功能，无非是繁琐一些。

不知道理解的对不对？

[shintendo]

本质在于后端是输出页面还是输出数据，json 只不过是数据的一种形式而已。
至于“vuejs 和 angular 之类的，是不是把原生 js 做了一些封装，可以便捷地进行 json 处理”，则是完全不沾边的理解，不知道从何而来。

[also24]

要想了解什么是『前后端分离』，应当先了解什么是『前后端不分离』。


猜猜为什么 php 支持和 html 混写？

[orzorzorzorz]

总不能给客户直接看数据库那一行行的数据吧？行，那把数据搞到浏览器上。
要增加就业？行，前后端分离。
那么前后端该不交互了？行，约定下规范开始干活吧。
你一套我一套累不累？行，业界共识 json 好，那按 json 来。
还要增加就业？行，你懒得写请求啊渲染啊这类模版代码，我(ng)给你们写好了，甚至还在三年后等你们。

[libasten]

@shintendo 您说的完全不沾边，那 vuejs 这类框架是做什么工作的？我理解的就是组织渲染数据到页面中呀。

@orzorzorzorz 谢谢，说的很好。

[libasten]

@also24 php 这类的就属于输出页面吧？页面在服务器上生成了，也就没法讨论“分离”了？

[acthtml]

你说的本质我觉得是一种形式。
本质是两种不同系统进行解耦开发。

[also24]

@libasten #5
『服务器生成并输出页面』 其实就是『前后端不分离』的重要特征

[learningman]

就是在约定好了交换数据的格式之后。前端和后端就算一句话都不说，也能把开发完成。
当然这只是一种夸张的说法。

[agdhole]

原生 JS 和 jQuery 可以实现同样的功能，但是不是繁琐一点，是非常繁琐。

现在的框架把数据和 DOM 隔离开来，只需要操作数据变动 DOM 就能自动更新，然后再根据业务的需求衍生出了很多解决方案 /组件

[luckyrayyy]

区别是页面在前端渲染还是后端渲染。

原生 js 当然也可以，不过累死个人。

[libasten]

@agdhole 看来自动化变动 dom 是前端框架组件最大的功效了吧？我现在一个系统用 jquery 一把梭，真是感觉越来越烦。无数的 ajax 请求，无数的变动页面 dom 操作。

不过你说的这种“自动更新”的前提，也是有一个数据绑定动作吧？能否理解成绑定后，框架自动去读取 api，刷新页面了？

[stabc]

不是。如果仅仅是组织处理 JSON，那就不需要后端了。

[agdhole]

@libasten #11
早期框架确实是这样的卖点，不用操作 dom 。
例如 vue，数据只需要放进 v-model 或者 v-for 之类的，然后母数据变动，组件自动变动，不需要手动操作 DOM 。

举个例子：
```
<li v-for="(item, i) in items" :key="i">{{ item.title }}</li>

data: () => ({
items: ['a', 'b', 'c']
})
```

然后只要你的 itmes 随便变成啥，<li> 这个组件的数据也会自动更新。

再后来随着工程化和前端项目越来越大型，管理越来越麻烦，周边的轮子也就起来了，比如 typescript，或者 rxjs 之类的。

如果是后端，Java C# 来写前端，推荐 angular 。
初学者或者 PHP 系的，推荐 vue

[agdhole]

上面打错了 {{ item.title }} -> {{ item }}

[also24]

越说越歪，感觉有些朋友可能把 SPA （ Single Page Application ）和『前后端分离』搞混了吧。

『前后端分离』的对立面是 『前后端不分离』。


为什么会 『不分离』，因为早期 Web 开发，HTML 页面都是由后端语言直接输出的。
php 为什么支持 HTML 混写？看看 php 官网的简介： https://www.php.net/manual/en/intro-whatis.php

php 对自身的定位就是 "Hypertext Preprocessor" ，天生就是嵌在 HTML 里的。
Hypertext 是什么？ HTML 是 Hypertext Markup Language 的简称。
Hypertext Preprocessor 是什么？对 Hypertext 进行预处理的程序。

除了语言自身对输出 HTML 的支持，为此还产生了一个专门的中间件『模板引擎』，用来辅助高效输出页面，比如下面这些，都是很常见的模板引擎：
https://twig.symfony.com/
https://www.thymeleaf.org/
https://jinja.palletsprojects.com/
https://docs.djangoproject.com/en/3.0/ref/templates/language/


于此相对应的，则是将页面的 HTML 内容静态化，通过 Ajax / JSONP 等方式获取数据，使用 JS 将数据渲染至页面的方式。
当整个页面的 HTML 都不再依赖后端输出，也就是前端页面自身的『 HTML 部分』不再依赖后端代码，我们就称之为『前后端分离』。

[also24]

至于 SPA 和 『前后端分离』的关系。

在绝大部分情况下，SPA 都是前后端分离的。
但是两者并没有任何绑定关系。

我完全可以将一个 SPA 的代码嵌入某后端程序的模板引擎内，将某些变量与后端程序关联，并使用后端程序输出。
虽然正常情况下没有几个人会这么干，但是这样制作出前后端不分离的 SPA 是完全没问题的。

[rnicrosoft]

前后端不分离，电脑手机 app 小程序都要后端来输出页面，加个功能全都得改，后端不得暴走

[hronro]

@libasten #4

〉您说的完全不沾边，那 vuejs 这类框架是做什么工作的？我理解的就是组织渲染数据到页面中呀。

我记得 15 年我刚开始看 React.js 文档那会儿，整个文档完全没提该如何和服务端交互，官方的说法是，和服务端交互并不属于 React.js 该管的范围。现在 2020 年了，文档比当年完善了许多，或许有了和服务端交互的部分，不过这并不影响 React.js/Vue.js 这类框架本身的定位。

其实你可以理解成现代网页前端开发，和桌面应用开发差不多，都是在做一种 GUI 应用开发，只不过网页开发是基于 browser 的，桌面应用是基于 OS 提供的 native widgets 的（但其实现在很多桌面应用也是基于 Electron 的了）。你想想看，想 Windows 上的记事本或者计算器这类应用，很明显它们并不需要和后端进行交互。虽然 Web App 中需要和后端交互的比例要比桌面应用高一些，但也不是必要条件。所以 React.js/Vue.js 这些框架 /库，它们做的其实只是把一些数据结构渲染成 UI 而已，至于这些数据结构是从后端来的，还是客户端自己定义生成的，其实这些框架并不关心。以我的经验看来，一个前后端分离比较彻底的应用，客户端自己定义生成的数据结构，应该占大多数才对。

[passerbytiny]

在你对 MVC 、MVVM 、MVP 甚至连 Model 都不了解的情况下，去学习前后端分离，无异于还不会走路就去跑

[libasten]

@hronro 感谢讲解这么多。
那么后端 api 供出的数据和浏览器页面中数据传输的工作不是 react.js 他们的工作，那么这事是“谁”在做呢？

[santom]

XMLHttpRequest @libasten

[windychen0]

@libasten 那你还不考虑用 vue 那些框架，数据双向绑定香的一批

[windychen0]

前后端分离来说，本质上就是由前端绘制不变的部分，然后向后端提供或者请求会变的数据，所以其实做前后端分离的其实只要会 ajax 和基本的 js，html 就行了，然后 vue 框架这类，不仅仅是便捷的处理数据，更多的是代表一种设计理念，让前端开发从不停的更改 dom 和获取表单中解脱出来，同时组件化和 solt 插槽之类的就是“高内聚,低耦合”的实现。

[lewinlan]

为什么楼上连『前后端分离』这个概念也有得黑？
术业有专攻，前端专注表现，后端专注性能，这是行业发展对效率的自然追求。
什么叫为了增加就业？？您是找不到工作了还是新知识学不会了？

[whatisnew]

response content-type: application/json;
response content-type: text/html 的区别。

直接 response text/html 少了到少一次 http request 。但是增加了大型项目维护的复杂度。

[woodensail]

@libasten react.js 比较特殊，vue 或 ng 都是完整的 MVX 类型框架。
而 react.js 则只负责 View 层工作，其他部分的工作则交由生态链内的其他库完成，比如 Redux

[areless]

js 被视为不安全并且不启用的 ie4 时代也有前端这个职业。那时候前端主要负责 view 层。模板分离。做图表什么都是后端的事情。现在前端把活全揽了，后端天天坐在办公室嗑瓜子别提有多开心。

[Tink]

主要是为了解耦，让前端把页面一直固定不变的东西画出来，后端去更新那些变化的数据。至于 json 只是格式，xml 也可。

[woodensail]

然后，讲下关于 MVVM/MVP/MVC 等 MVX 类型框架为什么会流行起来。

MVX 框架兴起的本质是前端开发从事件驱动向数据驱动的转变。

早期，前端都是用户做了什么操作，或者接口拿到某些数据，就去用 jq 修改页面上某个节点或组件的状态。简单直白而且高效。
但是，随着业务逻辑越来越负责，一个操作或接口可能会需要修改几处甚至更多的地方，同时这些地方也不是只受该操作影响，修改时还需要考虑其他变量来决定是否修改或如何修改。此时，单纯的在回调函数中写 dom 操作由于难度过高已经是不可能的了。

然后很多人会选择改成数据驱动，把用户的各种操作和请求的数据记录在变量中，每次这些变量有变化后，调用一次 refresh 方法，refresh 方法中跟据变量中的数据，重新计算一遍页面应该如何展示，然后渲染到页面中。于是工作量一降低。
不过，这种方式虽然开发难度大大降低，但是这种手动全刷新的逻辑是低效而累赘的。于是，先是各种前端模板工具兴起，然后是 backbone，知道现在 react/vue/ng 。出现了各种框架来降低数据绑定的开发量，并提高数据绑定的性能。

[zqx]

前后端分离后，至少需要两个服务才能让用户使用网站，一个是提供 API 的服务端程序，一个是将域名端口映射到到 html 资源的 Web 服务器，用户加载 HTML 后由浏览器执行脚本进行 API 调用和页面渲染，这中间数据交换的格式可以是 json，也可以是 formdata，二进制，有哪些合法的格式是 HTTP 协议规定的

[fancy111]

其实你说的并没有太多错误，本质上就是这样的。 上面那些人可能都没往底层学过。
当然 json 只是一种数据格式，现在比较流行便捷而已，本质上都是解析这些数据，然后渲染到前端。
而前端框架本身就是基于 JS 的封装，这也是框架的定义，而不是独立语言。

[stevenkang]

本质是增加就业。

简单的事情复杂化，复杂的事情工程化。这样后端就看不懂前端代码了，老板就需要招更多的人来维护了。

后端只管提供数据的输入输出能力，前端只管拿到数据进行加工处理。

后端面向前端，前端面向用户的交互。

[charlie21]

在更早时候，一个网站的主要业务逻辑是服务器端在 “提供服务”，那个时候手机端就是用的 web api 这就是 JSON 数据格式，手机端拿到 JSON 之后在手机 app 里渲染出来（读取列表 显示帖子 更新用户设置 etc. 常见功能网页端可以做 手机端也可以做），点个按钮提交也是发送一个 POST 请求给 web api 。一个流行的服务器端知识是 RESTful API
https://www.ruanyifeng.com/blog/2014/05/restful_api.html

后面就是发展为类似 wordpress WPAPI 这种的。服务器端依然是 api 的提供者，客户端依然是 api 的调用者 /消费者（拿到数据之后自己负责渲染）
https://mobile.twitter.com/rleija_/status/1304042756369776641

https://www.jianshu.com/p/293f74ca1f71
基于 MVC 理解 React+Redux 这里以 MVC 架构为切入点给出了 the big picture 就是渲染 JSON 。
虽然实际上准确地说，之前的 backbone.js 是 MVC 架构
https://bbs.huaweicloud.com/blogs/260811

而当代网页端三大框架 react vue angular 是基于组件的架构
https://www.freecodecamp.org/news/is-mvc-dead-for-the-frontend-35b4d1fe39ec

[charlie21]

这是现代框架关注的问题 https://baurine.netlify.app/2019/08/16/website-architectures/
这是 backbone.js 关注的问题 https://vence.github.io/2015/05/14/backbone-info/#很显然，这里没有拆组件什么的