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's technical thinking.

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-hand search icon is determined by a fixed width, the left-hand input box can be automatically open through the Box-flex:1 property box, so that the input box regardless of the resolution will occupy the screen remaining width.

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, the name area to take a fixed-width placeholder, the remaining title area using the Box-flex property to fill the screen remaining width.

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.

Disadvantage:

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.

Disadvantage:

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 view and data model, automates the association with Automation scripts, viewmodel the Bridge of views and data, and interacts with logic in ViewModel. View is actually html,dom, the data model is the JSON data to be processed.

Advantage:

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 combines MVVM, the birth of Appcan MVVM development model, this is APPCANMVVM front-end development models.

In this model, View-dom is used to display the HTML page, the data model is to process the JSON data, ViewModel will view-dom and model automatically associated, in ViewModel processing code logic, user interaction code and so on. The data in model calls various APIs through 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 means I need to change the value of the input tag with the username field in the data model, Validname is the filter method, it checks the Username property, the following value, Password is also the way to handle this. When we enter a user or password in the input tag, the username and password fields in the data model are automatically changed, and when I change the data in the username and password in model, its data is automatically displayed in the input box in the Web page.

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 Web page of the form tag is located in the DOM point to this viewmodel. Bindingfilters is a custom filter, complete the username of a check, which is simply write a value, in fact, you can write a regular expression to do username verification. 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 interfaces, model processing data, View-model processing associations, service docking servers, and allowing developers 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 Appcan MVVM Technology support architecture can be seen, through the adoption of this development standard, Appcan has unified the mobile hybrid application development, mobile website development and PC website Development Framework, This model allows developers to build their applications based on the same set of development specification languages, reducing the transfer and blending of knowledge in the project while ensuring the stability of the development code.

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