A front-end development approach based on Microsoft XAML Technology

The platform for using XAML technology currently includes platforms such as WPF,SILVERLIGHT,WINDOWS8, and the future of WINDOWS10 unified Windows apps also uses XAML technology.

Front-end development refers to the design and implementation of user interface through visual integrated development environment, and the process of presentation layer development is accomplished by manually writing XML interface description code. The development environment used for front-end development based on XAML technology is blend, and the output is XAML code. Because there are some problems with the current version of Blend 2013, it needs to be used in conjunction with VS. Blend 2015 has been a major improvement that solves a variety of problems, but has not yet released a formal version.

The following summarizes the ideal front-end development method based on the XAML technology, part of the process in a small scope of the attempt and promotion, the effect can also be fully tried and promoted.

1. The inputs to this part of the work are prototypes and requirements.

Prototypes are recommended to be produced using Axure RP or Prototyper (which supports better mobile development), non-programmers (such as product managers, UI designers, etc.) that can easily draw interface elements and use visual methods to express interaction logic.

2. The output of this part of the work is, a. Style layer code, B. View layer code, c. Style design document, D. View and ViewModel layer contracts-data binding interface documentation (written in consultation with backend staff).

Style design documents and data binding interface documents are recommended to be expressed in UML, because styles and data are hierarchical, inheritance and dependencies are present, so UML representations are most appropriate, and Visio is recommended for drawing UML diagrams.

The style layer and the view layer are mostly done using blend, using a visual development approach as much as possible, minimizing the effort to hand-write XAML.

3. Analyze prototypes and understand requirements.

All front-end developers have to understand the requirements, even what to do and why do not clear, is not good interface design and implementation.

4. Meet to discuss all prototypes and requirements, identify problems and agree on an understanding.

This can be considered as the No. 0 milestone, the starting point of the front-end development work, where everyone has a consistent understanding of the needs and try to avoid future debates.

5. Discuss the design of the overall design style and page structure.

In this meeting can use brainstorming method according to the prototype Idea page details display way, generally use several layers of nested structure, to determine the use of several headings, several text, several major fonts, font size, color and so on. Used by a person in Visio to express clearly in UML for later use. This is actually a preliminary standard, which we must abide by in the future.

6. As discussed in the previous step, some people write style design documents and complete the code at the bottom of the style layer. Another part of the person for the key part out a few PS. Two parts to be able to correspond.

7. first milestone, confirmation .

Need leadership confirmation.

8. Modify and create a framework for all empty pages and style files, describing what each file is for.

If you use a custom interface framework, you need to introduce an interface framework and construct the page structure based on the framework.

9. Complete the control selection and the outer layout of all pages (can add color indication), you can further beautify the painted pages, add elements such as border, set and extract styles into the style layer.

second milestone, control and layout confirmation.

The backend staff is required to confirm that the controls used and the intended interaction logic backend personnel can be implemented.

11. Modify the control problem and unreasonable layout, optimize the layout.

12. Complete the control internal template for all pages, sample data, binding settings.

A third milestone, page confirmation.

A white page with full functionality is now complete, requiring the project owner to confirm the functionality of all pages.

14. The data binding interface document should have been completed, the page can be combined with the backend, the test.

15. Apply pre-extracted styles to all pages, further set and extract styles to style, perfect style layer.

Pay attention to the coordination between personnel, ensure consistency.

16. Enter the modify stage of the control's internal template to deeply modify and extract the style.

From easy to difficult, internal template modification also to extract the style, to ensure consistency.

17. Further refine the dynamic effect of the control's internal template.

If you move the mouse over, press, and select the style of the same state, you can add animation to enhance the effect.

18. You can complete the desired animation or consider adding an animated boost effect.

19. If you have access to real data, self-test, mutual testing, including different window size, resolution, different real data under the situation, record the bug.

20. Modify the bug.

A front-end development approach based on Microsoft XAML Technology