A probe into the cloud component of push front end based on Angularjs

Angularjs is a set of front-end development frameworks designed and developed by Google to help developers simplify the burden of front-end development. Angularjs will help standardize the development of Web application architectures and provide templates for future development of client applications,Angularjs is comprehensive and easy to learn,and Angularjs quickly becomes the mainstream framework for JavaScript Help developers professionally engage in web development.

First, the angular of amazing

Some features of Anguarjs

(1) The convenient rest:restful gradually became the standard way of communication between the server and the client. With a single line of JavaScript code, you can quickly get data from the server side. Augularjs these into the JS object, which, as model, follows the MVVM (Model View View-model) design pattern.

(2) MVVM Savior: This is a technology, more a thought. Model will interact with ViewModel (via $scope object) and will listen to the model changes. These can be sent and rendered by view, and the HTML will show your code. View can be dominated by $routeprovider objects, so you can link and organize your view and controller in depth, turning them into navigation URLs. Angualrjs also provides a stateless controller that can be used to initialize and control $scope objects.

(3) Data binding and Dependency injection: Anything in the MVVM design pattern automatically communicates with the UI regardless of what happens. This helps us to go beyond the Wrapper,getter/setter method or class definition. Angularjs will help us deal with all of these things, so you can handle data like basic JavaScript data types. Of course you can also handle complex data by customizing it. Just because everything happens is automatic, you don't have to invoke a main () to execute your code, but to drive it through dependencies.

(4) Extensible HTML: Most websites are built using non-semantic <div> tags. You need to define the relevant DOM hierarchy yourself in the CSS class. Using Angularjs, you can manipulate HTML as you would with XML, giving you endless ways to define tags and attributes. Angularjs through its own compiler and directives to complete the relevant settings. This is also the cornerstone of component implementation.

When we contacted jquery, we found that to do pre-binding, retrieve data fortress back, plug the process is to care for themselves. But angular, data retrieval comes as long as the injected variable is automatically completed, including event binding. Data binding, MVVM, Dependency injection makes you think that there are a lot of things to care about, and now you don't need to worry about it, just more about the data structure and the business layer, freeing us from the cumbersome DOM bindings. (Can be seen in the appendix--anguarjs use before and after the comparison--in the early I use jquery account module and later in NG mode difference)

Second, the road of component

A component is a simple encapsulation of data and methods, such as a component that has UI effects, such as a style class, a directive type, and a component called a method. In large-scale software, the component is a common understanding, it improves the development efficiency on the one hand, and reduces the maintenance cost on the other.

Modular and component presentation forms

There are many things that can be done with the component, such as templating, and now the templating task is delivered to the front end. The second is the public style library, the third public function library, some business components, a special point of modularity.

It is therefore possible to conclude that the approximate presentation of components includes: A unified style library, with a certain HTML structure of the code snippet, with a part of the JS control function function, with a certain data input and output control.

Iii. uncovering the veil of cloud components

what are cloud and cloud components

Cloud services are an increase, use, and delivery model of Internet-based services, often involving the provision of dynamically scalable and often virtualized resources over the Internet. The cloud is a metaphor for the internet and the Web. In the past, the cloud was often used to represent the telecommunications network, which was later used to represent the abstraction of the Internet and underlying infrastructure. A cloud service is a network that obtains the required services in an on-demand, easy-to-scale manner. This service can be it and software, Internet-related, but also other services. It means that computing power can also be used as a commodity to circulate through the Internet. The combination of the cloud and components makes up the cloud component.

So the cloud component, through the resources on the line, combined with this concept to combine these two concepts together to produce this concept. In the final analysis, it is hoped that all n items will be controlled together through a unified control.

A push component.

A push component type includes a style class component, a directive component, a serviced component, a public filter, a public function library, and so on.

exclusive CSS can be found in the component category is the style class component, plus the template is very simple components, and then put the controller put in, is the front of a certain JS, with a certain logic of the components, add link in, with the animation, the data layer added in to have a certain output input. This data layer may contain multiple, possibly you interact with your page controller, it is also possible that the component is very strong, you directly with the server to obtain data and transfer data (of course, the former may be more appropriate to our environment, the latter on the unified interface requirements will be higher).

This is a technical solution for the push cloud component. Based on the front-end big Three and some other libraries, such as there will be some geo-fencing components, we need to let Baidu map to our entire project docking, as well as visual projects, such as G20 over there, the visualization project will be used to third-party library. We're using less to write CSS. Develop cloud components on top of these.

According to some cases of cloud component, we conclude that the best practice object is to start with the management System of table Form class with certain general interaction, and gradually contain the system application of complex interaction, and have some support to the response style. A push starts with a push service, followed by a lot of product lines. Push service will have a lot of 2B, 2C platform, this is the management type.

is a directory structure used by the push cloud component, using the Gulp packaged, the CSS has a WD folder, which includes some third-party libraries. More key is the main or below, JS is the same, WD is the base library. The fifth is the most important, all the components are placed in this folder, the right side of the diagram shows that each component contains its own big three-template, logic, interaction, effects and styles.

Gulp-based packaging

Cloud Component Showcase SiteThere are three main categories of users of cloud components, the first of which are front-end users (including the pan front-end staff) who need to learn how to use the components quickly (and must know some basic concepts and usages of angular). The second category is UI designers, projects, and products, and they need to see if the effect is appropriate and design new systems based on the library. The third category is tourists and other people. new thinking about cloud components

Cloud-based concepts are positive reaching, but in fact this mechanism is not well used (such as an old component updated a bug), it will open a negative pull to start the whole body, then what to do?

Back to the beginning of the cloud, it's easy to see that when resources are isolated they don't have that kind of impact (cloud components are using their reverse thinking to achieve convenience), so we can reduce the impact by closing the cloud component resources. This is version control. Different projects refer to the corresponding cloud to achieve the best balance between the two that we just talked about.

Therefore, only the reasonable control of live to really play the advantages of cloud components.

Under multiple versions, our development model is for the project to be determined by the cloud component upgrade. Because if the cloud component is rolled up, all projects are upgraded to cloud components The cost of this backtesting is high, and the original version of the cloud component is enough for the current version of the project that was already online.

project system diagram of a push

Problems in the actual use

The cloud component's release has a certain periodicity, but the actual project needs to respond quickly, this time need to adopt the Cloud Component Expansion Module (pattern) Development: cloud-based components to develop the project's component-level modules, cloud components to expand or project customization.

Iv. Experience of experience

First, modularity: Always ready for modular abstraction, which is a dynamic process. Second, think about the surrounding, more than the rest of the part---------------- Third, there is no realization of the effect, only can not bear the price. Four, there are many ways, time permitting can try.

A probe into the cloud component of push front end based on Angularjs