3 Thư Viện JavaScript hứa hẹn nhất trong năm
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 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.
|
1
2
3
4
5
6
|
< div id = "app" >
< p > { { message } } < / p >
< button v - on : click = "reverseMessage" > Reverse Message < / button >
< / div >
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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 ;
} ,
} ,
} ) ;
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
< 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?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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:
|
1
2
3
|
< 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:
|
1
2
3
4
5
6
|
< ! -- 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òa một loại tùy chọn dưới dạng JSON string hoặc JSON variant dễ đọc hơn.
|
1
2
3
4
5
6
|
< ! -- 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.
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.
Sitepoint
Có thể bạn quan tâm:
- Hướng dẫn lập trình nhận dạng hình ảnh với Opencv
- Hiện trạng triển khai hệ thống giao thông thông minh tại Việt Nam
- Cải tiến qui trình phần mềm?
- Các chuyên gia Java mà bạn nên theo dõi
- Lập trình: cũng chỉ là viết?
- Danh sách 6.500 website mua bán rao vặt, tốt để quảng cáo, SEO và tạo backlink
- Các giai đoạn ứng dụng nền tảng điện toán di động (mobility) trong doanh nghiệp
- Alexa Alexa Rank là gì? cách tăng Alexa Rank hiệu quả nhất
- Smartphone, cơn sóng thần càn quét thị trường thương mại điện tử
- Mặt trái của ngành kiểm thử phần mềm là gì?
- BYOD là gì ?
- Chiến lược Mobile-First giúp doanh nghiệp & startup tạo ra sản phẩm tốt hơn và tiếp cận thị trường nhanh hơn
DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...
Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>
