Doanh nghiệp cần và Lộ trình để bạn trở thành 1 Front-end Engineer 2021

Tớ đã trở lại đây, sau bài viết như thế nào ở phần 1, hãy cùng tớ khám phá những kỹ năng doanh nghiệp cần ở vị trí này level fresher (level cho người mới học xong, mới ra trường đó) và lộ trình học nha.

Trong một cuộc khảo sát của Kmin Academy về sự đánh giá của doanh nghiệp về các IT Fresher, các doanh nghiệp kỳ vọng về một Fresher như sau:

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.

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. 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.

Lộ trình học (roadmap)

Có rất nhiều lộ trình khác nhau để học Front-end. Theo như quan sát của tớ và quá trình trò chuyện với các nhà tuyển dụng, lộ trình này đáng để chúng ta tham khảo để đạt mục tiêu sau:

1. Có đủ kiến thức nền tảng để bắt đầu với vị trí Fresher Front-end engineer hay Fresher Front-end developer.
2. Học tinh gọn nhất có thể.

Lộ trình về kiến thức gồm các module như sau:

1. Kỹ thuật lập trình cơ bản với ngôn ngữ 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: Định nghĩa và gọi hàm cơ bản, hàm dạng biểu thức, cơ chế hoisting, tham trị và tham chiếu, phạm vi cục bộ và toàn cục, mô hình hộp đen và phương pháp viết hàm.
   • Mảng: Định nghĩa mảng, ý nghĩa sử dụng, duyệt mảng, tìm kiếm, lọc. sắp xếp.
   • Chuỗi: Kỹ thuật xử lý chuỗi, template string.

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

3. Javascript thế hệ mới (ES6, ES7, ...)

   • Advanced function: arrow function, default parameter, callback
   • Destructuring assignment
   • Block-scoped
   • Class
   • Module
   • Lập trình bất đồng bộ

4. 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.
   • Các thuật toán sắp xếp.
   • Cấu trúc danh sách
   • Stack và Queue
   • Cây nhị phân tìm kiếm

5. HTML cơ bản

   • Cú pháp HTML
   • Các thẻ HTML cơ bản
   • SVG HTML
   • Semantic HTML
   • Form
   • HTML best pratice

6. CSS cơ bản

   • Cú pháp CSS
   • Các thuộc tính định dạng
   • Các giải pháp layout
   • UI/UX
   • Cắt layout từ Figma/Photoshop/Adobe XD
   • Animation
   • Xử lý giao diện web trên nhiều thiết bị: Responsive
   • Các best practice
   • BEM

7. Javascript DOM và BOM

   • Bản chất của DOM.
   • Hệ thống các phương thức trong DOM Xử lý các vấn đề bằng DOM: HTML element (text, attribute,v create, add, delete), CSS, event, navigation.
   • BOM: Window, screen, location, history, navigator, alert, timing, cook
   • Fetch API / AJAX

8. SCSS/SASS

   • Cú pháp thông dụng trong SCSS
   • Các quy tắc trong SCSS
   • Biến trong SCSS
   • At-Rules, Values, Built-in modules, chuỗi trong SCSS

9. Bootstrap

   • Bản chất và ý tưởng của Bootstrap
   • Typography & Utilities
   • CSS components
   • Grid System & Flexbox
   • Javascript Widgets

10. jQuery - Bản chất và ý tưởng của jQuery - Xử lý hiệu ứng (effects) với jQuery - Tương tác HTML, CSS bằng jQuery - Traversing, Misc

11. React/Angular/Vue

Cậu có thể chọn một trong 3 framework / library nổi tiếng nhất hiện nay để học tiếp

• React
• Angular
• Vue

12. 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) - Webpack - Giao thức http và https - CLI terminal - Security

13. 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, ...

Tớ sẽ quay lại.

Photon