My Architecture Experience series-Front end architecture

Frame level: In recent years the front-end development is very fast, the front end is called Front end because the front end is already can become a profession independently, JS is no longer a ten years ago toy, formerly rich client RIA application may use Flash/flex or Silverlight, JS can now be used to accomplish most of the functions, so JS as a front-end support language is not just the simple coding, more and more framework of things appear. More and more development patterns turn into back-ends just to spit out the JSON data source, and the front end does all the UI things.

Mvc

The MVC implementation of segregation of duties is good, and most sites introduce an MVC framework on the backend, and it is also beneficial to use the MVC framework for a Web site that is responsible for all rendering and front-end business logic. JavaScript's MVC framework is now a lot. Each frame has its own characteristics, but the front-end MVC framework will be somewhat different from the backend. For example, the front-end MVC framework might do a couple of two-way bindings for M and V elements that are often one-way to the backend. By introducing the MVC framework we can make the same page do a lot of things, through a non-refreshed page to achieve the foundation of an application, but also the separation of MVC is very clear and highlight the concept of M, which is not done by the framework.

Communication

For a more complex page there may be more JavaScript module, if you want to communicate between the modules (such as a page has left menu and navigation and List, the left menu click on the first level category to notify the navigation plus go to this item, and the notification list to re-read the data and refresh, Then delete this option from the navigation to notify the list to retrieve the data, the Notification menu displays all). For more complex communication, if the module module is strongly coupled to directly call the function of other modules is not conducive to maintainability, I think we can introduce a release subscription mechanism, each module made what changes to publish information, people who care about this information to subscribe to this information, And in the callback function to do the corresponding operation on it. You can use AMPLIFYJS as the framework for publishing subscriptions.

Template

For the front end and the back end as a troublesome problem is often in the script to the HTML also mixed together, personally think so, if for very trivial some dom modification problem is not big, if it is large HTML stitching, data and HTML even CSS mixed together, The code is very poorly maintainable. Consider using some template engines to separate data and performance, such as Twitter hoganjs. Because many template engines, such as the bearded engine is not only for the front-end, the back-end language has a corresponding engine, so you can even put the template in a text file, the front end of the common use of a set of template engine, that is, the current code is biased to the service side of the rendering of the backend using the template, If you want to later render the template to the client, it can be used directly by the front end. Resource examples

Class Library

In addition to the framework there are a lot of class libraries, such as Jquery,underscore,linq.js (LINQ to JavaScript), the Jscex (wind) Anyway, what is the front end of what is now, let's play the imagination. Using these frameworks can greatly improve productivity, and scripts can do much more than you think. I do not know much of what is on the back end of the front end of the list here may just be bucket.

Depend on

can use Requirejs, COMMONJS and other components to manage the dependencies between scripts, the benefits of a lot of, our module only need to write clearly what needs to rely on, Requirejs nature will help us in a certain order to load in, This way we don't have to worry about sequencing or the issue of component version numbers. Based on Requirejs it has a rich configuration, even if we do a static resource consolidation can also be fully processed, as long as the configuration of the component configuration to the same server generated by a path, but in the past when it was done to find that it will automatically add the. js extension, However, it can be solved by changing the Requirejs source code completely. In the framework of my view is that since the use of open source things, encountered problems, do not fear to change the source code. We must not stay in the framework of the user, the custom framework even to contribute their own code to the author is not so difficult. Design level:

The concept of separation of duties

Although we all know CSS style, JS behavior and HTML structure. Personally think that only HTML is necessary, that is, if a page does not have a style script, it should be a clear page, can roughly show the page needs to show the content, just look ugly, and also interactive. If many of the functions are AJAX implementations, then transfer the interaction to the server to implement the service side rendering. More style is just the layout of the look on the better, more than the script is more interactive and more friendly, do not need to refresh the page, but less does not mean that the site is a waste, there are many ideas in fact the purpose is the same. If we do not reach this level at least we have to make it very clear that CSS, JS and HTML to perform their duties, do not assign too many things to irrelevant components. For example, try not to include the operational script code in the HTML, but should select the DOM element directly in the script to operate, try not to include large sections of HTML code in the script, but should read from the template and then fill in the data, Also try not to include a large number of inline styles in the HTML code, but rather to make the style assignment through selector selection. Resource examples

Hierarchies and directory structure

For a complex and large project, it is also important to reasonably plan the directory structure, and you might say that scripts and styles can be divided into two directories, but what if a complex project has hundreds of scripts listed under one folder? The backend has the concept of layering, the front end can also have a layered concept, there is a presentation layer, The business logic layer and the model layer, then the following data access to the AJAX layer, and of course there will be constant files, and I ask that the front-end layering can be relied on by iOS or Android programs for super-large projects. As an example of an iOS program I've done before, I think this layering is fairly straightforward.

Balance of merging and splitting

Most of the time the architecture is a trade-off, and if there is a fixed standard there is no need for an architect, we just have to follow a fixed standard. For example, a page using 10 script files, 5 style files, according to the truth, combined into two files can achieve the minimum number of requests, but this must be good? There are many of the 10 scripts and 5 style files that may be common to other pages, If simply merging together may increase the user's download traffic, so how to plan common things to synthesize a file, the framework of the file alone, and each page has its own unique script and style, but also a learning. Performance level:

Performance testing

Tools such as YSlow and Pagespeed can analyze the performance of the front-end, which is not discussed here. For the front end because it involves the user's client environment and network environment so the situation is not so simple, but we can do is within our controllable range to minimize the number of user domain name resolution, reduce the amount of data downloaded by users, increase concurrency and so on. In fact, we just clean up the pipes to make the pipes bigger, or add more pipes, or just try to keep the water inside the pipe a little less, so that it can be smoother. Resource examples

Performance analysis

There are tools that can be used to perform detailed analysis of JavaScript performance and even DOM parsing, such as Dynatrace AJAX Edition, which allows us to analyze our script code and the layout of the page, Fully understand and optimize our front-end code from a development perspective. Although the client's resources are not as important as the server-side resources, it is best to optimize the performance of the client for the user's mechanism experience.

My Architecture Experience series-Front end architecture