Vue has been updated to version 3.2, can you still learn?

Not long ago, the front-end framework Vue released version 3.2, which improved the functions of single-file components, network components, server-side rendering, and performance. At that time, it was less than a year and a half since the release of the Vue 3.0 Beta version, and the update speed of Vue was not unpleasant.

It’s not a single person who has this feeling: under the Weibo of You Yuxi’s official announcement Vue 3.2, a row of "can't learn" emotions suddenly appeared...

The phrase "I can't learn" is believed to resonate with countless front-end developers. Rapidly updated and iterative technologies often make people wonder "the sea of learning is boundless, where is the shore".

However, technological iteration is not the biggest difficulty in front-end development. In the current popular front-end and back-end separation development model, the front-end, as the linker in the software development process, not only needs to face changing product requirements, UI design, but also interact with the back-end to ensure code quality and development efficiency. Hired’s recently released "Report on the Status of Software Engineers in 2021" shows that the demand for back-end, full-stack and front-end engineers is still the highest, accounting for more than half of all interview requests for software engineers. not simple.

So, what are the problems facing front-end development? We communicated with a number of practitioners, compiled relevant information, and summarized the following points.

What is the difficulty of front-end development?

Multi-party collaboration

In the current common front-end separation model, front-end development is a very important part. It not only connects UI design and back-end, but also directly faces diverse needs. This means a lot of team collaboration and communication: In actual work, front-end engineers need to communicate and collaborate with various roles such as product, UI design, back-end, testing, operations, etc. This requires front-end engineers to have sufficient domain knowledge and Strong communication skills.

Complex business logic

The front-end logic complexity mainly lies in the realization of data + UI + interaction. Product development often faces a large number of demands, even frequent changes. When requirements change, the front-end can be said to be the first to bear the brunt, such as complex UI/UX design, frequent UI changes, product function iterations, etc., and sometimes even the front-end needs to be re-developed. How to evaluate needs and solve frequently changing needs has become a major difficulty facing front-end development.

Browser compatibility

Presentation is one of the main functions of the front end. However, different browsers have different interpretations of the same code, which leads to inconsistent page rendering effects. This is a browser compatibility issue. At present, there are a large number of browsers on the market, such as the familiar Chrome, safari, etc., and there are multiple versions of the same browser. Different browsers use different standards and implementation methods, leading to compatibility problems; and different versions of the same browser have functional differences, which can also cause compatibility problems.

In general, browser compatibility issues can be divided into three categories: HTML compatibility, CSS compatibility, and JavaScript compatibility. In addition, the prevalence of mobile products has brought H5 mobile iOS/Android compatibility issues. Front-end developers need to start with large and small issues such as margins, gaps and event compatibility to solve browser compatibility issues.

Performance optimization

Performance optimization is one of the important topics of front-end development. It not only directly affects user experience, but for commercial companies, the quality of web page performance is more related to the efficiency of traffic realization. For example, DoubleClick by Google found:

If the page loading time exceeds 3 seconds, 53% of users will choose to terminate the current operation and leave;

Publishers with a site load time of less than 5 seconds have at least double the advertising revenue in 19 seconds.

Therefore, how to achieve performance optimization is an important research direction for front-end developers. Front-end developers can achieve performance optimization by reducing HTTP requests, optimizing network connections, optimizing resource loading, and reducing redrawing and rearranging.

In addition, front-end developers are also faced with issues such as how to improve development efficiency, complex UI/UX design, and front-end framework integration.

After understanding the problems faced by general front-end development, we will further explore the problem through specific subdivisions, such as report development.

Front-end development meets reports

Reports exist in almost every industry, and their main function is to help companies access and format data, and present data information to users in a reliable and safe manner. In short: a report is to dynamically display data in the form of tables, charts, etc., and provides users with browsing, printing, exporting and analysis functions. It can be expressed as a formula: "reports = diverse layouts + dynamic data + rich Output".

However, the preparation process of the report is relatively cumbersome, and requires a lot of monotonous and repetitive labor, which brings demand for the development of the report. Reporting technology has undergone a transformation from paper reports to electronic reports and even self-service reports. With the acceleration of the informatization process, dynamic, visualization, and interactive have become the key words for report development.

So, what kind of sparks and problems will be encountered when the front-end encounters report development?

Data Display

Data display is one of the main functions of the report. In view of the diversity of report types, reports also need to meet diversified needs in terms of data display.

Reports can be divided into financial reports, technical reports, sales reports, and statistical reports according to their purposes; according to the data expression form, they can be divided into tabular, summary, matrix, and drill-through; according to the layout, data source structure, and printing methods, they can also be Divided into list reports, column reports, cross reports, printed reports, interactive reports, etc. In addition, there are Chinese-style complex reports with complex headers, multiple data sources, complex calculations, and relatively random structures. Therefore, how to display report data in an appropriate form to meet the needs of data analysis and maximize the value of data is an important issue that needs to be solved in report development.

Traditional Excel reports have certain data display capabilities, but their operations are more complicated, the types of charts that can be used are limited, and the interface is relatively simple. Using Python for data display is also a feasible way, but this requires users to write code, and the threshold is relatively high. So, is there a way to display report data concisely and efficiently to help users understand business data in an intuitive and concise way? The pure front-end report control ActivereportsJS may give it a try.

The control has built-in rich chart, mini-chart, and icon set styles for presenting and analyzing common data visualization scenarios in enterprise information systems. In addition, it supports the integration of the report designer and report display function into the project, and the Viewer component is used to display the report on the page.

Visual editor

A visual editor is indispensable to achieve excellent data display effects.

This type of editor needs to have a visual editing function, support drag and drop elements on the canvas; have a rich style configuration; support the separation of common services into components, and support the configuration of component parameters. In addition, the visual editor also needs to consider compatibility issues and be able to adapt to different business needs.

Like front-end development, report development is also faced with high-frequency and changeable requirements. How to efficiently complete the requirements is the priority of developing a visual editor. In this regard, control products are a good choice. Controls are the encapsulation of data and methods. This type of tool encapsulates a large number of basic functions, supports reuse, and can interact with other objects. It is a weapon that reduces repetitive work and improves development efficiency, and can facilitate project development and software delivery.

In the field of report development, the pure front-end report control ActivereportsJS has a drag-and-drop cross-platform report designer and a pure front-end report designer, which can quickly design Excel reports, Word documents, mobile reports, data filtering, data drilling, precise printing, etc. Type report. It is worth noting that its pure front-end Web designer can be integrated with front-end applications, and developers can use its built-in API to implement a customized online report editor, providing end users with self-service report editing functions.

In addition, in terms of compatibility and scalability, this report control product supports mainstream front-end development frameworks such as Node.js, Vue, Angular, and React. Users can directly call its report design components in front-end frameworks such as Angular, React, and Vue.

Concluding remarks

In recent years, the front-end has ushered in rapid development. JavaScript has been listed as the most commonly used programming language in the Stack Overflow developer survey report for nine consecutive years. The three major frameworks of Angular, React and Vue have formed their own ecosystems. Front-end development has also moved from browser-based development to server-side, mobile-side and applet-side. And so on, various front-end technologies are constantly updated and iterated.

However, no matter how the technology trend changes, in this era of efficiency, improving development efficiency is still the top priority. From this perspective, pure front-end development control is a good choice.