Năm 2016 vừa trôi qua rồi! Đây quả là một năm điên cuồn cho cả thế giới nói chung cũng như xứ xở JavaScript nói riêng.

Năm nay ta đã chứng kiến sự xuống sức của JavaScript. Trong bối cảnh cần đến quá nhiều công cụ và tùy chỉnh cần thiết để set up một JavaScript project “hiện đại”, nhiều lập trình viên tỏ ra mệt mỏi trước hệ sinh thái “dày đặc” của ngôn ngữ này.

Để mọi người dễ ngủ hơn, chúng tôi đã lập ra danh sách 3 framework/thư viện triển vọng đáng gờm nhất cho lập trình front-end trong năm 2017 trước mắt.

Vue.js

Có lẽ đã đến lúc bạn nên chú ý hơn đến Vue.js. Vue.js là một framwork JavaScript bé tí teo.

Khoan nào, đừng té nhanh vậy chứ!

Vue.js tập trung chủ yếu vào view và cung cấp một loạt công cụ hữu ích Để quản lý dữ liệu cho các view này. Thay vì là framework với đầy mẫu thiết kế lập trình và hạn chế, hướng đi tối giản mới lạ của Vue.js lại rất đơn giản, không có chút gì rối rắm cả.

Vue.js có hai “hương vị”: phiên bản độc lập với template compiler, và runtime version. Hầu hết tất cả các trường hợp, bạn sẽ muốn precompile templates bằng Webpack hoặc Browserify, và chỉ load runtime package. Hãy xem trang cài đặt của Vue.js để biết thêm thông tin chi tiết.

Để thấy rõ hơn mức độ đơn giản của công cụ, dưới đây là ví dụ của một component hiểu thị message và thiêm khả năng tương tác vào nút bấm để đảo ngược message.

 

 

Bạn cảm thấy nhớ nhung các tính năng hay ho của các thư viện khác? Vue.JavaScript có rất nhiều plugin cho bạn sử dụng.

Nếu bạn muốn công việc càng năng suất càng tốt thì đây là framework rất phù hợp cho bạn. Công cụ có khả năng mở rộng rất tốt theo quy mô của project. Và dù bạn chọn “hương vị” nào đi nữa, độc lập hay runtime, thì Vue.js vẫn mặc định hỗ trợ ES5-compliant browser.

Để tìm hiểu sau hơn, các bạn có thể tìm được Vue.js website hoặc GitHub repository của framework này.

Svelte

Vừa mới xuất hiện từ giữa tháng 11 năm nay, Svelte vẫn còn khá mới với sân chơi chật chội này. Đây là JavaScript framework tương tự như Vue.js, nhưng để lại footprint nhỏ hơn. Các framework “truyền thống” cần runtime code để xác định và thực thi module, giữ state, cập nhật view và làm đủ thứ mà framework hay làm. Svelte hòa tan thành clean JavaScript code như thể bạn không hề dùng đến framework vậy. Điều này mang lại một lợi ích to lớn, đó là kích thước của file.

Framework này thật ra là một công cụ giúp bạn compile source code thành JavaScript thuần không có dependencies. Svelte còn có một số plugin để bạn có thể compile source code bằng Webpack, Browserify, Rollup hay Gulp; trang compiler’s repository có liệt kê tất cả các công cụ bạn có thể sử dụng được.

Ví dụ dưới đây sẽ giúp các bạn so sánh giữa Vue.js và Svelte được dễ dàng hơn:

Tuy cùng tạo một module, nhưng của Svelte là 2kb file, và của Vue.js lên đến tận 7kb bundle.

Một chỉ số đánh giá js-framework cũng chỉ ra Svelte có thể hơn thua với Inferno về mặt tốc độ. Nếu quan tâm đến footpriont của ứng dụng, bạn cực kỳ nên dùng thử Svelte.

Nếu bạn đang cân nhắc sử dụng framework này vào production, Tôi cho rằng bạn nên đợi lâu hơn một chút nữa. Vì framework thực sự còn rất mới, và vẫn chưa có bất kỳ thông báo nào từ nhà phát triển về tương lai của framework này. Mặc dù còn “mới tinh” và chưa qua thử nghiệm kỹ lưỡng trong thực tế, chúng tôi vẫn cho rằng Svelte sẽ phát triển mạnh mẽ hơn nữa trong năm tới và có sức ảnh hưởng đến các thư viện và/hoặc framework đang được phát triển.

Tại thời điểm viết bài, Svelte vẫn chưa có hệ thống hóa các plugin của mình trong document. Nhưng theo một số lời đồn thổi Svelte sẽ dần hỗ trợ plugin và có thể có API để nối dính vào framework.

Khả năng tương thích mặc định rất khó xác định, vì tính tương hợp của đoạn code đã compile sẽ dựa trên build workflow stack của chính bạn. Xét về kỹ thuật, với ES5 shims, bạn sẽ c ó thể được hỗ trợ từ ES5 trở về trước.

Đọc thêm tại Svelte’s website hoặc GitHub repository.

Conditioner.js

Cuối cùng trong danh sách và cũng không kém phần quan trọng, ta có Conditioner.js. Với Conditioner.js, bạn có thể load và invoke module (theo điều kiện). Điểm khác biệt của Conditioner.js so với các module loader khác là Conditioner.js cho phép xác định điều kiện áp đặt lên việc load và/hoặc hiện một module. Chức năng này còn có phép bạn giảm thời gian load và tiếp kiệm băng thông.

Được xây dựng chú trọng vào chiến thuật thiết kế web Progressive Enhancement (nội dung là số một), Conditioner.js khuyến khích bạn nên chuẩn bị sẵn tất cả các component đã được enhance với JavaScript module tương ứng. Các module này được xác định như thế nào là hoàn toàn dựa vào bạn. Bạn thậm chí còn có thể load module ngay từ framework yêu thích của mình.

Thư viện này không khai biến global và khuyến khích sử dụng AMD loader như RequireJS. Conditioner.js tương thích với Browserify, Webpack, Rollup và nhiều AMD bundlers khác, nhưng bạn vẫn nên tạo bundles bé tý, từ đó Conditioner.js có thể load chỉ những module mà page cần.

Để bắt đầu sử dụng, bạn có thể cài đặt thông qua npm: npm install conditioner-js. Để biết thêm thông tin, bạn có thể đọc tại project’s homepage.

Demo dưới đây giúp bạn thấy rõ các tính năng của Conditioner.js. Hãy tưởng tượng, nếu ta muốn hiển thị thời gian đếm ngược đếm event, module sẽ trong như thế nào?

 

Khởi động module đơn giản như sau:

Conditioner sau đó sẽ load module ui/RelativeTime tại vị trí này trong DOM. Chú ý, nội dụng đã được thể hiện theo format chấp nhận được, và module chỉ có tác dụng cải thiện thêm thôi.

Nếu bạn muốn module  khởi động chỉ khi người dùng nhận biết được, bạn có thể xử lý điều kiện như sau:

 

Conditioner.js sở hữu một loạt monitor ấn tượng mà bạn có thể sử dụng để xác định điều kiện. Và bạn chỉ cần thêm những monitor mà mình cần để tránh code dư thừa.

Bạn còn có thể đưa vòa một loại tùy chọn dưới dạng JSON string hoặc JSON variant dễ đọc hơn.

Lý do nên dùng và tránh Conditioner.js cũng giống như Svelte: nếu bạn quan tâm dến footprint của ứng dụng, bạn hoàn toàn nên sử dụng thư viện này. Thư viện cũng có một tương lai không được chắc chắn cho lắm. Hơn nữa, vì có thể xác định custom monitor với Conditioner.js, bạn có thể áp dụng được với tất cả thể loại loading module phức tạp.

Theo mặc định Conditioner.js tương thích với các trình duyệt hỗ trợ ES5. Giống với Vue.js và Svelte, một số ES5 shims cụ thể có thể giúp bạn tương thích tốt hơn.

Conditioner.js’ website GitHub repository có rất nhiều thông tin cho bạn.

Kết

Dù không phải là fan của framework, tôi vẫn tin rằng cả Vue.js và Svelt đang đi đúng hướng trong việc giải quyết các vấn đề vẫn còn tồn động với framework, thậm chí còn có khả năng định hướng cả một ngành công nghiệp đi theo các kiểu cách phát triển và định vị mới.

Theo như những gì tôi thấy, việc phát triển ứng dụng theo hướng xoay quanh component là hướng đi rất hay. Conditioner.js rất khó có thể gây biến động mạnh mẽ, nhưng hiển nhiên đã có thể giải quyết nhiều vấn đề thường gặp trong các ứng dụng gốc component, khiến công cụ trở thành phần bổ trợ tuyệt vời cho các hình thái loading phức tạp hơn.

Theo bạn những thư viện nào sẽ vươn lên trong năm 2017? Hãy chia sẻ trong phần comment nhé!

Techtalk via Sitepoint