1 N2p26jhiotkwarybdzhhga 1024x466 9
10Th1

TỔNG QUAN THẾ GIỚI LẬP TRÌNH FRONTEND NĂM 2019

Nhìn lại các sự kiện nổi bật, tin tức và xu hướng trong thế giới frontend và phát triển web

Năm 2019, thế giới một lần nữa chứng kiến sự phát triển với tốc độ chóng mặt của mảng frontend development, bài viết này sẽ tổng kết tất cả các sự kiện, tin tức và xu hướng quan trọng trong năm qua.

 

NPM Downloads cho các thư viện và framework frontend phổ biến trong năm 2019

React một lần nữa chiếm lĩnh vị trí số 1 và đang tăng trưởng liên tục, theo ngay sau đó, rất bất ngờ, jQuery giữ vị trí số 2. Không xa sau đó là Angular và Vue đều sở một lượng người dùng trung thành. Svelte cũng đã nhận được rất nhiều sự chú ý trong năm vừa qua và đang không ngừng cố gắng để có được sự ghi nhận từ cộng đồng.

 

1 N2p26jhiotkwarybdzhhga

From npmtrends.com — https://www.npmtrends.com/@angular/core-vs-react-vs-vue-vs-jquery-vs-svelte-vs-backbone-vs-react-native

 

Screenshot 1

 

WebAssembly trở thành ngôn ngữ phát triển web thứ 4 cùng với HTML, CSS và JavaScript

Sau một năm khá im ắng, WebAssembly đã ghi dấu ấn vào đầu tháng 12 khi được Hiệp hội W3C chính thức đề cử là một ngôn ngữ phát triển web. World Wide Web Consortium (W3C) là tổ chức tiêu chuẩn quốc tế chính cho World Wide Web.

Ra mắt vào năm 2017, WebAssembly đã thu hút nhiều sự chú ý và được ứng dụng nhanh chóng ngay sau đó. Những năm sau đó, phiên bản đặc tả 1.0 đã ra mắt và được tích hợp vào hầu hết các trình duyệt. 

Một thông tin khác liên quan đến WebAssembly trong năm 2019 là sự ra đời của Bytecode Alliance nhằm thúc đẩy sự phát triển của WebAssembly vượt xa khỏi giới hạn trình duyệt thông qua hợp tác triển khai các tiêu chuẩn hiện có và đề xuất các tiêu chuẩn mới.

Chúng tôi vẫn đang chờ đợi tới thời điểm WebAssembly thực sự nắm giữ vị thế và được áp dụng rộng rãi. Mỗi bản cập nhật ra đời cũng là lúc chúng tôi từng bước tiến gần hơn đến mục tiêu đó. Phải thừa nhận tuyên bố của W3C là một cú hích lớn đối với tên tuổi của WebAssembly và chúng tôi cần tiếp tục xóa bỏ các rào cản mà những người mới sử dụng WebAssembly gặp phải, từ đó các sản phẩm được xây dựng dễ dàng hơn

 

Nhiều Developer “phải lòng” TypeScript và lượng sử dụng tăng vọt 

2019 là năm của TypeScript. TypeScript không chỉ trở thành một sự lựa chọn phổ biến nếu muốn thêm các loại dữ liệu vào JS code, nhiều developer còn thường xuyên sử dụng nó hơn cả vanilla JavaScript cho cả các dự án cá nhân lẫn nơi làm việc.

Trong Khảo sát StackOverflow được phát hành đầu năm 2019, TypeScript được xếp thứ 2 cùng với Python trong bảng xếp hạng các ngôn ngữ lập trình được yêu thích nhất, chỉ sau Rust. Thật đáng ngạc nhiên khi thấy TypeScript “leo cao” hơn nữa trong cuộc khảo sát mới được công bố vào đầu năm 2020.

 

1 Svnt2igtyxqcz7a8gvztra

 

TypeScript đang “tung hoành” trong thế giới phát triển web – cả frontend lẫn backend. Một số developer đã từng cố gắng loại bỏ TypeScript như một trào lưu nhất thời và nghĩ rằng TypeScript sẽ đi theo vết xe của Coffeescript, nhưng họ đã chứng minh mình có thể giải quyết các vấn đề nổi cộm của các Javascript developer và TypeScript được sinh ra để trở nên lớn mạnh.

TypeScript cung cấp cho các web developer trải nghiệm tốt hơn với các tích hợp cho tất cả các trình soạn thảo code phổ biến. Các JavaScript developer đánh giá TypeScript là một công cụ ít tạo lỗi trong khi vẫn dễ đọc code hơn do sử dụng các kiểu và giao diện đối tượng cho phép tự tạo documentation. 

Đáng chú ý hơn cả TypeScript đã trở nên phổ biến khi vượt qua React trong các lần tải NPM trong năm 2019. Nó cũng sở hữu lượng lượt tải lớn hơn rất nhiều so với các đối thủ như Flow và Reason.

Lưu ý: TypeScript và React giải quyết các vấn đề hoàn toàn khác nhau, vì vậy đây không phải là một sự so sánh trực tiếp. Nó chỉ là một minh chứng cho sự phổ biến của TypeScript.

 

1 Mav6nzniinnzewonvb5 7g

 

TypeScript phiên bản 3.0 ra mắt cuối 2018 và đã phát hành đến phiên bản 3.7 trong năm 2019, gồm các tính năng ECMAScript mới hơn như các optional chaining và toán tử nullish cũng như cải tiến chức năng kiểm tra kiểu .

 

React tiếp tục dẫn đầu khi các Dev bị thu hút bởi Hooks

Vue và Angular đều sở hữu một lượng người dùng quan tâm nhất định và Vue thậm chí còn vượt mặt React trong bảng xếp hạng trên GitHub, tuy nhiên React vẫn chiếm giữ vị trí số 1 đầy thuyết phục khi được sử dụng cho hầu hết các dự án cá nhân cho tới chuyên nghiệp.

Vào cuối năm 2018, nhóm React đã giới thiệu hooks. Năm 2019, hooks đã “làm siêu lòng” cộng đồng React khi được hầu hết các developer yêu thích sử dụng để quản lý trạng thái và vòng đời component. Trong suốt năm 2019, có vô số bài báo bàn về các hooks, các patterns bắt đầu được củng cố và các gói React quan trọng nhất đã xây dựng hooks tùy chỉnh để hiển thị chức năng thư viện của họ.

Hooks cung cấp phương thức quản lý trạng thái component và vòng đời trong các functional components bằng cách sử dụng cú pháp đơn giản và ngắn gọn. Ngoài ra, React cung cấp khả năng xây dựng các hooks tùy chỉnh cho phép chúng ta viết code có thể tái sử dụng và logic dùng chung mà không cần phải tạo Higher Order Component (HOC) hoặc sử dụng render props.

Nếu bạn nhìn vào báo cáo của JS Survey trong năm 2019 dưới đây, bạn sẽ thấy React vẫn đứng top đầu:

 

1 Hlwxxcgecenjhjrtknzceg

 

Nhóm phát triển React tập trung nhiều hơn vào trải nghiệm của developer và các công cụ thúc đẩy hiệu quả công việc

Sau sự thay đổi lớn khi thêm hooks vào phiên bản React 16.8, hầu hết các thay đổi tiếp theo cho đến phiên bản 16.14 trong năm 2019 của React đều là các chỉnh sửa tương đối nhỏ. 

Sau khi giới thiệu hooks, nhóm React chuyển trọng tâm và dành nhiều tâm huyết hơn vào cải thiện trải nghiệm của các developer bằng cách cung cấp nhiều công cụ hơn. Trên thực tế, trải nghiệm của developer đã được lựa chọn là chủ đề chính của React Conf 2019. Diễn giả chính của React Conf và cũng là quản lý nhóm React, Tom Occhino, khẳng định rằng trải nghiệm developer tốt hay không đều bắt nguồn từ 3 yếu tố: ít rào cản khi mới bắt đầu sử dụng, hiệu năng cao, và khả năng mở rộng quy mô. Hãy cùng xem những công cụ đã được nhóm React phát hành hoặc dự định phát hành để cải thiện trải nghiệm developer:

  • Một phiên bản hoàn toàn mới của React DevTools
  • Các công cụ đo hiệu suất React hoàn toàn mới
  • Công cụ Create React App v3
  • Nâng cấp công cụ test
  • Suspense
  • Concurrent mode (sắp tới)
  • CSS-in-JS được sử dụng tại Facebook (sắp tới)
  • Progressive/selective page hydration (sắp tới)
  • Các cải tiến khả năng truy cập a11y trong React core (sắp tới)

React tin rằng, trải nghiệm tuyệt vời của developer là yếu tố dẫn tới tới sự hài lòng trong trải nghiệm của người dùng. Cùng theo dõi buổi nói chuyện của Yuzhi Zheng trong React Conf 2019 về các tính năng React sắp tới hoặc xem tất cả các buổi nói chuyện khác tại đây:

 

 

Vue chuẩn bị phát hành phiên bản số 3 và ngày càng được ưa chuộng

Vue có thể chưa phải ngôn ngữ được ưa chuộng nhất nhưng không thể phủ nhận nó có những người dùng đam mê nhất. Vue được cộng đồng ghi nhận vì có những tính năng tốt nhất của React và Angular nhưng vẫn duy trì được sự đơn giản. Một điểm nổi trội khác của Vue là tính minh bạch hơn và không bị kiểm soát bởi một công ty lớn nào như React (Facebook) hay Angular (Google).

Tin tức nóng nhất là Vue sắp ra mắt phiên bản bản 3.0 với bản alpha dự kiến ​​sẽ được công bố vào cuối Q4. Các phiên bản Vue 2.x trong năm 2019 chỉ có một vài cập nhật nhỏ vào đầu năm vì dồn toàn lực cho phiên bản 3.0 này. 

Không phát hành nhiều phiên bản mới trong năm nay không có nghĩa là không có điểm nhấn. Khi Evan You phát hành RFC cho phiên bản số 3, một cuộc tranh luận lớn đã nổ ra trong cộng đồng về những thay đổi mà hẳn bạn có thể tìm đọc được trên RedditHacker News.

Một vấn đề quan trọng khác khiến các developer sử dụng Vue tức giận là việc đại tu API. Tuy nhiên, sau phản ứng dữ dội đó, Vue đã thông báo rằng những sự thay đổi về API sẽ hoàn toàn bổ sung và tương thích ngược với Vue 2. Tùy thuộc vào bản release, các developer cho biết họ sẽ cân nhắc sử dụng Svelte trước những thay đổi mà Vue đang thực hiện, vì lo sợ Vue sẽ trở thành bản copy của React. Mặc dù vẫn còn nhiều lo ngại, song vấn đề tạm thời lắng xuống chờ tới khi Vue ra mắt phiên bản mới.

Bên cạnh cuộc tranh luận, sắp tới Vue 3 còn có một số thay đổi lớn khác như:

  • API thành phần 
  • Thay đổi cấu hình API/global mounting
  • Fragments
  • Hỗ trợ time slicing (thử nghiệm)
  • Multiple v-models
  • Portals
  • API chỉ thị tùy chỉnh mới
  • Cải thiện khả năng phản ứng
  • Viết lại virtual DOM 
  • Static props hoising
  • API hook (thử nghiệm)
  • Tối ưu hóa Slots Generation (render riêng cho các thành phần cha và con)
  • Hỗ trợ TypeScript tốt hơn

Một bản phát hành đáng chú ý khác của Vue trong năm nay là phiên bản số 4 của CLI, chủ yếu tập trung cập nhật các công cụ cơ bản.

 

 

Angular phát hành phiên bản 8 và 9 có Ivy compilation/rendering pipeline mới

Triết lý của Angular đã giúp ngôn ngữ này có được một lượng người dùng khổng lồ. Là một framework mạnh, Angular khiến các developer phát triển ứng dụng theo cách của Angular và họ sẽ cung cấp tất cả các công cụ cần thiết liên quan.

Cách này giúp loại bỏ nhiều cuộc tranh luận về loại thư viện và dependencies mà bạn nên đưa vào dự án – điều rất dễ gặp phải khi build các React app. Angular cũng yêu cầu các developer viết các ứng dụng của họ bằng TypeScript. Hầu hết các lựa chọn đã được ấn định câu trả lời và các công ty xem đây là một điều hay ho vì nó cho phép các developer tập trung vào xây dựng các sản phẩm thay vì dành thời gian suy nghĩ về các lựa chọn khác nhau. 

Năm 2019, Angular cho ra mắt phiên bản số 8 và phát hành một compilation pipeline/renderer mới được gọi là Ivy. Mặc dù có kích thước bó nhỏ hơn, nhưng Ivy có nhiều cải tiến và bổ sung tuyệt vời. Hiện tại, Ivy là một tính năng opt-in cho đến Angular 9. Bài viết này sẽ mô tả chi tiết các tính năng có trong phiên bản 8 sắp phát hành mà có thể kể ra một vài cập nhật chính như sau:

  • Differential Loading cho Modern JavaScript 
  • Xem trước Opt-in Ivy
  • Tương thích ngược cho Angular Router
  • Cải tiến Web Worker Bundling
  • Opt-in Chia sẻ thói quen sử dụng
  • Cập nhật dependency

Tháng 12 năm 2019, nhóm Angular chuẩn bị phát hành phiên bản 9 và có thể ra mắt chính thức ra vào cuối 2019 hoặc đầu 2020. Thay đổi lớn nhất trong Angular 9 là Ivy trở thành renderer chuẩn. Xem thêm video YouTube bên dưới để biết thêm chi tiết về Angular 9:

 

 

Cập nhật của HTML và CSS

HTML và CSS là các thành phần cốt lõi của web và mặc dù chưa phát triển với tốc độ chóng mặt như JavaScript, chúng vẫn có một số cải tiến đáng chú ý trong năm 2019 và sẽ tác động rất lớn đến cách chúng ta xây dựng ứng dụng và cải thiện UX cho các website.

Hai trong số những thay đổi lớn nhất đối với HTML là “native lazy loading” và “no-jank fluid image loading”. Hình ảnh với dung lượng lớn đã gây khó khăn đối với hiệu suất web và chúng tôi đã tác động để xử lý việc loading chúng dễ dàng hơn. Với sự hỗ trợ cho lazy loading và nhận dạng tỷ lệ khung hình, chúng ta có thể có được hình ảnh liền mạch mà không cần phải thực hiện bất kỳ chức năng bổ sung nào trong JS.

Với native lazy loading, chỉ cần thêm loading=”lazy” vào thuộc tính của thẻ <src>:

Screenshot 2

Với no-jank images, chúng ta có thể sử dụng thuộc tính “instrinsucsize” hoặc sử dụng thuộc tính “width”, “height” kết hợp với “aspect-ratio” 

Screenshot 3

Hoặc:

Screenshot 4

 

Đối với CSS, đã có nhiều thay đổi dù đến chậm nhưng thực sự đã ghi được dấu ấn vào năm 2019. Hai bản cập nhật ấn tượng nhất là `prefers-reduced-motion` và variable fonts.

Xây dựng nền tảng vững chắc với HTML/CSS và theo kịp những cải tiến mới nhất là điều vô cùng quan trọng. Ngay cả khi bạn đang xây dựng các ứng dụng của mình bằng React và Vue, cuối cùng chúng cũng được chuyển đổi thành HTML và CSS thuần trong trình duyệt.

 

Khả năng truy cập (a11y) và quốc tế hóa (i18n) đang được ưu tiên hàng đầu

Tiêu chí Web “mở” và dễ sử dụng cho tất cả mọi người được cộng đồng phát triển frontend ưu tiên hướng tới trong thời gian này. Sau khi JavaScript và web phát triển rất nhanh từ năm 2015, các patterns và frameworks cuối cùng đã được củng cố. Giờ đây, mọi thứ đã ổn định hơn, cho phép các developer tập trung hơn vào localize (bản địa hóa) các ứng dụng của họ và giúp chúng trở nên dễ truy cập hơn, tốt hơn cho tất cả mọi người. Chúng ta nên tự hào về những tiến bộ mà mình đã đạt được, nhưng đừng vội thỏa mãn vì vẫn còn một chặng đường dài phía trước.

Khả năng truy cập (Accessibility): “Cố gắng tạo ra các website dễ sử dụng và dễ truy cập với nhiều người nhất có thể. Trước đây chúng tôi suy nghĩ về điều này vì mong muốn những người khuyết tật có thể sử dụng được website, nhưng thực tế, việc phát triển các website dễ truy cập cũng mang lại lợi ích cho nhiều nhóm người khác như những người sử dụng thiết bị di động hoặc những người có kết nối mạng chậm.”  – MDN

Quốc tế hóa (Internationalization): Hãy thiết kế/phát triển nội dung, ứng dụng, thông số kỹ thuật của bạn theo cách phù hợp hoặc dễ tiếp nhận cho người dùng từ bất kỳ nền văn hóa, khu vực hoặc ngôn ngữ nào.

 

Các tính năng ES2019

Tiếp tục với chu kỳ cập nhật hàng năm, ECMAScript (spec mà JavaScript lấy làm chuẩn) đã thêm các tính năng mới trong bản phát hành ES2019.

  • Object.fromEntries ()
  • String.trimStart () và String.trimEnd ()
  • Xử lý unicode tốt hơn trong JSON.stringify
  • Array.flat ()
  • Array.flatMap ()
  • try/catch binding
  • Symbol.description

Trong khi ES2019 đã có một số cập nhật tuyệt vời, ES2020 sắp tới có vẻ sẽ có thêm các tính năng được mong đợi nhất kể từ ES6 / ES2015:

  • Private class fields
  • Chuỗi tùy chọn – obj.field?.maybe?.exists
  • Nullish coalescing – item `sử dụng khi item null hoặc undefined`BigInts

 

Flutter bùng nổ và thách thức React Native khi trở thành lựa chọn tuyệt vời để xây dựng các ứng dụng di động đa nền tảng

Flutter được phát hành 2 năm sau React Native, nhưng đã nhanh chóng có được vị thế nhất định. Flutter đã gần như bắt kịp React Native (83k) trên bảng xếp hạng GitHub với 80,5k và sẽ sớm vượt qua React Native nếu tiếp tục duy trì xu thế này.

Nếu xem xét dưới góc độ Flutter không có cộng đồng developer hùng mạnh để thúc đẩy tăng trưởng như React Native đã tận dụng từ các web React developer, thì những con số này càng trở nên ấn tượng hơn. Flutter đang tự phát triển mình để trở thành framework di động đa nền tảng tốt nhất.

 

1 Vj1owq3o4mstixvoogiayq

 

Nền tảng Node.js và nền tảng JS đã hợp nhất để tạo thành nền tảng OpenJS; Node phiên bản 12 để tiếp tục release LTS 

Để hỗ trợ hệ sinh thái JavaScript và thúc đẩy sự phát triển của ngôn ngữ, nền tảng Node.js và nền tảng JS đã hợp nhất để tạo thành nền tảng OpenJS. Thông điệp từ nền tảng là sự hợp tác và phát triển dưới một thực thể trung lập hiện lưu trữ 31 dự án nguồn mở, bao gồm Node, jQuery và Webpack. Động thái này được xem là tích cực cho toàn bộ cộng đồng JS và được hỗ trợ bởi các công ty công nghệ lớn như Google, IBM và Microsoft.

Node đã phát hành phiên bản 12 trong năm nay, hỗ trợ dài hạn (LTS) cho đến tháng 4 năm 2023. Node 12 cung cấp một loạt các tính năng mới, cập nhật bảo mật và cải thiện hiệu suất. Một số cập nhật đáng chú ý bao gồm native support cho import/export, trường cho private class, khả năng tương thích với V8 Engine phiên bản 7.4, hỗ trợ cho TLS 1.3 và các công cụ chẩn đoán bổ sung.

 

Svelte thu hút sự chú ý nhưng không được ứng dụng nhiều khi ra phiên bản 3 

Svelte đã tìm được cách để khẳng định tên tuổi trong thế giới vốn đã rất đông đúc của các framework frontend. Tuy nhiên, lại chưa thể được ứng dụng rộng rãi. Hai từ khóa đúng nhất để miêu tả về framework này là đơn giản nhưng mạnh mẽ. Ba điểm được lưu ý trên trang web của Svelte:

  • Viết ít code hơn
  • Không có DOM ảo
  • Reactive thật

Svelte cố gắng chuyển phần lớn công việc sang bước biên dịch thay vì thực hiện nó trong trình duyệt khi chạy. Svelte có một kiến ​​trúc dựa trên thành phần, thứ biên dịch thành HTML thuần túy và vanilla JavaScript và ít mã soạn sẵn hơn. Svelte sử dụng lập trình reactive tạo ra các cập nhật trực tiếp cho DOM thay vì so sánh khác biệt DOM ảo.

Svelte đã mang đến một luồng gió mới mẻ, thú vị trong cộng đồng frontend bằng cách…tối giản mọi thứ. Tôi rất mong chờ được xem sự phát triển của framework này vào năm sau và hy vọng chúng ta có thể nhìn thấy Svelte được sử dụng ở quy mô lớn để đặt lên bàn cân so sánh với các đối thủ nặng kí như React, Vue và Angular. 

 

 

Các trang web tĩnh tiếp tục được ưa chuộng, developers áp dụng JAMStack

Với việc sử dụng ngày càng nhiều các framework như Gatsby, cộng với sự tăng trưởng nhanh của các web host tĩnh như Netlify và vô số công ty CMS không đầu xuất hiện, các trang web tĩnh chứng minh rằng chúng sẽ là một phần không thể thiếu của ngành web ở thời điểm hiện tại. 

Các trang web tĩnh kết hợp web cũ với các công cụ, thư viện và cập nhật mới để cung cấp trải nghiệm chưa từng có. Chúng ta có thể code các trang web của mình bằng các library hiện đại như React nhưng sau đó vẫn có thể compile chúng thành các trang HTML tĩnh. Do các trang đã được build sẵn, lúc này mỗi request gửi lên sẽ không cần server để render lại nội dung với dữ liệu – các trang có thể sẵn sàng ngay lập tức do đó có thể tận dụng tối đa lợi thế caching của CDN cho phép nội dung được tải tới người dùng nhanh nhất có thể.

Một mẫu lập trình phổ biến được sử dụng với các trang web tĩnh là JAMStack (JavaScript, API, Markup). Đây là cách tiếp cận hỗn hợp tĩnh/SPA trong đó các trang ở trạng thái tĩnh, nhưng một khi được mở trên máy client, nó được coi là một SPA sử dụng API và tương tác người dùng để phát triển trạng thái của UI.

 

PWAs tăng trưởng và được áp dụng nhiều hơn

Các trang web tĩnh là một trong những cách để xây dựng được các product cực kỳ nhanh, nhưng chúng không phù hợp với tất cả các ứng dụng – do đó có một lựa chọn tuyệt vời khác là PWAs (progressive web apps). PWAs cho phép bạn cache resources trong browser để các trang có thể phản hồi ngay lập tức và cũng đồng thời cung cấp hỗ trợ ngoại tuyến. Ngoài ra, PWAs cho phép background workers cung cấp chức năng gốc như push notification.

Một số người thậm chí còn đưa ra tuyên bố rằng PWAs có thể thay thế native mobile apps nhưng dù thế nào thì PWAs chắc chắn sẽ đóng một vai trò quan trọng trong quá trình build sản phẩm trong tương lai.

Các Tool Frontend đang trở nên hoàn thiện hơn bao giờ hết

Những phàn nàn của frontend developer về JavaScript trong những năm gần đây đã giảm bớt trước nỗ lực đáng kinh ngạc của những người duy trì dự án nguồn mở.

Trước đây, nếu muốn xây dựng một SPA, chúng ta phải tự tải dependencies bằng Bower hoặc NPM, tìm ra cách compile bằng Browserify hoặc Webpack, viết một máy chủ Express từ đầu và bảo trì ứng dụng của mình qua các phiên bản update của thư viện.

Chúng ta đã có một vài năm khó khăn, nhưng giờ đây web đã phát triển đến giai đoạn của một hệ sinh thái packages sôi động và hoàn chỉnh nhất với các công cụ để giúp chúng ta vượt qua những phần khó khăn khi phát triển ứng dụng, ví dụ như Tạo ứng dụng React, Vue CLI, Angular CLI, Gatsby cho các trang web tĩnh, Expo cho ứng dụng di động React Native, Next / Nuxt cho các ứng dụng SSR, generator để tạo server, Hasura để viết một máy chủ cho GraphQL, tự động tạo các kiểu trong TypeScript bằng cách sử dụng Trình tạo mã GraphQL, Webpack tiếp tục được sắp xếp hợp lý hơn – Luôn có các công cụ để  xử lý hầu hết những công việc khó mà chúng ta cần làm.

Có phải chúng ta đang bị bão hoà với các công cụ?

GraphQL tiếp tục được các developers yêu thích và được áp dụng nhiều hơn trong các công ty công nghệ.

GraphQL hứa hẹn sẽ giải quyết nhiều vấn đề mà ứng dụng dựa trên REST truyền thống chưa làm được. Developer nhanh chóng yêu thích GraphQL và các công ty công nghệ đang dần bắt kịp xu hướng này. GitHub đã viết API mới nhất bằng GraphQL vài năm trước và nhiều công ty khác cũng đang dần học hỏi điều này. 

Ứng dụng GraphQL là một data-driven thay vì endpoint-driven, cho phép khách hàng khai báo chính xác dữ liệu họ cần và nhận được phản hồi JSON tương ứng từ máy chủ. API GraphQL cung cấp một lược đồ để ghi lại tất cả dữ liệu và kiểu của chúng, từ đó cung cấp cho developer khả năng hiển thị đầy đủ API.

Vì API GraphQL cung cấp một lược đồ đầy đủ, nên nó cũng tích hợp tốt với các ứng dụng sử dụng TypeScript. Sử dụng một công cụ như Trình tạo mã GraphQL, nó có thể đọc các truy vấn trong phần code của khách hàng và khớp chúng với lược đồ để cung cấp các loại TypeScript sẽ đi qua toàn bộ các ứng dụng.

Lượt tải xuống GraphQL đã tăng gấp đôi trong năm qua và Apollo đang bắt đầu khẳng định tên tuổi của một framework được sử dụng nhiều nhất. 

 

1 Ywtd Nihwuv8b4ofsu Qqq

 

Nếu nhìn vào khảo sát, chúng ta thấy rằng GraphQL hiện là công cụ data layer được yêu thích nhất và Redux đã giảm đáng kể. GraphQL vẫn tiếp tục được ứng dụng rộng rãi 

 

1 0gvflyqxy B1cueusj1xdg

 

CSS-in-JS đang dần tăng tốc

Con đường phát triển của web development từ trước đến giờ dường như đi theo hướng quy tụ mọi thứ về JavaScript. Điều này được thấy rõ trong việc áp dụng CSS-in-JS mà trong đó các style được tạo ra đều sử dụng JavaScript. 

Điều này cho phép chúng ta chia sẻ các styles và dependencies bằng cách sử dụng cú pháp JavaScript thông thường thông qua import/export. Nó cũng đơn giản hóa các dynamic styles vì thành phần CSS-in-JS có thể nội suy props vào chuỗi style của nó. Như đã lưu ý trước đây, Facebook thậm chí có thể xem CSS-in-JS là tương lai của frontend và sẽ phát hành thư viện của riêng họ.

Dưới đây là một ví dụ về CSS cổ điển so với CSS-in-JS. Để xử lý các dynamic styles với CSS bình thường, bạn phải quản lý các class name trong component và cập nhật chúng dựa trên state/props. Bạn cũng sẽ cần một CSS class cho mỗi biến thể:

Screenshot 5

Với CSS-in-JS, bạn không cần kiểm soát các class của CSS nữa. Bạn chỉ cần truyền props cho một styled component và nó sẽ xử lý dynamic style với cú pháp khai báo. Code sẽ sạch hơn nhiều và có sự phân tách rõ ràng hơn về mối quan tâm đối với các style và React bằng cách cho phép CSS quản lý dynamic style dựa trên các props. Bây giờ tất cả đều đọc giống như code React và JavaScript thông thường:

Screenshot 6

Hai thư viện hàng đầu cho CSS-in-JS là styled-componentsemotion trong đó emotion có nhiều lượt tải xuống hơn trong năm 2019. Hai thư viện này có một chút khác biệt với các sự lựa  chọn CSS-in-JS khác và có khả năng tăng trưởng tốt.

 

1 Mav6nzniinnzewonvb5 7g

 

VS Code thống trị thị trường soạn thảo code

Các developer dành sự yêu thích đặc biệt cho IDE/trình soạn thảo code và không ngại tranh luận về lý do tại sao sự lựa chọn của họ là ổn nhất. Tuy nhiên, đối với mảng frontend nhìn chung, các developer đã gần như nhất trí chọn VS Code làm trình soạn thảo của họ. VS Code là một trình soạn thảo mã nguồn mở cung cấp các plugin để cung cấp trải nghiệm đáng kinh ngạc cho các developer. 

Dưới đây là cách sử dụng các trình soạn thảo văn bản theo Khảo sát của State of JS 2018 (Danh sách này sẽ được cập nhật khi khảo sát năm 2019 được phát hành):

 

1 63gd8jjkyjkaaltusuhibg

 

Webpack 5 bước vào giai đoạn thử nghiệm và sắp phát hành

Webpack đã trở thành một thành phần cốt lõi của gần như tất cả các công cụ JavaScript hiện đại và là công cụ được sử dụng nhiều nhất. Webpack đã tiếp tục cải thiện cả hiệu suất và khả năng sử dụng. Với phiên bản 5, Webpack tập trung vào các điểm sau:

  • Cải thiện hiệu suất xây dựng với bộ nhớ đệm liên tục
  • Cải thiện bộ nhớ đệm dài hạn với các thuật toán và default tốt hơn
  • Làm sạch các internal pattern mà không tạo ra bất kỳ thay đổi quá lớn nào

 

Jest chuyển từ Flow sang TypeScript

Facebook tiếp tục sử dụng thư viện test phổ biến JestFlow, đối thủ của TypeScript. Đầu năm 2019, Facebook đưa ra một tuyên bố táo bạo khi đã chọn chuyển Jest ra khỏi Flow và chuyển sang TypeScript. Điều này tiếp tục cho thấy TypeScript đã trở thành lựa chọn tiêu chuẩn cho JavaScript và sẽ còn phát triển hơn trong tương lai.

 

Chrome phát hành phiên bản ổn định 72-78 trong năm 2019

Chrome tiếp tục phát triển nhanh chóng và thêm các tính năng mới vào web, công cụ dành cho developer. Năm 2019, chúng tôi đã thấy 7 phiên bản ổn định được phát hành với các phiên bản 79 ở phiên bản beta, 80 ở dev và 81 ở canary. Truy cập link Wiki dưới đây để biết các bổ sung đáng chú ý cho Chrome trong năm qua.

Trình duyệt Microsoft Edge chuyển sang Chromium, có logo mới

Internet Explorer và người kế nhiệm của nó – Edge đã trở thành một trò đùa với các web developer, và làm việc với nó thì còn tệ hơn nữa. Trình duyệt liên tục bị lag trong quá trình triển khai tính năng web và rất khó để viết code tương thích trình duyệt chéo. Chiếm được ưu thế lớn từ devs, Microsoft đã chọn sử dụng công cụ Chromium mã nguồn mở của Google. Vào giữa năm 2019, sự thay đổi này đã ra mắt bản thử nghiệm

 

Facebook phát hành Hermes, trình phân tích cú pháp JavaScript cho Android để cải thiện React Native

Facebook nhận thấy rằng JavaScript của Android không đủ nhanh, vì vậy họ đã tự xây dựng một bản khác cho riêng mình. Facebook hoàn toàn sử dụng React Native và động thái này cho thấy họ sẵn sàng thực hiện các điều chỉnh cần thiết để làm cho nó hoạt động hiệu quả nhất có thể trên tất cả các nền tảng.

 

Dự đoán cho năm 2020

  • Hiệu suất tiếp tục là khía cạnh quan trọng nhất của web khi phân tách code và PWAs sẽ được ứng dụng rộng rãi hơn
  • WebAssembly trở nên phổ biến hơn, được chấp nhận và sử dụng trong các product nhiều hơn.
  • GraphQL vượt qua REST trong hạng mục các công ty mới khởi nghiệp và các dự án mới trong khi đó các công ty đã thành lập trước đó cũng có thể sẽ chuyển sang sử dụng GraphQL nhiều hơn
  • TypeScript trở thành lựa chọn mặc định cho các dự án và khởi nghiệp mới.
  • Chúng tôi bắt đầu thấy các ứng dụng thực sự được xây dựng trên blockchain thay vì server giúp cho web ngày càng mở hơn nữa. 
  • CSS-in-JS có thể trở thành styling method mặc định thay vì CSS đơn giản.
  • Các ứng dụng “Codeless” đang dần trở nên phổ biến. Với những cải tiến về AI và có nhiều hơn các abstraction layer cho ứng dụng, việc viết app đang dần trở nên dễ dàng hơn. Năm 2020, chúng ta có thể thấy những thay đổi đáng chú ý trong việc tạo ứng dụng mà không cần phải viết code.
  • Flutter có thể vượt qua React Native đi đầu trong việc xây dựng ứng dụng di động đa nền tảng.
  • Svelte sẽ có nhiều dự án thực tế hơn được xây dựng bằng cách sử dụng công nghệ.
  • Deno (một TypeScript runtime được tạo bởi Node) cho thấy khả năng ứng dụng trong thực tiễn.
  • AR/VR có những bước tiến khi sử dụng các thư viện như A-Frame, React VRGoogle VR cũng như các cải tiến đối với các công cụ AR / VR native trong trình duyệt.
  • Ảnh hưởng của container hóa (ví dụ Docker, Kubernetes) trở nên phổ biến hơn trong quá trình phát triển frontend.

 

Bài viết và video về Frontend nổi bật trong năm 2019

Addy Osmani chỉ la chi phí sử dụng JavaScript in 2019

Khảo sát developer của StackOverflow cho thấy các xu hướng lập trình

Xem cách Slack xây dựng lại toàn bộ giao diện người dùng của họ bằng cách sử dụng JavaScript hiện đại

Bộ phim tài liệu về GraphQL:

Dan Abramov đưa ra lời giải thích kỹ lưỡng về useEffect

Ryan Dahl đưa ra cái nhìn sâu sắc hơn về Deno

Eric Elliott khẳng định lợi ích của TypeScripts không tương xứng với nỗ lực bỏ ra

Và ông cũng cho chúng ta thấy một kỹ sư 9 đô la / giờ có giá triệu đô như thế nào.

Các chủ đề chính: làm việc quá mức và trả lương thấp:

Tìm hiểu chi tiết kỹ thuật của JavaScript V8 và cách nó tạo ra hiệu suất trong React.

Flavio Copes liệt kê tất cả các thay đổi của JavaScript kể từ bản cập nhật ES2015.

Ebay chuyển đổi một tính năng chính sang WebAssembly và thu được nhiều lợi ích đáng kể

Diana Adrianne vẽ ảnh chân dung chỉ bằng CSS.

Rodrigo Pombo hướng dẫn cách xây dựng React app của riêng mình.

 

Like/Follow Fanpage của Pixta Vietnam để theo dõi các bài dịch hay về web development hằng tuần nhé: https://www.facebook.com/pixtaVN/

Bài viết gốc: Xem tại đây 

Dịch và chỉnh sửa: Vân Phạm, Ly Nguyễn, Thế Mạnh, Nhật Anh