Shulou(Shulou.com)06/03 Report--

Author: Li Xiaojian. He is now the Senior Technical Manager of SUNING Video Cloud. Software technology major, engaged in java development, with 8 years of development experience, more than 6 years of full-time front-end development experience, more than 3 years of team management experience; currently responsible for SUNING video front-end research and development and architecture, participate in the front-end SDK component development, promote SUNING video cloud platform architecture improvement and user experience, and provide users with quality services. Life creed: always believe that as long as there is pay, there will be something in return.

With the development of WEB technology, many systems are slowly transferred from the client to the WEB side, so the WEB content is no longer just used to display static content, and the front-end engineer's job is no longer just to cut the page, write some styles, and write some special effects.

Now the Web end has reflected a lot of logic and interaction that only existed in the back end, the front end is also constantly adding business code, and there are higher requirements in the user experience, including the response speed of the page and the dynamic acquisition of data, and so on. These reasons are also the fundamental reasons for the rapid development of the front end in recent years.

Since the front-end business becomes more complex, the amount of code will naturally increase, which brings a series of problems, such as the maintenance of the code is more difficult, the collaborative development of the team is more troublesome, the page to load and parse these resources will also be slow and so on.

In order to better solve these problems, we need a reasonable framework, of course, the architecture is not the best, only more suitable, and different teams, different products are also quite different, so if we want to find a reasonable structure, we need to constantly summarize and improve it according to our own situation.

The main work of SUNING's video cloud front end

The current situation of the front-end, we understand that the content of the front-end may be html, css, javascript. In fact, in the normal work is indeed these things, and then focus on javascript.

HTML (html4, html5)

Html includes html4 and html5. However, HTML people will feel that there is nothing, just some HTML tags, and then these HTML tags together, tired out of a page. In fact, there are still a lot of content that we need to learn in HTML, such as the semantics of tags, some of the organizational structure of tags, which are inline tags and which are block-level tags, these tags do not have their default performance when I do not add CSS styles to control them, and these performance is different in different browsers. And the impact of these tags on search engines. You also need to understand what is redrawing and what is backflow.

CSS (CSS2, CSS3)

Then there is CSS, in fact, there are many details in CSS, which we need to be familiar with and master. If we only understand what a CSS attribute is, what it does to the page elements, and then it is not enough to show the page well through these attributes. Occasionally we find some strange problems, some attributes will fail, or the state it makes the page elements appear is not what we want. By comparison, we all know that the width of a div defaults to 100%. When we set the float attribute to him, his width is no longer 100% by default. Here we do not change the width of the DIV.

JAVASCRIPT (ES5, ES6+, nodejs)

Next, JAVASCRIPT,JSVASCRIPT accounts for a large proportion in the front-end development, including the previous ES3, ES5 and now ES6+. Why do you say ES instead of JS here, because ES is short for ECMAScript, and ECMA is an organization called International Standards Organization. ECMAScript is a standard developed by ECMA. This standard is developed for the JAVASCRIPT language.

So ECMASCRIPT is a standard, and JAVASCRIPT is the implementation of this standard, we often say that the release is the release of the standard, so it is ES3, ES5, ES6+. There is not only JAVASCRIPT for the implementation of ECMASCRIPT, but also Jscript and ActionSctipt. Actually JAVASCRIPT = ECMASCRIPT+DOM+BOM.

And we are familiar with NODEJS, we think it is very similar to JAVASCRIPT, it is also based on the ECMAScript standard, NODEJS = ECMAScript+OS (operating system) + File (file system) + Net (network system) + DB (database).

These are probably the things at the front end, and they seem to be the only things. In fact, to do a good front-end need to master and understand in addition to these there are many things that need to be mastered. The front end has already talked about the ECMA standard, as well as the W3C standard and the HTTP standard. There are still a lot of emerging and updated class libraries and frameworks to learn.

And their running environment, such as browser environment, analogy browser rendering mechanism, browser cache mechanism, as well as front-end security functions, such as XSS, CSRF and so on. The environment of NODE and so on.

Another troublesome part of the front end is browser compatibility. Because the running environment of the front end is not fixed, it mainly depends on our users, we do not know what kind of operating system they are using, we do not know what kind of browser they use, and ES is constantly upgrading, constantly bringing us new features, and browsers do not support these features before or even for a period of time after they come out.

If we use these features in our code, our pages and functions won't work or even display properly on browsers that don't support new features. And users may not always keep their browsers up-to-date, they may still use the browser version released many years ago, and we also need to solve such a problem. of course, we should consider this problem when writing code, but we can't take everything into account.

So the front end is not what many people understand is just to cut the page and do the beautification work.

Scenarios that can be applied at the front end

PC browser

Then let's talk about the scenarios in which our front-end can be applied, that is, where can we use the things made by our front-end? now the more common is the PC browser. Comparing some online systems and websites we do, they are all rendered through PC browsers.

WEBAPP (mobile browser, mobile native WebView)

Then there is WEBAPP, which is the mobile browser. In fact, it is similar to the PC browser and is rendered through the browser. In addition, through the mobile WebView, it is also possible to embed an H5 page directly, that is to say, what we have at the front end may also be displayed in the mobile native application.

Hybird App

Then there is a hybrid application, that is, we use the front-end technology to develop the function, and then when we package it, we package it into the same installation program as the native application and install it directly into our mobile phone. its advantage is that its development cost is relatively low, that is, it can be packaged into applications of different platforms at the same time.

Desktop applications (NW.JS, Electron)

Another piece is the desktop application on the PC side, which is similar to the mixed application on the mobile side. It also uses js, html and css to develop the function of the application through the front-end technology, and then packages it into an installation program on PC, which can be run in the form of a desktop client. Its advantage is that the same set of functional codes can be packaged into applications on different operating systems. At present, the commonly used frameworks are NE.JS and Electron. If you are interested in these two frameworks, you can look for information on your own. Now the front-end application scenarios are mainly these, there may be some other less common scenarios, of course, there will certainly be more application scenarios in the future.

The status quo of the front end

Next, let's talk about the current situation of the front end. Let's first take a look at the use of some mainstream frameworks in the front end. Here is a stateofjs2017 annual statistics on the front end framework.

Here are several popular and common frameworks. He compares them from several different dimensions, one of which has never been heard of; one that has heard of it and is not interested in it; one that has heard of it and wants to learn; one is that it has been used and does not want to be used; the other is that it has been used and will continue to be used.

These different dimensions also show the popularity of these frameworks and the love of users. From these dimensions in the figure, from left to right is roughly a sequence loved by developers of a framework. From this chart, we can see that the top rankings are angular, vue and react. This is also quite consistent with our current situation.

There is a strange item here, that is, the one at the top of the ranking does not use the framework, and there is no Jquery that everyone is familiar with.

Personally, I think that in fact, Jquery should be classified into this item, because in a strict sense, Jquery is not a framework, it is just a package of methods, and there is no one-to-one process to provide a solution, so it can only be regarded as a class library, not a framework.

Jquery was so popular a few years ago that front-end development was almost inseparable from it. However, since the emergence of some MVC and MVVM frameworks, Jquery is no longer a must for front-end development. Some projects are based on some historical reasons, or have no intention to use the framework at all. It can be easily handled with jquery directly. So it leads to the top ranking of those who do not use the framework. Of course, this chart is the statistical results of last year, and the rankings of the ones on the right may be slightly different this year. But generally speaking, it won't change much.

The significance of Front-end Architecture

Next, let's talk about the significance of the front-end architecture, that is, why the front-end needs to have an architecture. You may say, the front end is HTML, CSS, JAVASCRIPT. Just write them together. In fact, a long time ago, the front end really did not need any architecture, or even a special position to do it. At that time, the designer made the design drawing, and then wrote a static page, and then gave it to the back-end engineer. After the back-end engineer wrote the back-end logic. Then replace the static pages that designers give them with some dynamic pages, compare them with jsp, php, etc., and then put the data into it.

Common problems in front-end development

1. Do not understand the framework currently used, and start too slowly

Next, let's talk about the problems that often occur in front-end development, such as not knowing much about the framework or technology in use and getting started too slowly. Because there are too many front-end frameworks and class libraries, and the frameworks and class libraries chosen by each company or team are also completely different, it is impossible for a developer to understand all the frameworks and class libraries, and there are many front-end programming languages, such as CoffeeScript, TypeScript, LESS, SASS and so on. When we join a team and encounter things we haven't used or known before, we need to learn and use them now, and it will be slow to start.

2. the logic of the code is confused and the coupling is serious.

There is also a confusion in the logic of the code, because we do not have a set of agreed development processes and specifications before development, and in the process of development, we can write what we think of, and always add code according to the requirements. The code has been piled down, and when there is too much heap, there will be logical confusion, and in the process of heap down in this way, we rely heavily on the previous code, making the code seriously coupled together. I don't know if there is a magical piece of code in our company, which was developed many years ago, and the developer left his job a long time ago, and almost no one can clearly explain its logic, as long as it runs normally, no one dares to touch this piece of code, even if everyone thinks this piece of code is very bad.

3. Development is becoming more and more difficult.

Now that the code is stacked and heavily coupled, over time, you will find it more and more difficult to develop, and in the end, even if you write all the code yourself, you will find it more and more difficult to write down. until at last it was almost impossible to write down. Sometimes if you want to change a place, you will find that it has been changed, and it does affect the functions of many other places.

4. Too much repeated code, one change everywhere, and the maintainability is too poor

Sometimes do not dare to change the previous code, for fear of affecting other functions, so as long as there is a new function, you will directly add the code. For a long time, you will find that there is duplicate code everywhere, and these codes all have almost the same logic. One day, the product manager told us that we had a need to modify, and we would find that there were too many things to change, although an editor looked for the modified code. In the end, there may still be omissions.

5. Low development efficiency and high error rate.

However, it is normal for a team to change, so that you need to maintain other people's code, or other people need to maintain your code. As I have said for a long time, you no longer want to maintain your own code, let alone maintain other people's stacked heavily coupled code. So it will lead to inefficient development and high error rate. In fact, we will have all kinds of problems in the process of project development, and we will have more problems in the process of team collaborative development.

Analysis on the causes of problems in Front-end Development

The requirement of user experience is improved.

The main reasons for these problems are the improvement of the user experience, such as the fluency of the page and the improvement of the loading speed of the page, which is also the main reason for the emergence of front-end engineers.

Logical reversal

And a lot of logic begins to shift to the front. For example, for a lot of verification, the front end is required to submit the verification result to the back end, and then the back end returns the verification result to the front end. Now you can do a preliminary verification at the front end so that the result can be presented to the user in a timely manner. Finally, the data is submitted to the back end for final verification. For example, there are some simple data processing and so on. The transfer here is not entirely handed over to the front end, and the back end is not needed. For example, simple data processing can be handed over directly to the front end, while data verification needs to be done at the same time. In this way, the logic of the front end will be complicated.

The functions of the front end are becoming more and more abundant.

The interaction of the front end becomes stronger, and its function naturally becomes richer, unlike in the past, the front end only needs to do a pure display page.

A significant increase in the amount of front-end code

Based on these changes, the amount of code on the front end has been greatly increased. The development process becomes more and more complex.

Front-end architectures emerge one after another

Another more important reason is that in recent years, the front end has developed too fast, and the framework has emerged one after another. Many people blindly pursue the new when doing projects, always want to use the latest framework, and then have been in the stage of adapting to the framework. There is no real understanding of the framework they use, nor in-depth study of the framework they use, or even some misuse of the framework. Then it creates all kinds of problems, leaving some strange problems for those who maintain the project later. So we need an architecture to regulate the technology we use and the development process.

Tomorrow we will continue to talk about what the front-end architecture is and how to build a suitable architecture and other related content. You are welcome to follow our official account or leave messages in the background to exchange relevant technical experience.

SUNING Video Cloud, a subsidiary of Suning, has served more than 2000 customers. With ten years of PPTV media technology and service experience, SUNING Video Cloud is an one-stop SaaS service platform focused on video field built by combining streaming media technology, P2P, CDN distribution, mass storage, security strategy, etc. SUNING Video integrates video LVB, cloud VOD, cloud upload, cloud transcoding, cloud storage, cloud statistics and other functions, and supports customers' business needs of various video scenarios on multiple platforms.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.