What operation is separated front and rear ends

turn

 

Before and after the end of the separation has become an industry standard way to use the Internet project developed by nginx + tomcat way (you can also add a middle nodejs) effective decoupling, and the front and rear end of the separation will be for the future of large-scale distributed architecture, flexible computing architecture , micro-service architecture, multi-terminal services (a variety of clients, such as: browser, vehicle terminal, Android, IOS, etc.) and lay a solid foundation. This step is a system architecture evolution from ape adult pass.

 

The core idea is a front-end interface to restuful api html page via ajax calls to the backend and uses json data interaction.

In the Internet architecture, Glossary:

Web server: generally refers to as nginx, apache kind of server, they generally can only parse static resources.

Application server: generally refers to as tomcat, jetty, resin such servers can resolve the dynamic resource can be resolved static resources, but the ability to parse static resources to no good web server.

Usually only web server can be accessed outside the network, application servers can only access the network.

First, the developer separation

Previous JavaWeb most of the projects are Java programmers Dangdie mother, but also to engage in front-end, back-end and engage.

With the development of the times, many medium and small companies gradually began to front and rear ends of the boundary points more and more clear, front-end engineers just do the front, the back-end engineer just the back end of things. The so-called industry specializing in surgery, a person would if anything, he, after all, nothing fine.

And medium-sized companies need professionals, small companies need all-rounder, but for personal and professional development, a small advice is separate.

1. For the back-end Java Engineer:

To focus on the basics of Java, design patterns, jvm principle, spring + springmvc principle and source, linux, mysql transaction isolation and lock mechanism, mongodb, http / tcp, multi-threaded, distributed architecture, flexible computing architecture, micro-architecture services, Java performance tuning, and related project management.

Back-end pursuit of: three high (high concurrency, high availability, high performance), security, storage, business and so on.

2. For the front-end engineers:

To focus on html5, css3, jquery, angularjs, bootstrap, reactjs, vuejs, webpack, less / sass, gulp, nodejs, Google V8 engine, javascript multithreading, modular, aspect-oriented programming, design patterns, browser compatibility , performance optimization, and so on.

The front end is the pursuit: page performance, speed and smooth, compatibility, user experience and so on.

Industry specializing in surgery, so your core competencies will be getting higher and higher, as the saying what you put into life, life will be back to you what. And the development of both ends are more profound, what would you think, after all, nothing that you fine.

The team is divided into before and after by-side team, so that both sides of the engineers focus more on their respective fields, independent governance, to build a team and then a full-stack of excellence.

Second, the primitive era (various coupling)

Few have when we are using a number of projects are JavaWeb background frame, springmvc / struts + spring + spring jdbc / hibernate / mybatis and so on.

Most of the projects in Java backend are divided into three layers, the control layer, the business layer, persistence layer. Layer is responsible for receiving the control parameters, call-related business layer, encapsulating the data, and to route & rendering jsp pages. Then use the various tabs or jsp page handwritten java expression will show the background data out, playing the MVC set of ideas.

We look at this situation: demand set finished, the code finished, test test is over, then what? To publish it? You need to use tools such as eclipse maven or put your code labeled as a war package, and then publish the war package to a web container in your production environment, right?

After the release is over, you want to start your Web container, began offering the service, this time you configure the domain name, dns, etc. related to your web site can be visited (assuming you are a website). Then we look at your front and back end code is not all that war in the bag? Including your js, css, pictures, various third-party libraries, right?

Well, here you enter your website domain (www.xxx.com) in the browser, and then what happened?

After the browser found in a domain name by dns server server outside the network ip, send http request to the server, after tcp3 handshake (http The following is a tcp / ip), tcp begin transmitting protocol data, the server gets the request, began offering services Receive an argument, then returns the response to the browser, then the browser to parse the content returned by the content-type, presented to the user.

Then we look, let's assume that your home has 100 pictures, this time, it seems a http request from the user, in fact, not once, when users first visit, there will be in the browser cache, 100 pictures browser to http request attached to the request 100, the server receives these requests, we need to create the cost of memory to play tcp socket transmission.

Focus here, this is the case, the pressure will be very big server, because all requests are only requests a page on this server, if one person okay, if 10,000 people concurrent access to it, that the number of servers can Kang Zhu tcp connection? Bandwidth How much? How much memory on the server? High-performance hard drive is it? How many IO withstood? web server points How much memory? Will downtime?

That is why, the more medium and large web applications, the more they want to decouple. The database can theoretically + service + application message queue buffer + + + users to upload files log +, etc. are thrown on a single server, which do not play any service management, performance monitoring what has to be done, what alarm mechanism etc., 乱成一锅粥 better. But this is like putting all their eggs in one basket, the risk is very large. If a child because of the instability of the entire application memory server memory overflow hung live, the whole site and hung up.

If you accidentally hang out, and just then your business is in the development spurt and the peak of business success is stuck technology, it is likely to lose a lot of users, the consequences could be disastrous.

In addition, the application of all coupled together, the equivalent of a boulder, when there is insufficient server load capacity, generally use of load balancing, server clusters made, so in fact you are in a horizontal expansion of a block of stone, performance acceleration will getting lower and lower, you know, load itself on low function or module level is not necessary to extend the examples in this article is the performance bottleneck is not in the front, then why should expand the level of the front end of it? There are hair when deployed on-line version, obviously only changed backend code, why should the front followed the release of it?

Normal architecture of the Internet, is to be disassembled, web server clustering, application server cluster file server cluster + + + database server clusters Message Queuing cluster + cache cluster and so on.

Three, JSP pain points

 

Previous javaWeb as most of the projects use jsp page that reveals the data to the user, because the traffic is not high, and therefore less demanding performance requirements, but now it is the era of big data, performance requirements for Internet projects is increasing, and therefore the original architectural patterns front and rear ends are coupled together have been increasingly unable to meet us, so we need to find a way to be decoupled way to greatly enhance our ability to load.

1. Coupled dynamic resource and static resources all together, server pressure, because the server will receive various http requests, such as http request css, js, images, and so on. Once the server situation occurs, it comes to an end with the front and back, the user experience is poor.
2. After a good UI design, front-end engineer is only responsible for the design cut into html, html needs to be set by the engineer java jsp page into a high error rate (often because the page will be a lot of js code), the question of amending The two sides need to co-develop and inefficient.
3. jsp must run support java web server in (eg tomcat, jetty, resin, etc.), can not use nginx, etc. (http concurrent nginx is said that a single instance of up to 5w, use this advantage), not to mention the performance up.
4. The first request jsp, must be compiled into a servlet in the web server, the first run will be slower.
5. Each request to access the servlet jsp are then output stream html pages, using a high efficiency is not directly html (each time yo pro ~).
6. There are more in the jsp tags and expressions, in the front-end engineers will be hard-pressed to modify the page, encounter a lot of pain points.
7. If the content of many jsp page is slow to respond, because it is loaded synchronously.
8. Front-end engineers need to use java-ide (eg eclipse), and the need to configure a variety of back-end development environment, you have considered the feelings of front-end engineers do.

Based on the above number of pain points, we should be right to develop the entire project forward weight shift, true decoupling of the front and rear end!

Fourth, the development model

Before the old way is:

1. Product experience / leadership / customer requires
2. UI design to make
3. Front-end engineers do html page
4. 后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低）
5. 集成出现问题
6. 前端返工
7. 后端返工
8. 二次集成
9. 集成成功
10. 交付

新的方式是：

1. 产品经历/领导/客户提出需求
2. UI做出设计图
3. 前后端约定接口&数据&参数
4. 前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）
5. 前后端集成
6. 前端页面调整
7. 集成成功
8. 交付

五、请求方式

以前老的方式是：

1. 客户端请求
2. 服务端的servlet或controller接收请求（后端控制路由与渲染页面，整个项目开发的权重大部分在后端）
3. 调用service,dao代码完成业务逻辑
4. 返回jsp
5. jsp展现一些动态的代码

新的方式是：

1. 浏览器发送请求
2. 直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）
3. html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）
4. 填充html，展现动态效果，在页面上进行解析并操作DOM。

总结一下新的方式的请求步骤：

大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群

同时又可以玩分模块，还可以按业务拆成一个个的小集群，为后面的架构升级做准备。

六、前后端分离的优势

1. 可以实现真正的前后端解耦，前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）
2. 发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方互不干扰，前端与后端是相亲相爱的一家人。
3. 在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）
4. 减少后端服务器的并发/负载压力。除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。
5. 即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
6. 也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）
7. 页面显示的东西再多也不怕，因为是异步加载。
8. nginx支持页面热部署，不用重启服务器，前端升级更无缝。
9. 增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。
10. 提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。
11. 在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。
12. 前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！

七、注意事项

1. 在开需求会议的时候，前后端工程师必须全部参加，并且需要制定好接口文档，后端工程师要写好测试用例（2个维度），不要让前端工程师充当你的专职测试，推荐使用chrome的插件postman或soapui或jmeter，service层的测试用例拿junit写。ps：前端也可以玩单元测试吗？
2. 上述的接口并不是java里的interface，说白了调用接口就是调用你controler里的方法。
3. 加重了前端团队的工作量，减轻了后端团队的工作量，提高了性能和可扩展性。
4. 我们需要一些前端的框架来解决类似于页面嵌套，分页，页面跳转控制等功能。（上面提到的那些前端框架）。
5. 如果你的项目很小，或者是一个单纯的内网项目，那你大可放心，不用任何架构而言，但是如果你的项目是外网项目，呵呵哒。
6. 以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面，仁者见仁智者见智。
7. 这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉，可没说jsp可以完全不学，对于一些学生朋友来说，jsp/servlet等相关的java web基础还是要掌握牢的，不然你以为springmvc这种框架是基于什么来写的？
8. 如果页面上有一些权限等等相关的校验，那么这些相关的数据也可以通过ajax从接口里拿。
9. 对于既可以前端做也可以后端做的逻辑，我建议是放到前端，为什么？因为你的逻辑需要计算资源进行计算，如果放到后端去run逻辑，则会消耗带宽&内存&cpu等等计算资源，你要记住一点就是服务端的计算资源是有限的，而如果放到前端，使用的是客户端的计算资源，这样你的服务端负载就会下降（高并发场景）。类似于数据校验这种，前后端都需要做！
10. 前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展示给用户。

八、扩展阅读

1. 其实对于js，css，图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上（如果是普通的服务器&操作系统，存储在到达pb级的文件后，或者单个文件夹内的文件数量达到3-5万，io会有很严重的性能问题），再在oss上配cdn（全国子节点加速），这样你页面打开的速度像飞一样， 无论你在全国的哪个地方，并且你的nginx的负载会进一步降低。
2. 如果你要玩轻量级微服务架构，要使用nodejs做网关，用nodejs的好处还有利于seo优化，因为nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据，不会解析页面中的js，这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染，需要把静态页面返回到浏览器，然后完成渲染工作，这加重了浏览器的渲染负担。浏览器发起的请求经过nginx进行分发，URL请求统一分发到nodejs，在nodejs中进行页面组装渲染；API请求则直接发送到后端服务器，完成响应。
3. 如果遇到跨域问题，spring4的CORS可以完美解决，但一般使用nginx反向代理都不会有跨域问题，除非你把前端服务和后端服务分成两个域名。JSONP的方式也被淘汰掉了。
4. 如果想玩多端应用，注意要去掉tomcat原生的session机制，要使用token机制，使用缓存（因为是分布式系统），做单点，对于token机制的安全性问题，可以搜一下jwt。
5. 前端项目中可以加入mock测试（构造虚拟测试对象来模拟后端，可以独立开发和测试），后端需要有详细的测试用例，保证服务的可用性与稳定性。

九、总结

Front and rear ends is not merely a separate development model, but an architectural pattern (front and rear end separation architecture). Do not think that only when the code line and the front and rear separate front and rear end is separated from the need to distinguish between the front and rear end of the project. Front-end and back-end project is a project of two projects, on two different servers, the need to deploy a separate, two different projects, two different code bases, different developers. Front and rear end engineers need the agreement interactive interface to achieve parallel development, the need for independent development after the end of the deployment, the front end to the back-end by calling http ajax request to call a restful api. The front page only need to focus on the style and analysis & rendering dynamic data, and focus on the specific back-end business logic.

 

 

Original: https://www.toutiao.com/a6583908446138008078/