Bạn Biết JS, JQuery Và Nghĩ Rằng Mình đã Thành Thạo JavaScript ...

• Bạn biết code HTML, CSS, cắt giao diện tốt và nghĩ rằng mình rành front-end
• Bạn biết JS, jQuery, và nghĩ rằng mình đã thành thạo JavaScript
• Sau khi nghe thằng Code Dạo mỉa, bạn cắm đầu vào học framework như Angular/React và nghĩ rằng mình đã thành thạo front-end??

Hãy đọc bài này để hiện thực vả bạn sml cho tỉnh ra nhé!

Front-end không chỉ có HTML, CSS và cắt giao diện

Ngày xửa ngày xưa, từ cái thời mà giang hồ chỉ có “lập trình web”, chứ chưa phân ra là front-end hay back-end; thì đã tồn tại một công việc mang tên “cắt HTML/CSS”.

Công việc này cũng không quá khó khăn, nhận đầu vào là file PSD (Photoshop) của designer, chuyển nó thành HTML/CSS, đưa cho mấy ông dev gắn dữ liệu từ back-end (C#, PHP, Java) vào. Nếu dùng Bootstrap thì còn viết ít code hơn nữa.

Để làm những thứ này, không cần kĩ năng code quá tốt, chỉ cần kiến thức HTML/CSS tạm đủ là làm được rồi. Biết cách phân tách, đặt tên class, quản lý CSS nữa thì càng hay.

Tuy nhiên, làm front-end developer cần nhiều kĩ năng hơn là chỉ cắt chỉnh CSS (vậy nên lương nó mới cao). Chúng ta vẫn sẽ nhận design từ designer (PSD, Figma, …), chuyển nó thành HTML hoặc các component (tuỳ vào framework bạn đang dùng).

Nếu chỉ vậy thì không có gì đáng nói, ta còn phải dùng JavaScript làm đủ thứ sau:

• Gọi API từ phía back-end để hiển thị dữ liệu
• Cho phép người dùng tương tác với trang, bấm vào nút này thì ẩn/hiện/ đổi dữ liệu ra sao
• Lưu, gửi thông tin người dùng, chuyển trang khi cần v…v

Những điều này cần kĩ năng code, quản lý file, hiểu về framework, cách optimize để front-end load nhanh v…v thì mới làm tốt được; chứ không dễ như cắt CSS đơn thuần.

Front-end nay khác xưa như thế nào?

Ngày xửa ngày xưa (tầm 10 năm trước), gần như 96.69% các trang web cần tương tác bằng JavaScript đều dùng jQuery, do đó chỉ cần biết jQuery là đủ sống an nhàn sung túc rồi!

Hồi đấy, các cụ viết front-end theo cách sau:

• Tải thư viện bằng cách copy link trên cdn bỏ vào, hoặc tải về máy rồi reference đến file javascript
• Source Code viết sao thì trên browser hiển thị vậy
• Logic đơn giản như validation, hiển thị
• Chưa có unit test

Dần dần, các công nghệ front-end mới ra đòi. jQuery vẫn còn được dùng nhiều, nhưng chúng ta có hàng lô đủ thứ khác để học: Angular, Sass, Backbone, Bower, Gulp/Grunt,…

• Tải thư viện và quản lý bằng cách dùng bower
• Source code sao thì browser chạy vậy. Gom nhiều file JavaScript thành 1 file, minify để tăng tốc độ tải bằng cách dùng Grunt/Gulp.
• Logic đơn giản tới phức tạp: DOM manipulation, AJAX call
• Bắt đầu có unit test, setup hơi rườm rà
• Các framework phát triển theo hướng MVVM, một page là 1 view, gắn với 1 controller

Ngày nay, front-end là 1 ngành hot. Tool hỗ trợ quá chời, framework nhiều chóng mặt. Code ta viết 1 đằng, build ra trình duyệt dùng 1 nẻo:

• Sử dụng yarn hay npm để quản lý thư viện
• Source code và code trên browser khác một trời một vực (Do Babel transpile ES6->ES5, JSX->JS. Do Webpack gom code lại)
• Logic lòng vòng phức tạp (DOM render, validation, routing)
• Unit Test khá dễ viết, dễ chạy
• Các framework phát triển theo hướng component, dễ tái sử dụng. Mỗi page sẽ gồm nhiều component ghép lại.

Chịu khó để ý, bạn sẽ thấy các mẫu tuyển dụng không còn tuyển JQuery nhiều nữa! Thay vào đó là đủ thứ hầm bí lù như React/Angular/Vue, TypeScript, Webpack,…  Kiến thức từ thời jQuery sẽ không hữu dụng mấy khi chuyển qua các framework mới!

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)

Nếu quan tâm, các bạn có thể tìm đọc series Lược Sử Lập Trình Web và series JS Truyền Kì trên Blog nhé!

Đừng nghĩ rằng chỉ cần biết framework là được

Thế rồi, sau khi đọc bài này, nghe thằng Code Dạo mỉa mai, bạn quyết định học front-end, cày cuốc những framework hot từ Angular cho tới React. Vậy là đã thành thạo front-end rồi phải không ta?

Thật ra, đây là những kiến thức cần, nhưng chưa đủ. Biết cách dùng React/Angular, bạn có thể làm front-end developer được, nhưng để trở nên thành thạo thì còn phải biết tùm lum từa lưa thứ nữa:

• Quan trọng nhất: Vững kiến thức căn bản và nâng cao thứ nữa (callback, promise, async/await, http request, security event, event loop, ES6 syntax)
• Hiểu cách framework mình dùng hoạt động, càng sâu càng tốt
• Biết cách tổ chức code, cách viết unit test cho dự án front-end, setup linter, cách optimize để code build nhanh hơn, web render nhanh hơn

Framework có thể đến rồi đi! 5-10 năm nữa có thể Angular/React sẽ lỗi thời, nhưng kiến thức căn bản về JavaScript, về các pattern (component, DI, MVC, MVVM) sẽ giúp bạn “sống sot”, dễ dàng học hỏi theo kịp công nghệ mới.

Ngoài ra, thay vì chỉ biết cắm mặt vào công nghệ, hãy thử hiểu sâu những thứ mình dùng hoạt động ra sao!

Mình từng dùng React, Vue mà không biết phép màu phía sau là gì? Vậy có sao không? Chắc là không, nhưng khi gặp lỗi thì không hiểu, không thể customise!

Giả sử bạn có 1 dự án React, code quá nhiều thư viện, lần đầu tải quá chậm. Bạn đang muốn làm cho nó nhanh hơn. Để làm được chuyện đó, bạn phải hiểu sâu rất nhiều thứ:

• Tải chậm vì Webpack + Babel build ra quá nhiều JavaScript.
• Bạn có thể giảm lượng JavaScript bằng cách tinh chỉnh Babel giảm bớt polyfill, build ra ES6 thay vì ES5 (nếu không cần hỗ trợ trình duyệt cũ)
• Bạn cũng có thể áp dụng Lazy Loading để React chia code ra thành nhiều phần, thay vì để thành 1 cục
• Hoặc bạn cũng có thể setup tree-shaking, dùng các library nhỏ hơn, đổi cách import để webpack loại bỏ bớt code thừa
• Nếu rành về back-end, bạn có thể chỉnh server gzip để nén lượng JavaScript gửi về, giúp tăng tốc độ tải

Đấy, nếu chỉ biết cắm mặt dùng và code, khi cần phải thay đổi, đào sâu, bạn sẽ gặp khó khăn. Do vậy học framework rồi, nhưng nhớ học luôn cách nó hoạt độ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ề Lập trình front-end với JavaScript, ReactJS, Angular. Các bạn học xong phần lớn đều có review rất ok, kiếm được việc làm kha khá.

Bạn nào có hứng thú có thể tìm hiểu thêm tại bit.ly/codedao-front, hoặc liên hệ Fanpage của Cybersoft Acedemy để được tư vấn nha.

Bài viết tham khảo thêm

• https://www.smashingmagazine.com/2016/11/not-an-imposter-fighting-front-end-fatigue/
• https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Discover more from Từ coder đến developer - Tôi đi code dạo

Subscribe to get the latest posts sent to your email.

Type your email…

Subscribe

Rate this:

Like Loading...

Related