The days before and after the end made a comprehensive study, to share both modes at the front and rear ends of separate applications, and how to apply to the actual scene, as well as pay attention to the point he landed;
status quo
Before and after the end of the separation development has become the industry standard.
He is the application server (Tomact ...) front and rear ends of the two services effectively decoupled by the web server (Nginx || Nodejs ...) + front and rear ends to achieve the effect of separation.
Technical core idea: to create a front-end HTTP request to invoke back-end services through js Restful API returns JSON data interfaces and interaction
web server: generally refers to as Nginx, Node kind of server, they are generally only suitable for static resources and analytical process control as well as some simple business logic;
Application server: generally refers to as Tomcat, Jetty server can resolve this kind of dynamic resource can be resolved static resources, but no ability to resolve static resources good web server;
The main purpose of his existence is to project development work to achieve a more refined, more professional.
Before and after the end of the separation mode also allows the front end of one of the reasons for this position rapid rise.
Phylogeny
Previous programmer does not divide the front and rear end, all the items are basically Dangdie both a programmer and as a mother, and an all-inclusive, and assign a maximum of one page Aberdeen with the back-end work. During many companies find that as the market develops slowly, mainly the client's experience. Have to ask someone to do this is to optimize the client experience, and then not this type of professional (or is rare species) that may please a small cost.
At this time the company leadership to find programmers conversation, they want to take over this job, but found most of them despise this live dirty and tired, do not mind, it was powerless.
Just did not show leadership sad time, and we just look back a page Aberdeen pair being full of love, full of eager little eyes standing face to face. So it confirmed the eyes, met the right people. From this page Tsai joy began his way of counter-attack, the professional front-end engineers will thus born.
That duty front-end and back-end engineers to differentiate between engineers working to decouple, can not have too many interdependent interference. On the front and rear ends so that the separation pattern obtained in this prevalence.
Front and rear ends of the development model
Not isolated mode
This mode is not too much analyzed;
This mode has two disadvantages:
Code coupling severe front-end HTML code behind the code will appear. To the front backstage template engine, template and diversification. Staff turnover costs are too high
Coupled serious project before and after a project. Front-end development project entirely relies on the back-end, back-end if there is a problem can lead to the front in a wait state
Half-split mode
work process:
1. Open the web, loading basic resources, such as CSS, JS and so on;
2, to initiate an Ajax request and then the server requests data, while demonstrating loading;
3, the data obtained before rendering json DOM format string selection logic according to a template;
4, the string is inserted into the DOM web view page rendering DOM structure;
Above all the progressive implementation of the workflow on the user device, that is to say the client's speed depends entirely on the user's device. If your device more low-end, open the page the slower the speed.
Why is semi-detached, mainly because the Controller not on the front-end layer, front end pages need to communicate it is a synchronous output, or asynchronous rendering JSON? If you need to synchronize the output of the page, can only put the service side, it has to go back up. It can only be said to be semi-detached.
The isolated semi advantages:
1, the code is not coupled, the front end will not have any back-end code is inserted;
2, front-end development does not depend on the back-end services, can focus on client development. An analog front end may also be parallel development by the placement data;
3, can be precise positioning problem, the problem is a front end or a rear end issues;
The isolated semi disadvantages:
1, seo question, search engines can not crawl into asynchronous data page
2, client response speed is not controlled; json returned in large amount of data, when the data processing logic complexity, rendering slow, there will be the case Caton
3, severe resource consumption, the page may require multiple requests to complicated business when rendering is complete. This is reflected in the more prominent mobile terminal
Full separation mode
Full separation, in fact, add a layer of the web server where you can do simple logic processing server.
So the separation of whole development model is:
Front: View and Controller layer is responsible for doing simple parameter control, data conversion.
Rear: DB and Service layer is responsible for doing the business / data processing.
但是前端怎么写Controller呢？难道又要前端学JAVA PHP？那不又是成本加高?这时候nodejs就派上用场了，node.js适合运用在高并发、I/O密集、少量业务逻辑的场景。重要的是前端就不需要新学一名新语言可以快速上手了。
其实全分离模式本质只是在工作职责上做了分工。技术层面是又回到了不分离的原点。
增加中间层的工作职责如下图：
全分离的优点
1、后端服务的适配提升；一个应用要对应输出pc、mobile、app的时候。后端服务就不需要为各端写兼容代码了。统一由前端的web服务器处理即可，维护起来更安全有效率；此时架构应该如下图：
2、减少在客户端处理数据的逻辑代码，提高客户端响应速度；
3、减少客户端资源浪费，需要多HTTP才能拼装好的页面可以在内网一次拼好，再返回给客户端
4、可以借助node服务器渲染，解决seo问题。
全分离/半分离模式的工作流程如下：
按照流程图，我们的工作步骤应该如下：
步骤一、我们从需求评审的时候要求就是所有参与成员必须参加。
步骤二、沟通，协议制定阶段；（这阶段的第1、2小步一定要做好，不然影响第三大步的开发工作）
1、会后前端应该需要先跟UI沟通，设计稿的大概框架，页面效果实现的注意点；
2、前后端制定契约（接口文档），这个应该需要详细到每个字段的描述；
3、测试编写测试用例
第三步、开发阶段
1、前端根据接口文档，模拟API接口进行前端的开发工作（根据跟UI的沟通写大概的布局架构的设计，简单的业务逻辑开发。一定要等UI设计稿完全交互后再进行详细的业务逻辑编写）；
2、后端开发后端服务，并按照文档输出数据即可；或文档有修改一定要通知到下游的前端；
3、测试编写测试代码，如果后端接口开发完毕，前端还未开发联调完。测试可以先开始接口测试；
第四步、联调
第五步、整体测试，第六步、交付上线
从上面看我们的流程在第二，三步都是串联进行的。这样会大大提高我们的开发效率。
但这会有一个小缺点，就是：如果改了之前相关约定的东西，一定要通知到相关人员！！
如果改了之前相关约定的东西，一定要通知到相关人员！！
如果改了之前相关约定的东西，一定要通知到相关人员！！
重要的事情说三遍!!!!!
总结
分离模式的缺点：
沟通成本相对增高，需要团队更紧密和谐的配合，对团队要求相对增高；
职责精细化，需要的人力成本相对增高；
分离模式的优点
1、提高服务端质量；（服务端不再需要兼顾烦杂的前端处理工作。专心做后台框架和业务开发，进行更精准的单元测试）
2、提高客户端访问性能；（腾出空间让前端做各种专业的性能优化）
3、提高项目可维护性；（前端代码规范化，模块化，让前端逻辑清晰明了）
4、提高开发效率；（项目解耦，减少前后端相互等待时间。实行并行开发）
5、减少重复工作；（如果需支持要多端应用，服务端接口基本可以共用）
6、动静态资源解耦，减少应用服务器的并发、负载压力；（所有静态资源可使用CND分发，提高访问效率体验）;
7、提高解决问题效率；（发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方互不干扰）
落地注意点
1、需求评审；（前后端，测试，UI必须参加，并提供出测试用例）
2、接口文档制定；（开发前，前后端必须一起制定出详细的接口文档，输出数据格式，包括字段名，这点非常重要！不然前端会重复返工！）
3、测试工作；（为提高项目进度效率，测试可以在服务端开发完接口后进行一波有效的接口测试。让开发测试并行，减轻后面整体测试的压力和时间。）
4、选型；(至于选择全分离还是半分离，完全根据当下业务来判断，需要不需要增加一层node服务来提高开发效率，已经性能。)
这次分享差不多久这些，如有其他疑问或者更好的理解欢迎在评论区留言讨论。谢谢！！
这次的分享资料也参考了：https://blog.csdn.net/fuzhongmin05/article/details/81591072
这也是我在大汉集团任职产出的东西。感谢大大工匠云平台