How difficult is front-end development from the "contempt chain" of the IT circle?

Nowadays, the "chain of contempt" is embodied in all aspects of life, and all walks of life have the same contempt chain by default. The IT circle also has a chain of contempt within its own circle because of the diversity of development languages, the variety of engineer positions, and the number of technical frameworks. The chain of contempt formed according to the position of the development engineer is:

Architect\>Back-end R&D＞Front-end R&D＞Product Manager＞Operation＞UI Designer

architect thinks: Without me, how can they be? Architecture is the foundation of everything

back-end development believes that: the front-end will only "draw

Front-end development thinks: product manager "

product manager thinks: My product is already very powerful, do I still need to work hard?

operator believes that the users I tried my best to attract were lost by bugs that were not found in the test, and the UI was not beautiful enough to interact and not humane.

In the contempt chain of the IT industry, front-end engineers are between pure back-end development and product managers, and are often "splinted". The front-end engineer must first ensure that the output webpage is consistent with the product manager's mock-up, and needs to receive the rear interface, data, business logic processing, etc. Testers will also feed back the test results of the front-end interface to the front-end development engineer in the form of a bug, and the front-end development engineer must determine whether it is caused by the front-end or the back-end based on the bug investigation and analysis. Therefore, front-end engineers need to deal with multiple parties, including communication skills, front-end development technology, understanding of business requirements, UI and UX design. That's why there are so many front-end engineers on the Internet to ask questions:

So, how difficult is it for front-end engineers?

Front-end development is difficult, and the skill requirements are complicated

Let's briefly enumerate the skills that need to be mastered in front-end development:

1. HTML, CSS and JavaScript three basic languages
2. Maintain and optimize the pages and user interface of the website, user experience, etc.
3. Optimize the website to make it behave consistently in different terminal devices and browsers
4. Manage and optimize software workflow
5. Optimize on-page SEO
6. Meet new demands and improve the availability of processing procedures
7. Convert the UX/UI design draft to the actual working interface
8. Improve web page loading speed
9. Ensure web accessibility
10. Test and debug

The entry barrier seems to be very low, you only need to master the three basic languages of HTML, CSS and JavaScript. The code is simple, easy to learn, practice makes perfect, as long as you are diligent in practice, you will learn quickly. It seems that the front end is not so difficult? That's because this is an entry, and the front end is as deep as the sea.

When we start the actual combat of the project, the required skills are as shown in the figure below. Word cloud full of screen, I don't know how to start. The bigger trouble comes from the "mobile internet". The evolution of mobile devices is fast. In order to adapt to faster iterative delivery projects, the front-end popular technologies and frameworks must also be updated quickly. For front-end engineers, it is no longer enough to be proficient in a certain language.

Let's reorganize the skills required for the front-end:

These are only the technical level. The front-end engineer’s job is to combine business requirements, interaction design, data, etc., to develop and display it to users. It is different from UI designers, interaction designers, product managers, back-end engineers, testing, etc. The role of communication and collaboration. It is more difficult to deal with people than computers, which requires good communication skills and knowledge in more fields.

It can be seen that because front-end engineers need to master many and complex skills, they will inevitably become a vital role in project development.

Based on so many years of experience in the front-end industry, if we focus on the development technology, there are indeed some powerful tools that can make the life of front-end development easier.

Cross-platform framework simplifies UI/UX implementation

Continuous integration, frameworks, tools, and scaffolding all focus on development experience and development efficiency, while UI/UX focuses on the value of the front-end itself. I mentioned earlier that the two elements of UI/UX (User Experience Design and User Interface Design) are crucial to the product and must work closely together. However, the most painful thing for front-end engineers is probably the designer's "visual sugar". "Visual sugar" is indeed more beautiful, and the animation is cool, but the value and significance of the real feedback data is not much. In order to achieve the full effect of "visual sugar", it will consume a lot of energy of front-end engineers. Moreover, the loading of page effects also requires the introduction of a large amount of design materials, resulting in low performance of the entire front-end page, and optimization is even more scratching.

Therefore, front-end development engineers should participate as much as possible in the review meeting of the design draft before proceeding with UI/UX development, and advise designers to use meaningless visual sugar design as early as possible, and start from the perspective of realizing business logic as much as possible. Simplify the design.

In the development stage, we can give priority to the cross-platform framework, with its own beautiful style, and smooth the differences between different platforms, greatly reducing the coding workload. More importantly, as front-end engineers, we can also recommend the styles and effects of these frameworks to UI and UX designers, in order to achieve the effect of "where to hit". Here are some common frameworks for front-end development engineers and designers.

Uni-APP

This is a framework that uses Vue.js to develop all front-end applications. Developers write a set of code that can be published to iOS, Android, Web (responsive), and various applications (WeChat/Alipay/Baidu/Toutiao/QQ/KaiShou) /Dingding/Taobao), Kuaiapp and other platforms.

ElementUI

Official website address: http://element-cn.eleme.io/\#/zh-CN

Github: https://github.com/ElementUI/element-starter

ElementUI, an open source UI framework from the front-end of Ele.me, has captured the hearts of a large number of programmers once it came out. The 29.8k star on github has already explained everything. It is more than enough for the development of PC-side pages.

Ant Design of Vue

It is the Vue implementation of Ant Design, which develops and serves enterprise-level back-end products.

Official website address: https://www.antdv.com/docs/vue/introduce-cn/

characteristic:

• Extracted from the interactive language and visual style of enterprise-level middle and back-end products.
• High-quality Vue components out of the box.
• Share Ant Design of React design tool system.

Flutter

Official website address: https://flutterchina.club/
Github: https://github.com/flutter/flutter

Flutter is Google's mobile UI framework, which can quickly build high-quality native user interfaces on iOS and Android. It is a good cross-terminal solution.

Quasar Framework

Official document: http://www.quasarchs.com/
GitHub address: https://github.quasar.dev

Quasar-Framework is an open source front-end framework developed based on vue.js. It supports publishing to multiple platforms by writing code once, and supports website, PWA, Mobile App and Electron App.

Front-end controls reduce the workload of report development

Regardless of the industry system, the main body is data entry and display. The entry part is relatively simple, and the presentation is usually full of challenges.

Compared with the data entry link with a fixed pattern, the data display is completely personalized. Especially for front-end reports, the large amount of data, many charts, and high style requirements consume a lot of time for front-end engineers. The simple form of data display in the report is a two-dimensional table, including pivot table, table report display, etc. For front-end development, we need to combine the data structure, use appropriate algorithms and labels to display the layout. The overall process usually involves data calculation, paging control, cell merging, etc. The details include the alternate row color setting. , Theme settings, sideline settings, and automatically increased summary rows and columns display, etc., the algorithm to achieve these goals may be very complicated, and often encounter performance bottlenecks.

All data presented in a fixed format can be classified as reports. In addition to the traditional two-dimensional table type, the front-end engineers need to face the Word report type, which involves technical details such as left title and right data, mixed graphics and text, dynamic table display, headers and footers; it also contains a large number of A visual dashboard composed of charts, such as dozens of types of chart styles, data warnings, mini-charts embedded in tables, etc.

Even more frightening is that in domestic reporting projects, front-end engineers also need to adapt to multiple terminals and multiple browsers. I think the front-end engineer's mentality here is broken. The same kind of layout works well in Chrome, but it is totally different in IE.

Since the workload and difficulties of front-end development are concentrated in the field of reports, naturally more people will provide various tools for this segment of the track. Here are some commonly used tools when developing front-end reports, so that front-end development can get twice the result with half the effort.

Apache Echart.js chart control

ECharts is an open source visualization library implemented using JavaScript. The bottom layer relies on the vector graphics library ZRender, and the performance and style are OK. Echarts is a very widely used chart library that can meet the needs of most scenarios and is open source and free.

Ali AntV G2 chart control

Ali AntV is a data visualization solution launched by the Alipay team. G2 is a set of controls for conventional statistical charts. You can use Canvas or SVG to construct a variety of interactive statistical charts in one sentence. When front-end engineers need to make charts, if echarts is not suitable, they can look at G2.

Grape City ActiveReportsJS report control

If your needs are not simple charts, but complex reports composed of tables and charts, then look at the commercial report controls. ActiveReportsJS is a pure front-end version of the famous ActiveReports.NET. It supports Excel reports, Word documents, mobile reports, charts, data filtering, data drilling, precise printing, pure HTML5 implementation, compatible with Angular, Vue, React and other frameworks.

It is worth mentioning that ActiveReportsJS also provides an online editor, allowing users to visually adjust the text, style and even data calculation logic on the report on the web page. With the online editor, we can open the report design function to users and let them fine-tune the report (in most scenarios, users just want to change a few words or colors), once and for all.

Summarize

Front-end development, "the road is hindered and long". But as long as we are good at search and discovery, there are also many resources, frameworks and controls that can help us on the road of development. Good luck to all front-end development engineers!