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.

!lap-trinh-web-front-end

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:

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.

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.

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:

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.

Học tinh gọn nhất có thể.

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

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.

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

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ộ

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

HTML cơ bản

Cú pháp HTML

Các thẻ HTML cơ bản

SVG HTML

Semantic HTML

Form

HTML best pratice

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

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

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

Bootstrap

Bản chất và ý tưởng của Bootstrap

Typography & Utilities

CSS components

Grid System & Flexbox

Javascript Widgets

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

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

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

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