Tại sao tôi lại làm ra cái roadmap này ư? Tôi đã là một Fullstack Developer được 5 năm và hiện là kĩ sư lead cho tajawal. Nó không chỉ là sở thích mà cũng là một phần trọng trách của tôi phải nắm bắt các xu hướng và hướng dẫn các dev thật khác vững vàng. Tôi có thể thấy rất nhiều bạn mới vào nghề bối rối về việc bắt kịp tiến độ. Cũng rất nhiều bạn đã email hỏi xin lời khuyên về việc họ nên học cái gì từ năm 2017 đến nay. Vì thế cũng để tôi không bị “trùm bao bố” và giúp các bạn thì tôi đã quyết định làm các chart này 1 lần và mãi mãi.

Học về điều căn bản của HTML

HTML mang lại cho page một bố cục rõ ràng hơn. Nó giống như nền móng giúp cho ngôi nhà đứng vững vàng. Điều đầu tiên cần biết đó là syntax và tất cả những gì liên quan. Bạn nên tập trung vào học những thứ sau:

•         Học từ những điều cơ bản và học viết semantic HTML
•         Hiểu cách chia page thành các section và sắp xếp DOM một cách hợp lý

Task —  Sau khi đã nắm những điều cơ bản về HTML, hãy tạo ít nhất 5 page HTML. Tôi khuyên bạn chọn bất kì website nào ví dụ, một profile page github bất kì hoặc login page của twitter. Sau đó tập trung vào nội dung. Ban đầu có thể chưa được bắt mắt lắm nhưng đừng lo lắng và cứ tập trung vào cấu trúc chính của page.

Học về CSS

Sau khi đã tạo được bộ khung chắc chắn cho page, chúng ta sẽ cần phủ lên một lớp sơn thật ấn tượng cho ngôi nhà của mình. Dùng CSS — Cascading Stylesheets để làm đẹp cho các page HTML.

•         Đầu tiên phải biết về syntax và phải quen với các CSS property.
•         Học về box model và học cách chuẩn bị các layout bằng Grid và Flexbox
•         Sau khi đã xong, học cách làm responsive web bằng các media query.

Task – Một khi đã xong phần cơ bản, tiếp theo bạn cần phải chọn style cho các trang HTML bạn làm ở bước cuối. Ví dụ, nếu bạn viết trang HTML cho Github profile, bạn nên áp dụng CSS và làm cho nó trông giống như một Github profile page. Cứ làm thế với cả 5 page đã viết trước đó.

Học về điều căn bản của JavaScript

Các trang HTML sẽ có được tương tác tốt hơn nhờ vào JavaScript. Ví dụ, với mọi slider, popup và noti bạn thấy trên website và khi nó reload một phần nhỏ của trang mà không phải reload nguyên trang, đó là do nó đã được xử lý bởi JavaScript. Trong bước này, bạn sẽ phải học JavaScript căn bản để chuẩn bị thật tốt

•         Học syntax và các cấu trúc căn bản.
•         Học cách thông thạo DOM bằng JavaScript ví dụ cách remove một số element khỏi page, cách add thêm element, add hoặc remove các class, apply các style của CSS,… bằng JavaScript.
•         Sau đó, hãy học thêm và hiểu các topic như scopes, closures, hoisting và event bubbling, v.v.
•         Học cách tạo các HTTP call bằng XHR hoặc Ajax. Ajax sẽ giúp bạn thao tác mà không phải reload page.
•         Tiếp đến hãy học về feature mới ES6+. ES6 là một phiên bản JavaScript gồm nhiều update mới như classes, nhiều cách để declare các variable, add thêm các method mới vào array, string concatenation v.v. Hầu hết các bài viết bạn đọc online họ sẽ dùng Babel để giải thích về ES6 – một transpiler mà convert JavaScript bản mới thành bản cũ vì nó không được các browser cũ support. Nhưng khoan hẵn lo về Babel, chỉ cần hiểu trước ý tưởng và dùng nó cho cac browser mới hơn có support ES6. CHúng ta sẽ quay lại ES6 sau.

Bây giờ mọi thứ đã bắt đầu thật hơn, nếu đã đến được đây thì chúc mừng bạn nhé. Đây đều là những thứ quan trọng nhất bạn cần phải hiểu để tiếp tục những gì mình đang làm.

Có nên học jQuery không?

Có một giai đoạn mà ai cũng phát cuồng về jQuery, và thực sự thì nó là một library đầy quyền lực cung cấp vỏ bọc cho JavaScript và để bạn thao tác mọi thứ trên browser một cách thuận tiện nhất. Nhưng cũng chỉ là đã từng, bây giờ người ta đã không còn dùng nó quá nhiều trong các project mới nữa nhưng tất nhiên không hẳn là không còn ai dùng. Không nhất thiết phải học nhưng nó khá dễ và đã là kiến thức thì thà thừa còn hơn thiếu đúng không nào.

Thực hành

Việc học là vô nghĩa nếu không có thực hành, đó sẽ là lúc bạn chứng minh xem mình đã học được gì, nhớ được gì và áp dụng được đến đâu. Lúc mới học xong thì có thể bạn sẽ nhớ và hiểu sâu hiểu xa, nhưng đó chỉ là nhất thời và sẽ bay đi đâu mất ngay. Hãy cho bản than thật nhiều cơ hội để thực hành trong suốt quá trình này.

Hãy tiếp tục là một số các responsive web và add thêm tính tương tác bằng JavaScript. Bạn cũng có thể copy một webpage bất kì mà bạn thấy hay ho nhưng hãy nhớ sử dụng hết những thứ mình đã học đến thời điểm hiện tại.

Sau khi đã tạo được vài website thì bây giờ sẽ bắt đầu công việc thực sự. Vào github.com và search thêm project và mở một số pull request trên các project nguồn mở. Một số gợi ý cho pull request như sau:

•         Đầu tư thêm vào UI, tạo thêm các trang demo hoặc cải thiện phần design
•         Xem các vấn đề mở mà bạn có thể giải quyết
•         Refactor code bất kì mà bạn nghĩ là cần cải thiện

Xem thêm this repository này, nói rằng bạn đang học và xin feedback cho phần PR cũng như bạn có thể cải thiện phần nào.

Ở phần này bạn cũng cần có một số kiến thức về git. Bạn có thể không làm nhưng nếu có thì tôi cam đoan là bạn sẽ không hối hận, bạn sẽ bị sốc khi thấy có bao nhiêu người sẵn lòng giúp đỡ.  Bạn có thể tìm thấy rất nhiều resources git miễn phí, ví dụ như cái này.

Tự tạo động lực cho bản thân

Nếu học mọi thứ thật sự nghiêm túc, bạn hoàn toàn có thể tìm một số job freelance hoặc thậm chí cả fulltime. Tuy nhiên, đừng dừng lại ở đó, chặng đường vẫn còn dài nếu như bạn muốn một công việc thật ổn định và mỹ mãn.

Package Managers

Để chuẩn bị cho bước này, nếu trước đây bạn dùng các thư viện ngoài ví dụ một plugin hoặc một widget ngoài bất kì, bạn phải down các file JavaScript và CSS thủ công và để vào trong project. Các thư viện hoặc plugin nếu ra version mới cũng phải update ngay và chèn vào project, một khâu hết sức phức tạp. Thì package manager sẽ giúp bạn dỡ bớt sự phức tạp này khỏi workflow. Nó sẽ tự mang các library và plugin ngoài vào project của mình, và bạn sẽ không phải lo về việc copy các library thủ công nữa hay phải update phiên bản mới. Có sẵn yarn và npm. Cả hai khá giống nhau, nên bạn có thể chọn cái nào cũng được, học một cái thì cũng sẽ áp dụng được cho cái còn lại.

Sử dụng hết những cái đã học

Sau khi đã hiểu căn bản về package manager thì bạn có thể install một số library ngoài trên webpage ví dụ như cài đặt một số toast plugin và khi user click vào một nút, sẽ hiển thị một tin nhắn popup hoặc tạo một login form và tiến hành xác thực bằng các thư viện cho xác thực hoặc thao tác với nhiều option và xem xem cách cài đặt các version khác của nó.

CSS Preprocessors

Preprocessors đã cập nhật thêm cho CSS với rất nhiều tính năng mà không có ở mặc định. Có rất nhiều option như Sass, Less, Stylus v.v. Nếu tôi phải chọn một, thì Sass là câu trả lời. Tuy nhiên, PostCSS gần đây thu hút khá nhiều sự chú ý, nó như một dạng “Babel” của CSS. Bạn có thể chỉ dùng nó hoặc dùng Sass. Tôi khuyên bạn nên học Sass trước và tìm đến PostCSS sau nếu có thời gian.

Các framework CSS

Đúng ra bạn không cần phải học framework nữa, tuy nhiên nếu vẫn muốn học thì có rất nhiều lựa chọn cho bạn. Qua những cái đã thử tôi thích nhất là Bootstrap, Materialize và Bulma. Nhưng nếu nhìn vào thị trường hiện tại, tôi sẽ chọn Bootstrap cho sự khởi đầu.

Sắp xếp CSS

Khi app càng ngày càng lớn, thì CSS cũng trở nên bừa bộn và khó quản lý hơn. Có rất nhiều cách để kiến thiết lại CSS, ví dụ, OOCSS, SMACSS, SUITCSS, Atomic và BEM. Bạn nên tìm hiểu sự khác nhau giữa chúng cho từng tính huống cụ thể, nhưng cá nhân tôi thích BEM hơn.

Build tools

Các tool giúp bạn build/bundle và làm app JavaScript. Loại này bao gồm các linter, task runner và các bundler.

Đối với các task runner, trước đây có rất nhiều lựa chọn như npm scripts, gulp, grunt v.v. Nhưng hiện tại thì webpack đã giúp bạn xử lý gần như mọi thứ mà bạn làm với gulp, Chỉ cần duy nhất một npm script trong task runner dùng để tự động hoá các task mà  webpack có thể làm. Không nhất thiết phải học Gulp, tuy nhiên sau này nếu bạn có thời gian, cứ tìm hiểu thêm và xem xem liệu nó có giúp được gì cho app của bạn không.

Về các linter, cũng đã từng có rất nhiều option như ESLint, JSLint, JSHint và JSCS. Nhưng hiện tại ESLint làm gần như mọi thứ.

Đối với module bundler, ngày xưa thì có Parcel, Webpack, Rollup, Browserify v.v. Bây giờ nếu phải chọn thì hãy chọn Webpack. Rollup cũng khá phổ biến nhưng nó nên dùng cho các thư viện; còn khi nhắc đến app, đã có webpack. Thế nên hãy tự học webpack và thăm lại section này bằng Rollup nếu muốn.

(tiếp tục) Thực hành — Tạo ra cái mới

Chúc mừng bạn! Giờ đây bạn đã ở mức 75% của một JavaScript developer rồi. Bây giờ hãy cùng tạo ra cái mới với tất cả những gì đã học đến giờ. Bạn có thể tạo một dạng library có dùng Sass và JavaScript. Rồi dùng Webpack để convert Sass thành CSS và dùng babel trong đó để transpile ES6 code. Khi đã xong thì bạn có thể release nó lên Github và npm.

Chọn một Framework

Trong roadmap cũ thì section này thường nằm ngay sau phần kiến thức căn bản nhưng tôi đã dời nó lại sau Sass, buils tool và các package managers vì bạn sẽ dùng hết chúng trong framework và nếu không học trước thì vô dụng cả thôi.

Lựa chọn thì vô vàn. Dạo này thì có React, Vue và Angular là phổ biến nhất. Nhu cầu về React.js thì càng ngày càng nhiều. Bạn có thể chọn bất kì cái nào bạn muốn, cá nhân tôi thiên về React hoặc Angular. Có một lưu ý nhỏ ở đây, nếu là newbie, có thể bạn sẽ thấy Angular tương đối đơn giản, căn bản là vì nó support gần như mọi thứ ví dụ powerful router có support tình trạng lazy loading, HTTP client có support các interceptor, dependency injection, component CSS encapsulation v.v mà không phải lo về các thư viện ngoài. Tuy nhiên React chắc chắn cao tay hơn trong việc tìm kiếm cộng đồng quanh nó và đội ngũ tại Facebook đang làm việc để cải thiện nó. Hãy đảm bảo rằng bạn không chọn nó vì độ hot, mà chọn cái nào phù hợp nhất với mình.

Sau khi đã chọn được framework phù hợp, vẫn còn một số thứ bạn cần phải học. Ví dụ, nếu bạn chọn React; bạn cần học thêm Redux hoặc Mobx để quản lý state, phụ thuộc vào size của app mà bạn đang làm. Mobx thì thích họp cho app cỡ vừa và nhỏ, còn các app lớn nặng đô thì nên dùng Redux.

Nếu bạn chọn chọn Angular thì bạn cần thực hiện TypeScript (thực ra bạn không cần đến nó khi là app Angular nhưng có nó thì tốt hơn) và Rx.js cũng sẽ giúp ích cho app của bạn nhiều. Đây là một thư viện khá mạnh và phù hợp với functional programming.

Và nếu bạn chọn Vue.js, bạn sẽ cần học Vuex tương tự như Redux dùng riêng cho Vue.

Lưu ý một điều là Redux, Mobx và Rx.js không ràng buộc với các framework này, bạn hoàn toàn có thể dùng nó cho app JavaScript nữa. Đồng thời, nếu bạn chọn Angular, nhớ là dùng Angular 2+ chứ không phải Angular 1+

Thực hành-time

Giờ đây bạn đã biết *mọi thứ* cần để build được một app JavaScript. Hãy tạo thêm app từ framework bạn đã chọn. Bạn có thể lấy ý tưởng từ ideas directory trên repository rồi bắt đầu ngay.

Khi đã xong, nhớ đọc thêm về đo lường và keep track để cải thiện hiệu suất. Bạn có thể xem Interactivity Time, Page Speed Index, và Lighthouse Score v.v

Progressive WebApps

Khi đã done bạn có thể tìm hiểu về các service worker cũng như cách tạo nên progress web app.

Testing

Tuỳ vào mục đích mà có rất nhiều tool để bạn chọn. Tôi thuường dùng tổ hợp Jest, Mocha, Karma và Enzyme. Tuy nhiên, phải tìm hiểu và biết điểm khác nhau giữa chúng là gì để chọn được cái thích hợp nhất.

Static Type Checker

Static type checker giúp bạn add thêm type checking vào JavaScript. Bạn không cần đến chúng nhưng chúng thật sự rất hữu ích và chỉ cần vài tiếng tập trung là bạn có thể hiểu nó. Chủ yếu nó là TypeScript và Flow. Tôi rất thích TypeScript và sẽ chọn nó trước, nhưng bạn có thể check hết cả 2 để xem thử.

Server Side Render

Đừng chỉ dừng ở Checker vì đây là một phần cần thiết trong lộ trình làm Frontend của bạn.

Hãy tìm hiểu thêm về server side rendering trên framework bạn đã chọn. Ví dụ, nếu bạn chọn React, thì có Next.js và After.js rất phổ biến. Đối với angular thì có Universal. Và với Vue.js đã có Nuxt.js.

Chắc chắn vẫn còn một số điểm chưa được nhắc đến trên roadmap nhưng căn bản đây là những gì bạn cần để trở thành một “Frontend Engineer”. Và đừng quên, điểm quan trọng nhất đó là, thực hành nhiều nhất có thể. Ban đầu sẽ còn bỡ ngỡi và nhiều vấn đề, nhưng theo thời gian và luyện tập bạn sẽ quen dần và lên tay rất nhanh thôi.

Happy coding!

Tổng hợp việc làm IT - Software trên VietnamWorks
VietnamWorks InTECH
Theo medium