Mastering these two technical points you can play with Appcan front-end development

"Appcan front-end development is very simple, as long as the mastery of two aspects of technology can be." On the one hand, you will use the grid layout to complete the UI typography, and on the other hand use the Appcan MVVM model to complete the entire page construction and user operation logic. "At the technical talk show at the 2016AppCan Mobile Developer Conference, Appcan Technical associate director Chenxue shared his experience in Appcan technology development to help developers gain insight into appcan technical ideas.

Here are the full highlights:

Grid Layout

Appcan uses the elastic box model as a standardized grid layout reference scheme to help developers finish the typography of the interface more quickly. Why is elastic box model? Elastic box model is the most convenient, convenient and efficient layout solution for mobile, which can solve the problem of screen difference of mobile devices which are becoming more and more popular in the market today.

Elastic box Model

The following is an example of an intuitive search box to explain the elastic box model.

This search box can be regarded as a whole, in this whole is divided into Search button and input box two parts. When this search box is typically implemented, it may be difficult to determine a specific percentage in terms of percentages in order to fit a variety of resolutions. It is easier to use elastic boxes.

First the search box overall is a Box , the left search icon is determined by a fixed width, and the left-hand input box can be Box in the box-flex:1 property to automatically open it up so that the input box will occupy the remaining width of the screen regardless of the resolution.

Imagine the screen as a large tofu block, and then divide the big tofu block into various sizes of tofu pieces, in each tofu block we can split it as needed, this is the grid. It can be better adapted to different resolutions, different mobile devices.

Grid Layout instance

This entry on the left is implemented using the Appcan Grid Layout method.

This entry is one of the list, we regard this as a box, in this box is divided into 3 parts, where the avatar, name area to take a fixed width placeholder, the remaining title area using Box-flex property to fill the remaining width of the screen.

This example simply uses the two simple attributes in the elastic box model to implement the layout. The Elastic box model also provides properties such as alignment, portrait alignment, and reverse arrangement, which can meet a variety of UI layout requirements.

Layout is just the basic development, through the elastic box model, we can quickly develop to adapt to all the resolution and device interface, but the layout does not do all the functions, such as we need to complete the interaction, function, logic and other operations, which also requires code development.

Traditional front-end development model

 

Hard Code development

 

In the traditional development model of hard code development, data, presentation, logic and so on mixed together. mixed with each other, you have me, I have you, the whole will look very chaotic.

Disadvantages:

1. because of the combination of presentation, data and logic, the readability of the code is poor and it is difficult to complete the transfer and delivery of knowledge.

2. interface changes are complicated and cannot be debugged quickly. The problem comes out and the problem cannot be quickly located.

3. Complex maintenance, easy to fix in the new bug.

4. Data processing function is single, if sorting, filtering and other work, need to rewrite the code.

UI display of controls

In contrast to the traditional front-end development pattern of hard code development, the UI display is controlled, encapsulating buttons,TreeView, List, and other controls, the advantage is the UI and interactive parts of the control encapsulation, improved reusability.

Disadvantages:

1. The control needs to be refactored when the data needs to be sorted, filtered, and so on standard processing.

2. Requires dedicated maintenance, cannot be quickly adjusted by the first team

3. Poor change, unable to meet the user's rapid diversification of UI requirements

What to do? The industry has been practiced to take the MVVM development model for resolution.

MVVM Development Model

The MVVM development mode separates views and data models, automates correlation through automated scripting, andViewModel the bridge between views and data, while ViewModel and logical processing. The View is actually HTML,Dom, and the data model is the JSON data to be processed.

Advantages:

1. Low coupling, separating the view from the model , when one of the two changes, the other party will not be affected.

2. reusability, whether it is view,ViewModel or model, can be reused, which improves the efficiency of development.

3. HTML Templating, modify the template does not affect the logic and data, templates can be directly debugged.

4. Automatic data processing,Model Implementation of the standard data processing package, such as sorting, screening and so on.

5. bidirectional binding, which automates data updates through DOM and MODEL two-way binding, reducing development time.

Given the advantages of the MVVM model,Appcan combined with MVVM, the birth of APPCANMVVM development model, this is APPCANMVVM front-end development models.

In this model,view-dom is the HTML page used to display the data model is the JSON data to be processed,ViewModel the view-dom and model are automatically correlated, and the code logic, user interaction code, etc. are handled in ViewModel . The data in model calls various APIsthrough the service , such as the interface developed by our Mas , to realize the operation of adding and deleting and checking.

Appcan MVVM Example

 

The following is the HTML code for the login page:

In the highlighted section,value represents the value that I need in the input tag to change bidirectional with the username field in the data model,Validname is the filter method, it to username This property to verify, the following value,password is also the way of processing. When we enter a user or password in the input tag, the username and password fields in the data model are automatically changed when I change in the model The data in username and password , and the input box in the Web page automatically displays its data.

In this code we want to automate the association, the first thing is to build its data model, and it is to build a dom element el,form is the associated region, the page in the The Dom where the form tag is located points to this ViewModel . bindingfilters is a custom filter, complete the username of a check, which is simply write a value, can actually write a regular expression to do username the checksum. Submitlogin is the submission of the data, as long as the model 's save is invoked at the time of submission.

Here is the code for the data model:

We will find that the location of the user name in the page automatically appears in admin, which is caused by the initialization of the username field in the model .

Model.save will trigger the sync method, and in the sync method We write the function corresponding to the service , we will submit the data in our model to the server.

The server interface is finally implemented in the service, and the server mapping is completed.

This view-dom handles HTML interface,model processing data,view-model Processing Association,service Docking the server, allowing the developer to put the right code in the right place. This guarantees the stability of the code.

Appcan is currently the only open platform with large-scale project practice experience, from the above APPCANMVVM Technology Support architecture can be seen, through the adoption of this development standard,Appcan has unified mobile hybrid application development, mobile Web development and A development framework for PC Web Development that allows developers to build applications based on the same set of development specification languages, reducing the transfer and blending of project knowledge while ensuring the stability of development code.

Mastering these two technical points you can play with Appcan front-end development