Recently learned knowledge before and after the end of the separation

Foreword

Only the head can become strong.

Text has been included to my GitHub repository, welcome Star: https://github.com/ZhongFuCheng3y/3y

Separating the front and rear end I believe we have heard the word, do not know is how to understand it. A while back, look at the project, when there is a realization simply did not understand, for everyone to talk about some silly experience below Kazakhstan.

(I have not written formally and front-end, so if the article wrong place hopes a friendly exchange in the comments area ~)

One, change the background

I always knew I now this system is the separation of the front and rear ends, I will only return JSON interface out, but I did not care about front-end is how to deal with my JSON data (and how he ran on and running)

In one day, when I check the interface, habits F12, would like to see what the JSON data directly to request the return of Yes. But a look at the network returns html format:

Information requested

So, I am very curious ah, look at this interface is not what I imagined that. So I went to interface look is not really return JSON (I specifically Debug a bit, see if it is really a request to this interface):

Interface Information

The result is: I interface is indeed return JSON data, the browser returns the reponse is indeed HTML format .

So, I went to the front of my little friends, ask for a moment this is how you do. He replied to me: "see the browser returns a page, it is certainly doing your back-end of it."

I said: "No, ah, I Java interface returns JSON data ah, is not the way you used to do some processing node ah?" (I heard Node.js before, but only heard)

He said: "Node.js is your back-end ah."

I heard, ah? Node.js not belong to the front of it?

Second, the acquaintance Node.js

Before encountering this thing, in fact I know almost have seen a post, this is a topic name《毕设答辩，老师说node不可能写后台怎么办?》

Interested junior partner can go to find out, most of the content was quite easy to understand:

https://www.zhihu.com/question/327657434/answer/704249816

I downloaded Node.jsthe time and found it very brief introduction simple :

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js® is based Chrome V8 engine, the JavaScript runtime.

Then go in Chrome V8 engine, look a little introduction:

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.

V8 is Google's open source and WebAssembly high-performance JavaScript engine, written in C ++. It is used Chrome Node.js and so on.

Read the introduction, and a look ignorant force, which is hell ah. Let me explain

What engine is the 2.1 V8?

As we all know, JavaScript is analytic type language, we write JavaScript code to parse the JavaScript engine, V8 is a JavaScript engine.

In the traditional sense, we think that the parser is resolved one by one (side execution while parsing), but in order to increase the speed of parsing of JavaScript (equivalent to improve the user experience), while parsing made a point of "hands."
V8 Engine : To improve the performance of the analysis, the introduction of a number of "back-end" technology (though he originally written by the C ++). It is the first turn JavaScript source code into an abstract syntax tree, and then the abstract syntax tree generated bytecode. If a function is called multiple times or multiple invocations of the loop (the code hotspots) found, it will be part of the code that the compiler optimization . It means: to focus the code compiler to do, non-hotspot parsing code directly .

schematic diagram

Summary: V8 engine is a JavaScript engine, this engine written in C ++, the performance is very good.

References:

2.2 Back Node.js

To secure browser, does not provide an environment for IO JavaScript , and a back-end language is certainly capable of network communication, file read and write (IO) of.

Later, people have regressed the V8 engine moved to the server , based on the V8 engine added a function of network communication, IO, HTTP and other server-side . We took a name:Node.js

For example, by libuvfor file reading library, as well as the establishment of TCP / UDP connections. By xxxlibrary parsing HTTP requests and responses are from these libraries .... C / C ++ to write.

Transport

So, Node.jsis running on the server side, but on the basis of language is JavaScript.

Third, the front and rear ends separate entry

Look at the history of their own learning JavaWeb:

Just learning the Servlet will write on the response object HTMLcode is output to the browser to see results
Later, learn the JSP, Servlet do it purely control, do JSP view.
- JSP本质上还是一个Servlet，只不过看起来像HTML文件，在编译的时候还是会变成一个HttpJspPage类（该类是HttpServlet的一个子类）
再后来，学到了AJAX技术，发现我们完全可以通过AJAX来进行交互。AJAX请求Servlet，Servlet返回JSON数据回去，AJAX拿到Servlet返回的数据进行解析和处理。这里压根就不需要JSP了(纯HTML+AJAX)，这算是前后端分离的一种了
- 在开发上体验：如果完全使用HTML+AJAX的话，会发现其实需要写非常非常多的JavaScript代码，而且这些JavaScript代码都不好复用。
- 在部署上，还是跟Java一起部署(放在resource下)，没有将前端单独部署。
再后来，学到了一些在常用的模板引擎（比如freemarker)，其实用起来跟JSP没多大的区别，只不过性能要比JSP好不少。
...流下不学无术的泪水

目前我了解到的前后端分离，首先部署是分离的(至少不会跟Java绑定在一起部署)：

And deploy Java front-end separation machine

Java接口只返回JSON数据：

Java interfaces only return data in JSON format

关于前端这几大框架：angular/vue/react这几个我都是没有写过的，所以也就不多BB了。我一直想知道的是：前框框架和node是啥关系。问了一下前端的小伙伴，他回复是大致这样的：

前端现在是讲究工程化的，工程化用到了node而已(就是打包编译那些会用到，项目里面真正跑起来的话是没有这些东西的)

-----------以下引用摘录：

Webpack、Less、Sass、Gulp、Bower以及这些工具的插件都是Node上开发的---@知乎陈龙

举个例子：随着发展，前端的JavaScript需要依赖的包也非常复杂，类比于Java我们会有Maven，而前端现在有npm （包管理）

而npm是随同Node.js一起安装的。所以前端(vue/angular/react)在开发环境下都是离不开Node.js的(编译、打包等等)

参考资料（为什么要使用 npm）：

https://zhuanlan.zhihu.com/p/24357770

3.1 方式一(Nginx+Server)

OK，现在假设我们用前端(vue/angular/react)开发完，开发环境下将JavaScript编译/打包完，那我们能得到纯静态的文件。我们可以直接将纯静态文件放到Nginx(CDN)等等地方【只要能够响应HTTP请求就行】。

如果请求是调用后端服务，则经过Nginx转发到后端服务器，完成响应后经Nginx返回到浏览器。

3.2 方式二（加入Node.js)

在前边的基础上加入Node.js，至于为啥要Node.js，一个重要的原因就是：加快首屏渲染速度，解决SEO问题

加入Node.js，此时的请求流程应该是这样的：

Chart

浏览器发起的请求经过前端机的Nginx进行分发.

URL请求统一分发到Node Server，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据，然后进行页面的组装和渲染；

API请求则直接转发到后端服务器，完成响应。

最后

好的，现在问题来了：你是觉得Node.js归属在后端还是前端？

See is not fun? Recommend what I consider a good article and information:

Willing output of dry cargo of Java technology public number: Java3y . A public number more than 200 original articles technical articles, massive video resources, beautiful mind map, attention can get!

Forwarded to the circle of friends is the biggest support for me!

I think the article is well written, points praise !