Frontend là 1 phần của website mà ở đó người dùng có thể tương tác để sử dụng, nói cách khác thì tất cả những gì mà bạn có thể nhìn thấy trên website từ nội dung, font chữ, màu sắc, menu, thanh điều hướng, … đều là frontend, và là thứ mà Frontend Developer tạo ra. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về công việc mà 1 lập trình viên Frontend sẽ đảm nhiệm và cần trang bị những kĩ năng gì để có thể dấn thân vào ngành nghề này nhé.
Frontend Developer là gì?
Lập trình frontend là việc sử dụng các ngôn ngữ HTML, CSS và ngôn ngữ lập trình JavaScript để thiết kế, viết code tạo ra giao diện của các ứng dụng hay trang web dành cho người dùng.
Giao diện mà Frontend Developer tạo ra không chỉ chạy trên 1 loại thiết bị duy nhất mà còn phải đảm bảo nó tương thích với nhiều phần cứng khác nhau từ kích thước màn hình, độ phân giải, hệ điều hành, loại trình duyệt,… giúp mang lại trải nghiệm tốt nhất cho khách hàng. Ngoài việc xử lý các logic ở Client Side, Frontend Developer cũng đảm nhận việc xử lý giao tiếp với phía Backend (Server Side) thông qua việc gửi request API, nhận response dữ liệu và hiển thị kết quả cho người dùng.
Những kĩ năng cần có của Frontend Developer
- HTML và CSS: đây là 2 ngôn ngữ cơ bản nhất để xây dựng nên các building block cơ bản, từ đó tạo ra giao diện của 1 website.
- JavaScript: ngôn ngữ lập trình sử dụng để xử lý các sự kiện, tương tác của người dùng với website, đây cũng là 1 phần không thể thiếu khi muốn tạo ra các website động.
- Các framework, thư viện: để tiết kiệm thời gian xây dựng thành phần của website, chúng ta có thể tận dụng các framework, thư viện có sẵn hiện nay như ReactJS, AngularJS, jQuery, … Ngoài việc tận dụng các thành phần và xử lý có sẵn thì việc sử dụng các thư viện cũng giúp bạn viết code và quản lý source code dễ dàng hơn theo các cấu trúc rõ ràng.
- Responsive: website của bạn không chỉ chạy trên 1 loại màn hình, vì thế cần thiết kế để website hiển thị 1 cách hợp lý và tối ưu trên các loại màn hình khác nhau và cả trên các thiết bị di động.
- Cross-Browser: ngoài việc tối ưu hiển thị trên các kích thước màn hình khác nhau, website của bạn cũng cần chạy được trên nhiều trình duyệt khác nhau như Chrome, Firefox, IE, … mỗi trình duyệt có những đặc thù riêng, CSS, JS hỗ trợ cũng khác nhau. Vì thế bạn cần nắm rõ những đặc điểm trên để website có thể chạy tốt trên các nền tảng trình duyệt đó.
- Rest API: cách để Frontend giao tiếp với Backend thông qua việc gửi yêu cầu (request) và nhận lại phản hồi (response) và dữ liệu để hiển thị. Việc nắm rõ các phương thức giao tiếp POST, GET, DELETE, …cùng body gửi lên là cần thiết để truyền và nhận dữ liệu 1 cách chính xác.
Lộ trình để trở thành Frontend Developer
Frontend Developer là những lập trình viên tạo ra các website ở phía client side, vì thế bước đầu tiên bạn cần là trang bị kiến thức về Internet:
- Cách Internet hoạt động, HTTP là gì?
- Trình duyệt (browser) hoạt động thế nào, các trình duyệt thông dụng
- Nắm được các khái niệm DNS, Domain, hosting
Tiếp theo chúng ta cần trang bị kiến thức cơ bản trực tiếp liên quan đến lập trình frontend bao gồm: HTML, CSS và JavaScript:
- HTML: các thẻ (tag), form, thẻ media và cách sử dụng. Trang bị kiến thức về HTML5, kỹ thuật SEO cơ bản.
- CSS: các thuộc tính CSS của từng thẻ HTML tương ứng. Cách sử dụng thẻ media để xử lý responsive cho các kích thước màn hình khác nhau. Cách xây dựng layout cơ bản. Tìm hiểu thêm về SCSS hay SASS
- JavaScript: Cú pháp lập trình, các kiểu dữ liệu cơ bản trong JS. ES6+ và các module cơ bản trong JavaScript. Cách xử lý với API (fetch, xhr). Sau khi nắm vững được cơ bản về JS thì chúng ta có thể tìm hiểu sâu hơn về các thư viện JS thường sử dụng như jQuery, React, Vue,…
Việc chọn 1 framework để sử dụng và tiếp tục tìm hiểu sâu là cần thiết, giúp bạn có thể tối ưu hóa được thời gian và chi phí lập trình; đồng thời đáp ứng được nhu cầu tuyển dụng của các công ty.
Ngoài ra trong quá trình làm việc, các bạn cũng cần có kiến thức liên quan đến trình quản lý package, các tools giúp định dạng hiển thị sourcode và tự động format đúng chuẩn:
- Framework và thư viện: React, Angular, Vue.js, Svelte, Solid JS
- Package Managers: npm, yarn, pnpm
- Formatters: Prettier, ESLint
- Module Bundlers: Webpack, Vite, Rollup, Parcel
Đến đây bạn có thể tự tin chinh chiến các dự án được giao trách nhiệm, code các module theo đúng yêu cầu của khách hàng. Tất nhiên việc học không bao giờ là đủ, 1 senior Frontend Developer cần trang bị thêm nhiều kiến thức chuyên sâu hơn nữa, 1 số gạch đầu dòng dưới đây để các bạn có thể tham khảo:
- Authentication: JWT, Oauth, Sessio Auth, SSO
- SSR, SSG: Server Side Rendering, Static Site Generation
- Progressive Web Apps: làm việc với Web Sockets, Service Workers, sử dụng Lighthouse hay Devtools cho việc tối ưu hóa website
- GraphQL: cách để phía frontend tương tác trực tiếp với Database mà không cần qua Backend
- Tạo ra các ứng dụng dành cho mobile hay desktop: hiện tại với JS chúng ta không chỉ còn tạo ra các ứng dụng web, mà nó còn có thể tạo ra các ứng dụng chạy trên mobile hay desktop. 1 số framework hay thư viện có thể giúp chúng ta làm điều đó: React Native, Flutter, Ionic, NativeScript cho mobile; Electron, Tauri dành cho desktop.
Kết bài
Frontend là 1 phần không thể thiếu trong 1 website nói riêng và hệ thống Web nói chung. Lập trình viên Frontend có thể học thêm NodeJS để làm backend cũng khiến cho nghề này trở nên hấp dẫn hơn trong định hướng của bạn. Bài viết này hy vọng đã mang đến cho các bạn cái nhìn tổng quan nhất về frontend developer và lộ trình học để trở thành 1 lập trình viên trong tương lai. Cảm ơn các bạn đã đọc bài và hẹn gặp lại các bạn trong những bài viết tiếp theo của mình.
Bài viết được đăng trên blog TopDev: https://topdev.vn/blog/frontend-developer-la-gi/