Các xu hướng công nghệ Front-End 2017

Bạn có hơn 2 năm kinh nghiệm? Bạn thành thạo CSS, Sass và Autoprefixer? Bạn có kiến thức để sử dụng JavaScript hợp lý và thấy thoải mái khi sử dụng Gulp, npm, và JQuery? Nếu vậy, bạn là một lập trình viên điển hình theo như Khảo sát Front-End Tooling của Ashley Nolan

Những lời nói dối, những lời nói dối khốn kiếp, số liệu thống kê và khảo sát

Những cuộc khảo sát như thế này, rất hữu ích để khám phá các công cụ mới và làm rõ những thiếu hụt trong kiến thức của bạn. Tại thời điểm viết bài, cuộc khảo sát đã nhận được 5.254 phản hồi, đó là một dấu hiệu tốt hơn nhiều so với các cuộc thăm dò dư luận. Tuy nhiên, đây chỉ là thông tin để bạn tham khảo. Một công cụ phổ biến hoặc được sử dụng rộng rãi ở một nơi khác có thể bị bỏ qua.

Kết quả trên toàn thế giới

Cuộc khảo sát được thực hiện trên toàn thế giới, tuy nhiên nó sẽ thiên về các nước nói tiếng anh.

Kiến thức của lập trình viên

Cuộc khảo sát thu hút các lập trình viên có kiến thức, những người hiểu rõ các câu hỏi, biết được sự tồn tại của nó, có thời gian và sẵn sàng hoàn thành nó.

83% người trả lời có từ 2 năm kinh nghiệm làm việc với các công nghệ front-end trở lên, chỉ có 5% thừa nhận mình dưới một năm kinh nghiệm:

Quan điểm cá nhân và các thành kiến

Những người làm khảo sát được yêu cầu đánh giá kinh nghiệm của họ. Một số có thể khiêm tốn và đánh giá thấp năng lực của mình. Một số khác có thể đánh giá quá cao khả năng của mình, bởi vì họ là lập trình viên front-end nhiều kinh nghiệm nhất trong một nhóm lập trình viên học việc.

Các hoạt động trong quá khứ không báo hiệu xu hướng của tương lai

Kết quả đưa ra cái, các lập trình viên đã sử dụng. Nó không có nghĩa đó là các công cụ đó hữu ích, tiết kiệm thời gian hoặc sẽ được sử dụng trong các dự án trong tương lai.

CSS

63% các lập trình viên đánh giá kiến thức CSS của họ là cao cấp hoặc chuyên gia:

Mặc dù chỉ là một tập hợp của các cặp thuộc tính, giá trị trông có vẻ đơn giản, nhưng CSS nổi tiếng là khó để master. CSS3 giới thiệu một loạt hiệu ứng mới và ngày càng khó để có kinh nghiệm với tất cả. Ví dụ, tôi có rất ít kiến thức về CSS Grid module mới, và thường sử dụng Force (hoặc thử nghiệm ngẫu nhiên và sai) khi phát triển Flexbox layouts!.

10% thừa nhận có ít hơn một năm kinh nghiệm, tuyên bố có kiến thức nâng cao về CSS! Tôi nghi ngờ, họ sẽ sớm khám phá ra càng biết nhiều, họ sẽ nhận ra rằng còn nhiều thứ họ thực sự chưa biết.

CSS preprocessors

Hơn 63% sử dụng Sass – rõ ràng đây là preprocessor vô địch không cần bàn cãi. 8% cũng sử dụng PostCSS, mặc dù nó thường được sử dụng kết hợp với các preprocessor khác để cung cấp các chức năng hữu ích – chẳng hạn như AutoPrefixer (được sử dụng bởi 65% người trả lời).

Gần 14% người được khảo sát không sử dụng preprocessor và thích làm việc với CSS thuần. Con số này có vẻ hơi thấp khi bạn xem nó là cách dễ nhất (và tốt nhất) để bắt đầu phát triển front-end. Trung bình website tạo ra 7.2 CSS file request, cái tôi hy vọng thấp hơn nếu 86% lập trình viên đã sử dụng một preprocessor.

Gần 70% người trả lời đã thử Less và Stylus. 80% chưa bao giờ nghe về Rework.

CSS naming schemes

46% lập trình viên đã sử dụng một mẫu đặt tên, nhưng tỷ lệ này tăng tới 57% cho những người tự đánh giá kiến thức CSS của họ là cao cấp hoặc chuyên gia.

Lựa chọn phổ biến nhất là BEM với 40%, theo sau là CSS Modules (16%), OOCSS (15%) và SMACSS (13%).

Hãy là những người đầu tiên đăng ký vé Early Bird từ 01/04 – 15/04 với giá ưu đãi chỉ còn 150k

Các công cụ CSS khác

39% sử dụng Modermizr trên các dự án hiện tại. Điều này có vẻ khá ngạc nhiên khi nó được sử dụng chính cho các phiên bản cũ của IE, trình duyệt đã bị bỏ rơi (Micrososoft không hỗ trợ cho IE10 và các phiên bản thấp hơn từ tháng 1/2016).

14% sử dụng Stylelint để kiểm tra tính hợp lệ của CSS. Điều này có vẻ khá thấp, nhưng hầu hết các IDE phổ biến và các trình soạn thảo có một vài kiểu kiểm tra CSS, vì thế nó có thể không cần thiết.

23% các lập trình viên không sử dụng bất kỳ một công cụ CSS hoặc phương thức đặt tên nào.

JavaScript

Nếu bạn thấy việc sử dụng các công cụ CSS là phức tạp, chào mừng bạn tới thế giới của JavaScript!

Những phản hồi có phần khiêm tốn hơn, với 51% đánh giá kiến thức JavaScript là cao cấp hoặc chuyên gia.

Các thư viện và framework

Hơn 99% các lập trình viên có sử dụng JQuery tại một vài chỗ và 31% coi nó là cần thiết cho hầu hết các dự án. 70% tiếp tục sử dụng trên các dự án hiện tại, nó tương đương với số liệu được theo dõi bởi W3Techs:

Tình hình các framework phức tạp hơn:

• React được sử dụng trong 38% các dự án hiện tại. Nhưng chỉ 29% lập trình viên cảm thấy thoải mái khi sử dụng nó và 18% xem nó là cần thiết. Đúng 0,1% các websites được theo dõi sử dụng React, nhưng nhớ là kết quả khảo sát thu thập từ các lập trình viên front-end – không phải tất cả các lập trình viên web.
• Angular 1 được sử dụng trên 25% dự án, mặc dù chỉ 8% coi nó là cần thiết. Angular 2 cộng thêm 8%. Chỉ 3% sử dụng nó cho hầu hết các dự án.
• Vue.js sử dụng trong 10% dự án, nhưng chưa đến 6% các lập trình viên thoải mái với framework này và 3% xem nó là cần thiết.

Có lẽ một câu hỏi hữu ích cho bản khảo sát của năm sau là: “Bạn sẽ từ bỏ hoặc chuyển sang framework nào trong các dự án tương tự?”

Mặc dù có nhiều chuyên gia JavaScript, chỉ 21% coi framework là không bắt buộc và thấy thoải mái khi viết code thuần. Đây là một con số đáng lo ngại? 30% lập trình viên coi kỹ năng về framework của họ là tất cả những kiến thức họ cần?

Hãy là những người đầu tiên đăng ký vé Early Bird từ 01/04 – 15/04 với giá ưu đãi chỉ còn 150k

Task runners và module bundlers

Gulp là người chiến thắng, được sử dụng bởi 44% lập trình viên. Tuy nhiên, npm scripts đơn giản hơn, tăng 23% so với 2016 đạt 26%.

Grunt đang giảm xuống còn 12%. Cũng vậy, số người không sử dụng bất kỳ một task runner nào giảm 9% còn 11%.

Số người sử dụng module bundler tăng 20% trong 2016 đạt tới 68%. Webpack được sử dụng nhiều nhất 31%, Browerify là 11% và RequireJS 8%.

Tôi đã ngạc nhiên vì các module bundlers khác ít hơn 4%, khi nhiều plug-ins khác nhau của các task runner giúp việc quản lý đơn giản hơn, chẳng hạn gulp-deporder. Có lẽ bởi vì mọi người sử dụng một trình biên dịch JavaScript.

Chuyển đổi ES6 thành ES5

62% các lập trình viên sử dụng một công cụ chẳng hạn như Babel để chuyển đổi code ES6 thành ES5. 31% đã biết về điều này nhưng không sử dụng các công cụ, và 7% chưa bao giờ nghe thấy các thuật ngữ này.

Số lượng cần chuyển đổi từ ES6 thành ES5 có vẻ khá cao. Internet Explorer và các trình duyệt cũ không hỗ trợ cú pháp mới nhất của JavaScipt, nhưng nếu bạn viết code với ES6 thì tại sao phải hỗ trợ chúng? Nếu cần hỗ trợ IE11 và các phiên bản thấp hơn, sẽ đơn giản và ít lỗi hơn nếu sử dụng ES5?

Các công cụ JavaScript khác

41% các lập trình viên sử dụng ESLint, trong khi 19% sử dụng JSLint và 14% sử dụng JSHint để kiểm tra tính hợp lệ của code – chẳng hạn như thiếu dấu ngoặc nhọn {}, quên dấu chấm phẩy ; …

23% số người trả lời không sử dụng các công cụ validation – có khả năng họ dựa vào trình soạn thảo hoặc IDE để phát hiện lỗi.

Số lượng người sử dụng các công cụ testing tăng 12% trong năm qua đạt 52%. Trong quá khứ, việc testing JavaScipt là một thử thách. Các kỹ thuật như test-driven development (TDD) có thể bắt được các vấn đề về logic nhưng không bắt được các sự kiện bất đồng bộ (asynchronous events) chẳng hạn như khi UI làm một điều gì đó không mong muốn trong một trình duyệt đặc biệt. May mắn là, behavior-driven development (BDD) có khả năng kiểm tra các hành vi trong một trình duyệt thật sự và giúp cho việc testing front-end dễ dàng hơn. Các công cụ phổ biến nhất:

• Mocha – TDD/BDD (23%)
• Jasmine – BDD (17%)
• QUnit – TDD (4%)
• Jest – TDD/BDD (3%)
• Ava – TDD/BDD (2%)

Cuối cùng 94% người trả lời có sử dụng npm – trình quản lý gói của Node.js. Một điều bất ngờ là 32% cũng có kinh nghiệm với TypeScript.

Bạn nên sử dụng cái gì trong năm 2017?

Với CSS, biết Sass, PostCSS và BEM có vẻ rõ ràng. Điều đó cho thấy, sự đa dạng trong phát triển. Tôi gợi ý bạn tìm hiểu một vài preprocessors và các quy tắc đặt tên để hiểu cái mỗi công cụ có thể đạt được – ngay cả khi bạn không sử dụng chúng.

JavaScript ít rõ ràng hơn. Chỉ có một vài công nghệ chiến thắng rõ rằng:

• Node.js và npm sẽ trở lên cần thiết khi bạn sử dụng nhiều công cụ hơn.
• Rất đáng để thử Gulp và/hoặc Webpack.
• Học ES6 ngay cả khi bạn tiếp tục làm việc với các dự án đòi hỏi khả năng tương thích ngược với ES5

Tôi không khuyên mọi người chọn một thư viện hoặc framework cho dự án tiếp theo của mình. Theo như kết quả khảo sát, jQuery được yêu thích nhất. Vâng jQuery với khả năng cross-browser giúp cho việc phát triển trên IE dễ dàng hơn và nhiều tính năng đã được phát triển thành các API có sẵn trong trình duyệt.

Bạn có thể chọn một framework chẳng hạn như React bởi vì tính phổ biến của nó – nhưng điều đó không có nghĩa là nó phù hợp với ứng dụng của bạn. Thậm chí React có thể bị thay thế bởi một thứ tốt hơn, lớn hơn và sáng sủa hơn.

Theo ý kiến của tôi: học HTML, CSS, JavaScript cơ bản và phát triển trình duyệt trước khi bạn sử dụng các framework. Những kiến thức đó sẽ không bị mất giá trị trong cộng đồng JavaScript. Có lẽ bạn sẽ viết một hệ thống của riêng mình và tham gia vào thế giới framework.

Techtalk via Techmaster