Front and rear ends separation has become the industry standard Internet use project development, the development of the front and rear ends by effectively decouple Nginx + Tomcat embodiment (which may be the middle of a NodeJS). And 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 browsers, car terminal, Android, IOS, etc.) and lay a solid foundation. Front and rear ends of the core idea is to separate the front end HTML pages through AJAX calls to the backend of RESTFUL API interface and interact through JSON data.
Development Development Separation of the front end and the rear end
JavaWeb previous projects, most of them are Java programmers and engage in front-end, back-end and engage. With the development of the times, many medium and small companies gradually began to share the front and rear ends of the boundaries more and more clear that front-end engineers just front-end development, back-end development engineer just the back end. And medium-sized companies need professional talent, small companies need all-rounder (to save money). But for personal career development, it is better to separate, because when the career development of late, companies tend to be an expert in one area, rather than skilled workers. If a person will be a little front-end back-end, you can not say anything.
The front page of the pursuit of performance, smooth speed, compatibility and user experience and so on. So for front-end development engineers, need to focus on HTML5, CSS3, JavaScript, jQuery, AngularJS, BootStrap, ReactJS, VueJS, Webpack, Less / Sass, Gulp, NodeJS, Google V8 engine, JS multithreading, JS modular , JS oriented programming, design patterns, browser compatibility, performance optimization on.
Back-end pursuit of three high (high concurrency, high availability, high performance), security, storage, and other services. So for the back-end development engineers, the need to focus on the basics of Java, design patterns, JVM principle, Spring family bucket of principle and source code, Linux, relational database transaction isolation and locking mechanisms, MongoDB, HTTP / TCP, multi-threaded , distributed architecture, flexible computing architecture, micro-service architecture, Java performance tuning, optimizing database performance and related project management.
Delve deeply into a certain direction, so that your core competencies will be getting higher and higher. As the saying to what you put into life, life will be back to you what. Do not force yourself to pursue so-called full stack, whether it is because the front and rear, to the latter has a lot of profound things make all the energy you spend, what would you think, probably nothing will last (greedy people Finally, nothing at all, do not believe Santa Claus said the phrase I Want It all). Of course, does not mean that you can not go to school, learning is possible, but to partial focus, prioritize, just like in life do not waste time on people and things who do not deserve the same.
Coupling problem solved separated front and rear ends
Once upon a time, our projects are JavaWeb used several backstage frameworks, such as Spring MVC, Structs, Spring Boot, Spring JDBC, Hibernate, MyBatis and so on. Most of the projects in Java backend are divided into three layers, ie, control layer (Controller), business layer (Service) and persistence (Dao). Layer is responsible for receiving the control parameters, call-related business layer, encapsulating the data, and routing and rendering the JSP pages (or page templates, such as Freemarker). Then use the various tabs on the JSP page hand-written Java or expression will show the background data out, play is MVC set of ideas.
We look at this situation: We developed a website, set over demand, the code finished, finish the test with IDE tools such as Maven or the code package labeled as a war finished, publish the war package to the WEB container in the production environment over, start over WEB container, domain name, DNS configuration is over, the site can be visited. At this time, we were all in the front and rear side code that war package, including JS, CSS, images and other static resource files.
Next, we enter the domain (www.xxx.com) in the browser, the browser find our IP network through a server outside the domain name and DNS server sends an HTTP request to your server, TCP handshake after three ( HTTP the following is a TCP / IP), to transfer data through the TCP protocol, after our server gets the request, began to provide services, receive parameters, and then return to our response to the browser, the browser then parses the content returned by the content-type , presented to the user.
Here we assume that our home has 100 pictures, then when users access the home page, you need to establish a 100 HTTP request, our server receives these requests, we need to create the cost of memory to play Socket TCP transport (consumption on the server computing resources). Focus here, this is the case, the pressure on our servers will be very large, because all the pages are requested only to our request this server, if a person is okay, if there are 10,000 people are concurrent access to it ( I will not speak here server cluster, said single-instance server), then I am afraid that our server could not carry (TCP connection, bandwidth, memory, hard disk, IO, WEB server's memory, etc.), I am afraid downtime.
This is why medium-sized WEB application to be decoupled. Theoretically we can put the database, application services, message queues, caching, users upload files, logs, and so throw on a single server, what mechanism do not play any alarm service management, performance monitoring what has to be done, and so on, I love it down down well (Buddha Department of Youth). But reality does not allow us down ah, when a sub-application because the memory is unstable and cause the entire server memory overflow, time and again lead to hang our site, we bad. For example, when our business if this time happens to be at the peak of development spurt, the server hangs up, the business was stuck technology, then it could lead to the loss of a large number of users, the consequences could be disastrous. Here, incidentally, technology must go in front of the business, or it may miss the best period of development.
In addition, when you use all of the coupling together, the equivalent of a boulder, when the server load is insufficient capacity, generally use of load balancing, server clusters made. So in fact you are at the level extended a block of stone, acceleration performance will be getting lower and lower. You know, their own load is low or function module is not necessary to expand horizontally, the horizontal expansion to go for a performance bottleneck extension fishes. In the example here, the performance bottleneck with the front end does not matter, there is no need to expand the level of the front end. At the same time, hair deploys the time, if only to change the back-end code, have also followed the front-end code re-released, apparently reduces efficiency.
Because of this, the normal architecture of the Internet is the WEB server clustering, application server clusters, cluster file server, database server cluster, Message Queue cluster, cache cluster and other clusters of splitting up.
Disadvantage coupled front and rear ends (in an example JSP)
Most previous JavaWeb project using JSP as a 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 decoupled way to greatly enhance our ability to load. Coupled with a front end of the following main drawbacks (in an example JSP):
1. coupling dynamic resource and static resources all together, server pressure, because the server will receive a variety of HTTP requests, HTTP requests such as CSS, JS, images, and so on. Once the server situation occurs, finished calf front and back together, the user experience is poor. If the separation of the front and rear end, back-end server that you hung up, did not hang front-end server, users can still see the interface, although less than the requested data, hey.
After 2.UI a good design, front-end development engineer is only responsible for the design cut into HTML, required by the Java development engineers to set the HTML into JSP pages, a higher error rate (often because the page will be a lot of JS code) modify the problem when the two sides need to co-develop and inefficient.
3.JSP page must be run on a Java-enabled WEB server (such as Tomcat, Jetty, Resin, etc.) can not be used Nginx, etc. (the official claim that a single instance of concurrent HTTP up to 5W), performance does not come up.
4. The first request JSP, Servlet must be compiled into the WEB server, the first operation will be slower. Then after each access request JSP Servlet are then output stream of HTML pages, high efficiency not directly use HTML (note that each oh).
Within 5.JSP have more built-in label and exclusive expression, front-end development engineers in the modified pages tend to scratch scratching their heads bald.
6. If the contents of a lot of the JSP page is slow to respond, because it is loaded synchronously, once the output of all content.
7. Modify the JSP page requires a front-end development engineers to use the Java IDE and configure a variety of back-end development environment for front-end development engineer very unfriendly.
Separate front and rear ends of the advantages
Separate front and rear ends be able to achieve decoupling 1. The front and rear ends, the front end server using Nginx. Front-end / WEB server put the CSS, JS and images and a series of static resources (you can even put these resources into specific static file server, such as OSS Ali cloud and use CDN acceleration). Front-end server is responsible for controlling page references, jumps and routes, call the back end of the front page via AJAX asynchronous interface, back-end / server application using Tomcat (the romantic to the front, providing only data), speed up the overall response data. (It should be engineered using the frame number of the front end, such as NodeJS, React, Router, Reudx, Webpack etc.)
2. Under the separation of the front and rear end mode, if Bug found, who can quickly locate the problem does not appear the phenomenon of pass the buck to each other. If the page is a logic error jump, browser compatibility issues, script errors, page styles and so on, are all pot front-end development engineers. If the interface is a data error, failure to submit the data, response timeouts and other issues, the back-end development engineer should come forward to take the pot. The two sides accountable, they will not fight.
End separation in the case of large concurrent, we can scale horizontally while the front and rear-end server 3. around. To know Taobao need a Home 2000 + front-end server clusters to do withstood the average daily number of million daily average PV. (Ali's Technology Summit comes to their own WEB container are written, even a single instance of anti 100,000 concurrent HTTP, 2,000 concurrent HTTP 200 million, and they also can be infinitely extended in accordance with foreknowledge peak, a good horror ah, a home ..)
4. The front end of the separator can be reduced concurrent backend server / load pressure. In addition to all the other interfaces of HTTP requests all transferred to the front Nginx, call forwarding request interface is Tomcat. And in addition to the first request for a page, the browser will call a large number of local cache to cache pages.
The front end of the separation pattern even if the back-end server is temporarily out or down, and will normally access the front page, but the data is not only brush out.
6. The front and rear ends of the separation mode, the background interface can be multiplexed. Such as the need to do micro-channel light-related applications, you can share interfaces, such as re-APP-related services, or only by some code refactoring, you can reuse a lot of interfaces, enhance the development efficiency. (Multiport applications)
7. page shows no amount of content is not afraid, because the load changed from synchronous asynchronous loading.
8.Nginx supports hot deployment of the page, without restarting the server, front-end upgrades and more seamless.
9. increased maintenance and legibility improve development efficiency (front and rear ends are coupled together hard to read the code, such as JSP pages).
10. The front and rear ends can be developed in parallel, to improve development efficiency.
11. deployed Nginx certificate, use HTTPS to access external network, and only open ports 80 and 443, all other ports closed (to prevent hackers from port scanning), the network using HTTP, performance and security are guaranteed.
Before and after the end of the separation of Notes
1. When the open meeting requirements, the front and rear end engineers must all participate, 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 act as a full-time test.
2. The above interfaces are not in Java Interface, saying that white is to call the interface method calls inside your Controller.
3. We need front-end framework to address some of nested similar page, pagination, page jump control.
4. Small projects, then, such a simple intranet project, there is no need to separate the front and rear end, but the complex architecture will drag on performance. But if it is large-scale projects outside the network, separating the front and rear end is very necessary.
The previous generation was also similar to Velocity / Freemarker framework templates and other static pages, personal feel and use JSP in fact not far behind, that is a little better performance, there is no real separation of the front and rear end.
6. The front end of the separator will increase the workload of the front end of the team, the team reduce the workload of the rear end, improved performance and scalability.
7. If you have the relevant permission to check some of the pages and so on, these data are also relevant and can take years from the interface by AJAX.
8. For both the front and doing back-end logic can do, it is recommended on the front, because of the need of computing resources, if placed in the back-end logic to run logic calculation, it will bandwidth, memory and CPU computing resource consumption, etc. . You have to keep in mind is that the server computing resources are limited, and if placed in 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 ends are required to do.
9. The front-end needs to have a mechanism to deal with the case of the back-end request timeout and the back-end service downtime, friendly show to the customer.
Separate front and rear ends extended reading
1. For JS, CSS, images of these static resources can be considered similar to put on this type of OSS Ali cloud file server (if it is an ordinary servers and operating systems, storage upon arrival at PB grade (1000TB) file, or the number of individual files within a folder reach 3-5 million, IO there will be a serious performance problems), then with CDN (National sub-node acceleration), so you open the page speed like flying on OSS, whether you're in the country which place, and your Nginx load is further reduced.
2. If you want to play the lightweight micro-service architecture, NodeJS to use the gateway, and the benefits of using SEO optimization NodeJS also beneficial, because Nginx simply returns a static resource page 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. Nginx will not be assembled at the same time as rendering the page, you need to put static pages back to the browser, and then complete the rendering work, adding to the burden of rendering browser. Browser initiated request is distributed through Nginx, URL request to NodeJS unified distribution, assembled for page rendering in NodeJS; 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 do not have to use Nginx reverse proxy cross-domain problem, unless you put the front-end and back-end services into two service domain. JSONP way also lost out.
4. If you want to play multi-terminal applications, mainly to remove the Tomcat native session mechanism. To use the token mechanism, using the cache (because it is a distributed system), do a single point. Security issues on token mechanisms, we can understand at JWT (JSON Web Token).
The distal end may be added mock test item (configured to simulate the backend virtual test object can be independently developed and tested), the rear end will need detailed test, and services to ensure the availability and stability.
to sum up
Front and rear end of the separator is not merely a development mode, but an architectural pattern (front and rear end separation architecture). Do not think only when writing code that is separate from the front and rear of the front and rear end of the separation, and this understanding too one-sided. Need to differentiate between front and rear ends are separated front and rear ends of the items, i.e., a front end and a rear end projects two items are items on two different servers, need to deploy independent, two different projects, two different code libraries, two different developers. Front and back end development engineers need the agreement interactive interface to achieve parallel development. And after the end of development, front-end and back-end project items need to be deployed independently, front-end HTTP request to call, call the backend RESTFUL API via AJAX. Only need to focus on front-end style and dynamic data parsing and rendering a page, do not care how the data is generated; the back-end are focused on specific business logic and business data is returned to front-end display needs.
"No matter where to go, do not lose the courage to start again."