How to design and implement a web App

Introduction to Web Apps

Web App is not really anything new, compared to the traditional web and traditional App,web app this combination of Web and app products have the following advantages:

1. The development of the Web app is more convenient, iOS development needs to install a lot of things, Android development is similar, in addition to the Web App learning cost is lower than the platform client development, at least you do not have to recruit iOS and Android programmers. As long as the basic web development capabilities of people can be relatively quick to get started.

2. Easy deployment, in many cases, deploy a single-page web The app only needs a index.html page file as a container and a front-end resource package file (generally called bundle.js), and then put index.html in their own server project path, in which bundle.js, as for bundle.js can be placed on the CDN, update the Web The app is tantamount to uploading and refreshing the CDN cache. In this way, the front-end deployment is extremely simple, basically do not need to SSH to the server to replace files, but also to avoid their own server transfer more bandwidth-intensive front-end resource files.

3. Single Page Web App if the technology is properly selected, development and maintenance costs are relatively low.

4. Can adapt to more environment.

There are pros and cons to everything, web apps also have an unsatisfactory place, the main drawbacks of web apps are as follows:

1. Performance is inferior to native app, this needless to say, basic is the fact that cannot be changed.

2. I haven't thought of anything else yet.

Pre-preparation

First of all to the technology selection, according to the author's experience, I chose React+flux,flux is a data flow architecture, strictly speaking it is not a specific implementation. The more common implementations are Facebook's official flux implementations, and some third-party implementations (such as Redux). It is important to note that the specific implementation of flux will not affect our project development, the specific choice of which implementation depends on your preferences (of course, it is best not to make changes in the middle: D).

Then we have to introduce briefly what react is, react can be said to be a change in the front-end ecosystem of inventions, traditional web development, we use the page as a unit to design the module, if there are multiple pages have used a function, such as a list, then you have to repeat the HTML and JS to implement it, Code abstraction is very low, redundancy is very high, also is not conducive to post-maintenance. React introduces the concept of UI components that enable Web front-end developers to encapsulate UI components for reuse.

Flux's idea of a dataflow architecture is nothing new, but the real-scale use of the Web front end is something that developers use React+flux. Flux has developed some rules for getting and distributing web front-end data, and while it's starting to look complicated, once you understand it, it's simple, and React+flux can be a pretty good combination for maintaining a web app.

Design a web App what exactly is it designed for?

Just talked about the react+flux, in fact, the package of UI components and data flow architecture, they all help developers to set the right, what we need to do is to use it well, then what can be designed?

There are some, and quite a few. Technically speaking, native apps such as Web Apps and iOS apps and Android apps have a lot in common with technical design:

1. Page Life cycle Management
2. Design of public functions
3. Local/global events and notifications
4. UI Component API Design
5. Constant definition
6. Network Requests
...

Web Apps also feature features that aren't or are different from native apps, such as app routing, JS (Es5/es6 diff), using/refreshing CDN cache, front-end resource packaging, rapid deployment, and more.

How does React+flux work?

Since this article is not a react and flux tutorial, it will only give you a general overview of how they work.

Here is an official flow chart of flux:

Detailed version:

Simply explain the flux workflow:

In the first picture, there are two processes:

1. Action->dispatcher->store->view

2. View->action->dispatcher->store->view

In Action->dispatcher->store->view, you can perform an action by calling the method in action, either by requesting data from the server, or by simply changing the data locally, after the operation is complete, The action notifies dispatcher, which then dispatches the action and data. In the store, a callback function for each type of event is registered beforehand, and some update operations are performed when the store receives events and data distributed by dispatcher. In addition, view can register the listener on the store, but the data in the store changes, will immediately execute the view pre-set listener callback function, which is generally an update view operation, which is equivalent to a publish-subscribe mode.

In View->action->dispatcher->store->view, it actually means that the interaction between the user and the view results in data changes (whether the request server or local data changes), other operations and action- >dispatcher->store->view basically the same.

It's very abstract to look at these things, but it's a bit hard to understand if you don't go into a demo or implement a project yourself. I will introduce flux and react in a follow-up.

In this article React+flux basic introduction to this. The following is to talk about the specific design.

Specific design

A web app is nothing more than a prodded to do several things:

1. Calling the network API
2. Display Page
3. Data local storage (this is usually a non-persistent type, which differs from the native app)
4. Accept user input and feedback

As a technician, we first need to make a few clear points:

1. Clearly know what business needs to put in place.
2. Divide the function module.
3. Figure out the dependencies between the various issues and develop the communication specifications between the modules.
4. Take due account of the future direction of the project and leave the architectural design.
5. Analyze the risks.
6. Consider how to solve the most fundamental part of the dependency, first implement the basic module (or at least you have to have a rough design of it first), and constantly improve the entire architecture on this basis. This part of the developer spends a lot of effort doing it because it affects almost everything in the future of the project. At the same time in the process of constantly reviewing the structure is reasonable, timely adjustment.
7. Unit tests, performance tests (if the project is needed and time is available).

Project file Structure

One of the good development habits is to have a clear project file structure and keep it going from start to finish.

Proper description of the document

If possible, write some helpful architectural documents that convey what you want to express in concise and clear terms so that later programmers can get started quickly.

Thinking and method the same, do not engage in diversification

In a project, there should be a unified approach to the same class of things, including code styles, naming conventions for variables and methods, calling specifications, process specifications, and so on, and requiring everyone to follow.

Minimize lateral dependencies, minimize cross-layer access, and reduce inter-module coupling

This part of the content React+flux has helped us to do a great part.

There is a clear limit to where the business party is bound, and the flexible place to create the flexible conditions for the business parties

This can be ensured through a good design.

The next step is to describe the functional modules, inter-module communication specifications, and to solve the dependency relationship.

Partitioning of functional modules

In React+flux's project, there are several large base modules that must be considered in case of specific business situations:

1. Display Module
2. Network Request module
3. Local Storage Module
4. Routing Module
5. Common Modules

1. Display Module

This is something that the user can see directly, we provide it with react encapsulation of each UI component, or we can introduce a third-party UI component, which in itself is an improvement that allows us to "component-oriented" in the Web front-end, so the processing of the UI components is especially critical. ES6 syntax, we can use extends react. Component to build a UI component and then write the initialization method, rendering method, life cycle function, event callback in the component "class", and then provide it as a whole, here involves the design of the UI component API, the UI component can accept the property value, These attributes should be as small and as clear and simple as possible, and it is necessary to remain concise. In addition to the components of the display can not be separated from CSS and some resource files, as a package, CSS, pictures and other resource files in this UI component folder is also necessary.

2. Network Request module

Web App network requests all rely on Ajax, when interacting with the server, it should be agreed with the service to return the format of the data, such as the meaning of the error code, error message, detailed data format, and it is necessary to do a layer of packaging on the web app side, such as encapsulating a request module, After the server returns data, first parse the return data, if an error occurs, the successful execution of the user callback function. This part of the entire project as an external interface should take into account all possible network conditions: Server fatal error, common error, success, timeout, no network, etc.

3. Local Storage Module

This part mainly to flux processing, we need to do is to design the structure of local data, make it as reasonable and adapt to a variety of application scenarios.

4. Routing Module

React+flux's single-page web app generally uses React-router as a route, which saves you a lot of time and effort, and React-router is a very mature and excellent routing module.

5. Public module

Common modules typically include, but are not limited to, common functions, helper, constant definitions, application-level features (such as display loading boxes, warning boxes, confirmation boxes, and so on). This part of the function is also very important, such as the loading box, we will launch a network request to show it, the data will disappear when the return, then the appearance of this box is related to the above mentioned network module, warning boxes and confirmation boxes are also common things, these components should be designed and integrated on the app level, It should not be placed inside the various UI components, because this is a common feature in an app.

Inter-module Communication specification

In React+flux, the data is distributed using a one-way data stream, which makes the entire data flow very clear, and our web App inter-module communication specification is based on the idea of one-way data flow.

Resolving dependencies

There are 3 more ways to handle dependencies in React+flux: explicit ingestion, event-based (publish-subscribe mode), callback functions.

This dependency is strongest and most noticeable when additional modules are introduced into the module (import) using explicit ingestion. If the dependencies are not that strong, consider using the next two, which helps to introduce the code and decouple the module.

Based on the event (publish-subscribe mode), for example, in flux when the data in the store changes, to notify the corresponding View update page, the typical way is to let the store become a eventemitter, while the view on the store Addchangelistener, which becomes its subscriber, automatically invokes the view's listener callback when the store changes, allowing the view to update the interface.

Based on the callback function, there is a very typical use case, when designing common warning boxes and confirmation box components, sometimes we need to do something when the user clicks on the "OK" and "Cancel" buttons, and of course they may do nothing. At this time we should not forget that the function in JS is a class citizen, we can pass the event handler function to the warning box and the confirmation box component, so it is very clever to solve the cross-component, cross-module communication without the module being too coupled.

How to design and implement a web App