Thế giới web năm 2015 sẽ có nhiều thay đổi mang tính cách mạng, dưới đây tôi điểm qua một số nét chính. Bên cạnh mỗi cái tên sẽ là chỉ số đánh giá mức độ cần kíp của skill đó - theo quan điểm cá nhân thôi :)
1. Web Components: 10/10
Web Components là một trong những thuật ngữ quan trọng nhất hiện nay. Nó bao gồm 4 khái niệm chính yếu: Custom Elements, HTML Imports, HTML Templates và Shadow DOM.
Với Web Components, khả năng của HTML và trình duyệt sẽ được mở rộng ra vô hạn. Đó là một thế giới web hoàn toàn mới, tràn đầy sức mạnh sáng tạo. Theo đó, web developers sẽ phải thay đổi quan niệm về cấu trúc hồ sơ DOM truyền thống, cấu trúc trang web, cũng như cấu trúc files/folders của hệ thống web. Có thể cách làm cũ ( viết trang HTML, nhúng các files CSS và JS vào) sẽ trở nên không còn hợp lý nữa. Thay vào đó, người ta cần tách ra nhiều components và phối hợp chúng lại thành trang web. Giống như cách chúng ta chia 1 mặt bằng ra nhiều mảnh cho nhiều nhà thầu đến xây dựng vậy. Quy trình làm web vì thế tất yếu cũng sẽ thay đổi theo. Mỗi component là 1 tổ hợp hoàn chỉnh của HTML, CSS và JavaScript được đóng gói trong 1 scope riêng biệt, có thể tương tác lẫn nhau nhưng không ảnh hưởng lẫn nhau. Hiện nay, nếu bạn nhúng cả jQuery 2.1 và jQuery 1.2 vào cùng trang web, sẽ chỉ có 1 thư viện chạy, và thế nào cũng có lỗi xuất hiện đâu đó. Nhưng với Web Components, bạn có thể dùng nhiều version của cùng library/framwork trên cùng trang web. No problem.
Trong tưởng tượng của tôi, tương lai có thể sẽ ra đời 1 dạng Web Components Market nơi các developers làm và bán components như là người ta đang bán Widgets và jQuery Plugins hiện nay vậy.
Angular 2 sẽ tận dụng khả năng của Web Components để xử lý lại một số vấn đề chưa tốt trong Angular 1.x như databinding, templating… Đặc biệt Tranclusion trong Angular 1 sẽ bị loại bỏ, thay vào đó Angular 2 sử dụng Shadow DOM.
Hiện có nhiều cách tiếp cận Web Components, như Polymer của Google, X-tags của Mozilla, và Bosonic. Hy vọng rằng tất cả rồi sẽ hợp lại trong 1 ecosystem thay vì cứ phân tán như vậy.
Theo đánh giá của tôi, Web Components là kiến thức bắt buộc phải có đối với front-end developer hiện nay.
2. ES6: 9/10
Đặc tả ECMA-262 biến JavaScript mà chúng ta đang dùng trở thành một thứ gì đó hoàn toàn mới lạ. Có lẽ không nhiều hơn 10% javascripter trên thế giới hiện nay đủ khả năng chơi với nó. Nhưng tôi tin rằng cho đến cuối năm, con số đó sẽ tăng lên hơn 50%. Hiện đã thấy nhiều framework cho Node.js và browser được viết trên đặc tả ES6, như WaigoJS, Aurelia… IO.js đã hỗ trợ ES6 ngay từ khi ra mắt.
Các chức năng nổi bật trong ES6 gồm arrow function, subclassable built-ins, và collections (Maps, Sets…) Những chức năng khác như classes, modules, module loaders, promises, proxies… thì những developers xông xáo chắc cũng đã làm quen trên Node.js hoặc thông qua các polyfills rồi. Bên cạnh đó, ES6 cũng thêm vào không ít methods cho các đối tượng dựng sẵn.
Angular 2 sẽ dùng ES6 Modules thay cho Angular Modules ở v1. Nếu bạn muốn tiếp tục theo đuổi Angular, bạn sẽ cần phải nghiên cứu sâu hơn về ES6.
3. TypeScript: 6/10
Lâu nay JavaScript vẫn bị các lập trình viên khó tính xem là ngôn ngữ không mạnh, và nguyên nhân chính là do nó thiếu những ràng buộc chặt chẽ về kiểu (type). TypeScript là JavaScript được mở rộng thêm khả năng định kiểu, modules, classes, interfaces, namespaces… vô cùng phức tạp chẳng kém gì các ngôn ngữ hệ thống. Tôi chưa thực sự dùng cái này nhưng nhìn code khá đẹp mắt, ở mức sơ đẳng thì cũng giống như khai báo schema trong Mongoose thôi!
Thoạt tiên tôi có ý nghĩ rằng những thứ này có thể làm hỏng tính đơn giản, linh hoạt của JavaScript. Nhưng nhìn sang PHP, phải chăng nó cũng đang đi cùng một hướng. Cả PHP và JavaScript đều bắt đầu như những ngôn ngữ scripting thuần túy, dần hoàn thiện theo thời gian để trở thành những ngôn ngữ lập trình chặt chẽ, powerful. Đặc biệt là khi JavaScript ngày nay không chỉ quanh quẩn trên browsers mà đã tràn lên cả servers và handset devices. Nó cần phải mạnh mẽ hơn, chắc chắn hơn để có thể làm chủ các vùng đất nhạy cảm đó.
TypeScript là 1 đóng góp đáng giá của Microsoft cho thế giới web. Các tác giả của Angular đã tạo ra AtScript cho Angular 2 nhưng sau cùng vẫn phải loại bỏ để dùng TypeScript. Tuy nhiên bạn không cần quá đặt nặng TypeScript lúc này. Nó chỉ đơn giản là syntax, dùng nhiều sẽ quen.
4. SystemJS: 10/10
Trong vài năm trở lại đây, module pattern trở thành khái niệm phổ biến nhất trong kiến trúc nền tảng JavaScript. Từ module pattern mới nảy sinh ra 2 khái niệm khác là AMD (Asynchronous Module Definition) và DI (Dependencies Injection). Đã có nhiều giải pháp cho vấn đề AMD như CommonJS, RequireJS, curl.js… Nhưng có vẻ đã đến lúc kết thúc cuộc đua, và tôi đoán rằngSystemJS sẽ thay thế tất cả, vì nó đi cùng ES6; làm việc với mọi compiler; tương thích mọi phương thức module loading cũ; hỗ trợ map, path, bundles… Thậm chí nó có thể thay thế cả lệnh require quen thuộc trên Node.js server.
AMD là khái niệm mà web developer phải nắm vững từ ít nhất 1 năm trước, bằng không bạn sẽ chỉ mơ hồ đứng sau các framworks mà không hiểu tại sao nó phải viết như thế, cái gì khiến nó phải tổ chức như thế… Nếu bây giờ bạn vẫn chưa vận dụng AMD được một cách tự nhiên thì phải lập tức khắc phục hạn chế này.
5. jspm: 10/10
Không phải bower, browserify… mà là jspm sẽ chấm dứt thời kỳ cát cứ phân tranh của các package management tools trên browsers. Tôi tin chắc điều đó vì jspm được thiết kế cho SystemJS, hỗ trợ mọi định dạng module từ RequireJS, CommonJS đến ES Harmony. Nếu các bạn để ý rằng bower chỉ làm 1 việc duy nhất là chạy lệnh ngầm tải repositories từ GitHub về thư mục bower_components ở local, thì jspm làm việc với cả GitHub và NPM, cho khả năng xử lý trùng lặp, version index, và tìm kiếm tốt hơn rất nhiều.
Tuy ít được biết đến như bower, nhưng jspm với sự tương thích SystemJS/ES6 chắc chắn sẽ trở thành giải pháp hoàn chỉnh cho vấn đề quản lý packages và dependencies trên front-end.
Trên đây là những kiến thức dành cho front-end developers mà tôi tin rằng sẽ vô cùng hot vào nửa cuối năm 2015. Sẽ rất tuyệt nếu các bạn để mắt đến chúng và thử trải nghiệm ngay từ bây giờ.
Links tham khảo:
