Tương lai nào cho JavaScript trong thế giới Front End

Viết bởi Mandy Bitar

Dịch giả: Togahepi a.k.a Hà Hiệp.

Nếu bạn đã là một Front-end Dev trong vài năm gần đây, hẳn bạn đã trải qua để đủ hiểu cái cảm giác "tê liệt tinh thần". Những framework hay thư viện mới mọc lên như nấm. Các công ty trên khắp thế giới phải đối mặt đến nản chí khi phải lựa chọn đúng stack cho công cuộc số hóa của mình. Đó là một thử thách lớn, khi phải vất vả lắm mới có thể theo kịp xu hướng.

Ngay cả đối với những Front-end Dev tận tâm nhất, cũng có lúc lựa chọn cũng sẽ chỉ mang tính cá nhân. Điều đó nhiều khi còn chiếm ưu tiên hơn cả lựa chọn công nghệ phù hợp để giải quyết các vấn đề.

Trong cuộc đua để trở thành framework hay thư viện với tốc độ nhanh nhất, hiệu năng cao nhất và dễ thực thi nhất, mọi người đều cố gắng giải đáp: Khi nào thì thế giới JavaScript thống nhất về vài stack mang tính xu hướng? Tương lai của JavaScript sẽ đi về đâu? Và AI sẽ đóng vai trò gì phát triển JS?

Lịch sử và sự phổ biến của JavaScript

Được phát triển từ năm 1995, JavaScript đã lớn mạnh trở thành một ngôn ngữ chính trong phát triển web. Trong vài thập kỉ gần đây, sự tiếp nhận JS luôn phát triển và chưa có dấu hiệu chậm lại.

Theo như khảo sát hằng năm của StackOverflow, 69,8% người trả lời và 71,5% những dev chuyên nghiệp đang sử dụng JavaScript. Với sự thịnh hành của các thiết bị có thể duyệt web, cuộc đua để trở thành "1 giải pháp duy nhất giải quyết mọi vấn đề" trở nên khốc liệt hơn bao giờ hết. Đây là tin tốt cho những dev đã biết về JS cũng như những người đang có ý định học nó. Đối với những dev không liên quan tới thế giới Front-end thì lời khuyên là cũng nên thử và có những kinh nghiệm cơ bản nhất với JS. Lời huấn này tóm lược mọi thứ vô cùng chuẩn:
"Nó [JavaScript] có lẽ là kĩ năng hot nhất mà Devs để nâng cao kĩ năng trong tương lai được dự đoán trước"

Frameworks và Web Components - Tương lai được dự đoán trước

Sau cuộc chiến framework kéo dài cả thập kỉ qua, "Ba ông lớn", như mọi người vẫn thường gọi, đang dẫn đầu cuộc đua về sự ổn định và tương lai chắc chắn. React, Vue và Angular là những thư viện và framework nổi bật nhất của JavaScript được sử dụng ngày nay. Trong bài viết này, tôi sẽ đi lần lượt từng thư viện để nhìn rõ tại tại sao chúng vẫn sẽ dẫn đầu trong tương lai.

React

Được xây dựng và chống lưng bởi Facebook, React là sự lựa chọn yêu thích của các dev để xây dựng hay bảo trì sản phẩm, cho dù đó là một phần mềm mì ăn liền hay quy mô lớn cho doanh nghiệp. Nó gần đây được sử dụng bởi những công ty công nghệ hàng đầu như Instagram, Netflix, Walmart, Whatsapp... Lợi thế của React đó là: Kiến trúc bổ trợ nền, Virtual DOM cho hiệu năng tuyệt vời, học hỏi chuyển hướng vô cùng nhanh và vô cùng phổ biến với cộng đồng đông đảo.

React Native - lập trình di động đa nền tảng

Vue

Được tạo ra bởi Evan You và mua lại bởi Alibaba, Vue được nhanh chóng yêu thích bởi những người khám phá ra nó. Lý do là, Vue được thiết kế ngay từ đầu dành riêng cho những designer những người có ít kinh nghiệm lập trình. Mục tiêu là giúp họ tập trung phát triển những tính năng tương tác hơn là lo lắng về việc phải code ra sao. Nó vô cùng dễ học với yêu cầu ban đầu rất ít. Hơn hết, Evan, một cựu nhân viên Google, nhìn ra những nặng nề của Angular và sửa chữa nó với Vue. Anh ấy phát triển nó cùng thời kì với việc ra đời của React và có thể phát triển tương đương để giờ đây Vue trở thành một trong những framework hứa hẹn nhất để học và áp dụng. Thêm vào đó, Vue.js hỗ trợ declarative rendering, cập nhật DOM bất đồng bộ, luồng dữ liệu đôi, nghiêm ngặt với các thành phần web và kết hợp dễ dàng với HTML template.

Angular

Được xây dựng và chống lưng bởi Google và được sử dụng bởi Youtube, Paypal, Google Maps, .v.v. Angular trở thành lựa chọn hàng đầu với những công việc doanh nghiệp. Bản mới nhất, Angular 6, đem tới 2 điểm sáng chính. Một lời hứa hẹn về bộ render Ivy sẽ tăng tốc render ứng dụng và các phần tử trong Angular cho phép sử dụng phần bổ trợ của Angular bên ngoài nó như là trong Vue hay React. Sử dụng Gói các phần tử (Elements Package), bạn có thể tạo các phần bổ trợ Angular và dùng nó như phần bổ trợ web, có thể được sử dụng ở bất cứ trang HTML nào. Và với những lập trình viên đã quen với lập trình hướng đối tượng OOP hay Java, Angular vô cùng dễ dàng để bắt đầu làm quen và học.

Cùng với các Framework, chúng ta cũng thấy sự trỗi dậy của các phần bổ trợ web (web components), nhưng chúng là cái gì và tại sao chúng lại quan trọng đến vậy?

Nổi lên để giải quyết sự mệt mỏi của cộng đồng với các framework, Phần bổ trợ web là điều tuyệt vời tiếp theo kể từ khi HTML5 ra đời. Nhưng chúng là gì vậy? "Phần bổ trở web là một chuẩn W3C mới vô cùng mạnh mẽ được đồng thuận phát triển bởi tất cả trình duyệt phổ biến và có thẻ sử dụng trong các ứng dụng của chúng ta (cùng với polyfill). Nó bổ sung cho DOM khả năng có thể làm trang web giảm dung lượng, tái sử dụng và các module bổ trợ, cởi trói khỏi sự ràng buộc với bất kì framework nào, chỉ thuần túy xây dựng trên HTML, CSS và JS".

Phần bổ trợ web có dung lượng gói nhỏ sẽ tránh ta phải load với những phần bổ trợ tùy biến nặng nề. Chúng được tung hô vì khả năng tái sử dụng của mình. Bởi phần bổ trợ web được xây dựng và hỗ trợ tự nhiên trực tiếp bởi trình duyệt vì thế chúng có thể sử dụng bất cứ ở đâu, với bất kì framework nào hoặc chả cần framework nào. Cuối cùng, chúng được yêu thích bởi sự đơn giản đến chân phương của mình. Sẽ không cần phải học một framework nào đó nếu bạn không muốn. Nếu bạn đã biết cơ bản về JS và DOM APIs, thì bạn có thể dễ dàng tương tác với phần bổ trợ web.

Ionic/Stencil

Ionic là một framework mạnh mẽ được xây dựng cho di động và những app web tiên tiến mà có thể tương tác trực tiếp với những tính năng của thiết bị gốc. Cùng với sự ra mắt của Ionic 4, Stencil được giới thiệu là không chỉ mang lại sự mạnh mẽ lẫn hiệu năng cho các nhà phát triển có thể dùng nó ngoài Angular. Nhưng làm như thế nào vậy? Stencil là một phần bổ trợ web được biên dịch xây dựng nên những phần bổ trợ web nhanh và nhỏ gọn. Bằng tạo ra những phần bổ trợ UI cùng với Phần bổ trợ Web thay vì sử dụng phần bổ trợ đặc biệt như React hay Angular, chúng ta có thể tái sử dụng những phần bổ trợ này trong bất kì framework nào hỗ trợ nó hoặc là tất cả luôn.

Polymer

Polymer là một thư viện JS được phát triển bởi Google và được sử dụng trong Google Earth và Youtube. Nó sử dụng phần bổ trợ web để xây dựng những ứng dụng web và cung cấp khả năng phối kết hợp JS, CSS và HTML như một phần tử tùy biến trong khi nâng tầm những công nghệ gốc trong trình duyệt hơn là dựa dẫm vào các thư viện JS.

Tuy nhiên, Polymer chưa được phổ biến lắm và vẫn phải đối mặt với nhiều thử thách. Đầu tiên, khi sử dụng với DOM, sau đó tương tác hoặc điều khiển DOM sẽ chỉ dùng JS cơ bản, làm nổi lẩu code trở lên rối rắm, gây khó khăn trong tổ chức và quản lý với những ứng dụng lớn. Đó cũng là một lý do vì sao mà React hay những thư viện khác ra đời. Thứ 2, Polymer tạo ra những dòng chờ cho những biến chuỗi để nâng cao hiệu năng và giải quyết vấn đề chuyển đổi dữ liệu sang dạng chuỗi hay đổi ngược trở về là 1 object. Nhưng bằng sử dụng những dòng chờ, bạn sẽ bị trói buộc một cách rõ ràng với Polymer bởi dòng chờ không nằm trong phần bổ trợ Web. Thử thách cuối cùng là: tải về toàn bộ thư viện và Polyfill, và sự thiếu sót trong mảng render phía sever.

AI sẽ thay đổi Front End - Tương lai xa hoặc là sẽ không bao giờ xảy ra

Vượt trên cả những thư viện và framework, làm thế nào mà trí tuệ nhân tạo và máy học sẽ thay đổi tương lai của nghiệp front end? Đó là câu hỏi được đặt ra bởi rất nhiều người, nhưng chỉ có 1 số ít công ty sẵn sàng dẫn đầu xu hướng đó. Họ sử dụng những kĩ thuật khác nhau với hy vọng chấm dứt thời kì hỗ mang qua các chu kì của các framework và thư viện. Hướng tiếp cận được chia làm 2 hướng chính.

Một hướng hỗ trợ những nhà phát triển bằng cách tạo ra những đoạn code khởi đầu từ "wireframe" hay file .sketch hoặc tạo ra toàn bộ đầu ra của front end. Nó sẽ giúp những nhà phát triển tập trung vào phát triển những phần quan trọng như là logic trong ứng dụng hay xây dựng các tính năng. Nó sẽ tăng tốc tính lặp đi lặp lại của giai đoạn thiết kế và chỉnh sửa. Những công ty như Airbnb gần đây đã xây dựng AI chuyển từ file sketch sang code thô, cho đến Uizard sử dụng mạng học sâu/máy học mà họ huấn luyện để chuyển 1 bản chụp màn hình của thiết kế giao diện sang những dòng code thô. Điều đáng kinh ngạc ở Uizard là một đoạn văn bản cho tới GUI render đều sẽ hoạt động trên nhiều nền tảng như iOS, Android và nền Web, thuật toán đã hoạt động chính xác tới mức 77%.

Cho đến ứng dụng Ink của Microsoft để code, một nỗ lực của MS tạo ra cả phần mềm có sẵn miễn phí trên Cửa hàng Windows. Và cuối cùng, Supernova, một startup với nhiệm vụ nâng tầm phát triển web với quy trình thiết kế web di động và các nhà phát triển xây dựng các công cụ, phần mềm Supernova Studio trên macOS, hứa hẹn sẽ tự động chuyển đổi các thiết kế app di động từ bản vẽ Sketch, trở thành những dòng code chuẩn, với mục tiêu tạo cầu nối thu hẹp khoảng cách giữa bản đánh máy, bản thiết kế và phát triển front end.

Một hướng khác đó là nâng AI lên một tầm xa hơn và sẽ sử dụng máy tính làm tất cả công việc code frond end. BAYOU, một dự án được gây vốn bởi bộ quốc phòng, Google và Trường đại học Rice, sử dụng những công cụ deep learning để làm việc như một cỗ máy tìm kiếm cho việc code. Thông qua đọc mã nguồn của 1500 ứng dụng Android ( ~ 100 triệu dòng code Java), mạng thần kinh nhân tạo của BAYOU giờ đây là một AI có thể tự viết phần mềm khác.

Web-Nhúng (Web-Assembly) ở đâu trong sự hỗn mang này? Một tương lai đầy khả năng.

Web-Assembly là một định dạng nhị phân có thể giải mã trực tiếp, với mọi trình duyệt, nhanh hơn rất nhiều so với JS. Thuật ngữ này đang được đánh động trong giới các nhà phát triển. Nó thực sự có thể trở thành một phần bổ trợ cho JavaScript trong tương lai gần.

Tại sao? Bởi nó tăng tốc hiệu suất bằng cách giảm TTI (time of interactive - thời gian tương tác) làm cho ứng dụng web nhanh hơn, cũng như đa dạng hóa ngôn ngữ mà front end có thể viết trên. Điều này cho phép các nhà phát triển có thể sử dụng ngôn ngữ yêu thích của mình hoặc khả năng xây dựng 1 vài phần của ứng dụng web với web-nhúng để tăng tốc và những phần còn lại vẫn viết bằng JS.

Đôi lời kết luận

Thế giới front end mà chúng ta hiểu ngày nay bị thống trị bởi 3 framework lớn là: React, Vue và Angular (Vue là tương lai tươi sáng nhất). Tuy nhiên, hiểu biết về vòng đời trong quá khứ của các framework, làm ta sẽ không ngạc nhiên nếu 1 framework mới hoàn toàn xuất hiện nhanh hơn, hiệu năng hơn và giải quyết các vấn đề mà các framework hiện nay đang gặp phải.

Tương lai mà tôi mường tượng ra là sự pha trộn của mọi thứ hiện tại. Ở đó 1 framework, được tạo ra để dễ dàng nhất cho các nhà phát triển và cung cấp một giải pháp toàn diện sử dụng những công nghệ như Phần bổ trợ web, web nhúng và AI, tạo ra một giải pháp toàn diện cho phát triển những ứng dụng.

Phần nhân của ứng dụng sẽ được xây dựng bằng Phần bổ trợ web để chúng dễ sử dụng và chia sẻ.

Web nhúng sẽ phục vụ phần tăng tốc một phần ứng dụng để làm cho ứng dụng nhanh hơn và hiệu năng tốt hơn.

AI sẽ làm tăng tốc quá trình phát triển, giảm tải những dòng code hoặc dùng để đánh giá chất lượng những dòng code.

Sẽ có đáp án là một framework nào đó? Hay phần bổ trợ web? Hoặc là một cách tiếp cận kết hợp cả 2? Liệu tương lai sẽ dựa trên kĩ năng và sự luyện tập mà chúng ta khổ luyện hơn là công nghệ, như là micro front ends nơi mà các nhóm khác nhau làm việc với công nghệ khác nhau? Hay những câu trả lời mang tính kiến trúc là sự lựa chọn của chúng ta trong công nghệ? Hãy comment nói lên ý kiến của bạn nhé!

Đọc thêm và những topic liên quan:

React vs. Vue (vs. Angular)

Vue.js Is Good, But Is It Better Than Angular Or React?

The Present Future of User Interface Development

The Future of JavaScript Frameworks Looks Very Fast

Top 5 Trends in Front-End Development for 2018