Chuyện coding

Bạn biết JS, jQuery và nghĩ rằng mình đã thành thạo JavaScript? Hãy để hiện thực vả bạn sml

8 Comments
  • 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 công việc chỉ là cắt HTML/CSS thì không ai trả front-end mức lương thế này đâu nha :3

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
Cách viết front-end cũng mỗi thời mỗi khác!

 

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.
Với React, ta chia ứng dụng thành nhiều component, page cũng là component nốt

 

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.

AngularJS và Backbone thì đang thoi thóp, còn CoffeeScript thì cũng sắp tử ẹo rồ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é!

Thử setup React với Webpack + Babel từ đầu, thay vì dùng CreateReactApp nhé! Sẽ là một trải nghiệm thú vị đấy ahihi

 

 

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

8 thoughts on “Bạn biết JS, jQuery và nghĩ rằng mình đã thành thạo JavaScript? Hãy để hiện thực vả bạn sml”

  2. Em chào anh! Em đang rất rối nên mong được sự chia sẻ của các anh ạ
    Em sn 2000 hồi thi đh cũng đc 25đ và đỗ 1 trường đh top cao. Nhưng do một vài lý do( ko phải ăn chơi hay nghịch ngợm gì đâu ạ) nên sau 1 năm theo học em chuyển trường và chuyển ngành. Cũng do 1 phần em suy nghĩ nông nổi nên vừa ra em đã theo học lập trình tại Bachkhoa-aptech( do trước lúc thi đh em cũng thích lập trình r nhưng do gđ nên em chọn 1 trg đh khác). Hiện tại em đang rất stress do đợt tết này về em bị ảnh hưởng rất lớn từ mn xung quanh về vđề ‘bỏ đh r theo 1 trường trung cấp’, từ khi về quê đi đến đâu em cũng bị nói là tại sao lại bỏ học đh , rồi nhiều ng cũng gặp riêng em rồi khuyên đại loại kiểu học trung cấp rất khó khăn cho sau này.. thời gian này em suy sụp rất nặng, mất ngủ suy nghĩ về bản thân và em cũng thấy qua 1 kỳ r mà bản thân mới chỉ tiếp cận cơ bản HTMl,CSS,js.. và làm web cơ bản khiến em càng suy nghĩ thêm.
    Em mong nhận đc sự chia sẻ của anh,liệu em có đang quá stress hay quá nông nổi ko? Và cho em hỏi tấm bằng đh có quan trọng lắm ko ? Em có nên ôn thi lại đh ko?
    Em rất cảm ơn a mong nhận đc hồi đáp của a sớm ạ

    Like

    Reply

    2. Ha ha, hồi ở ĐH tớ cũng stressed, chán đời ghê hồn lắm. Thêm vào đó tớ ốm tong teo, mặt mụn, lùn, nên còn bị tới mấy con bồ nó cho vào xoọc rác.Được cái tớ ko dính ma túy và bằng mọi giá, toàn thân, toàn trí, toàn sức lực “quất” cho xong cái bằng ĐH. Dạo mới ra trường, cắn răng, xả thân đi làm những jobs IT thật rẻ bèo để có kinh nghiệm. Nếu mỗi ngày đúng 7 giờ sáng, tớ mời cậu chạy bộ 30 phút, mỗi tuần 4-5 lần, làm đều 4-5 năm, cậu dám chơi ko? Nếu ko vượt qua được “boot camp” (trại huấn nhục), mai này gặp dự án CỰC KỲ KHÓ/khách hàng mua software CỰC KỲ HẤN LẠN, về nhà rúc nách mẹ à? Ủa quên, cám ơn bạn Hoàng đã chỉ giáo thêm về js thời nay.

      Like

      Reply

    3. Học trung cấp cũng được cơ mà họ chỉ dạy các kiến thức để đi làm thôi, logic với kiến thức nền tảng không nhiều. Muốn lên tầm thì phải tự học thêm về kiến thức cơ bản nhiều, từ kiến trúc phần mềm, giải thuật, OOP, …. Học vậy nhanh ra trường kiếm việc nhưng để lên tầm senior, lead, … Thì cần phải nỗ lực nhiều.

      Cơ mà hình như các trường đều cho sinh viên bảo lưu kết quả học tập tới 2 năm mà ta?

      Like

      Reply

  3. 1 bài viết quá hay a, nào có dịp a viết bài sâu hơn về mục *làm cho nó nhanh hơn* đi anh!

    Like

    Reply

  5. Thì em muốn anh làm 1 series về javascript để có thể giới thiệu những cái hay ở trong đó, ví dụ cách dùng Dom, xử lý 1 số cái. Em cũng đang học về javascript và chỉ gọi là ở mức basic thôi, nhưng khi xem clip phỏng vấn của anh thì em thấy mình rất là non kém trong phần này, cứ tưởng là sử dụng 1 số cái javascript là xong, hóa ra nó còn rất nhiều cái ở trong đó.

    Like

    Reply

Leave a comment