Tác giả: Kamran Ahmed
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.
Thật ra ban đầu chúng chỉ là một số đề xuất nhỏ về tool nhưng sau đó tôi muốn nó theo cấu trúc một tí, thêm một số chi tiết và thiết kế lại theo bước để bạn dễ hiểu hơn mà chọn và sắp xếp.
Tôi còn làm cho Backend nữa, các bạn có thể xem thêm tại đây.
Trước khi đi giải thích từng điểm, tôi phải nói vài dòng trước:
Mục đích của roadmap này là giúp bạn hình dung được bức tranh tổng quát và sẽ dẫn lối cho bạn nếu như đang không biết phải học gì tiếp theo, chứ không ủng hộ bạn chạy theo trào lưu đang hot làm gì. Bạn cần phải hiểu rõ tại có 1 tool này lại thích hợp trong một số trường hợp nhất định, và việc trở thành trào lưu không đồng nghĩa là nó sẽ phù hợp cho công việc.
Bắt đầu thôi – từ ảnh dưới đây, và tôi sẽ giải thích từng cái cho bạn.
Xem tuyển dụng frontend developer đãi ngộ tốt trên TopDev
Học một số cái căn bản của HTML
HTML đem đến cho page một cấu trúc rõ rệt. Nó giống như bộ xương sống giúp bạn đứng thẳng vậy. Cái đầu tiên cần biết đó là syntax và tất cả những thứ liên quan trong đó. Bạn nên tập trung vào học những thứ sau:
- Học những cái cơ bản và học viết semantic HTML
- Hiểu cách chia page thành các section và cách sắp xesp DOM 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. Có thể nó hơi xấu ban đầu nhưng đưunfg lo lắng quá và cứ tập trung vào structure chính.
Học CSS
Sau khi đã tạo được phần xương sườn của page, chúng ta sẽ cho nó một vài lớp áo và tô điểm cho nó đẹp một chút. 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 cái căn bản của JavaScript
JavaScript sẽ giúp bạn làm cho các trang HTML tương tác hơn. 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 để làm tiếp
Có nên học jQuery không?
Có một thời mà ai cũng phát cuồng về jQuery, và thực sự thì nó là một library rất 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 ngày đó đã qua đi, 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 đương nhiên vẫn còn người dùng nó. Không nhất thiết phải học nhưng nó khá dễ và cũng có ích nếu bạn có tìm hiểu.
Thực hành
Đừng học nếu không thực hành, chứ không thực hành thì tôi không hiểu bạn nhớ được cái gì nữa. 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 thực hành càng nhiều càng tốt 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ứ đàng hoàng, 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ẽ biết dùng 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 đã trau dồi 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 cù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
Bạn không cần phải học framework nữa, tuy nhiên nếu vẫn muốn 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 để bắt đầ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 hơn và khó quản lý. 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, 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 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.
Đường học trong graph dưới đây đã mặc định là bạn đã biết về TypeScript và Rx.JS. Có một số tiêu chuẩn và feature mà angular cho nhiều hơn thông thường, nhưng nó không đồng nghĩa rằng React không tốt, cái nào cũng có ưu thế riêng của nó cả.
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ậo bạn sẽ quen dần và lên tay rất nhanh thôi.
Bài viết nguồn tham khảo được đăng tải tại Medium
Tìm việc làm ngành IT mới nhất TopDev
