Web production experience sharing for large scale internet products

Article Description: talk about web production of Internet products.

Want to say how to do well, such as Sina blog such a large scale of Internet products web production, this thing looks very simple, development leader will say, as builder, quickly provide high-quality static page is good, can do to do this thing beautiful, easy to develop and easy to change and maintenance of the following requirements, Let's start with the folder deployment.

Folder deployment This can be a big, general builder will be divided into CSS, images, and so several different folders, or put the style picture into a folder, everyone has their own habits, first of all to see our set

Four files, styles, pictures, skin, preview pages are placed independently, of course, the subfolders have rules, this is mentioned below, why do this, first column four advantages, more advantages, this article will be interspersed mentioned

• CSS and images files are independent and facilitate the deployment of CSS and images packages in specific situations
• CSS and images files are interconnected to make a style package deployment
• The local relative path is consistent with the line (avoid the need for repeated on-line modification of the absolute address during development and debugging)
• HTML static file Preview clear
• Easy development and online SVN

The previous benefits of the development process with the code control is related to the focus on the SVN bar, we know: in some projects involved in the development of more and more engineers, must use SVN and other version control tools for code management, but also facilitate the deployment of online.

As a page engineer, the preview does not need the environment (whether the local configuration of the localhost or the server environment), we modify a CSS properties, can be directly in the browser to refresh, I believe that everyone in school, or in some small scale projects, such as small-scale enterprise station, Generally take the way is: in the local development, and then find the server where, FTP sent up. The process at this time is

Local Development >>>>> Server
It would be a bit of a hassle if you introduced SVN into this, because SVN is not just a code-control effort, but an important means of controlling deployment.

Local >>>>>SVN upload >>>>> deploy to front-end servers
Some engineers have a self-protection mentality, he felt that directly in the SVN folder to write code will be affected by other people, insecure, will be in the local development, and SVN check out two folders, then the process is complex
Local development >>>>> (copy to) local svn folder >>>>>SVN upload >>>>> online deployment

At this time, the classmate familiar with SVN will think of a lot of questions (here is two points)
We know that in a typical SVN structure ... Three parts Trunk Tags branch, page engineers write something because there is a preview of the static page this online use of things, so can not be directly thrown into the SVN folder, so that if we put CSS image skin to trunk,html preview file on the outside , encountered a problem, is that our documents relative to the structure of chaos!! In other words, we can't add to the IMG path written to the page. /.. /trunk such a thing.
and the actual work, the process will also be problematic, in general, the deployment of development may lag behind, we see the prototype of the design will prepare static page structure and CSS framework, but this time the development engineer to do is a database and other deeper deployment, We can not wait for them to the development process of the deployment of files on the line process is set to start again, this is obviously inappropriate. So there will be two svn in the actual process (our static page SVN and the real control package on the line of SVN)

Speaking of which, someone will ask, do we put the page on the project SVN? Do not say that it is appropriate to do different products between the code management, even under the project, in order to avoid impact, development leader will specify a folder such as "HTML" for builder use, which is actually still with the control of the online SVN is two different things
The second question that we develop locally, is that CSS and images really need something to preach to SVN? The problem ... So our static page does not need to do version control?

So, we had to, in the SVN there is a place to put HTML, CSS, images these files, for different project code management, placed in a separate SVN library, we call Builder SVN, so that the process just added a step

A piece of code, a file, written from the beginning to the final line (also can refer to the tester or the development machine ...) , to replicate four times, it is too scary, in the repeated testing of the time is not wrong to blame. So we're going to do something:

1. Local development and builder SVN Checkout folder on a piece of
2. Auto-associate BUILDERSVN and SVN online Library
3. Let the engineer help to simplify the deployment of this matter, at least when the test machine or the development of the deployment of the simple need to do a F5
That would simplify things.

The 2nd mentioned above can be implemented with SVN mapping, as shown in

And there are two scenarios, one is from BUILDERSVN to the online SVN library mapping

But there is a problem, because in the online library is only a link, in the packaging on the line to get the version number, not conducive to the rollback after the line and so on, we have to do it in turn

In this way, although there are some problems such as the problem of permission settings, but fortunately solved the basic problem of the line

There are more complex aspects of deployment, for example, under one and large projects, different modules are different development groups, or even different online libraries!!
This involves the deployment of our level two folder, at which point we have to do several things:

1.css and Images folder under the clear common under the things
The subfolders of the 2.CSS and images folders, the folders with the same name are tightly linked, and the folders are independent of each other (see below, CSS and pictures are introduced without crossing the Red line)
3.skin Although the following also have a sub file, but the deployment is usually packaged together to do, do a good job mapping can

Set the front these things up, as builder efficiency can be much higher, not in the development of the later for these things scratching their heads

After the deployment is done, we can do the specific things, first say HTML file, this preview file to make the following three useful

1. Our own development
2. Products or designers to see the effect
3. Engineer development time as a reference

First of all, the file itself, because this will not be online, we develop just in the local, with the server environment, in order to facilitate the next two requirements, all of the proposed file name written in Chinese, the file name and design draft or UE prototype map inside each page to maintain the same. In addition, the subfolders of HTML are consistent with the subfolders under folders such as CSS. In addition to the specific code to pay attention to DOCTYPE and coding (we generally use UTF8) is more important is the introduction of CSS:

1. As mentioned earlier, there is a common in the folder deployment, this is a public file, first introduced
2. The second is the introduction of their own page or module-related CSS, is the first part of the mention of a folder it should be relatively independent with other
3. If there is skin behind, introduce skin file

This order is part of our overall architecture and must be strictly enforced. As mentioned earlier, the HTML must first introduce common this public file
This CSS is divided into several aspects:

1. Clear Zero

This is mainly about the deployment and development process, so the technical details of the zero this part is not to repeat, but there is a strategy to be known, is (all products as far as possible to maintain the same, upgrade or patching to be careful, many people collaborate to put forward to let everyone know)
2. Common class class, including the following aspects

We all use, or need to specify in the global, attribute single
For example: Chear float WordWrap
Text color, link color (category, do not semantic)
Other, by the architect and the project team together to determine
Something that is not recommended
such as F14,F12,FSUN,P10,PT20,M10 properties
These have one thing in common: a specific value of a particular attribute, or a repetition of it, is a semantically defined way
Not recommended reasons: will cause the following modularity is not thorough, the maintenance of the difficulty between different people

When it comes to this, someone will ask, is it not to recommend semantics? Semantics, of course, should be recommended, but not here, for example, if we define a global. Red as a text color, that into the next template, the color is blue, not too big?
3. Common Elements

Common styles that are likely to be used in various parts of a structured style, such as pagination, lists,
Need unified management Style: button, icon, solid line dashed, etc.
Note Some points:
Structure frame, do not define inner margin
Public style, to write dead details, but do not define the overall position
Button flexible
icon with a transparent map with the style, attention to the size of the classification, the same under the same width and height
Solid line dotted lines, such as the standard figure, CSS in the use of only provide a background and peace shop a pixel div two ways to provide public style
4. Skin Basics

If you want to change the skin, put the details from 2.3 to put it here, and then for the standard skin to do some supplement
This can be seen: even if there is no skin requirements, it is very necessary to follow this idea to do, unified common class class, on the one hand has achieved the mechanism of skin change, on the other hand, the development behind us also has great benefits. In addition, how to change skin, which place can change skin, also need us to organize from here to communicate with the designer

Skin this piece to add, there are a few points (12.29 supplements)

1. Text color must be categorized according to category, such as the default text color, default link color, secondary text color, secondary link color, if there are structural style differences (such as the left and right tones are completely different), and then divided into the concept of the brush. In short, here the brush ready, the back can be free to play, the brush is not too much, generally three to five kinds of can be, HTML in the following:

In this line of code, the back two are all skin properties, TXTC is a level three text color, dot is small dot ...

2. The details of the border, background and so on, even in the specific module is to use the background map to achieve, but also in the skin to define the style, such as the border, define a border-color: #cecfcf, it can be easy to expand.

3. In addition, the skin does not inherit the way of the module, here is not to say not to write inheritance, but to say not to a list and other specific things written to skin file. You can refer directly to the skin of this blog

Http://simg.sinajs.cn/blog7tpl/13/13_19/t.css

This is also conducive to commercial or foreign companies to develop collaborative

5. Part of the pattern overlapping in the module

The entire common section should be aware of the following aspects, all introduced in the common should be reflected in the Public Style preview page, to facilitate the project with other engineers to refer to.

The common class of CSS under the whole product or item, except 2nd, it is best to set a unified prefix

For the second row introduced by CSS

On the one hand not too broken, in addition to the different modules, combined with the design of the common between the draft to decide. This is going to be a contradiction, functional modules and design of the general characteristics of the manuscript will not be entirely appropriate, such as a detail may appear in the search module, may also appear in the homepage module, this recommendation mainly follow the function go, allowing a small range of redundancy, because the front has been set, the different modules between the CSS is relatively independent. As for repeating a lot of attributes, such as a list, get in the common, which is referred to the 5th

Finally, the skin is introduced.

Skin general positioning a CSS and a images folder, as a whole skin package, must have a skin package concept, do not CSS files in the skin under the CSS, the picture under the images under the skin

In addition to the product under the different skin, the code to ensure consistent (except for the specific definition of attributes) to prevent individual skin patches alone, if there is new demand, we must think this is not possible to have similar functions later. For example, under the Spring Festival template hung a firecracker animation, we want to be in the overall situation to do a suspension effect patch added to the skin, and form a normative agreement, not to say to upgrade all skin, meaning that two months after another set of commercial skin hanging a balloon effect, we have according to follow.

The other is to flatten the picture as much as possible
As for the picture folder
First folder structure and CSS to be completely appropriate, followed by common in the picture, suggested that the public element, icon, skin Foundation, and just said the 5th classification, and finally consider the caching mechanism, may add new pictures when to rename. Technical details such as compression flattening no, it's not here.

After the unification of these ideas, as a builder, and then encounter a project, you can follow the following steps to do:

1. Receive the project, communicate and identify the developer and the way to get the design prototype as early as possible
2. According to the specific requirements of the project, according to the above principles to do folder deployment, including SVN mapping and other similar things, with the development team at any time to communicate
3. Get one of the design draft or design standards, do structure, public, and other details, in other words, to do as early as possible common inside the first four work, clear CSS and images under the various subfolders of the planning, and to organize a complete public element preview page
4. According to the different parts or modules to do specific pages, as many different people do different parts, lead people to coordinate the work of the fifth common.
If different people do part of it, the main CSS introduces the other CSS in the import way
If a person does it, be disciplined.
5. After the development, with the development of engineers, this part of the main training to explain, let the backstage engineer clear our framework. and take time to organize the development of documents, especially skin documentation, ready for other teams or other partners to view, if the need for documentation is urgent, this step to the fourth step ahead.

With regard to the skin documentation, one thing is to put all the skin-changing elements into one page, remove other extraneous styles and modules, and make a skin test package available to the partner company.
6. With the line, to do things, merge before doing import CSS, control version, determine the version number and so on work

Finally summed up into a picture inside

Well, if you do this, things will be much clearer and not be called back and forth by people in the process of development. If you think it makes sense, try this next time.