REVIEW QUÁ TRÌNH ĐẠT ĐƯỢC CERTIFICATE KHÓA HỌC "FRONT END DEVELOPMENT LIBRARIES" CỦA FREECODECAMP

Tóm tắt

Không nên học khóa học này vì nó đã khá lỗi thời.

Các bạn có thể chỉ cần đọc những điểm hay, điểm dở của khóa học này mà mình đã chắt lọc ở bên dưới, để có thêm một số thông tin hữu ích mà có thể bạn sẽ áp dụng được ít nhiều vào các dự án các bạn tham gia sau này.

Phần 1. Bootstrap - 31 steps:

• Giao diện của mini project mà chúng ta sẽ build trong quá trình học phần Bootstrap khá là xấu.

• Thời kỳ hoàng kim của Bootstrap có lẽ đã rơi vào khoảng 10 năm trước rồi. Còn thời điểm hiện tại, có lẽ Bootstrap chỉ còn được dạy trong một số trường Đại học khi học đến môn Lập trình Web. Hoặc là một số dự án cũ vẫn đang hoạt động ok và không có nhu cầu cập nhật công nghệ cho giao diện của mình.

• Thực tế thì cũng sẽ chẳng có ai có thể chắc chắn được rằng tỉ lệ các dự án đang còn sử dụng Bootstrap ở thời điểm hiện tại là bao nhiêu. Nếu có ai dám nói chắc chắn thì cũng chỉ là nói phét 🤫 Cả đời bạn chỉ làm một vài hoặc một vài chục dự án chứ mấy, không nên lấy trải nghiệm của bản thân để khẳng định cho tổng thể. Rồi có bạn thì đưa ra số liệu Weekly Downloads trên npm, nhưng mà bạn ơi nếu anh em dev lên trang chủ của bootstrap rồi copy link CDN về thì sao? Chưa kể là tải về dùng xong thấy không phù hợp rồi xóa bỏ luôn thì sao? Thế nên là những số liệu đó cũng chỉ mang tính tham khảo thôi.

• Ở dự án của mình thì hiện tại cũng không còn sử dụng bootstrap nữa, vì bootstrap cung cấp rất nhiều component mà trong đó bọn mình không sử dụng đến. Chưa kể là dùng bootstrap cũng phải override lại hết, nếu không muốn trang web của mình trông giống y xì những trang web khác sử dụng bootstrap mặc định. Nhưng từ "bootstrap" vẫn thỉnh thoảng được anh em nói với nhau, nhất là khi mình trao đổi với anh em Designer. Họ hay bảo là màn hình này anh chia thành 12 cột như bootstrap ấy. Ok mình nghe cái thì cũng hiểu ý tưởng liền.

• Đó là cách mà bootstrap được lưu trữ của ký ức của chúng ta ❤️

• Với trải nghiệm của cá nhân mình thì các bài học sử dụng Bootstrap ở thời điểm hiện tại không cần thiết lắm cho khóa học này. Thế nhưng, một điểm hữu ích mà mình nghĩ các bạn vẫn có thể chắt lọc ra được từ Bootstrap, đó là cách đặt tên class.

• Việc đặt tên sao cho dễ hiểu đối với anh em lập trình viên rõ ràng vẫn luôn là một vấn đề khá là mất thời gian. Thế nên mình cũng hay đọc document của những "ông lớn" hoặc "đã từng là ông lớn" như Ant Design, Material UI, Element UI, Chakra, Bootstrap, v.v.. để tham khảo cách họ đặt tên, cấu trúc component, các property họ sử dụng trong từng component, để chắt lọc lấy những thứ phù hợp khi build danh sách component cho ứng dụng của mình. Các bạn cũng có thể tham khảo cách đó nhé!

Phần 2. jQuery - 18 steps:

• Tương tự như Bootstrap, jQuery là một thư viện có tuổi đời khá cao rồi. Hồi đầu năm nay mình cũng hơi bất ngờ vì jQuery ra mắt bản 4.0.0 beta. Đúng là vua lì đòn 😅

• Nhưng đến thời điểm hiện tại, có lẽ vẫn còn những ứng dụng bảo trì, project nhỏ hoặc các site wordpress sử dụng jQuery. Thực ra số lượng các trang web như vậy cũng không hề nhỏ nha, các dự án cũ cũng nhiều mà, không phải dự án nào cũng đập đi xây mới, cập nhật theo những công nghệ mới đâu. Miễn sao đáp ứng yêu cầu của ứng dụng là được.

• Thế nhưng kể cả khi jQuery vẫn còn đất dụng võ, thì bạn cũng không nên học theo khóa học này. Vì các bài tập về jQuery ở trong khóa học này cũng khá sơ sài. Làm đến đoạn này bắt đầu thấy góp ý của 1 số anh em lần trước có vẻ đúng đúng rồi đấy. Đây là một khóa học lâu rồi không được update.

Phần 3. SASS - 9 steps:

• Cho anh em nào chưa biết thì SASS là viết tắt của "Syntactically Awesome StyleSheets".

• Đây là một language extension của CSS. Nó cung cấp các tính năng tính năng giúp việc viết và quản lý CSS dễ dàng hơn. Ví dụ như lưu các giá trị trong các biến (thực ra CSS thường cũng có), lồng CSS, tạo các khối CSS có thể tái sử dụng bằng mixin, thêm logic và vòng lặp vào CSS, v.v..

• Tham khảo các anh em Vozer thì tôi thấy anh em chia làm 2 phe: 1 bên thì đã chuyển qua Tailwind CSS và thấy rất khoái (chiếm phần lớn hơn). 1 bên thì chê Tailwind trong như rc rởi lộn xộn, phe này vẫn bồ kết SASS hoặc styled-components hơn.

• Quan điểm cá nhân tôi thì học SASS cũng ok. Nó cũng vẫn đang được nhiều team ưa chuộng chứ không phải là lỗi thời.

• Chỉ tiếc là phần này freeCodeCamp làm ít quá. Có mỗi 9 steps làm không có đã.

Phần 4. React (47 steps) và Phần 5. Redux (17 steps):

• Đây là phần thất vọng nhất đối với mình trong khóa học này. Vì nó quá lỗi thời rồi.

• Phiên bản React được sử dụng trong khóa học là 15.5.0 (release năm 2017, tức là đã cách đây 7 năm rồi). Trong khi phiên bản React mới nhất hiện tại đã là 18.2.0.

• Đó là lý do trong các bài học React của phần này vẫn còn tồn tại những lifecycle method như componentWillMount() - thứ đã bị loại bỏ từ React v16.X.

• Các steps chủ yếu hướng dẫn sử dụng class component, và chúng cũng rời rạc với nhau vì không phải là từ 1 project break ra, mà mỗi step là 1 đoạn code riêng phục vụ cho việc học kiến thức trong step đó.

• Lát xuống "Phần 5 - React và Redux" mình sẽ liệt kê chi tiết cho các bạn thấy những gì khóa học này có, và những gì khóa học này thiếu, mà mình nghĩ anh em nên phải tìm hiểu khi code React.

• Và quan trọng hơn, lý do mình thất vọng nhất ở đây là bên freeCodeCamp họ không bổ sung vào UI của họ hiển thị thời gian cập nhật lần cuối của khóa học này, để mọi người cân nhắc xem có nên học hay không.

• Chứ giờ anh em nào tin tưởng 100% vào freeCodeCamp, học xong khóa này lại nghĩ kiến thức React của mình như thế là ngon rồi thì ...

Phần 5. React and Redux - 10 steps:

• Đây là phần duy nhất tính từ phần 1 cho đến phần 6 mà mình thấy có sắp xếp các steps để cùng nhau tạo nên 1 mini project hoàn chỉnh. Kiểu chia nhỏ các bước của 1 mini project ra thành các hướng dẫn trong từng steps.

• Với bản thân mình thì cách làm này sẽ hay hơn là mỗi steps lại là 1 ví dụ rời rạc, không có gì liên kết với nhau như ở những phần trên.

• Những kiến thức cơ bản về React có trong khóa này:

  • JSX

  • ReactDOM

  • props và state

  • Class component (và 1 xíu xiu functional component) -> Quá tập trung vào class component, ít cập nhật đến functional component

  • Conditional Rendering

  • Composition

  • Component Life Cycle (nhưng bị outdated vì vẫn có componentWillMount(), và thiếu những method bổ sung trong các phiên bản từ 16.X trở đi)

  • List, keys

  • Render props

  • Events

  • Redux, Redux thunk (nhưng không nhắc gì đến Redux Toolkit hay Zustand + Tanstack Query)

• Những kiến thức mà mình thấy anh em nên học thêm ngoài những thứ trong khóa học này:

  • Hooks (useState, useEffect, ...) và custom hooks -> Thiếu hooks thì outdated là rõ rồi.

  • React Router

  • API Calls (SWR, react-query, Axios, Fetch API)

  • Redux Toolkit, Zustand + Tanstack Query

  • Forms (React Hook Form, Formik)

  • Test (cái này thực ra mình cũng ít thấy khóa học cơ bản nào có, nhưng với mình thì đây là một trong những kỹ năng rất quan trọng nếu anh em muốn nâng cao chất lượng code của mình. Anh em có thể tham khảo một số keyword như: Jest, React Testing Library (@testing-library/react), Playwright)

---

Trên đây là bài review của mình sau khi hoàn thành khóa học có cái tên nghe rất ghê gớm của freeCodeCamp, đó là "Front End Development Libraries". Thế nhưng mình thấy chất lượng nội dung bên trong đã không còn tương xứng với cái tên đó nữa.

Hi vọng những review này của mình sẽ hữu ích với các bạn. Hẹn gặp lại 👋

---

LỜI NHẮN

Follow mình trên Facebook "CLB Lập trình - THPT Ngọc Tảo" hoặc kênh Youtube "Tờ Mờ Sáng học Lập trình" để cùng nhau học tập, chia sẻ những kiến thức công nghệ và lập trình hoàn toàn miễn phí nhé!

Facebook CLB Lập trình - THPT Ngọc Tảo: https://www.facebook.com/clb.it.ngoctao/

Youtube Tờ Mờ Sáng học Lập trình: https://www.youtube.com/@tmsangdev

Hẹn gặp lại 👋