3 thư viện JavaScript được kỳ vọng nhất trong năm 2017

Năm 2016 đã trôi qua. Đâ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. Không thể đếm xuể các thư viện và framework mới đã được ra mắt.

Tuy nhiên, hiện nay nhiều lập trình viên đang cảm thấy mệt mỏi với hệ sinh thái của JavaScript, do có quá nhiều công cụ và tùy chỉnh cần thiết để thiết lập một dự án JavaScript “hiện đại”.

Để giúp bạn và tôi dễ ngủ hơn, trong khuôn khổ bài viết hôm nay chúng tôi xin đưa ra 3 framework/thư viện triển vọng cho lập trình front-end.

Vue.js

Nếu trước đây bạn không chú ý đến Vue.js, thì bây giờ đã đến lúc bạn nên thay đổi. Vue.js là một framwork JavaScript bé tí teo.

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 loại: 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.

<div id=”app”>
<p>{{ message }}</p>
<button v-on:click=”reverseMessage”>Reverse Message</button>
</div>

import Vue from ‘vue’

new Vue({
el: ‘#app’,
data: {
message: ‘Hello World!’,
},
methods: {
reverseMessage: function () {
const reversedMessage = this.message
.split(”)
.reverse()
.join(”);

this.message = reversedMessage;
},
},
});

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 loại 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:

<p>{{ message }}</p>
<button on_click=”reverseMessage()”>Reverse Message</button>

<script>
export default {
data () {
return {
message: ‘Hello World!’,
}
},
methods: {
reverseMessage () {
const reversedMessage = this.get(‘message’)
.split(”)
.reverse()
.join(”);

this.set({
message: reversedMessage,
});
}
}
};
</script>

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?

import moment from ‘moment’;

export default class RelativeTime {
/**
* Enhance given element to show relative time.
* @param {HTMLElement} element – The element to enhance.
*/
constructor(element) {
this.startTime = moment(element.datetime);

// Update every second
setInterval(() => this.update(), 1000);
this.update();
}

/**
* Update displayed relative time.
*/
update() {
element.innerHTML = this.startDate.toNow();
}
}

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

<time datetime=”2017-01-01″ data-module=”ui/RelativeTime”>2017</time>

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:

<!– Show RelativeTime only if it is visible to the user –>
<time datetime=”2017-01-01″ data-module=”ui/RelativeTime” data-conditions=”element:{visible}”>2017</time>
<!– Keep showing RelativeTime after it was visible to the user –>
<time datetime=”2017-01-01″ data-module=”ui/RelativeTime” data-conditions=”element:{was visible}”>2017</time>

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ào một loại tùy chọn dưới dạng JSON string hoặc JSON variant dễ đọc hơn.

<!– JSON variant –>
<div data-module=”ui/RelativeTime” data-options=’unit:”seconds”‘>…</div>
<!– Or good old JSON –>
<div data-module=”ui/RelativeTime” data-options='{“unit”:”seconds”}’>…</div>

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 và GitHub repository có rất nhiều thông tin cho bạn.

Nguồn bài viết : https://www.sitepoint.com