The latest development trends in front-end development

Abstract: This article comes from 5254 survey reports on the use of front-end tools from around the world. I hope that this article can help everyone better understand the latest front-end development tool trends. . Respondent composition: 83% of respondents have more than two years of experience in front-end technology, and only 5% have less than one year: 63% of CSS developers are senior...

This article comes from 5254 survey reports on the use of front-end tools from around the world. I hope that this article can help everyone better understand the latest front-end development tool trends.

Respondent composition

83% of the respondents have more than two years of front-end technology experience, only 5% of respondents less than a year old:

CSS

63% of developers are Senior Developers and Experts:

Although CSS is thought of as just a simple collection of property-parameter value pairs, CSS can be difficult to master. CSS3 introduces many new features, making it increasingly difficult to fully master CSS.

CSS Preprocessor

More than 63% of developers use Sass, which makes Sass the undisputed first choice for preprocessing. 8% of developers use PostCSS. Usually, PostCSS is used in conjunction with preprocessors such as AutoPrefixer.

Only 14% of developers do not use any preprocessing, preferring to use raw CSS code. Although this method is slower to develop, it is the easiest and best way to start learning front-end development. If 86% of developers use preprocessors, an average website will require 7.2 CSS file requests.

Only 10% of the respondents have tried Less, 19% have tried Stylus, and 80% have never heard of Rework.

CSS naming method

46% of developers use a naming method when coding. For advanced CSS development For researchers and experts, this proportion rose to 57%.

The most popular naming method is BEM, accounting for 40% of the total. Next are CSS Modules (16%), OOCSS (15%) and SMACSS (13%).

Other CSS Tools

39% of respondents use Modernizr in their current projects. 14% of respondents use Stylelint to check CSS validity. 23% of developers don’t use any CSS tools or naming conventions.

JavaScript

51% of respondents are senior developers or experts in JavaScript.

Libraries and Frameworks

Despite the correlation issues, more than 99% of developers have used jQuery, and some 31% of respondents believe using jQuery is important for most projects. Nearly 70% of respondents continue to use jQuery in existing projects:

The situation with frameworks seems confusing:

• 38% of projects are currently using React, but only 29% of developers think using React is smooth, and 18% Developers believe that using React is necessary. 0.1% of websites were found to use React, but keep in mind that these findings are only taken from front-end developers, not all web developers.

• 25% of projects are currently using Angular 1, but only 8% of developers think it is necessary to use Angular 1, and only 8% choose to use Angular 2.

• Vue.js has been used in 10% of projects, but less than 6% of developers are satisfied with the framework, and 3% find it useful to use Vue.js Is necessary

Task Execution Tools and Module Binding

44% of developers use Gulp, so Gulp is the most popular tool. At the same time, the usage rate of the simpler npm script has increased from 23% in 2016 to 26%.

Grunt usage dropped to 12%. 11% of respondents chose not to use any task execution tools.

The number of developers using module bindings has increased by 20% since 2016, reaching 68%. Among them, Webpack is the most popular module binding tool, accounting for 31%, followed by Browserify (11%) and RequireJS (8%).

Compiler: Compiling ES6 code to ES5

62% of developers are using a compiler like Babel, to Compile ES6 code into ES5 code that is more friendly to older browsers. 31% of respondents have heard of such compilers but have not used them. 7% of developers have never heard of such a compiler.

The data of 62% is relatively high. IE and older applications do not support the latest JavaScript syntax, so if you are writing ES6 code, you need the latest browser to support it. If your project needs to run under older browser versions, it's better to write ES5 code.

Other JavaScript Tools

41% of developers use ESLint, 19% of developers use JSLint, and 14% of developers Authors use tools like JSHint to check the legality of the code.

23% of respondents said they do not use any code legality checking tools. But they may use text editors and IDEs to check for code errors.

The usage rate of testing tools increased by 12% in one year, reaching 52%. But throughout the past, JavaScript testing has been a challenge. Although techniques such as test-driven development (TDD) can catch logical errors, they cannot catch errors that occur under asynchronous events. Fortunately, behavior-driven development (BDD) will likely be integrated into real browser inspection activities, which will also make front-end testing more actionable.

The most popular systems currently are:

• Mocha – TDD/BDD (23%)

• Jasmine – BDD ( 17%)

• QUnit – TDD (4%)

• Jest – TDD/BDD (3%)

• Ava – TDD/BDD (2%)

94% of respondents said they have used the Node.js package manager npm, 23% Visitors have used TypeScript.

What tools should you use in 2017?

In general, development tools are diverse. Developers should do more research on preprocessors and naming schemes to choose the one that suits them best.

The following points are worth noting:

• If you need to use more tools, then Node.js and npm are worth choosing

• Gulp and Webpack are worth trying

• Learn ES6, even if you have been working on a backwards-compatible ES5 project.

According to the survey results, jQuery is a reasonable choice when choosing a library. When choosing a framework, you can choose React because of its popularity. If you haven't chosen a framework yet, you can start by learning the basics of HTML, CSS, JavaScript, and browser development. This knowledge can help you better understand the framework, and may even encourage you to contribute to the improvement of the framework system.

Recommended front-end development tools:

Wijmo is a new generation JavaScript/HTML5 control set written in TypeScript . It adheres to the touch-first design concept and is the first in the world to support AngularJS, and supports React, VueJS and TypeScript 2.2. It also provides multiple controls such as FlexGrid and charts with excellent performance and zero dependencies. It is a complete set of controls for building enterprise applications. .

The above is the detailed content of The latest development trends in front-end development. For more information, please follow other related articles on the PHP Chinese website!