First, foreplay
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.
Second, the industry specializing in surgery (developer separation)
Previous JavaWeb projects are mostly 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, I recommend separate.
1, for the back-end java Engineer:
To focus on java-based, 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 optimization, and related project management.
Back-end pursuit of: three high (high concurrency, high availability, high performance), security, storage, business and so on.
2, for 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.
Third, 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 are in the java backend 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? (This issue is also a lot of companies face questions) I pick up dry say ah, poor foundation to search at your own shoes.
Browser found in a domain name by dns servers your server outside the network ip, send http request to your server, after tcp3 handshake (http The following is a tcp / ip), began to transmit data over tcp protocol, your server gets after the request, began to provide services, receive parameters, and then return your response to the browser, the browser and then you returned to parse the content by 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, your 100 pictures, the browser attached to the request 100 http request (somebody told me long even a short question http connected, are not discussed here), your server receives these requests, we need to create a socket for the cost of memory play tcp transmission (meters for four on your server, JSP's 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, dynamic resource and static resources coupled 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), modify The two sides need to develop synergies when problems inefficiencies.
3, jsp have to run (such as tomcat, jetty, resin, etc.), and so can not be used in support nginx web server in java (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 page, high efficiency is not directly html (each time yo pro ~).
6, there are more labels inside jsp and expression, when 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!
Fifth, the development model
Before the old way is:
1, the product experience / leadership / customer requires
2, UI design to make
3, front-end engineers do html page
4, back-end engineers will set into html page jsp page (front and rear ends of the strong dependence of the other front-end to back-end must do in order to set html jsp. If html is changed, the more pain, the development of low efficiency)
5, integration problems
6, front-end rework
7, the back-end rework
8, the second integrated
9, the successful integration
10, Delivery
The new way:
1, the product experience / leadership / customer requires
2, UI design to make
3, front and rear ends convention & parameter data interfaces &
4, front and rear ends parallel development (no strong dependence, can develop parallel front and rear ends, if needs change request changes, as long as the interface & parameters constant, both sides do not change the code, the development of high efficiency)
5, the integrated front and rear ends
6, adjust the front page
7, the successful integration
8, Delivery
Sixth, request method
Before the old way is:
1, the client requests
2, servlet server or controller receives the request of (the right to control routing and back-end rendering the page, the entire project development of a significant part in the back-end)
3, call the service, dao business logic code completion
4, return jsp
5, jsp show some dynamic code
The new way:
1, the browser sends a request
2, directly to the html page (front-end control routing and rendering the page, the right to re-develop the entire project forward)
3, html page is responsible for calling the server interface generates data (via ajax and so on, back to return json format data, json data format as simple and efficient and replace xml)
4, filled html, showing the dynamics effects on the page and parsing operation DOM.
To summarize the steps request a new way:
Large number of concurrent browser request ---> web server cluster (nginx) ---> application server cluster (tomcat) ---> file / database / cache / Message Queue Server Cluster
While you can play sub-module, it can also be split by business into one of the small clusters, to prepare for the following schema upgrade.
Seven, before and after separation benefits
1, the front and rear ends may be true decoupling, front-end server to use nginx. Front-end / WEB server put the css, js, images, and so on a series of static resources (You can even css, js, images and other resources into a specific file server, such as Ali cloud oss, and use the cdn acceleration), the front end server responsible for controlling page references & Jump & routing, call the back end of the front page of asynchronous interfaces, backend / server application using the tomcat (tomcat to imagine a data provider) to speed up the overall response rate. (We should use some of the front-end engineering framework such as nodejs, react, router, react, redux, webpack)
2, found that bug, who can quickly locate the problem will not pass the buck to each other phenomenon. Page logic, jump error, browser compatibility issues, script errors, page styles and so on, all to be responsible for the front-end engineers. Interface data error, the data is not submitted successfully, the response timeout problems all solved by the backend engineer. The two sides without disturbing each other, love each other front and back of the family.
3. In a large concurrent case, I can scale horizontally while the front and rear end servers, such as Taobao will need a Home 2000 + front-end server clusters to do withstood daily how many billions of daily + pv. (Go to Ali's technology summit, they said they listen to the web container are to write their own, even if he single instance of anti-concurrent http 100,000, 2,000 concurrent http 200 million, and they also can be unlimited expansion based on foreknowledge peak, terrible, it is a home ...)
4, concurrent reduction backend server / load pressure. In addition to all the other interfaces http requests all transferred to the front nginx, request interface calls tomcat, reference nginx reverse proxy tomcat. And in addition to the first request for a page, the browser will call a large number of local cache.
5, even if the back-end service is temporarily out or goes down, the front page will be a normal visit, but the data do not brush it out.
6, maybe you need a micro-channel light-related applications, so you can share the interface, if there are app-related services, as long as through some code refactoring, you can also reuse a lot of interfaces, enhance efficiency. (Multiport applications)
7, something more is not afraid of the page display, because it is loaded asynchronously.
8, nginx supports hot deployment page, without restarting the server, front-end upgrades and more seamless.
9, increasing the code readability & maintainability (front and rear ends coupled together code read quite strenuous).
10, to enhance development efficiency, since the front and rear ends can be developed in parallel, rather than the previous intensity dependent.
11, deployed in nginx certificate, extranet access using https, and only open ports 80 and 443, all other ports closed (to prevent hackers from port scanning), intranet use http, performance and security are guaranteed.
12, the distal end is a large number of component code reuse, component, improve development efficiency, to out!
Eight Notes
1, when the open meeting requirements, engineers must all participate in the front and rear ends, and the need to develop a good interface documentation, back-end engineers to write test cases (two dimensions), do not let your front-end engineers to act as full-time tests, it is recommended to use chrome test plug postman or soapui or jmeter, service layer to get junit write. ps: front-end test unit can also play it?
2, the above-mentioned interface is not java in the interface, it plainly call interface method is to call your controler inside.
3, increased the workload of the team's front-end, back-end team to reduce the workload and improve the performance and scalability.
4, we need a number of front-end framework to address similar to the nested page, pagination, page jump control. (Those of the front end of the frame mentioned above).
5. If your project is small, or a simple network project, then you can be assured without any framework, but if your project is outside the network project, huh clatter.
6, before there are people in the use of similar velocity / freemarker such as template framework to generate static pages, eyes of the beholder wise see wisdom.
7, the main purpose of this article is to say jsp to be eliminated in large java web projects outside the network out, did not say jsp can not completely learn, for some student friends, jsp / servlet java web and other related foundation or to master prison, do you think springmvc this framework is based on what to write?
8, if the relevant check permissions, and so on a number of pages, then the relevant data from the interface can also get in through ajax.
9, for both front-end can be done to make the back-end logic, my advice is to put the front end, and why? Because you need to calculate the logic of computing resources, if placed in the back-end logic to run bandwidth & memory & cpu will consume computing resources and so on, you have to remember is that the server computing resources are limited, but if you put the front , using the computing resources of the client, so that your server load will drop (high concurrency scenarios). This is similar to data validation, front and rear end needs to be done!
10, the front needs to have a mechanism to deal with the case of the back-end request timeout and the back-end service downtime, friendly to the user.
Nine, extended reading
1, in fact, for js, css, picture this kind of static resources can be considered similar to put on this kind oss Ali cloud file server (if it is an ordinary & server operating systems, storage after reaching pb-level files, or a single the number of files within a folder reach 3-5 million, io there will be a serious performance problems), then with cdn on oss (national child node acceleration), so you open the page speed like flying, whether you are in the country which place, and your nginx load is further reduced.
2, if you want to play the lightweight micro-service architecture, to use nodejs the gateway, and also help with benefits nodejs of seo optimization, because nginx just returned page static resource to the browser, while the domestic search engine spiders will crawl static data, does not resolve the page js, which makes the application can not get a good search engine support. And because nginx will not be assembled to render the page, you need to put static pages back to the browser, and then complete the rendering work, which increased the burden of rendering browser. Browser initiated request is distributed through the nginx, URL request to nodejs unified distribution, assembled for page rendering nodejs in; API requests are sent directly to the back-end server, complete response.
3. If you have cross-domain problem, spring4 of CORS can be the perfect solution, but generally will not be using nginx reverse proxy cross-domain problem, unless you front-end and back-end services into two service domain. JSONP way also lost out. 4, if want to play multi-terminal application, pay attention to remove the tomcat native session mechanism, to use the token mechanism, using the cache (because it is a distributed system), to do a single point for security issues token mechanism, can be found at jwt.
5, the front end of the project can be added mock test (construct virtual test object to simulate the back-end, can be independently developed and tested), back-end need to have detailed test cases to ensure the availability and stability of services.
X. summary
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.
4, if want to play multi-terminal application, pay attention to remove the tomcat native session mechanism, to use the token mechanism, using the cache (because it is a distributed system), to do a single point for security issues token mechanism, can be found at jwt.
link: https: //www.jianshu.com/p/c86cee16b418