JS Truyền Kì – Chương 3 : Quần hùng cát cứ

Mục lục

• Chương 1 – Lược sử giang hồ
• Chương 2 – Võ lâm dậy sóng
• Chương 3 – Quần hùng cát cứ
  • Hồi thứ bảy – Framework mê hồn trận
  • Hồi thứ tám – Cái sướng và cái khổ của bách tính
  • Hồi cuối – Bí kíp phòng thân

Tóm tắt phần trước: NodeJS và hàng loạt các framework ra đời, làm giang hồ đại loạn.
Lưu ý: Chương này có ích cho hầu hết các bạn front-end developer hoặc những bạn làm việc nhiều với JavaScript. Nếu bạn là back-end developer hoặc không dùng javascript thì đọc giải trí cũng được.

Hồi thứ bảy – Thế cục giang hồ

Thuở xưa, chỉ cần rành Javascript và jQuery là có thể độc tẩu giang hồ; thành thục một chút kĩ thuật AJAX nữa là có thể cưỡi mây lướt gió, tiếu ngạo quần hùng. Tiếc thay, thời đấy không còn nữa. Hiện tại, chỉ tính riêng front-end đã có hơn 63 JavaScript framework, con số này vẫn tiếp tục gia tăng (nguồn).

Dân đen rơi vào cảnh lầm than. Mấy chục framework này hợp lại thành một trận đồ bát quái làm điên đảo từ những coder kinh nghiệm cho tới dân mới vào nghề. NodeJS và vô số thư viện/framework front-end lẫn back-end… làm giang hồ đã loạn nay càng thêm loạn. Xin kể sơ qua một số framework JS đang làm mưa làm gió (nguồn):

Ember, Angular, React, Express, Grunt, Bower, npm, Broccoli, Gulp, Lodash, Underscore, rxjs, Knockout, SocketIO, Threejs, D3, Backbone, Ionic, Angular2, React Native, Redux, Alt, Reflux, Webpack, Bluebird, Q, Express, Mocha, Jasmine, Chai, Koa, Less, Sass, Postcss, Impressjs, Revealjs.

Để bình về thế cuộc, xin trích hai câu thơ trong “Vịnh Framework” do Hoàng thiếu hiệp, môn chủ của Tôi đi code dạo Phái sáng tác.

Mấy ai còn nhớ ngày xưa
Ji Qi (jQuery), A Jắc (AJAX) là thừa sức chơi
Bây giờ khổ lắm ai ơi
La (AngularJS) trên, Rét (React) dưới, tội đời thằng cu.. đơ (coder)

Giang hồ đồn rằng mấy câu thơ lưu danh thiên cổ này được sáng tác khi tác giả đang thưởng rượu ngắm trắng. Kẻ hèn này thì nghĩ rằng nó được sáng tác khi thằng tác giả đang phê cần ngáo đá (Bằng chứng là phía trên nó bảo là hai câu, phía dưới lại lòi ra tận bốn câu).

Đại hiệp ở chương 1 : Ngày xưa rành jQuery tại hạ sống ổn lắm. Giờ võ lâm loạn quá, chẳng biết nên luyện thêm Angular hay React 😥

Muốn biết dân tình (developer) dưới thời loạn sống như thế nào, mời xem tiếp hồi sau.

Hồi thứ tám – Cái sướng và cái khổ của bách tính

Tạp Khúc Gia triều Nguyên từng nói: “Hưng, bách tính khổ; vong, bách tính khổ”, ý là đã chấp nhận kiếp developer thì đời nào cũng khổ. Nói vậy mà không phải vậy. Sự ra đời, cạnh tranh của các framework làm công việc của developer trở nên dễ dàng hơn nhiều. Mọi thứ đều có sẵn, chỉ cần sử dụng thư viện/framework là xong:

• Muốn dựng web với nodejs ư? Chỉ cần cài express. Muốn viết RestAPI ư? Dùng express cũng chơi được luôn.
• Muốn viết app di động ư? Ionic (dựa trên Angular) có mặt. Nếu cần mạnh mẽ hơn thì chơi React Native (dựa trên React) luôn.
• Muốn viết JS chuẩn ES6 ư? Chỉ cần cài Gulp, cài Babel là xong.

Song, bên cạnh cái sướng, cái khổ cũng nhiều lắm. Với các developer có kinh nghiệm, việc có quá nhiều framework làm họ cảm thấy khó khăn khi lựa chọn công nghệ phù hợp để theo đuổi. Với các developer mới vào nghề, mọi chuyện còn tệ hơn nhiều.

Thân developer 12 bến nước

Ngày xưa, nếu muốn học web tĩnh, kẻ nhập môn chỉ cần làm 3 bước sau để bắt đầu:

1. Mở Notepad
2. Gõ HTML, sau đó dán link CDN của jQuery, Angular vào
3. Bắt đầu code

Còn bây giờ, muốn làm một trang web đơn giản, chỉ hiển thị 2 dòng, ta phải làm khoảng 11 bước như sau:

1. Cài NodeJS
2. Tạo project mới bằng cách gõ npm init
3. Cài Webpack
4. Tạo 1 file webpack.config.js, sửa file cho phù hợp
5. Cài Babel
6. Tạo file .babelrc và sửa file .babelrc
7. Cài React
8. Mở Nodepad hoặc IDE
9. Tạo 1 file index.js, một file index.html
10. Trong file index.html trỏ đường dẫn tới file index.js
11. Bắt đầu viết code trong file index.js

Dĩ nhiên, nếu làm theo 11 bước thì code sẽ “sướng” hơn. Tuy nhiên, điều tại hạ muốn nhấn mạnh là thực trạng của JavaScript: quá nhiều framework ra đời, làm cuộc sống của developer trở nên phức tạp hơn và gây vô số khó khăn cho những người mới nhập môn. Các developer Tây Dương bày tỏ quan điểm trên:

• http://developers.redhat.com/blog/2016/02/03/angular-react-and-javascript-framework-fatigue/
• https://www.allenpike.com/2015/javascript-framework-fatigue/
• https://coderexample.com/dealing-javascript-framework-fatigue/

Ở thời loạn thế này, muốn sống sót không đơn giản. May thay, tại hạ đã thu thập một số bí kíp phòng thân của các bậc tiền bối. Mời quí vị đọc các bí kíp này trong hồi cuối.

Hồi kết – Bí kíp phòng thân

Theo kinh nghiệm của mình và các tiền bối, thứ quan trọng nhất mà mọi developer cần có là căn bản. Nhớ nhé, học căn bản JS chứ đừng ham hố học framework trước. Căn bản này là những gì:

• Cơ bản JavaScript. Làm sao để luyện? Tìm đọc series JavaScript sida, phản phác qui chân và một số sách khác nhé.
• Học NodeJS và tìm hiểu npm. Đây là bắt buộc vì NodeJS dùng cho rất nhiều thứ chứ không chỉ front-end.
• Tập làm quen với ES6 vì đây là tương lai của JavaScript. Với Babel, ta đã có thể viết JS để chạy trên các trình duyệt cũ.
• Một số pattern và khái niệm cơ bản: Callback, Class, Module, Prototype, Promise, Ajax Rest API. Nhớ tìm hiểu các mô hình MVC và MVVM luôn.

Học xong những thứ này, bạn đã có căn cơ vững chắc trên con đường front-end. Bây giờ ta có thể tập trung chuyên sâu vào một framework (AngularJS, React) tùy theo yêu cầu công việc. Nếu đi theo con đường back-end với NodeJS, bạn cần tìm hiểu thêm về các thư viện cơ bản NodeJS, cơ chế pipe, MongoDB .. trước khi cắm đầu vào các framework như Express hoặc Sail.js nhé.
Hãy nhớ kĩ, đừng chạy theo đám đông mà hãy tìm hiểu và suy tính rõ ràng trước. Xin mượn hai câu thơ để mô tả thái độ mà một front-end developer nên có giữa thời loạn thế.

Sống yên vui, danh lợi mãi coi thường.
Tâm bất biến, giữa dòng đời vạn biến

Giữa thế cuộc xoay vần như hiện nay, ta có hai lựa chọn. Một là để mình bị cuốn theo thời thế, chạy theo những phù hoa lấp lánh. Hai là rèn căn bản thật vững để có thể giữ lòng “bất biến”. Có căn cơ vững chắc, mọi võ học hay framework đều có thể dễ dàng nắm tới tay.
Một số lời khuyên bổ ích khác:

• https://medium.freecodecamp.com/a-cautionary-tale-of-learning-to-code-my-own-eddb24d9d5a7#.i1t9d8g8d
• https://medium.freecodecamp.com/overcoming-javascript-framework-fatigue-741dac9370ee#.n51uv0rx8

JS Truyền Kì – Chương 2: Võ lâm dậy sóng

Mục lục

• Chương 1 – Lược sử giang hồ
• Chương 2 – Võ lâm dậy sóng
  • Hồi thứ tư – Thời đại hậu Ji Qui
  • Hồi thứ năm – Ma đầu thức tỉnh
  • Hồi thứ sáu – Giang hồ đại loạn
• Chương 3 – Quần hùng cát cứ

Tóm tắt phần trước: JavaScript ban đầu bị xem là một ngôn ngữ “cùi bắp” ở client side. Với sự ra đời của AJAX và jQuery, JS bắt đầu được sử dụng nhiều hơn 

Hồi thứ tư – Thời đại hậu Ji Qui

Trước đây, hầu hết developer ở server side đều viết được chút ít JS ở client side. Sau này, JS được dùng để xử lý DOM, validate data, truyền nhận dữ liệu từ server. Việc này làm developer phải bỏ nhiều thời gian để code JS ở client side hơn. Vì lẽ đó, giang hồ dần phân hóa thành Tiền Tận Tông (Front-End developer) và Hậu Tận Tông (Back-end developer).

Môn sinh Tiền Tận Tông là những kẻ làm việc với giao diện, làm việc với HTML/CSS và viết JavaScript. Môn sinh Hậu Tận Tông là những kẻ làm việc với server side, thiết kế hệ thống và database, xử lý dữ liệu bằng PHP, C#, Java. Nhiều kẻ trâu bò xin bái sư luôn cả hai tông môn, không kiêng dè gì cả.

Giải thích về back-end và front-end cho dân ngoại đạo

Bọn học đồ trong Hậu Tận Tông bản tính rất hung hăng hiếu chiến. Nội bộ tông này được chia thành nhiều phái nhỏ (C# phái, Java phái, PHP phái, C++ phái), không khí lúc nào cũng giương cung bạt kiếm. Các phái này luôn tranh cãi qua lại về vấn đề võ công của tao là mạnh nhất, chiêu thức của tao là nhanh nhất.
Trái lại, nhân sĩ Tiền Tận Tông rất đoàn kết một lòng. Sau khi thành thạo JS, họ chuyển qua học Ji Qui Đại Pháp, thành thạo cả hai thứ này là đủ vốn liếng hành tẩu giang hồ. Thuở ấy, một số công pháp (thư viện) JS trôi nổi như YUI, MooTool, cũng có vài kẻ theo học, nhưng cũng chẳng cạnh tranh lại Ji Qui thần thánh.
Năm Kỉ Sửu (2009), một gã ma đầu thức tỉnh, một bộ công pháp đản sinh. Như một viên đá ném vào giữa mặt hồ phẳng lặng, giang hồ đang yên bình bỗng dậy sóng.
Bộ công pháp này tên gì? Nó vô song bá đạo đến nhường nào? Xem hồi sau sẽ rõ.

Hồi thứ năm – Ma đầu thức tỉnh

Chuyện kể rằng, xưa kia có một gã kì tài võ học võ công cao ngút trời. Gã nhập môn bằng JS và tự thân tu luyện đến cảnh giới phản phác quy chân. Tiếc thay, một sợi khôn xe, tay lẻ khó vỗ. Do biết mỗi JS, gã chỉ có thể yên phận làm front-end developer đến hết đời.
Phẫn chí, gã lên núi Tùng Sơn gieo mình xuống vực tự sát. Nhờ phúc duyên thâm hậu, gã té núi không chết, lại rơi trúng sơn cốc của Độc Cô Cầu Bại. Trong cái rủi có cái may, gã nhặt được hai quyển Hà Đồ, Lạc Thư thất truyền đã lâu. Sau ba ngày ba đêm bế quan nghiền ngẫm những điều trong sách, gã hợp nhất Google Engine V8 và một số tuyệt học khác lại làm một, sáng tạo ra một bí tịch với tên gọi NodeJS.

Một truyền thuyết khác về NodeJS, bảy phần giả ba phần thật

Ngày NodeJS ra đời, cả võ lâm sửng sốt (Nguồn). JavaScript nay chạy được cả back-end và front-end. Môn sinh Hậu Tận Tông cười vì mình có thêm 1 ngôn ngữ để lập trình server-side. Môn sinh Tiền Tận Tông thì lòng nhao nhao như lửa đốt, háo hức được viết những dòng code server-side đầu tiên bằng JS, ngôn ngữ lọt lòng của họ.
Trước cơn sóng dữ do mình gây ra, gã đại ma đầu chỉ cười nhạt, nụ cười thơ ngây như một đứa nhóc junior dev vừa code xong chương trình đầu tiên. Tên của gã là … Ryan Dahl.

Chân dung Ryan Dahl đại ma đầu, cha đẻ của NodeJS lừng lẫy giang hồ

Tháng 5 năm Kỉ Sữu (2009), Thiên Hùng tinh vẫn lạc, báo hiệu một thời đại loạn thế bắt đầu. Tiền Tận Tông đoàn kết nay bỗng chia bè kết mảng. Kẻ thích giao diện thì ở lại Tiền Tận Tông làm Front-End developer chơi với JavaScript, jQuery. Kẻ thích làm việc với hệ thống, với dữ liệu thì chuyển qua Hậu Tận Tông làm Back-End developer chơi với NodeJS và MongoDB. Huynh đệ anh em, mới ngày trước còn ôm vai bá cổ nhau, ngày nay vì NodeJS mà tiên phàm cách biệt.
Một bộ phận khác có thực tài, học lén tinh hoa của cả Tiền Tận Tông và Hậu Tận Tông, kéo nhau lên Hoa (Quả) Sơn khai tông lập phái. Mãn Tắc Tông ra đời từ đây. Giang hồ gọi môn sinh của phái này là Full-Stack Developer.
Nội bộ lục đục, liệu tương lại Tiền Tận Tông sẽ thế nào? Giang hồ loạn lạc ra sao khi NodeJS xuất thế? Mời quí vị xem tiếp hồi sau.

Hồi thứ sáu – Giang hồ đại loạn

Năm Canh Dần (2010), Google gia tộc bố cáo một công pháp mới với tên gọi Ăn Gô Đại Pháp (AngularJS) cho bình dân bá tánh. Bản thân Ăn Gô khá mạnh mẽ, hỗ trợ double-binding dữ liệu, dependency injection, ajax, giúp công việc lập trình web trở nên rất nhanh chóng và hiệu quả. Lại có Google gia tộc hậu thuẫn, Ăn Gô Đại Pháp nhanh chóng lớn mạnh.  Người người tu luyện, nhà nhà tu luyện Ăn Gô La, trong đó có cả bần đạo.

Nhà nhà, người người dùng AngularJS

Các cụ có câu con gà tức nhau tiếng gáy, trâu buộc thì ghét trâu ăn, quả là không sai. Do ganh ghét sự nổi tiếng của Ăn Gô Đại Pháp, năm Quý Tị (2011), Facebook gia tộc bố cáo thiên hạ rằng Ăn Gô La đại pháp chậm chạp, nặng nề, cho xuất thế một bộ chiêu thức gọi là Rối An Tâm Pháp (React).
Rối An Tâm Pháp chỉ là một bộ tâm pháp cường thân kiện thể, không thể dùng để rèn luyện nội công (chỉ là một library để render view). Do đó, Facebook lại tiếp tục công bố Phờ Lắc thần công và Rì Đắc thần công (Flux and Redux). Nghe đồn Rối An Tâm Pháp và Rì Đắt Thần Công kết hợp lại sẽ thành một bộ tuyệt học có thể dời non lấp bể. Nhân sĩ giang hồ vốn nhẹ dạ cả tin, lại tiếp tục tu luyện.
Do chịu ảnh hưởng của React, Google lại khai tử Ăn Gô Đệ Nhất (Angular 1), cho ra đời Ăn Gô Đệ Nhị (Angular 2). Những kẻ nào đã học Angular 1 đành ngậm ngùi tự cung,… nhầm, tự phế võ công học lại Angular 2. Phẫn nộ ngập trời, oán than đầy đất nhưng bọn người Google Gia Tộc vẫn chẳng mảy may quan tâm. Thế mới thấy ngao ngán cho cái sự đời.

Vì Ăn Gô Đại Pháp và Rối An Tâm Pháp mà môn sinh Tiền Tận Tông nay huynh đệ tương tàn

Theo chân Ăn Gô Đại Pháp và Rối An Tâm Pháp, người người rủ nhau khai tông tập phái: Meteor, VueJS, Express, Knockout, SocketIO, Ionic Framework… Tiền Tận Tông trước kia vốn đoàn kết nay bỗng năm bè bảy mảng, chẳng khác gì Hậu Tận Tông ngày xưa.
Đọc đến đây, hẳn các đạo hữu cũng thắc mắc: Tình hình võ lâm (tức JavaScript framework) náo loạn như thế, nên học thứ gì, bỏ thứ chi? Đừng lo, những phân tích thời cuộc, bí kíp phòng thân trong loạn thế sẽ có trong chương cuối: Quần hùng các cứ. Mong các đạo hữu đón đọc.

Hết chương 2

(Note: AngularJS là framework, ReactJS chỉ là library. Bản chất của chúng khác nhau, kẻ nào so sánh 2 thứ này với nhau sẽ bị giang hồ phỉ nhổ).

JS Truyền Kì – Chương 1: Lược sử giang hồ

Lời tựa

Javascript là một ngôn ngữ mạnh mẽ, được sử dụng ở rất nhiều nơi từ front end cho đến back end. Phàm là lập trình viên, hễ mang cái danh web developer đều phải biết chút ít JavaScript.
Vì lẽ đó, hôm nay tại hạ sẽ dùng phong cách kiếm hiệp pha lẫn hư cấu để kể dăm chuyện xưa về lịch sử JavaScript và đánh giá chung về tình hình JavaScript hiện tại. Vì có một phần hư cấu nên các đạo hữu đọc xong nhớ kiểm chứng lại thông tin nhé.
Tác phẩm võ hiệp này bao gồm 3 chương, hoặc có thể dài hơn tùy hứng của tác giả:

• Chương 1 – Lược sử giang hồ
  • Hồi thứ nhất – Cội nguồn võ học
  • Hồi thứ hai – Anh hùng xuất thế
  • Hồi thứ ba – Thiên hạ thái bình
• Chương 2 – Võ lâm dậy sóng
• Chương 3 – Quần hùng cát cứ

Hồi thứ nhất – Cội nguồn võ học

Vào cái thuở hồng hoang của Web học, các bậc tiền bối sử dụng Perl, CGI để làm web động. Dần đà, một số ngôn ngữ mạnh hơn như PHP, Java, C# ra đời. Các ngôn ngữ này chạy trên server, đọc dữ liệu từ thư khố (database) và hiển thị thành HTML/CSS.
Bản thân HTML khá cứng nhắc, chỉ có thể dùng hiển thị dữ liệu. Các bậc trưởng lão trong Nội Các Tông (Netscape) thấy cần phải sáng tạo ra một công pháp mới để gắn vào trình duyệt của mình nhằm cạnh tranh với IE của Microsoft. Đại sư Brendan Eich đã đảm đương trọng trách này. Ngài vào một huyệt động bế quan 10 ngày, sau đó khai phá ra một công pháp mới. Ngài đặt tên nó là Giá Vân Sờ Ríp – JavaScript (JS).

Brendan Eich đại sư – Người sáng lập ra JavaScript

Thuở mới được tạo ra, chức năng của JS còn khá hạn chế: xử lý DOM, validate dữ liệu ở client-side. Bản thân công pháp có khá nhiều khuyết điểm, lại không hỗ trợ OOP nên JS bị người đời coi là thứ “tà môn”. Những kẻ tu luyện JS bị xem là tà mà ngoại đạo, bị giới lập trình chính thống (C#, Java) khinh rẻ.
Năm Bính Tuất (2006), với sự ra đời của Ajax, JS nay đã có thể giao tiếp được với server side. Như hổ mọc thêm cánh, JS một bước lên trời, được sử dụng ngày càng rộng rãi. Thế nhưng ví phỏng đường đời bằng phẳng cả, anh hùng hào kiệt có hơn ai! JS còn phải trải qua trăm đắng nghìn cay, qua bao cuộc bể dâu chìm nổi trước khi dương danh thiên hạ.
Muốn biết số phận JS về sau thế nào, xem hồi sau sẽ rõ. 

Hồi thứ hai – Anh hùng xuất thế

Sau khi Ajax ra đời, JS dần dần được sử dụng rộng rãi. Trước kia, mỗi lần muốn tải dữ liệu, người dùng phải tải lại toàn bộ trang. Với AJAX, JS có thể kết nối tới server, lấy dữ liệu và hiển thị rất mượt mà. Vào cái thuở khai thiên lập địa của Web Application (2005-2007), Google Maps và Gmail  sử dụng JS và Ajax, chạy mượt như Desktop app làm nức lòng bao lập trình viên.
Tiếc thay, trời xanh đố kị anh tài, con đường tiến thân của JS cũng lắm gập ghềnh trắc trở. Những năm 2006-2008, dân tình sử dụng IE, Opera, Firefox để duyệt web. Mỗi trình duyệt lại có 1 cách viết JS khác nhau, làm bao nhiêu dân đen (lập trình viên) phải bêu đầu mẻ trán. Sau một thời gian dùng JS, kẻ thì cảm thấy mệt mỏi, người thì bị tẩu hỏa nhập ma nên quyết định bỏ tà đạo để quay về đường ngay nẻo chánh, trở lại code C#, Java, PHP.
May thay, trời không phụ người có lòng. Theo lẽ đời tự ngàn xưa loạn thế xuất anh hùng. Năm Bính Tuất (2006), tại BarCamp NYC, một thiếu niên tên Jogn Resig, mắt phượng mày ngài, dáng như Tống Ngọc, mặt tựa Phan An hiện thân, công bố một cuốn bí kíp mang tên Ji Qui Thần Công (jQuery).

John Resig rhiếu hiệp, giờ đang làm cho Khan Academy

Cuốn bí kíp này thay đổi giang hồ ra sao? Mời xem hồi sao sẽ rõ.

Hồi thứ ba – Thiên hạ thái bình 

John Resig thiếu hiệp ngang trời xuất thế, thật đúng với câu anh hùng xuất thiếu niên. Ji Qui Thần Công của chàng ảo diệu vô song; nó hợp nhất thiên hạ, chỉ cần viết code một lần là chạy được trên nhiều trình duyệt, đồng thời làm JS dễ sử dụng hơn (xử lý DOM, ajax, animation, …). Giang hồ dậy sóng, những kẻ đang tu luyện JS liền đổ xô đi nghiền ngẫm sự ảo diệu của jQuery.
Các bậc đại sư cũng góp sức hoàn thiện jQuery để nó ngày càng mạnh mẽ hơn. Cho đến giờ, jQuery vẫn chiếm 96.2% thị phần các framework, được 70% các website sử dụng (nguồn). Dân nhập môn lập trình Web ngày nay vẫn phải học và thành thạo jQuery.
Sự ra đời của Ji Qui Thần Công làm cho cuộc sống của lũ dân đen (developer) thoải mái hơn nhiều. Ngày ấy, chỉ cần thành thục Javascript và jQuery là có thể độc tẩu giang hồ; biết thêm một chút kĩ thuật AJAX nữa là đã có thể cưỡi mây lướt gió, tiếu ngạo quần hùng.

Một đại hiệp cho hay: Với Ji Qui thần công, ta có thể vá trời lấp bể, nhấc tay làm mây, lật tay làm mưa, không gì không làm được

Thế nhưng, con tạo xoay vần, sao dời vật đổi. Năm Kỷ Sữu (2009), một gã ma đầu đã gây nên một sự kiện làm chấn động võ lâm. Muốn biết sự kiện này là gì, mời quí vị xem chương sau sẽ rõ.