07/04/2022
Cần học những gì để trở thành Front-end developer??
**Đây là bài viết rất dài được đánh mày mỏi tay, nên đừng tiếc tôi 1 chiếc cmt động viên nhé anh chị em**
1. Phân biệt Front-end và Back-end
Quen thuộc lắm rồi nhưng vẫn phải viết cho đủ thủ tục :3 Trong khi Back-end đảm nhận chính các vai trò xử lý dữ liệu, nghiệp vụ, logic thì Front-end xử lý về giao diện và trải nghiệm người dùng (UI/UX). Front-end sẽ cùng với Back-end tạo nên một hệ thống web hoàn chỉnh. Front-end đang chạy ở máy tính của chúng mình trong khi Back-end đang chạy trên máy chủ (server) của chủ website.
2. Công việc thường thấy của một Front-end Dev là:
Đọc hiểu yêu cầu, bản thiết kế. Đây có thể xem như là đề bài mà khách hàng giao và nhiệm vụ của ta là phải hiện thực nó và... lụm lúa.
Lên kế hoạch thực hiện: Chọn giải pháp, ước lượng thời gian, ... Nếu bước này ta làm kĩ, ta sẽ đỡ mất nhiều công sức, thời gian cho các bước sau.
Lập trình, phát triển giao diện web, debug và fix bug. Bug là lỗi phát sinh trong quá trình lập trình. Bug không tự sinh ra, cũng không tự mất đi. Bug đi từ tính năng này qua tính năng khác. Còn bug là còn việc, còn việc là còn có... lúa. Hãy yêu bug. Lúa ở đây không chỉ là tiền mà còn là niềm vui và ý toii không phải khuyến khích việc code để lại nhiều bug, mà xem bug đến với ta như một lẽ tất nhiên (dù mình đã rất hết tâm, hết sức), để rồi ta chấp nhận, mỉm cười và diệt nó.
Kiểm thử và bàn giao. Những dòng code ta viết ra là sản phẩm của trí tuệ, vì vậy hãy làm thật chỉn chu, trước khi gửi cho tester (người kiểm thử) với một nụ cười hồn nhiên.
3. Doanh nghiệp cần gì ở một Fresher Front-end Engineer??
3.1. Kiến thức
Có kiến thức nền tảng vững chắc: Công nghệ mới thì công ty có thể huấn luyện được và sẽ dễ dàng hơn rất nhiều nếu các Fresher có một nền tảng lập trình vững chắc. Kiến thức nền có thể được kể đến như: Ngôn ngữ lập trình Javascript, tư duy giải quyết vấn đề trong lập trình bằng thuật toán, cấu trúc dữ liệu, tư duy cơ bản về OOP, HTML, CSS. Nếu công việc chính là dùng các framework đình đám như React, Angular, Vue thì cũng cần biết tư duy, khái niệm cơ bản (main concept).
Biết cách áp dụng các kiến thức vào trong dự án thực tế. Các giải pháp được áp dụng phải dựa trên sự hiểu về bản chất. Code viết ra phải biết nó chạy như thế nào và vì sao phải viết như vậy.
3.2. Kỹ năng
Kỹ năng phân tích vấn đề, lên kế hoạch thực hiện, quản trị giải pháp và đánh giá kết quả.
Kỹ năng debug và fix bug thành thạo.
Kỹ năng sử dụng các công cụ lập trình.
Kỹ năng quản lý code và chất lượng của code.
Kỹ năng trình bày, giao tiếp, làm việc nhóm.
Kỹ năng tự học, tìm hiểu công nghệ mới.
3.3. Tư duy
Tư duy làm việc chủ động, trách nhiệm, chỉn chu.
Tư duy đa chiều trong công việc.
4. Roadmap cho Front-end Engineer.
4.1. Nắm chắc kỹ thuật lập trình cơ bản với Javascript.
Các khái niệm cơ bản như: Biến, hằng, các kiểu dữ liệu cơ bản, sự chuyển đổi kiểu dữ liệu, toán tử.
Cấu trúc rẽ nhánh: if-else, switch-case.
Cấu trúc lặp: while, for, do-while.
Hàm, mảng, chuỗi.
JS thế hệ mới: Advanced function: arrow function, default parameter, callback; Destructuring assignment; Block-scoped; Class; Module; Lập trình bất đồng bộ,...
4.2. Cơ bản về lập trình hướng đối tượng (OOP)
Tư duy và hướng tiếp cận của OOP
Cách định nghĩa một đối tượng hoàn chỉnh
Các tính chất của OOP
Phân biệt giữa lớp và đối tượng
Thuộc tính, phương thức, phương thức tạo lập, getter, setter
Hiểu sâu về từ khóa this
Prototype
4.3. Tư duy lập trình với thuật toán và cấu trúc dữ liệu
Cách tiếp cận vấn đề, hình thành ý tưởng, triển khai giải pháp, đánh giá, kiểm thử và cải tiến chất lượng code.
Tư duy rẽ nhánh, tư duy vòng lặp, kỹ thuật sử dụng mảng để cài thuật toán.
Các thuật toán tìm kiếm, sắp xếp.
Cấu trúc danh sách
Stack và Queue
Cây nhị phân tìm kiếm
4.4. HTML, CSS cơ bản.
4.5. Javascript DOM và BOM
4.6. SCSS/SASS
4.7. Bootstrap
4.8. jQuery
4.9. React/Angular/Vue
4.10. Các chủ đề nâng cao và tối ưu hiệu năng:
Cơ chế render của browser
Chrome Developer Tool
Google Speed Insight
Lazy loading
SEO (Search Engine Optimization)
Security
4.11. Các công cụ, kỹ năng nên thành thạo:
Một IDE nào đó như: VS Code, Sublime Text, Atom, ...
Quản lý mã nguồn với Git.
MS Office
Chat: Slack, Telegram, ...
Workspace: Trello, Asana, Notion, ...
Hơn hết, hãy biết biến lý thuyết vào thực hành để hiểu rõ và nắm sâu hơn nhé!!
----------