Modeling and analysis of front-end model system

Front-end Model system Modeling Analysis Preface:

Contact Angular technology also has more than a year, to Newegg also just one years, in this year, learned a lot about the essence of front-end technology, but let me most excited, than found the model system, the reason that it is magical, Because all the complex problems can be done by the model system to do a good job of abstract modeling, so that your work is more than a multiplier.

First, I would like to talk about the understanding of angular:

1), ANGULARJS through the data two-way binding enables the view layer and controller to carry on the very convenient data operation, and brings the very good user experience.

2), angularjs the use of Instruction Directive, service services and other better modular management, so that the code component management, to achieve better reuse.

3), many of the services built into ANGULARJS can simplify development costs, such as HTTP services.

However, the super-cool development experience will inevitably have some embarrassing pain points, I remember when I started to do a mail template management system, one of the pages is about the new mail template business logic, this page is very complex, one of the page includes template new, template test, template copy, and preview templates and other functions, the front-end Part I only made a small portion, but this part in the controller in the new business, resulting in the code in the controller to achieve an explosive growth, this JS incredibly up to 1000 lines, the subsequent maintenance caused very large inconvenience, These pain points are very painful in my heart.

Then I finally realized that I was in the whole Super God controller (Gode like!)

Second, what is the controller of the Super God like! )？

1), the foreground HTML code and the back-end view of the JS code to bind.

2), controller in the initialization of data.

3), Controller and service layer to do data interaction.

4), controller layer on the page control display and so do control.

5), the controller contains the related validation of the page form and submits data to the service layer.

6), the controller layer of business logic encapsulation.

The above points, I believe that everyone in the development of angular, have deep experience, because angular you look for the online demo He is fast, directly in the view layer binding a model variable, and then in the controller can be two-way binding, then as the demand continues to iterate, I think a few months later, you do not want to see your own code, God like nature will come.

Here, nature will think of our design principles: the Single principle of responsibility! keep in mind that the module has a single responsibility, and one class can only do the same thing, making the code clearer!

To solve this super-God controller, I would like to start with you first talk about the nature of the front-end program is:

Third, the nature of the front-end program:

The nature of the front-end system: Business Module + page + component + function point.

Components are also divided into:

1), public UI components, such as what looks like, what he is capable of behaving.

2), business components, appearance is the business content, behavior is what the business is, in what specific scenarios can do.

For the UI component, we may think of forms validation, user controls, and some third-party components, and so on, which may have architects or yourself to encapsulate, here I want to focus on the business components, how the business will be modular, service, once the two points, then the development is irresistible force.

Third, the example analysis

Let's analyze the following example:

The above page is familiar to us, but the login page, the reuse of not much to say, often in different systems to meet this module, but each time we develop this page to write HTML and then create a background controller code? Obviously do you out, why don't we package him into a directive, so that each time only need to introduce this directive, and the corresponding login to the server request, etc. only need to be configured, the user name and password sent to the server side can be, This will not be the next time to do another system when directly take directive JS lead over it, is not very cock it?

Said here I'd like to say another principle of ours

know the least principle, that is, rely on self -control, the module to achieve high cohesion, outside the module to achieve low coupling, only need to expose the corresponding data interface outside the module can be, to avoid the complexity of the logic to reduce the development efficiency.

With the above understanding, do you find that in our daily development, if you can introduce more modular, service-minded development ideas, will you feel the life of the enlightened? So what is the higher level of modularity?

The answer is: System modeling!

Four, front-end system modeling

I believe all the classmates know, the following two points:

But I have to say, it's all in modeling!

So what does system modeling include?

So what can be modeled in a model system?

1), data modeling, through the JSON schema to the front-end data and back-end data communication, the realization of data modelling.

2), Business Modeling , the business logic encapsulated into a module, and then simply using the dependency injection principle to introduce can be used.

3), form modeling , the form is made public components, convenient to call.

4), list model , list for common component encapsulation.

5), Bridge instruction modeling , link business model, data model and view model, interaction between modules using standard interface, realize the Model management of the component.

Five, the front-end model system architecture conjecture

So more specific front-end system modeling is how to look at the following for everyone to introduce a detailed model system!

The above diagram is an expert's guidance under the analysis of the front-end model system architecture conjecture, the advantages of which are:

1), the realization of the front-end user view layer, the business logic layer, the data layer, the backend service layer decoupling, makes the system coupling is lower, more elastic.

2), the front-end page will be used to encapsulate common components, such as lists, forms, drop-down menus, and other packages, and then directly use.

3), the use of the Bridge command, some of the control behavior of the management, such as a basic validation in the editor, the use of instructions to complete, and later similar to the editor directly invoke the instructions, eliminating the need to rewrite the validation logic.

4), Business logic service management, not for a single business programming, but the business classification, make configuration items, etc., and then just call the public business components.

5), front and back end use JSON schema for data communication, back end use what language no longer important, just make service API services.

6), back-end model black-box management, front-end programmers do not need to know the back-end code, simply by requesting the back end of the request to get response to make processing.

In fact, all this is inseparable from the two words: abstract!

Remember everyone said rotten truth: All things to the object, but in my opinion, life all things are abstract!

The development program is scripted, BSD says what we do, but good programmers always see the Tao behind all sentient beings, thus making loosely coupled, more resilient designs.

Six, life sentiment

This year, I did not ask for a holiday, not late, no early back, the number of bugs also sharply reduced, life is so short, the most painful thing is not progress, do not study, do not work, do not think,

He Wei A sentence awakened me, people's lifetime to remove sleep is so more than 10,000 days, the difference is that you really live more than 10,000 days, or a thing repeated more than 10,000 times, life, such as fleeting, after the days to cherish, I believe the next year will be more fruitful!

Modeling and analysis of front-end model system