Series này gồm 4 phần chính:

• Phần 1: Giai đoạn trước 2005 – JavaScript là cái thứ chi chi
• Phần 2: Giai đoạn 2005-2010 – Thời đại của jQuery
• Phần 3.1: Giai đoạn 2010-2014 – JS Framework trỗi dậy
• Phần 3.2: Giai đoạn 2010-2014 – NodeJS náo loạn giới front-end
• Phần 4.1: Giai đoạn 2014 đến nay – NodeJS, BabelJS, Webpack, ReactJS – Tứ đại thiên vương (tạm thời) của JS
• Phần 4.2: Web front-end hiện đại có gì hot

Sau phần trước, chúng ta đã biết tại sao NodeJS, một thứ được dùng để viết JavaScript back-end, lại có thể chen chân vào giới front-end.

Giai đoạn từ 2014 đến nay chính là giai đoạn hoàng kim của JavaScript. JavaScript có mặt khắp mọi nơi, code được đủ mọi thứ nhưng cũng là giai đoạn loạn lạc nhất.

Trong phần này, chúng ta sẽ tìm hiểu về JavaScript hiện đại, những công nghệ được sử dụng trong các dự án mới nhất nhé.

Babel – Người anh hùng thầm lặng

Ở giai đoạn này, do có nhiều người sử dụng, JavaScript nhận được rất nhiều sự quan tâm, nhiều developer tham gia phát triển và cải tiến ngôn ngữ này.

Chuẩn ES6 của JavaScript ra đời với nhiều cú pháp mạnh mẽ hơn, keyword tiện dụng hơn (class, arrow function, …). Thế nhưng (lại nhưng), một vấn đề “khá bự” nữa lại lòi ra!

Code ES6 chỉ chạy tốt trên những trình duyệt kiểu mới như Chrome, Safari bản mới nhất. Những trình duyệt cũ như Internet Explorer, Safari trên iOS cũ không thể nào chạy được JavaScript ES6.

Cộng đồng mạng vò đầu bức tai vì bế tắc. Viết ES6 thì tiện hơn, nhưng không chạy được. Viết ES5 thì chạy được, nhưng code vừa dài vừa mệt. Vậy người đì vê lốp pơ phải làm sao?

Cái khó ló cái khôn, BabelJS ra đời vào khoảng cuối 2014, với tên gọi ban đầu 6to9, lộn, 6to5, thấy 69 là nhầm… BabelJS là một transpiler, có khả năng chuyển code chuẩn ES6 thành code ES5.

Về sau, babel được dùng để transpile JSX của React, .vue của VueJS thành JavaScript. Nhờ có Babel thì mới có React, có VueJS bây giờ.

Có thể nói, Babel là nền tảng của các dự án web hiện đại, là người hùng thầm lặng sau lưng React, VueJS.

Sự thoái trào của AngularJS

Để biết tại sao AngularJS “thất thời”, chúng ta cùng quay lại khoảng đầu năm 2013, giai đoạn hoàng kim của AngularJS (Angular 1).

Nhà nhà dùng AngularJS, người người dùng AngularJS. Các dự án từ lớn đến nhỏ, hễ là SPA (Single Page Application) thì đều nghĩ đến AngularJS.

Thế nhưng, sau khi dùng AngularJS được một thời gian trong các dự án lớn, developer bắt đầu nhận ra những điểm khó chịu của nó:

• Với các view lớn và phức tạp, nếu code không cẩn thận, performance của AngularJS sẽ rất tệ, về có quá nhiều watcher, làm digest cycle chạy chậm.
• Sử dụng two-way data binding làm logic của code trở nên rối, khó debug hơn trong nhiều trường hợp.
• Không thể debug được template trong view của AngularJS, code không chạy đúng cũng chẳng biết vì sao.
• AngularJS rất khó học, nhiều khái niệm lẫn lộn (factory vs service vs provider), directive rất mạnh nhưng cũng khó hiểu và khó dùng

Khoảng tháng 3 năm 2013, Facebook ra mắt một thư viện mới mang tên ReactJS, một thư viện thuần chỉ dùng để render view. Theo quảng cáo của Facebook, library này có vài điểm hay ho như:

• Performance cao hơn AngularJS
• Dễ học dễ hiểu hơn AngularJS. Cá nhân mình thấy để dùng ReactJS, ta cần nắm vững ít khái niệm hơn, biết ít hàm hơn nên có thể học nhanh hơn (Mình tự học Pluralsight hết 2 hôm cuối tuần là code dự án được rồi)

Giới developer có thêm lựa chọn mới. Đứng trước tình cảnh này, Google không chịu ngồi yên! Họ cho ra đời Angular 2, sử dụng TypeScript, cú pháp hoàn toàn khác AngularJS.

Lời tuyên bố này chẳng khác gì lời khai tử AngularJS. Các dự án đã dùng AngularJS thì vẫn tiếp tục được phát triển, bảo trì. Nhưng dân tình dần dần chuyển sang React, Angular 2, Vue…

AngularJS đã tỏa sáng và lụi tàn như thế đấy!

ReactJS đã chiếm lĩnh giới front-end như thế nào?

Giờ chúng ta cùng làm quen với ReactJS – JS library hot nhất vịnh Bắc Bộ trong giai đoạn hiện nay. Để đạt được vinh quang này, ReactJS cũng đã phải trải qua nhiều bước thăng trầm trong đời.

Ra mắt tháng 3/2013, với sự đỡ đầu của bố để Facebook, React cũng gây dựng được một số tiếng vang nhất định,

Tuy nhiên, khác với jQuery hay AngularJS; khi vừa ra đời, React chưa được cộng đồng đón nhận, vì một số lý do như:

• Với React, ta phải viết code JavaScript, HTML trong cùng một file JSX, điều này trái với suy nghĩ “Separation of Concern” của đa phần developer.
• React chỉ là thư viện để render view, do đó để làm một ứng dụng hoàn chỉnh, ta phải kết hợp với các thư viện khác: fetch để gọi AJAX, react-router để chuyển trang… Developer đã quen sử dụng framework “ăn sẵn” như AngularJS nên không muốn lựa chọn nhiều với React.
• Với React, ta có thể viết template dưới dạng HTML/JSX, sau đó compile lại thành JS với Babel. Setup việc compile này hơi hơi phức tạp (hồi đấy mình mò hết 2 tiếng), gây nản lòng những người muốn học
• Các framework cũ thường chia application thành page (trang web). Với React, ta chia application thành component (các thành phần nhỏ hơn). Cách nghĩ này ban đầu khá xa lạ với các developer.

Thế nhưng, càng sử dụng, giới developer càng thấy thích thú với ReactJS vì nó có cú pháp đơn giản, dễ học, dễ debug, việc phân tách component giúp ta dễ tái sử dụng code hơn.

ReactJS trở thành con cưng của cộng đồng lập trình front-end nhwf những chuyện sau:

• Developer bắt đầu tạo ra các boilerplate, tức các project mẫu đã tích hợp đủ ReactJS, các thư viện cần dùng để làm một ứng dụng. Boilerplate phổ biến nhất chính là create-react-app, được chính Facebook khuyên dùng.
• Create-React-App giúp ta tạo project React trong 30s, thay vì 3 tiếng như trước, giúp beginner dễ tiếp cận hơn nhiều.
• React Native ra đời, cho phép ta dùng React để viết ứng dụng di động chạy trên Android và iOS, với peformance không thua ứng dụng Native.

Sau 5 năm đổi mới không ngừng, ReactJS đã đạt ngôi vị bá chủ của cộng đồng front-end (Theo sát sao là VueJS) như thế đấy.

Tạm kết

Qua phần này, chúng ta đã biết về sự xuất hiện của Babel, sự thoái trào của AngularJS, về chuyện ReactJS trở nên hot như thế nào!

Ở phần sau, cũng là phần cuối, chúng ta sẽ tìm hiểu tổng quan về cấu trúc một dự án front-end hiện tại, cùng những công nghệ phổ biến đang được sử dụng nhé!

 

30s quảng cáo

Anh Lê Quang Song bạn mình, CEO của Cybersoft.vn vừa mở một khóa học về Full Stack JavaScript với NodeJS/Express, ReactJS, MongoDB.

Bạn nào có hứng thú có thể tìm hiểu thêm tại http://bit.ly/cyber-full nha. Nếu bạn đăng kí học thì nhớ dùng mã giới thiệu TDCD_FULL để được giảm 300k và tặng áo thun nhé :D.