现在所谓的前后端分离，本质是不是都在组织和解析 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 他们的工作，那么这事是“谁”在做呢？