Component based web app

Time:2021-7-28

Component based web app

Project source: muke.com
Show effect link
Project source code

1 Analysis

1.1 app introduction

The component-based web app implements an exquisite H5 dynamic mobile end single page data report. In addition to the initial preloaded page displaying progress, it is composed of ten pages. Each page is a component. In addition to the front page and tail page, the middle 8 pages of the data report have the same title bar and background, including line chart, pie chart, column chart, radar chart Ring diagram and scatter diagram show different data. Each graph is generated dynamically.

1.2 brief analysis of app

1.2.1 resource map

The resource map is provided by the designer. The background map and static resource map of the app can be extracted from the prototype map through accurate cut map and ruler mark.

1.2.2 page loading mechanism

Fullpage plug-in provides good support for full screen scrolling effect and page switching, which is convenient for template loading of component-based development. Adding a page in fullpage is adding a component, and the independent animation effects in the component constitute the sub components of the component.

1.2.3 component design

The key of component design is to extract commonness for reuse, extract characteristics, and generate animation by components passing parameters.

1.2.4 animation generation

Considering the performance and fluency of animation, canvas painting is used to complete the growth animation of various diagrams.

1.2.5 preload progress display

The most bandwidth occupied in the loading process is the picture. The loading percentage of the progress is displayed according to the loading percentage of the number of pictures. Every time a picture is successfully loaded, it will call back the progress function to change the progress.

2 design

2.1 structural design

Index.html -- the entry file of the app
IMGs - picture resources
CSS - style
JS -- component class
Test -- Test of component class

Component based web app

2.2 implementation process

2.2.1 first prepare the resource map and store it in the IMGs folder

be careful:
1. The prototype of resource map shall have accurate position identification for positioning.
2. The picture naming shall be reasonable, with page marks and clear semantics.

Component based web app

2.2.2 component development process

First, apply the fullpage plug-in to load pages and components later; Then implement each component; Test each component during development; Finally, load and call various components in the app entry file and add remote data.
The test directory is the execution test entry of each component, including fullpage (test-h5. HTML).

Component based web app

JS directory is the implementation of components, and lib is used to store static resources

Component based web app

The CSS directory defines the style of the component

Component based web app

The entry file finally integrates the loading components and calls the remote data. Here, data.json is used to simulate the remote data

3 Implementation

App source address

Fullpage 1.3 application

3.1.1 test base class implementation

A base class component componentbase is implemented so that fullpage can be loaded as a page. The base class component is passed in the form of parameters, and the interface parameters are component name and text & style. Simple loading and removing events are added to the base class component, and the style is controlled by class name.
Related files: test-h5componentbase.html, h5componentbase.js, h5componentbase.css

3.1.2 fullpage application

First, learn how to use fullpage. Test file: test-valid.html
The loading of the control page can load pages in a continuous way, and load the components after loading the page, and invoke the fullpage plug-in during the page loading process, load the set pages in full screen scrolling mode, control the components to move out and load animation with the help of fullpage’s migration and loading. The code related to loading is ignored first and supplemented later
Related files: test-h5.html, h5.js, h5.css

3.2 component implementation

3.2.1 graphic components

Based on the basic components, the transformation is mainly to test and realize the relative positioning of components.
Related files: test-h5componentbaserelativeto.html, h5componentbaserelativeto.js, h5componentbaserelativeto.css

3.2.2 chart component with animation generation effect

The basic component class has been developed previously, and the chart component is also a component. You can directly call the interface of the basic component to develop the chart component.
Because the development of chart components has no dependency, the development process can develop chart components step by step according to the difficulty of chart development instead of the loading sequence of charts.
In the code of chart components, onload and onleave are ignored first. They are used to load and move out when turning pages. They will be used later for integration. Here, we only focus on each independent component, and each independent component only focuses on the most important part with animation first. Public component styles are handled uniformly during integration.

3.2.2.1 scatter diagram components

Each point of the scatter chart has a text description and a percentage representing the amount of data. The percentage is set by the aspect ratio relative to the first maximum point. The first point is used as the reference point, and other points move around from the reference point to load the animation. Each point also has a focuc dynamic rendering effect triggered by click. Initially, the basic point is rendered first by default.

Component based web app

Related files: test-h5componentpoint.html, h5componentpoint.js, h5componentpoint.css

3.2.2.2 histogram assembly

Histogram has two implementations: horizontal histogram and vertical histogram. The horizontal histogram can easily realize the vertical histogram by changing the parameters.
Each column is composed of name, scale bar and scale data. The scale bar has a dynamic generation effect, which is realized by controlling the class name and CSS animation.

Component based web app
Component based web app
Relevant documents:
1. Horizontal histogram: test-h5componentbar.html, h5componentbar.js, h5componentbar.css
2. Vertical histogram: test-h5componentbar_ v.html、h5ComponentBar_ v.js、h5ComponentBar_ v.css

3.2.2.3 line chart components

Starting from the line chart, because the structure of the component itself is complex, canvas painting will be used to complete the following.
The line graph has two important components, one is the background grid, the other is the growth animation of the line graph, both of which are drawn with canvas.
Considering that the mobile terminal is dual resolution, the canvas canvas is set to twice the size of the component itself, and 100% of the components are covered to obtain a high-resolution painting effect.
The background grid is divided into two parts: horizontal and vertical. While realizing the vertical, borrow its vertical position and add description items at the same time.
The realization of polyline is divided into three parts: point, line and shadow. Finally, the data percentage of each polyline point is added. Considering the growth animation, a percentage is set for the drawing function to represent the state position of polyline. The animation is from the initial 0% to the final 100%. SetTimeout timing and loop are used to realize the growth process.

Component based web app

Related files: test-h5componentpolyline.html, h5componentpolyline.js, h5componentpolyline.css

3.2.2.4 radar chart components
The implementation process of radar chart and broken line chart is very similar. First, draw the background map (grid and umbrella bone) and data description, then draw points and broken lines, and finally realize the growth animation with timer and cycle.
In order to spread the description data around, the text is divided into left and right offsets on the X axis and up and down offsets on the Y axis.
The difficulty of radar chart compared with line chart is: the location of radar points, calculation formula:
Known center (a, b), radius r
rad=(2*Math.PI/360)*(360/step)*i;
x=a+Math.sin(rad)*r;
y=b+Math.cos(rad)*r;

Component based web app

Related files: test-h5componentradar.html, h5componentradar.js, h5componentradar.css

3.2.2.5 pie chart assembly
Pie chart is realized by three layers: map layer, data layer and mask layer. On the surface, growth animation seems to exist in the data layer, but a simpler implementation method is to gradually appear the data layer through the occlusion of the mask layer. The more the mask layer is displayed, the less the data layer is.
Here, you need to set the z-axis hierarchy of three layers. The basemap is at the bottom, the data is in the middle, and the mask is at the top for occlusion.
The text description around the pie chart also spreads around in the same way as the text description of the scatter chart. In addition, there is resort to avoid text overlap.

Component based web app

Related files: test-h5componentpie.html, h5componentpie.js, h5componentpie.css

3.2.2.6 ring diagram components

The ring chart component is developed based on the pie chart component. If the pie chart has only one data and a small circle mask is added in the middle, the ring chart can be easily realized, and the text description of the ring chart is placed in the middle.

Component based web app

Related files: test-h5componentring.html, h5componentring.js, h5componentring.css

3.2.3 resource integration

3.2.3.1 resource loading

All components have been implemented before, and now they need to be used. The test file of test is not allowed to be loaded, and other styles and component implementations need to be loaded. Moreover, the naming format of each component is very close. Concise variables are used in the entry file to control the loading file.

3.2.3.2 resource integration

The test is not included in the test, but only the style setting and implementation of the app are stored locally. The real component data needs to be on the server side. Here, the server side data is simulated locally, the component data is loaded through Ajax, and the pages and components are loaded in the form of parameters. Accordingly, add parameter judgment in h5.js and load the components according to the situation

3.2.3.3 foot loading

Each page has the same footsteps, and the footsteps are uniformly loaded for each page in the H5 component.

3.2.4 loading page

To enhance the user experience, a blank page displays the loading progress before the team members are loaded.
The loading percentage of the progress is displayed according to the loading percentage of the number of pictures. Every time a picture is successfully loaded, the progress function will be called back to change the progress.


 4 test
4.1 code verification
Jslint is used for syntax verification, and the configuration parameters of jshint can be flexibly set to realize self-made syntax verification. I installed jshint through the plugin of sublime, which is very convenient to use.
4.2 function test
The test case with browser control function has yet to be realized. Through the use test, this app has well realized the display effect of various charts. It is a sophisticated component-based development data chart display app.