Two tools for front-end development, flex and vue

1 Introduction

The two tools for Amway this time, flex is a very powerful attribute in the page display layout, which belongs to the category of css.
And vue belongs to a js plug-in, its function is to make the page display and js data almost perfect. Distinguish, and control the two from a distance (of course, mainly js data control page display).

2 flex

1. Background

When it comes to page layout, I think many people have encountered a difficult problem, namely: == How to make elements vertically centered? == (One of the most typical examples is the login page of yct)
Of course, there are many solutions, but as far as I am concerned In terms of my own experience, there is no perfect solution. The so-called perfection requires at least the following elements:

a. It must be dynamically centered , that is, it can be centered when the number of peripheral pixels is uncertain;
b. Try not to use js implementation (one is that js is mainly responsible for logic, we tend to separate logic and display as much as possible, and the other is that js implementation must call events, so it is necessary to consider the types of events that cause peripheral height changes and the browser's compatibility issues);
c. Must be compatible with as many types of peripheral elements and sub-elements as possible , whether it is a p tag or a div;
d. On the basis of the above, try to reduce the number of wrapping elements as much as possible. Of course, this is not so important compared to the above points .

2. A more perfect solution

Here is a richer link to the introduction of flex properties:
Grammar: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Example: http://www.ruanyifeng.com/blog /2015/07/flex-examples.htmlFor
flex, the solution is very simple. For most types of DOM, it can be solved in two steps:

a. Peripheral elements set display:flex;
b. The peripheral elements are set to align-items: center; In particular, flex has been proposed in 2009 and is supported by all major browsers, so there is no need to worry about its compatibility. <br> (Here according to the time How many, briefly describe other functions of flex)

3 view

1. Background

From the beginning of writing the page, a large part of our energy has been put on the coordination between the page display and data mainly dealing with dom (hereinafter collectively referred to as == data display interaction ==),
here we might as well put List the methods that have been used in the past, and then list their advantages and disadvantages.

2.FreeMarker

It should be the most familiar method for most people in the company (FreeMaker front-end and back-end are involved, but here we only talk about the front-end), but there are many disadvantages:

a. Only supports static data display interaction . This is an absolute flaw, so that pages with low dynamics can also be refreshed to achieve pseudo-dynamics (refreshing this solution is not very good in terms of speed and user experience. ), pages that are slightly more dynamic simply cannot be implemented in this way.
b. The syntax is similar to html syntax . Objectively speaking, this is not all cases. This is a disadvantage. In specific cases, some places are acceptable, such as include. But the key is that in a page, As long as there is one shortcoming caused by this feature, it will cause difficulty in manual parsing and understanding of the entire page;
c. There is no available syntax detection plug-in/method support . This can be understood by looking at the red crosses in the html files in our project. There are so many red crosses, not to mention syntax hints. In fact, Even if this plugin exists, it should be very difficult to do, because it needs to consider html, css, and js, and it can interfere in all places. This function is indeed powerful, but because it is too powerful, it is difficult to Restrictions, not to mention that there is no plugin for restricting syntax at all. So we most often see errors caused by front-end reasons, most of which are caused by FreeMarker.
d. Data is difficult to reuse and even more difficult to cache . The cache mentioned here refers specifically to the front-end cache. Although our system has not considered any cache issues so far, for some data with a large amount of data but little change (Most selects use data), it is possible to consider reducing the server and database through data caching (database can reduce left join, some people may not understand here, you can elaborate) pressure and improve front-end data transmission speed. Generally speaking, The data transmitted by ajax is relatively easy to convert into cached data. Regarding the details of the cache, I will not talk about it here. Maybe one day our system will consider this matter.
e. All data is explicit in html, and the security is poor . Not only passwords, but also other data that companies want to keep secret. However, security is the same as the previous point to improve system performance, and we have no motivation to improve now. .The
advantages are still there:
a. It overrides the priority of all front-end content and the interference power that everything is allowed . But how to say, FreeMarker is like a nuclear weapon in war, the power is indeed powerful, but there is no more powerful means to limit it, so the side effects are also very Obviously, if you don't pay attention, it will be 500 times;
b. The only way to get data directly from request and session . The solutions mentioned later are all obtained indirectly through ajax. This is basically one of the reasons why I use FreeMarker in one of the two places - providing == difference Seed ==.
Now let's talk about two places where I use FreeMarker, which is also involved in my custom specification:
a.<#include "../../something.html">: The html introduced here only has references to css and js plugins, and a few static configurations that are used to it;
b. There must be no more than three differential seeds, that is, the content in the data configuration of the page, and must undergo strict format guarantees to form differential seeds (differential seeds: the same template page is used to distinguish different content and form differential seeds ).
The above use places reduce the possibility of FreeMarker errors from a large range.
(Here can discuss how to implement differential seeds if FreeMarker's syntax on the page is not used at all)

3.jquery operates dom

Since FreeMarker only supports static data display interaction, for pages with strong dynamics, such as yct's main page for sales billing/main page for payment and receipt, the first method to consider is to use jquery to operate the dom.
It should be said that the operation DOM can be done without using jquery, but jquery will undoubtedly greatly reduce the difficulty of operating DOM.
Since it is data display interaction, it must involve two aspects, one is data to display, and the other is to display data (such as Collect input data). The former has nothing to say, the latter as far as I know, there are 3 genres:

a. Whether it is input or html, it is saved on the page as it is, and the value is obtained by $(dom).val() or $(dom) .html(). This method is what I did at the beginning One of the advantages of using a scheme is that there is only one set of data, which is convenient and reliable to process, and it is not easy to make mistakes. Very inconvenient;
b. All data, unless it is obtained from input, always have a backup in the js data . This method should be a commonly used method before Lite. Compared with the first genre, the advantage is that There is no need to worry about the impact on the data value when modifying the page display. The disadvantage is that there are basically two sets of data, the logic complexity will undoubtedly increase, and the error probability will also increase, which may lead to inconsistency between the data and the display;
c. All data is still stored on the page, but for core data and frequently operated data without the display of Input, additional hidden input is provided to set, so that when the data is retrieved, it is only necessary to obtain it from the hidden input . This This method is a compromise method that I came up with after using the first genre to suffer from a short period of large-scale modification of the page. It holds slightly more than one set of data, but far less than two sets, And because the operations are all performed in html, it is not easy to make mistakes. When modifying the page in a short time and on a large scale, because it is hidden input, there is no need to be involved in the storm. The only disadvantage is that the more core data, the more hidden input It will gradually increase and the complexity will become more and more complicated, but compared with the first two, this third genre should be regarded as a more mature solution. The
above three genres, I believe that everyone here has written the front html, and everyone I have used one of them, or one of the two or three intermediate solutions.
No matter which solution is used, it seems that it is not so perfect. I always feel that the code should be more streamlined and the logic can be simpler.

4. Plugins

Plug-ins are divided into ready-made plug-ins and custom plug-ins (yys-util) according to the author. According to the use, they are mainly divided into jquery, display changes (such as bootstrap-switch, select2) and functional integration (such as datatable, jquery-form), for For many plug-ins, there is no clear boundary between the two purposes. For example, ztree is used for both display changes and function integration.
When it comes to data display interaction, the main purpose is function integration. There are many advantages in using plug-ins. This is not to mention, just talk about the shortcomings in the actual use process.

a. The ready-made plug-ins used by most people are not easy to expand the functions . This is the main problem, and there are many kinds of situations. Due to the use of ready-made plug-ins, the scope of the process must be limited, and you want to use some other than API. The function is very difficult, and the source code needs to be read and understood from the beginning, which is very difficult (for example, h-ui implements different urls to open the same tab). Even if it can be realized, there will often be a time difference, and the user experience will be poor (for example, select2 displays the inventory balance and marks it in different colors);
b. Some changes and display plugins are more troublesome in dynamic processing (dynamic processing here mainly refers to the DOM operation of jquery). For example, bootstrap-switch is dynamically reflected in each row of the table, and people who start using it may be very puzzled. Why does it automatically return to the form of a normal checkbox.
c. There may be compatibility issues between different plugins . For example, calling select2 in a non-iframe form layer.
d. The number of ready-made plug-ins is scarce, and it is impossible to solve all problems. When using custom plug-ins to solve the problem, the balance between convenience and comprehensiveness is often difficult to be compatible . The number of custom plug-ins written by myself is not small. , including many plug-ins that display and change the purpose. In order to achieve the inheritance of a function, sometimes I want to write a large and comprehensive plug-in, but it is a waste of time and brainpower, and I have to worry that the overly complex form may bring about other people's problems. In terms of higher learning costs.
In general, plug-ins are irreplaceable at any time, but they can only solve very limited problems.

5. How I met vue

Using Vue is not an accidental event.
In fact, when I found many imperfections in jQuery's manipulation of DOM, I was thinking of a more perfect solution to solve the problem of simplicity of data display interaction.
I even considered writing it myself. A similar plug-in, but the js skills are poor, and there is no idea.
Until one day, when I was learning WeChat applet, I found that this writing method is the perfect data display interaction scheme I want!
Later, I learned about regular And other similar frameworks, including react, angular, vue. In
the final comprehensive evaluation, I chose vue. The reasons are summarized as follows:

a. The learning cost of vue is smoother ;
b. Vue is widely used, internationalized plug-ins are still constantly updated ;
c. The syntax of vue is very close to the syntax of WeChat applet .

6 Introduction to vue

Portal: https://cn.vuejs.org/v2/guide/index.html
(here will introduce a few vue pages written by myself)

7 Compatibility Assessment

The compatibility here is divided into two aspects:
one is the compatibility of browsers. Vue is compatible with js E5 and above standards, such as ie8, which are supported by all mainstream browsers; the other is compatibility with previous data display interactive writing methods sex.

a. Compatibility with FreeMarker. As mentioned earlier, FreeMarker is irreversible, so compatibility does not depend on vue, but on the content of FreeMarker itself. Of course, no matter from which perspective, I recommend FreeMarker Only used in the two places recommended.
b. Compatibility with jquery to operate dom. I haven't tried this myself, and there is incompatibility on the Internet. My own idea is that what jquery can do to operate dom, vue can do. For old pages, naturally there is no The method can be changed back, unless it is refactored, so the old page is not recommended to be mixed with vue. But for the new page, I suggest not to use jquery to operate the dom, but to change it to vue.
c. Compatibility with plugins. This cannot be generalized. My current experience is that I have not encountered ready-made plugins that are incompatible. Some plugins are more convenient than before after using the vue mode template. In
general , , Compatibility is not a problem when writing new pages.