Management and control platform in the last article we mentioned the components of the general idea, this one focuses on after doing, what we need to control the peripheral means to the entire development process. Look from various angles, the face of large-scale front-end development team, has a need to establish such a stage of development collaboration platform. On this platform, what we have to do things? 1. HTML fragment why we have to manage HTML fragment? Because the interface has to use them, when these fragments more, need to have a place to manage, you can search, preview them, you can still see a general description. This should be part of the whole thing a relatively very simple, fair to say, there is a directory structure, and then the rest is a single HTML fragment files, which can solve the problems of storage and retrieval, but we have to consider more ʱ?? Existing HTML fragment, how it is used? This is certainly a similar manner include, through a special tag (either front-end or back-end fashion) references to these fragments came, this time there will be a first question: Suppose interface A and B at the same time interface references fragment C, in a developer to modify the fragment C content when he learned that will affect Nike Zoom Kobe how the interface A and B do? A more reluctant way to find the whole project, but in many cases it is not enough. If our HTML fragments are in public stocks as an independent, and it has been unable to find in the project through to solve this problem, because regardless of A or B, as long as he is not in the project space fragment C, it is impossible to pursue. This time a lot of people will ask two questions: Interface fragment reuse across projects, where the meaning? If our product is aimed at a small field, it does not need the complexity of the divided parts to collaborate on multiple projects. Imagine the scene in the face of big industry, the project is a sub-product, the future may be one of several joint deployment, this time, to maintain consistency which is very important. For example, we have a basic configuration interface, in multiple sub-products to be used, if the respective developing an operative style is probably inconsistent, giving the impression that not professional. You will need to have a common interface segment imputation up for the business side choose to use. Modify C, only instructions, but does not inform A and B, their version is not updated in real time, and then decide how to upgrade, how? This will be a problem, there is a small feature upgrades each time the code is the easiest synchronous merger, it will have a 'continuous integration' concept, if it has been accompanied upgrade than to partition a big stage before upgrading good , upgrade costs should be apportioned to the usual, like peasant woman raising pigs, pig every day a little longer, I hugged every day, not that difficult, even grown up'll hold it move. Now the problem is very clear, there must be a way to manage this dependency, it is clear that the existing repository is certainly unable to manage these, we can only do some processing on the periphery. We build a management platform, in addition to the management entity file version, also control the relationships between them. Specifically how to collect and collate this relationship, there are two ways: manual configuration, code analysis. Manual configuration is Nike Air Jordan 5 Women relatively earth way, each developer to submit a file, go to this system manually configure its dependencies. Code analysis, then, to parse the file each time the file submitted contains the rules to find the exact file. Both have advantages and disadvantages, the former stupid, but easy to do, which is the code format is relatively high, the situation is to consider more. Our interface is often not so simple, HTML fragment may also have levels, for example: Interface A which contains the fragment B, but the fragment B itself also contains fragments of C, so this dependency is also a hierarchy of needs in the design When considered together. Management module 2. JavaScript JavaScript code, better than the situation HTML fragments, because a lot of this industry solution. But they still did not solve the problem generated when a dependency changes reverse notification. So we still like HTML fragments, like the their dependencies are managed to the platform in. Thus, each of the JavaScript module explicitly configure the other modules rely on their own through this one-way relationship, formed a complete view. In JavaScript code module, we do not advocate direct write dependencies. Many general specification, such as AMD, is often suggested that we write module: \u0026 lt; code \u0026 gt; define (['dep1', 'dep2'], function (dep1, dep2) {var moduleA = function () {}; return moduleA;} ); \u0026 lt; / code \u0026 gt; but our system is industry-oriented than this common solutions to some of the harsh. For example, if one day refactoring code, JavaScript modules have adjusted the directory or name, so write it painful, he must go all the implications to adjust again, this is to search for an alternative. Moreover, as part of the HTML template mentioned above, the impact of other projects is dependent on its code, the lack of an appropriate way to inform them of changes. Therefore, we expect that in the preparation of each module is stored in JavaScript only implementation, but the dependence on our management platform, so that the reconstruction process made even if the current module renamed and the like, in the external project those who depend on it do not have to modify the code, the next generation release will automatically get rid of these things. Corresponds to the above code, we need Mens Nike Free 3.0 V2 Shoes Black Blue to do just one developer to achieve, that is, that part moduleA, the outside shell of these dependencies are automatically generated in the release phase according to the configured dependencies. If needed, JavaScript modules can also be subdivided, such as similar Angular inside, the factory, controller and separate the directive, which would follow some process with ease. Now we need to discuss the size of the module, we mentioned here are the basic size, only a very specific thing of implementation should each module stored Mens Nike Free 3.0 V2 Shoes Grey Green in JavaScript. So, there is a problem, when we release, is not advertised in accordance with the size of it? Obviously not, if you do, it may appear complicated interface once they need multiple 10 HTTP request to load finish of all JavaScript code it needs, so it is necessary to do some consolidation. So, what consolidation strategy? On our platform, developers is how to define the merger relation to it? We need to define the organization of a larger size on top of the module, and the module's relationship this way, like Java inside, jar files relationship with the 314996-330 Nike Air Foamposite One Electrolime Electrolime Black Online class. If the developer does not explicitly configured, it can also global strategies, such as press lowermost directory to merge. JavaScript file at this time, when in actual use of these codes, the need to bring two configuration information in the past, one is to be dynamically loaded, two each JavaScript file contains the original module (after the merger). 3. Unit testing if JavaScript modules have been ordered to manage well, that they can consider unit testing thing. Unit testing to improve the reliability of the base unit, there is a very important significance. In this platform we can put the unit test module associated with JavaScript, and each module can be linked to a set of JavaScript unit test code that can Air Jordan Outlet be written online, on-line operation. The nature of unit testing is to write code to call the existing analog module, taking into account our module is JavaScript, so a lot of ideas tend to execute them in the browser, for unit test a single module, this is not a problem. If you want to batch execution unit test the entire 2015 Nike Free 5.0 system, it is not the same. The JavaScript code is first loaded into the browser, and then executed, often you do not need to be so complicated. The service side we can do them. With the ability to Node.js, we can execute JavaScript code on the server side, it means being able to unit test the vast majority of JavaScript module is executed on the server side out. Of course, for which we may have to do a lot of things, for example, some libraries need to be ported to a node version, a common AJAX calls and so on. Attention, can do in the service side JavaScript unit testing is a prerequisite, layered code must be very good, in addition to the view layer, can not operate any other level DOM. So here is what the main test for all except the view layer JavaScript business logic. As for the view layer how to do? This is really very difficult to solve, this world is not all things can be done automatically, and can only do first made, and then later to consider these. 4. Documentation and Samples Management 4.1. Now we have HTML document fragments and JavaScript modules, the need to give them some more description information. Quick description is clearly not enough, we have detailed documentation. Such detailed documentation can be generated in some way, you can also manually written by the developer. Different from traditional offline documents, online documents more real, and, whenever a developer is changed after his documents, does not require the entire amount to build, visitors can real-time access to his latest version. GitHub familiar friends may already be accustomed to this way, there are some ending in md formatted text files in your project library inside to write some documentation use markdown syntax. Undoubtedly, this kind of format is suitable for online collaboration, so we will integrate such Nike Air Max a way to write a document on the platform, whether it is for HTML templates or JavaScript modules, or whatever type, can also be used even when the blog like Moony students gitpress platform that pulls directly from the text or HTML file form GitHub blog. In addition to the integrated form of the document outside of the browser, it should also be linked to a separate issue to the way, this time the user can look like as a news page to browse. If you do go further, you can also do e-book production, providing packaged offline documents. 4.2 Example In the process of writing code documentation, it may inevitably have to be inserted, the examples, there are two forms, one is plain text, similar to the gist so that Nike Zoom Kobe one is available online operation, similar jsfiddle and jsbin so. Both have their own advantages, so you can do both, similar example can be stored with the document should also be run independently by a link. 4.3. Slide Sometimes we see some online slideshow, that effect is very handsome, like reveal.js, our developers sometimes for code analysis or walkthroughs, they also can not help but write some demos, if they can things together with the project management, can be viewed online, it will be a very good thing. So we can also consider adding a storage interface to them, and even make a simple online writer. 5. When it comes to project management and directory now, we seem to have missed a little something. That is, the above-mentioned these things, what is the organizational unit to store? Given our platform to manage all front-end contents of an entire large product, it should look at a lot of projects which, on the sub-products correspond to that way, it is natural that the first stage of the project has become an organizational unit ʱ?? Under the project, there is no suspense, the only directory of. For a project, it has what it needs to be done? In fact, the first body to be able to configure the storage location. Mentioned so much code, documentation and the like, it is ultimately stored to the entity, how to deposit? Of course, we can engage in their own set, on the file system to do it, but also consider their version management, very troublesome, it is better to direct docking of a repository, calls its interface to access the file, where the configuration is the version path to the library. Secondly, we must consider copied from existing projects, similar to the inside of the fork function GitHub, but internal processing mechanism can be slightly different, fork the project file may not have a default entity only when generating a modified or new operations when it is created, The remaining still refer to the original on it. Our project here is copy function version of the project and considered, often a version of the product supports multiple client projects, the so might need it this feature. Then, we must consider the dependence Nike Air Max 2011 Men of the project. Relies on a project, meaning that the need to use it inside the assembly, so in essence dependent component. Provide project relying on this view, only some considerations for future changes. 6. Reviews management mentioned before, the purpose of our entire platform is to improve the team's front-end large-scale collaboration, cooperation is inseparable from communication. Any function described above, should have the ability to communicate with. For example, if developer A uses other people to write a code components a, some of these details have questions, he should be able to comment on it. In his comments, when any person involved in the maintenance of this component too can receive a reminder, this time he may choose to come and see, reply to this question. Similarly, in the documentation, examples can be so under operation. On the Internet there are such products for articulated comment AC system at any URL, the more famous is Disqus, we can see a lot of sites hanging below it, used to make the exchange of comments, so the user can use an account in a plurality of communication between sites. There are also similar, such as say, be able to communicate with the micro-Bo, QQ and other account login. From our platform itself, the possibility if it is deployed in the enterprise workflow improvement, the introduction of external comment system is relatively small. Because in-house use, it must be hoped that the staff of account information linked with the job number, it is possible with the version of the server modules such as integrated accounts, permissions, but also easy to control. From another perspective, a person log in to this system, he may receive a lot of messages from a different location code or documentation, one by one point in the past reply also some trouble, we should give him a global view, so that he can In a unified interface to answer these questions out, if he needs it, but also can point to go to the actual location. 7. The user and access control we have seen from the above section, this system is a more complex development process management and control platform. In this case, everyone should be able to log in using, and then assign different permission levels. Logged in user should have permission to view something, but could not comment. Under the authority of the logged in user level, you can control whether to create, modify items, create, modify directory, code, unit testing, documentation. 8. The international management of a string across the Web application locale inevitably keep dealing with internationalization, this thing is usually done in the service side, for example by the code embedded in the interface is similar to \u0026 lt;% = getRes (key, lan)% \u0026 gt; such code, to obtain the corresponding string to 541100-300 Black Green White Style Nike Lebron X 10 Outlet replace the interface inside. This thing is to take up the application server resources, and internationalization itself is actually a have been identified before running things, this process can do out on the release phase. For example, we previously took for each language code generation more than just deployed together, depending on the circumstances needed to dynamically load that particular one. There are many client programs internationalization is the resource file subdivision, in page units stored, but this is actually quite reasonable. The first reason is that in the Web2.0 era, 'page' concept itself has weakened to a one-page application, the entire application is just one page, this time, the resource file what granularity to organize it? As we mentioned, the use of MV * Web application architecture framework to do it, there is a component of the goal is to do. Local assembly of intent is a component can be as free to where you want to use. If the size of the resource file to get a small snippet of HTML and JavaScript modules corresponding to this level of flexibility is actually there, the problem is caused administrative costs increased. Make an industrial application, the most important thing is the consistency of the business, including logical consistency, but also the consistency of terminology. One word may appear in more resource files, which increases the likelihood of inconsistencies. Therefore, there should be a unified terminology management platform, appearing on all the interface or prompt text, it must come from the internet. 9. static resources management in distribution system, apart from the need to publish the code, you need to publish pictures and other static resources, these things should also be managed together. In both cases the static resources are available: with the product release, is referenced in this platform. For example, there is a picture made by management in this platform, it can be configured on a project to export the release time. The pictures can also be viewed or downloaded by way of links, if this platform inside a document or example to refer to it, is also possible. 10. Management styles and themes in the Web system, styles and themes are very important part. Style of management and publishing has been a relatively complex topic, a few years ago are generally block-write, then a combination of mergers, these recent years have LESS, SASS and Stylus such technology to solve the preparation and Nike Air Max 2011 publication of separate issues. What are the biggest problems we look at is released? Different parts of the merger. In pursuit of flexibility, something had to be removed very carefully, before HTML fragments and handling JavaScript modules like this. In so doing, we need another thing: these small things, as far as possible to cover fully. Corresponds to the CSS inside, we have to do is to occur each element in the system, both to maintain it as a separate category of rules to generate a global list of rules. Between different projects to achieve may be different, but the name of the rule is fixed, allowing only modify custom implementation can not modify the rule. If you want the new rule before no, it must be added to the global rules list, further implementation. Style rules after the managed, can make it on the associated interface components, you can not do. The advantage is that when released can only put those style rules used to generate release out, if you can accept the full amount of each release CSS, it does not matter. In addition to the rules, also need to consider the management of some variables, the rational use of variables in CSS will greatly reduce the workload Mens Nike Free 3.0 V2 Shoes Grey Orange caused by the custom. 11. One key release we have introduced such a bunch of things, in fact, is to increase the complexity of the publication. why? Before regardless of HTML, JavaScript or CSS, all hand out, after a minify most work on the release of the whole process is very simple, two scripts get. Now complicated, first analyzes the dependencies, and then extract the files, and then an international string replacement, then combined and code compression, the whole process is very frustrating, do not give an explanation of the configuration administrator, he must come knives to injure. We have a principle: problem-solving process, if the introduction of new problems, requiring the person in charge to solve the original problem but also with resolved. Now for some intention to increase the complexity of the release, and it should also have a way to settle this matter and then, at least not more complex than the original. So we put these processes are integrated into the management and control platform, the process Air Max 2011 Mens Black Light Green of doing a one-click publishing, and put all of these operations are integrated together, when configured by the administrator release version Just click on it to do all of these things out. Even said that these processes can also be configured, can add and subtract links. This time we did it as easily as with the previous version hair, can do something about it much? JavaScript unit testing can be integrated into the release phase. Because we've done a stratified JavaScript accordance with its responsibilities, and made part of the UI isolation, it can be outside of the browser to do away this unit test, when usually submit code can do, the final release stage again at full capacity do what is meaningful. What other purpose codes dependency management is it? Is to minimize the release, since we manage the relationship between files, then, starting from the root, which is obviously able to draw code files used in this project, we can each get the exact amount of code from our full library part of the need to publish. This is our entire management and control platform benefits. 12. Summary of us a more complex set of solutions proposed large-scale 541100-300 Black Green White Style Nike Lebron X 10 Outlet collaborative front-end control mechanism. The nature of this theory is that between the development and the release added a link to all the static Web system resources and services are included in addition to which, and strengthen the existing mainstream some of the front-end engineering organization based command-line mode ʱ?? Compared to the traditional industries, such as automobile manufacturing, our link is equivalent production line design, some of the components of the storage warehouse on a similar mechanism to release the factory on a similar process. The platform itself has a lot to do other things, such as the above can even do a visual interface customization, these are the ultimate long-term goal, at the back of the article will talk about some of the considerations. After follow-up article, we will prospect With this platform, the entire front end of the collaborative process is like.component-based Web application development (b)