Front-end React là gì

Dù đang là sinh viên hay đã làm việc trong ngành công nghệ thông tin về mảng lập trình web thì những gì mình sắp giới thiệu dưới đây đều là những kỹ năng thiết thực và quan trọng để bạn trở thành 1 lập trình viên frontend tốt hơn cũng như giúp bạn tìm 1 công việc phù hợp ưng ý được dễ dàng khi hầu hết các công ty đều yêu cầu các kĩ năng này khi tuyển dụng.

Lập trình viên frontend là gì?

Trong các bài viết trước, mình đã giới thiệu đến các bạn 7 hướng đi của 1 lập trình viên web cũng như lộ trình trong sự nghiệp lập trình viên web cho những ai còn đang phân vân chưa biết mình nên trở thành 1 frontend, backend hay devops thì hôm nay mình chỉ tập trung nói về lập trình viên frontend. Chúng ta bắt đầu thôi:

Để bạn có cái nhìn rõ hơn mình xin giới thiệu sơ về mảng lập trình web 1 chút, cơ bản gồm 2 phần chính, với yêu cầu những kỹ năng, kiến thức công nghệ khác nhau: frontend sẽ là thứ người dùng tương tác trực tiếp (user interface giao diện người dùng) và backend là những gì đằng sau nó và làm cho 1 website hoạt động. Tóm lại, frontend sẽ chăm sóc client-side, còn backend chính là server-side.

Nếu ví von 1 trang web như cơ thể người thì HTML sẽ là khung xương, phần cơ bản nhất. Để cơ thể vận động được cần có cơ và gân, hay để 1 dynamic web chạy cần có JavaScript và các ngôn ngữ lập trình khác. Cuối cùng để xem cơ thể đó xấu hay đẹp cần da thịt đắp lên hay nói cách khác muốn 1 website đẹp đẽ thì sẽ cần tới CSS để trang trí trang web đó được bắt mắt.

Điều này cần được phân biệt rõ để bạn có thể xác định những kỹ năng cần thiết cho 1 lập trình viên frontend.

10 kỹ năng phải có cho công việc lập trình viên frontend

HTML / CSS ️

Thành thục HTML5, CSS3 là bắt buộc phải có. Mình biết chắc trong lúc tìm hiểu bạn đã thấy 2 cái tên này xuất hiện khắp nơi. Bạn sẽ không thể tìm được công việc lập trình frontend nào mà không yêu cầu việc sử dụng hiệu quả 2 ngôn ngữ này. Giờ hãy kể sơ qua về nó 1 chút nhé:

HTML hay HyperText Markup Language là ngôn ngữ đánh dấu tiêu chuẩn được dùng để tạo các trang web. Ngôn ngữ đánh dấu là cách bạn ghi chú trong tài liệu kỹ thuật số để có thể được phân biệt với văn bản thông thường. Đây là phần cơ bản nhất bạn cần để phát triển 1 trang web.

CSS hay Cascading Style Sheets là ngôn ngữ định kiểu theo tầng được dùng để giới thiệu phần tài liệu bạn đã tạo với HTML. HTML đến trước tiên để tạo nền tảng cho trang web, CSS tiếp đó được dùng để tạo layout, màu sắc, font chữ và style cho trang web của bạn.

Cả 2 ngôn ngữ này rõ ràng rất thiết thực để bạn trở thành 1 lập trình viên frontend. Nói gọn hơn nữa rằng nếu không có HTML/CSS thì sẽ không có lập trình web.

Mẹo nhỏ xíu : Bạn nên comment trong code của mình từ khi viết HTML, tuy dài và công phu hơn nhưng mọi chuyện sau cùng sẽ dễ dàng hơn.

JavaScript / jQuery / DOM ️

1 công cụ quan trọng khác trong bộ đồ nghề frontend của bạn chính là JavaScript (JS). Trong khi HTML là ngôn ngữ đánh dấu và CSS là ngôn ngữ định kiểu, thì JS mới chính là ngôn ngữ lập trình thực thụ. Điểm khác nhau là gì? Nếu HTML và CSS quyết định phần trình bày của 1 trang web, thì JS sẽ quyết định phần chức năng.

Trong vài trường hợp nhất định, 1 trang web siêu đơn giản có thể sẽ không cần tới, nhưng trong trường hợp bạn cần các tính năng tương tác như âm thanh, video, trò chơi, khả năng cuộn, hoạt ảnh trên trang thì JS chính là công cụ bạn sẽ dùng để triển khai chúng. (Hiện tại CSS cũng đã được phát triển để có khả năng xử lý 1 vài tác vụ này rồi.)

Bạn không cần phải vội vàng trong việc sớm thành thạo jQuery hay những framework khác, vì không hề đơn giản. Hãy thử những gì cơ bản nhất như tìm hiểu kỹ DOM, 1 phần không thể thiếu trong việc lập trình web, mình xin giới thiệu 1 chút về các thành phần DOM:

• DOM document: lưu trữ toàn bộ thành phần trong tài liệu của trang web.
• DOM element: truy xuất đến 1 thẻ HTML thông qua các thuộc tính như id, tên class, tên thẻ HTML.
• DOM HTML: thay đổi giá trị nội dung và thuộc tính các thẻ HTML
• DOM CSS: thay đổi định dạng CSS của thẻ HTML
• DOM Event: gán các sự kiện như onclick(), onload() vào thẻ HTML
• DOM Listener: lắng nghe các sự kiên tác động lên 1 thẻ HTML
• DOM Navigation: quản lý, thao tác với thẻ HTML, thể hiện mối quan hệ cha và con của các thẻ HTML
• DOM Node, Nodelist: thao tác với HTML thông qua object.

1 điểm nổi trội để giúp JS trở nên cần thiết là nhờ vào sự tồn tại của các thư viện như jQuery, 1 bộ sưu tập các plugin và extension làm nó nhanh và dễ sử dụng JS hơn trên web của bạn. jQuery sẽ nhận các tác vụ thông thường vốn yêu cầu nhiều dòng code JS và nén chúng vào 1 format mà có thể thực thi được chỉ trong 1 dòng code duy nhất. Đây là sẽ lợi thế lớn khi bạn dùng JS, trừ khi bạn không thích tiết kiệm thời gian (mình đùa thôi).

CSS và các framework của JavaScript ️

CSS và các framework JavaScript là các bộ sưu tập của các file CSS hay JS mà sẽ làm khá nhiều việc cho bạn bằng việc cung cấp chứng năng thường gặp (như đăng nhập vào 1 trang web hay tìm kiếm blog). Thay vì bắt đầu bằng 1 tài liệu văn bản trống thì bạn bắt đầu bằng 1 file code mà đã có sẵn khá nhiều JS tuyệt vời trong nó rồi.

Các framework thật ra cũng có điểm mạnh và điểm yếu của nó, và thực sự quan trọng để chọn framework tốt nhất cho loại website bạn muốn dựng. Ví dụ: vài framework JS khá tuyệt cho việc dựng phần giao diện người dùng phức tạp, trong khi những cái khác lại xuất sắc trong việc hiển thị tất cả nội dung trang web của bạn.

Tuyệt hơn nữa là bạn có thể dùng nhiều framework cùng nhau. Việc xài cặp Bootstrap với framework JS khác như AngularJS là chuyện bình thường. Phần nội dung sẽ được chăm sóc bởi Angular và phần giao diện với Bootstrap (và 1 ít CSS trong đó nữa).

Vì bạn sẽ dùng CSS và JS suốt trong sự nghiệp lập trình web của mình, cũng như nhiều dự án sẽ bắt đầu với các yếu tố style và code tương tự, nên có kiến thức thâm sâu về những framework này sẽ cực kì hữu ích cho bạn trong việc trở thành 1 lập trình viên web có năng lực được các công ty chào đón.

Ngoài ra, mình cũng xin giới thiệu sơ về 1 framework nổi tiếng về responsive mà mình đã nhắc tới ở trên là Bootstrap. Phải công nhận là mọi thứ điều trở nên thuận tiện và dễ dàng hơn cùng Bootstrap, và gần như trở thành 1 thứ không thể thiếu khi làm responsive nên việc thành thục nó là điều rất tuyệt.

Tuy nhiên, nó khá nặng và trong vài trường hợp đặc biệt không sử dụng được bạn sẽ phải tự viết CSS, nên hãy làm chủ kỹ năng CSS của mình ngay từ đầu. Theo mình cách tốt nhất là nên sử dụng nó 1 cách hợp lý và đúng lúc.

Tiền xử lý CSS CSS Preprocessing ️

CSS Preprocessing

Thêm 1 kỹ năng cần thiết khác có liên quan tới CSS! CSS bản thân nó đã luôn cần thiết, nhưng cũng có đôi lúc bị giới hạn. 1 trong những giới hạn rõ nhất là bạn không thể xác định biến, chức năng hay thực thi các phép tính toán học.

Vốn là 1 vấn đề đáng ngại khi 1 dự án dần tăng trong khoản scale và code base, và bạn sẽ thấy mình tốn quá nhiều thời gian cho việc viết những code lặp đi lặp lại chỉ để thực hiện các thay đổi. Như các framework CSS (và JS), Tiền xử lý CSS cũng là 1 cách để làm cho công việc lập trình web của bạn được dễ dàng và linh hoạt hơn.

Sử dụng các bộ tiền xử lý CSS CSS preprocessor như Sass, LESS hay Stylus, bạn sẽ có khả năng viết code bằng ngôn ngữ của bộ tiền xử lý (cho phép bạn được nhiều thứ vốn khá khó chịu với CSS cũ). Bộ tiền xử lý rồi sẽ chuyển đổi code đó tới CSS để nó hoạt động được trên web của bạn.

Giả sử bạn quyết định điều chỉnh sắc độ màu xanh lam đang dùng trên web. Với bộ tiền xử lý CSS, bạn chỉ phải thay đổi giá trị hex ở 1 chỗ thay vì phải chuyển tất cả phần CSS của mình và thay đổi giá trị hex mọi nơi.

Hệ thống quản lý phiên bản Version Control / Git ️

Version Control / Git

1 trong những kỹ năng cũng quan trọng không kém và tuy không có cái tên HTML, CSS hay JS nào trong đó nhưng vẫn đủ vì sự liên quan mật thiết!

Sau tất cả nỗ lực với việc marking-up bằng HTML, styling với CSS và lập trình với JS, bạn sẽ trải qua vô số lần sửa đổi khi phát triển.

Nếu có gì đó trục trặc xảy ra trong suốt chặn đường, điều cuối cùng bạn sẽ muốn làm là bắt đầu lại từ đầu. Version control là quá trình truy lùng và điều chỉnh những thay đổi tới source code của bạn để điều tệ hại đó không xảy ra.

Phần mềm version control, như Git 1 nguồn mở cực ổn định, chính là công cụ bạn sẽ dùng để truy ra những thay đổi để bạn có thể trở về 1 phiên bản trước đó và tìm ra những gì sai sót mà không cần phải làm rối tung hết mọi thứ.

Và đây là 1 kỹ năng thú vị mà bạn (và cả khách hàng hay sếp của bạn nữa) sẽ rất hài lòng với nó.

Thiết kế responsive ️

Thiết kế responsive

Nhớ lại ngày xưa cách duy nhất để bạn có thể lướt những trang web là sử dụng các máy tính để bàn. Ngày nay chúng ta có vô số thiết bị như máy vi tính, điện thoại, máy tính bảng để làm việc đó. Những trang web đó dù bạn có xài thiết bị gì đi nữa, chúng cũng đều làm tốt công việc hiển thị của mình dù bạn không cần phải làm gì cả.

Đó là nhờ vào phần thiết kế responsive. Hiểu rõ các nguyên tắc thiết kế responsive và cách triển khai chúng ở phần coding của mình chính là mấu chốt cho lập trình frontend.

1 thứ thú vị cần ghi nhớ về thiết kế responsive nữa là nó cũng là 1 phần nội tại trong các framework CSS như Bootstrap mà mình đã kể ở trên. Tất cả những kỹ năng này đều được kết nối với nhau, nên khi học 1 kỹ năng này, bạn cũng sẽ bổ trợ cho những kỹ năng khác cùng 1 lúc.

Testing / Debugging ️

Testing / Debugging

Từ 1 trang web kinh doanh nhỏ lẻ cho tới 1 trang quốc tế cho ngân hàng trực tuyến, bug là thứ dù rất đáng ghét nhưng sẽ luôn song hành với bạn trong sự nghiệp lập trình (trừ khi là bạn không code nữa).

Và để giữ mọi thứ tiếp tục phát triển, bạn cần phải test code của mình để tìm bug suốt chặng đường, nên khả năng test và debug cũng nằm trong danh sách những kỹ năng không thể thiếu cho các dev frontend.

Có khá nhiều phương pháp test cho lập trình web. Test chức năng functional testing sẽ trông hộ 1 phần chức năng cụ thể trên web của bạn (như 1 form hay database) và đảm bảo rằng nó thực hiện đúng mọi chức năng mà bạn đã code.

Test đơn vị unit test cũng là 1 phương pháp. Nó test từng bit nhỏ nhất của code mà chịu trách nhiệm cho 1 thứ gì đó trên web của bạn và xem từng cá thể đó có hoạt động chính xác hay không.

Test là 1 phần lớn cho quá trình phát triển frontend, may thay, đã có sẵn những framework để giúp bạn làm điều này. Những chương trình như Mocha và Jasmine được thiết kế để giúp bạn tăng tốc và đơn giản hóa quá trình testing của bạn. (trừ khi bạn muốn làm quen với em tester nào đó ở chỗ làm).

Các công cụ phát triển trình duyệt ️

Các công cụ phát triển trình duyệt

Dù thế nào đi nữa, những người dùng cuối cùng sẽ tương tác với web của bạn thông qua 1 trình duyệt web. Cách web của bạn được hiển thị bởi các trình duyệt này sẽ là phần quan trọng quyết định thành quả của bạn có thành công hay không.

Tương tự như testing hay debugging mình đã đề cập ở trên, tất cả trình duyệt web hiện đại đều đi kèm với developer tools các công cụ phát triển trình duyệt. Nó cho phép bạn test và tinh chỉnh các trang trong chính trình duyệt đó, theo nhiều cách cụ thể để thể hiện cách trình duyệt diễn giải code của bạn.

Các chi tiết cụ thể sẽ khác nhau giữa các trình duyệt, nhưng không sao, thường các developer tools bao gồm trình kiểm tra và bảng điều khiển JavaScript.

Inspector trình kiểm tra cho phép bạn thấy runtime HTML trên trang của bạn trông ra sao, CSS nào được liên kết với từng yếu tố trên trang, còn cho phép bạn edit phần HTML/ CSS và xem những thay đổi trực tiếp khi thực hiện. Bảng điều khiển JS còn cho phép bạn xem bất kỳ lỗi nào xảy ra khi trình duyệt cố gắng thực thi mã JS của bạn.

Mẹo nhỏ xíu : Hãy tìm hiểu sự khác nhau giữa các trình duyệt phổ biến (như Chrome, Firefox, Safari, Opera, Cốc Cốc hay gần đây nhất là Edge). Điều thú vị là mỗi trình duyệt trên các nền tảng khá nhau sẽ hiển thị phần CSS khác đi 1 chút.

Ví dụ như dù sử dụng chung nền tảng -webkit- nhưng CSS của Chrome, Safari và Edge sẽ không giống hệt nhau đâu. Tốt nhất là hãy thử code của mình trên các trình duyệt khác nhau vì người dùng có vô số sự lựa chọn hay sở thích để sử dụng.

Dựng web và công cụ tự động/hiệu năng web ️

Dựng web và công cụ tự động / hiệu năng web

Chắc bạn cũng biết bộ ba HTML/ CSS và JS là những công cụ chính để phát triển frontend. Trong khi hầu hết các kỹ năng khác đều giúp cho các công cụ đó hiệu quả hơn hay giúp test trang của bạn và sửa lỗi. Chúng ta sẽ tiếp tục với chúng trong phần này với việc dựng web, công cụ tự động và hiệu năng web.

Bạn có thể code ra những trang web xịn sò nhất nhưng nếu nó chạy 1 cách rùa bò trên thiết bị của người dùng thì mọi chuyện lại thành công cốc. Hiệu năng web là về việc mất bao lâu để trang web của bạn có thể load được. Nếu bạn có vấn đề với điều này thì mình có sẽ chỉ cho bạn vài cách để cải thiện chúng:

Tối ưu hóa hình ảnh: scaling và nén các hình ảnh cho hiệu năng web cao nhất.

Thu gọn CSS và JavaScript: gỡ bỏ tất cả những ký tự không cần thiết mà không làm thay đổi các chức năng.

Thực hiện các tác vụ này để tăng hiệu năng web có thể hơi tốn thời gian, nhưng đây cũng là lý do công cụ tự động tồn tại. Những chương trình như Grunt và gulp có thể được dùng để tự động tối ưu hóa hình ảnh, thu gọn CSS và JS, và các công việc khác về hiệu năng web. Để trang web được tốt nhất, việc làm quen với những điều này là thực sự cần thiết.

Dòng lệnh ️

Dòng lệnh Command Line

Sự gia tăng của giao diện người dùng đồ họa Graphic User Interfaces (GUI) vào máy tính là 1 trong những điều tuyệt nhất từng xảy ra. Sẽ dễ dàng hơn nhiều để trỏ và nhấp vào 1 menu đầy tương tác và sống động thay vì phải ngồi gõ và gõ.

GUI khá hấp dẫn cả về việc phát triển web lẫn coding nữa. Chúng khá ổn định và tiện dụng. Nhưng 1 GUI đa năng sẽ có những hạn chế với 1 vài ứng dụng nhất định. Sẽ có lúc bạn cần mở 1 terminal trên máy tính để nhập các dòng lệnh để nhận được những gì bạn cần.

Đó là điểm khác biệt giữa việc máy tính của bạn chỉ mang lại những gì có sẵn trên bề nổi và có thể nhận được những gì bạn cần bằng cách đào sâu hơn bằng cách thủ công.

Ngay cả khi những công việc chính của bạn vẫn được thực hiện xong bằng GUI, các công ty sẽ thực sự ấn tượng và tín nhiệm bạn hơn với các kỹ năng frontend của mình nếu bạn thành thạo các dòng lệnh.

Kỹ năng mềm ️

Cho dù có tích góp được bao nhiêu kỹ năng trong sự nghiệp của bạn, sẽ có những thứ luôn cần thiết cho công việc của bạn bên cạnh, đó là kỹ năng mềm. Nhất là đối với dân kỹ thuật thường các bạn cũng hơi rụt rè hay không được tốt trong việc giao tiếp. Hãy luôn trau dồi sự chuyên nghiệp của mình bất kỳ lúc nào trên con đường sự nghiệp đầy thú vị và sáng tạo này.

Tổng kết

Trở thành 1 lập trình viên frontend vừa khó mà vừa dễ, hãy luôn trau chuốt, tỉ mỉ và chi tiết từng chút cho web hay ứng dụng của bạn được mượt mà và bắt mắt. Hãy luôn kiên nhẫn và luôn trao dồi thêm kiến thức, công nghệ mới nữa nhé.

Chúc các bạn sớm trở thành 1 lập trình viên frontend đầy kỹ năng và thành công trên sự nghiệp.

TopDev

Có thể bạn muốn xem thêm:

• Tính năng Frontend Presets của Laravel 5.5
• Roadmap Frontend Developer Con đường tắt để trở thành cao thủ Frontend Developer
• Làm thế nào để trở thành một Frontend Developer

Xem thêm tuyển dụng Front End hot nhất trên TopDev