How to develop and deploy front-end code in large companies

Translated from: HTTPS://GITHUB.COM/FOUBER/BLOG/ISSUES/6

This is a very interesting 非主流前端领域 area to explore is how to use engineering solutions to the front-end development and deployment optimization of the comprehensive problem, has been in the study and practice.

In my impression, Facebook is the originator of this field, and interested students with ladders can go to the Facebook page source code and experience what is called Engineering.

Next, I want to start from the principle of storytelling, multi-image, longer, I hope to have patience to read.

Let's get to the basics, starting with the original front-end development. is a "cute" index.html page and its style file A.css, write code with a text editor, without compiling, local preview, confirm OK, drop to the server, waiting for user access. The front end is so simple, good play Ah, the threshold is very low ah, minutes to learn to have wood!

Then we visit the page, see the effect, and then look at the network request, 200! Yes, it's perfect! Well, research and development are complete .... , huh?

Wait, this isn't over yet! For large companies, those perverted traffic and performance metrics will make the front end a bit less "fun".

Look at that a.css request, if every time the user access page to load, is not very affected performance, is a waste of bandwidth ah, we hope the best:

Using 304, let the browser use the local cache. But is that enough? Not! 304 is called the negotiation cache, this thing is still to communicate with the server once, our optimization level is a perverted level, so we have to completely eliminate this request, become this:

Force the browser to use local cache (cache-control/expires) and do not communicate with the server. Well, the request optimization has reached the level of metamorphosis, the problem is: You do not allow the browser to send a resource request, this cache how to update?

Well, I believe someone thought of it: by updating the resource path referenced in the page, let the browser actively discard the cache and load the new resource. It looks like this:

Next time on-line, change the link address to a new version, update the resources is not. OK, is the problem solved?! Of course not! The Metamorphosis of the big company came again, thinking about the situation:

The page refers to 3 CSS, and one on-line only changed the A.CSS, if all the links are updated version, will cause the B.CSS,C.CSS cache is also invalid, that is not a waste?!

Re-turn on the abnormal mode, we can not find that to solve this problem, you must make the URL modification and file content Association, that is, only the file content changes, will lead to the corresponding URL changes, so that the file level of accurate cache control.

What is related to the content of the document? We will naturally think of the use of Data digest to the algorithm of the file summary information, summary information and file content one by one corresponding to a single file can be accurate to the granularity of the cache control basis. OK, let's change the URL to a summary message:

This time there are file changes, just update the URL of the file, it seems perfect here. You think that's enough? Big company tell you: the pattern Tucson break!

Oh ~ ~ ~ ~ ~ ~ Let me catch my breath

Modern Internet enterprises, in order to further improve the performance of the site, will be static resources and dynamic Web pages sub-cluster deployment, static resources will be deployed to the CDN node, the resources referenced in the Web page will also become the corresponding deployment path:

Well, when I want to update the static resources, I'll also update the references in the HTML, like this:

This release, at the same time changed the page structure and style, also updated the static resources corresponding URL address, now to release code on-line, dear front-end research and development students, you tell me, we are first online page, or first on-line static resources?

1. 先部署页面，再部署资源: During the time interval of deployment, if a user accesses a page, the old resource is loaded in the new page structure, and the old version of the resource is cached as a new version, and the result is that the user accesses a page with a style of confusion, unless it is manually refreshed, before the resource cache expires. The page will always execute the error.
2. 先部署资源，再部署页面: Within the deployment interval, the user accessing the site with an old version of the resource locally cached, because the requested page is an older version, the resource reference has not changed, the browser will use the local cache directly, in which case the page appears normal, but there is no local cache or cached expired users to visit the site, The old version of the page will load the new version of the resource, causing the page to execute the error, but when the page is complete deployment, this part of the user again visit the page back to normal. OK, above a lump of analysis want to say is: First deploy who is not! Causes a problem with page confusion during deployment. Therefore, the number of visits to the project, can let the development of students bitter force, until midnight sneak online, first on the static resources, and then deploy the page, looks less problems.

However, large companies are super-perverted, there is no such "absolute low peak period", only "relatively low peak period." So, in order to stabilize the service, but also to continue to pursue the ultimate Ah!

This wonderful problem, which originates from the overlay of resources, has the problem of overwriting published resources with the resources to be published. To solve it, it is to achieve non-covered release.

Look, use the summary information of the file to rename the resource file, put the summary information in the resource file publishing path, so that the contents of the modified resources will become a new file published to the online, will not overwrite the existing resource files. On-line process, the first full-volume deployment of static resources, and then the Grayscale Deployment page, the whole problem is more perfect solution.

So, a large company's static resource optimization program, basically to achieve such a few things:

1. Configure long-time local cache-save bandwidth and improve performance
2. Use content summarization as the basis for cache updates-precise cache control
3. Static resource CDN Deployment-Optimizing network requests
4. More resource publishing paths for non-overlay publishing-Smooth upgrades

The complete set down, is relatively complete static resource cache control scheme, and, also, it should be noted that the static resource cache control requirements in front of all static resources to load the location to do this processing. Yes, all! What JS, CSS from needless to say, but also include JS, CSS files referenced in the resource path, because of the summary information, reference to the resource summary information will also cause the content of the reference file itself to change, thus forming a cascade of summary changes, presumably:

Well, at present we quickly learn about the front-end project on the static resource cache to face the optimization and deployment problems, the new problem comes: This ™ let engineers how to write code AH!!!

To explain the combination of optimization and engineering ideas, will pull out a bunch of modular development, resource loading, request consolidation, front-end framework and so on engineering problems, the above just opened a head, the solution is the essence, but to say too much too much, have time to slowly expand it.

In short, front-end performance optimization is an engineering problem!

The above is not my yy, you can observe Baidu or Facebook pages and static resources source code, to see their resource reference path processing, as well as the network of static resources in the cache control section. Once again marvel at the level of Facebook's front-end engineering, kneeling and licking.

Front-end engineers are advised to pay more attention to the front-end engineering field, perhaps some people will feel that their products are small, not so sick, but it is likely that one day you will need to make such a change. And if we can make things more extreme, why not do it?

Also, don't think that these are problems that operations or backend engineers have to solve. If the other roles to solve, people always put their concerns to others, the development process of front-end engineers will be greatly limited, this situation even in some large companies are not uncommon!

Mom, I'm not playing the front end anymore .... 5555

Industry practice Assets Pipeline

The assets pipeline in rails completes the above-mentioned optimization details, as well as the design of the entire static resource management, and anyone who knows rails can think of this as an analysis of assets pipeline design principles in rails.

Rails uses static resources into the Erb template file and then joins <%= Asset_path ' image.png '%> pre-compilation is done before the go-live, and the FIS approach is almost exactly the same as this. But we didn't really know that there was a rails scheme.

Related information:

• English version: http://guides.rubyonrails.org/asset_pipeline.html
• Chinese version: http://guides.ruby-china.org/asset_pipeline.html

FIS's Solutions

With F.I.S packaging A small tool, complete implementation of the entire answer said the best deployment plan, and provide a source control, you can feel the project source code and deployment of the control.

• SOURCE project: Https://github.com/fouber/static-resource-digest-project
• Deployment project: Https://github.com/fouber/static-resource-digest-project-release

A deployment project can be understood as a result of online publishing, and you can view the MD5 of all resource references in a deployment project.

This example can also be used to compare with assets pipeline. FIS does not have a assets directory specification constraint, and can combine various front-end development languages in a standalone tool (coffee, less, sass/scss, stylus, markdown, Jade, Ejs, handlebars, etc. you can think of), Combined with other back-end development languages.

Assets Pipeline's design idea is worthy of independent tool for the front-end engineering, FIS as such a choice.

How to develop and deploy front-end code in large companies