Điều đầu tiên bạn cần làm là tìm hiểu những điều cơ bản về HTML, CSS và làm quen với cú pháp JavaScript.

Tìm hiểu những điều cơ bản về HTML

HTML là những gì mang lại cấu trúc cho website của bạn. Nó giống như khung xương giữ bạn đứng. Điều đầu tiên bạn cần là học cú pháp và mọi thứ HTML cung cấp. Bạn nên tập trung vào những việc sau đây:

  • Tìm hiểu những điều cơ bản và cách viết HTML.
  • Hiểu cách chia trang thành các phần và cấu trúc DOM đúng cách.

Task: Một khi bạn đã học được những điều cơ bản về HTML, hãy tạo ít nhất 5 trang HTML. Khuyên bạn nên chọn bất kỳ trang web nào, ví dụ: nhìn vào bất kỳ trang profile trên github hoặc trang đăng nhập twitter. Và tập trung vào cách cấu trúc nội dung đúng. Nó sẽ khá là xấu và tệ, nhưng đừng lo lắng quá và tập trung chính vào cách cấu trúc phù hợp.

Tìm hiểu CSS

Chúng ta đã học cách chuẩn bị bộ khung cho trang web, đã đến lúc thêm một số lớp da lên trên để làm đẹp và xíu bắt mắt. CSS - Cascading stylesheet được sử dụng để thêm chút thẩm mỹ cho các trang HTML của bạn.

  • Điều đầu tiên mà bạn sẽ phải làm là tìm hiểu cú pháp và làm quen với các thuộc tính CSS phổ biến.
  • Tìm hiểu về mô hình hộp và cách chuẩn bị bố cục bằng Grid và Flexbox.
  • Khi bạn đã hoàn thành hai việc trên, hãy tìm hiểu cách làm cho trang web của bạn phản hồi với các truy vấn phương tiện.

Task : Khi bạn có những điều cơ bản, điều tiếp theo bạn nên làm là tút lại giao diện cho các trang HTML mà bạn đã làm. Ví dụ: nếu bạn đã viết HTML cho profile trên Github, đã đến lúc đưa CSS vào và làm nó thực sự trông giống như trang profile Github thực tế. Làm như vậy với tất cả các trang mà bạn đã viết ở bước trước. 

Tìm hiểu kiến thức cơ bản về JavaScript

JavaScript cho phép bạn làm cho các trang HTML của bạn trông tương tác hơn. Ví dụ: các thanh trượt, cửa sổ bật lên và toast notification mà bạn thấy trên các trang web và khi nó tải lại các phần nhất định của trang mà không phải tải lại trang, tất cả đều được thực hiện bằng JavaScript. Trong bước này, bạn sẽ tìm hiểu những điều cơ bản về JavaScript để chuẩn bị cho Hành trình của mình.

  • Tìm hiểu cú pháp và các cấu trúc cơ bản của ngôn ngữ.
  • Tìm hiểu cách thao tác DOM với JavaScript, ví dụ: cách xóa một số phần tử khỏi trang, cách thêm một số phần tử, thêm và xóa các lớp, áp dụng các kiểu CSS, v.v. bằng JavaScript.
  • Sau khi bạn hoàn thành việc đó, hãy tìm hiểu và hiểu các chủ đề như scopes, closures, hoisting và event bubbling, v.v.
  • Tìm hiểu cách gọi HTTP bằng XHR hoặc Ajax. Ajax là thứ cho phép bạn thực hiện một số hành động nhất định mà không cần tải lại trang.

Sau khi bạn đã biết rằng bây giờ là lúc tìm hiểu về các tính năng mới trong ES6 +. ES6 chỉ là một phiên bản JavaScript giới thiệu nhiều cập nhật thú vị, ví dụ: Các lớp, các cách khác nhau để khai báo biến, thêm phương thức mới vào mảng, nối chuỗi, v.v. Hầu hết các bài viết bạn tìm trên mạng đều dùng Babel để giải thích ES6 là một transpiler (kết hợp Compiler và Interpreter) dùng để chuyển đổi JavaScript cũ sang JavaScript mới vì JavaScript cũng không được các trình duyệt hỗ trợ. Nhưng bây giờ không cần phải lo về Babel, chỉ cần có ý tưởng về các khái niệm và dùng chúng trong bất kỳ trình duyệt mới nhất nào hỗ trợ ES6 để thực nghiệm.

Có lẽ bạn đã cảm thấy rằng mọi thứ đang dần hiện thực hoá và bạn xứng đáng được khuyến khích theo đuổi những điều bạn đang làm. Những điều bạn vừa học đều là những thứ quan trọng cho sau này.

Tôi có nên học jQuery không?

Đã có lúc mọi người phát cuồng vì jQuery và thực tế thì đó là một library mạnh mẽ cung cấp wrapper trên JavaScript và cho phép bạn thực hiện mọi thứ theo cách tương thích với trình duyệt. Nhưng những ngày đó đã qua rồi và nó không được sử dụng nhiều cho các project mới nữa nhưng vẫn có người sử dụng nó. Bạn không cần phải học nó nhưng nó thực sự khá là dễ và nó sẽ có ích cho bạn nếu bạn muốn học qua một xíu. 

Thời gian thực hành

Tôi nói điều này rất nhiều và tôi sẽ nói lại ở đây một lần nữa, bạn sẽ không học được bất cứ thứ gì mà không thực hành. Bạn có thể có một cảm giác nhất thời rằng bạn hiểu điều cái gì đó nhưng nó sẽ sớm biến mất nếu bạn không luyện tập. Hãy chắc chắn rằng bạn luyện tập nhiều nhất có thể trong khi bạn đang theo lộ trình này.

Tiếp tục và tạo một số trang web mang tính responsive và thêm sự tương tác với JavaScript. Bạn có thể sao chép bất kỳ trang web hiện có nào mà bạn thấy thú vị nhưng hãy nhớ áp dụng những gì bạn đã học cho đến thời điểm này.

Một khi bạn đã làm được vài trang web, bây giờ là lúc cho công việc thực sự. Truy cập github.com và tìm kiếm một số project, cố gắng mở một số pull request cho các project mã nguồn mở. Một số ý tưởng cho pull request được liệt kê dưới đây: 

  • Nâng cao UI, thêm tính phản hồi cho trang web hoặc cải thiện thiết kế.
  • Nhìn vào bất kỳ vấn đề mở nào mà bạn có thể giải quyết.
  • Tái cấu trúc bất kỳ mã nào mà bạn nghĩ có thể được cải thiện.

Mặc dù tôi muốn giới thiệu phần Github này, nó cần một số kiến thức về git và không bắt buộc. Bạn không phải làm điều này nhưng nếu bạn làm thì sẽ thấy nó thực sự có ích - bạn sẽ ngạc nhiên khi có bao nhiêu người sẵn sàng giúp đỡ bạn nếu bạn chỉ cần hỏi và có thể tìm thấy nhiều tài nguyên miễn phí dùng cho git. 

Quản lý package

Trước thời điểm này, nếu bạn sử dụng một số library bên ngoài, ví dụ: một plugin hoặc bất kỳ widget bên ngoài nào, bạn phải tải xuống các tệp JavaScript và CSS theo cách thủ công và đưa chúng vào project, sau đó các library hoặc plugin đó release các phiên bản mới, bạn phải tải xuống các tệp mới hơn và đưa chúng vào project của bạn một lần nữa thì khá là rắc rối phải không? Quản lý package giúp bạn tống khứ những rắc rối này ra khỏi quy trình làm việc. Chúng giúp bạn mang các library và plugin bên ngoài vào các project của bạn, để bạn không phải lo lắng về việc sao chép library theo cách thủ công hoặc gặp rắc rối khi cập nhật chúng khi phát hành phiên bản mới. Có yarn và npm có sẵn. Cả hai đều gần giống nhau, chỉ khác cách thực hiện, bạn có thể chọn bất kỳ trong cả hai và một khi bạn đã học cách sử dụng cái này thì cái kia cũng tương tự vậy. 

Hãy sử dụng những gì chúng ta đã học

Sau khi bạn đã có hiểu biết cơ bản về quản lý package, hãy tiếp tục và cài đặt một số library bên ngoài trong các trang web mà bạn đã thực hiện ở trên, ví dụ: cài đặt một số toast plugin và khi người dùng nhấp vào nút, hiển thị toast message cho người dùng hoặc tạo biểu mẫu đăng nhập và xác thực mẫu bằng library xác thực, bạn có thể chơi với các tùy chọn khác nhau và xem cách cài đặt các phiên bản khác nhau.

Bộ tiền xử lý CSS

Bộ tiền xử lý làm phong phú CSS với các chức năng mà nó không có khả năng mặc định. Có nhiều lựa chọn khác nhau như Sass, Less, Stylus, v.v ... Nếu phải chọn một, tôi sẽ chọn Sass. Tuy nhiên, PostCSS đã bắt đầu thu hút người dùng trong thời gian gần đây, nó cũng khá tốt và là một “Babel” cho CSS. Bạn cũng có thể sử dụng nó độc lập hoặc trên Sass. Tôi khuyên bạn nên học Sass ngay bây giờ và truy cập lại PostCSS sau khi bạn có thời gian.

Frameworks CSS

Bạn không cần phải học các framework CSS nữa, tuy nhiên nếu bạn muốn chọn bất kỳ framework nào, thì luôn có một cái phù hợp cho bạn. Những cái mà tôi thích nhất trong số những gì mà tôi đã thử là Bootstrap, Materialize và Bulma. Nhưng nếu bạn nhìn vào nhu cầu trên thị trường, tôi sẽ chọn Bootstrap nếu tôi bắt đầu từ hôm nay.

Tổ chức CSS

Khi các ứng dụng phát triển, CSS bắt đầu trở nên lộn xộn và không bảo trì được. Có nhiều cách để cấu trúc CSS của bạn tốt hơn để mở rộng sau này, ví dụ: có OOCSS, SMACSS, SUITCSS, nguyên tử và BEM. Bạn nên biết về sự khác biệt giữa chúng nhưng riêng tôi thì tôi thích BEM hơn.

Xây dựng công cụ

Các công cụ giúp bạn xây dựng / đóng gói và phát triển các ứng dụng JavaScript. Phần này này bao gồm linters, task runners và bundlers. 

Đối với task runners, trước đây thường có nhiều tùy chọn khác nhau bao gồm các tập lệnh npm, gulp, grunt, v.v. bây giờ bạn có thể sử dụng để tự động hóa các tác vụ mà webpack có thể thực hiện. Bạn không cần học Gulp, tuy nhiên sau này nếu bạn thấy có chút thời gian, hãy xem nếu nó có thể giúp bạn trong ứng dụng của bạn không. 

Đối với linters, một lần nữa đã từng có nhiều lựa chọn bao gồm cả ESLint, JSLint, JSHint và JSCS. Nhưng hiện tại chủ yếu là ESLint vì vậy hãy chọn ESLint.

Đối với các module bundlers, một số tùy chọn khác nhau bao gồm Parcel, Webpack, Rollup, Browserify, v.v ... Nếu bạn phải chọn một, nhắm mắt lại, tung đồng xu và chọn Webpack. Rollup cũng khá phổ biến nhưng nó chỉ được khuyến khích sử dụng chủ yếu cho các library; khi nói đến ứng dụng, có ngay webpack. Vì vậy, hãy tự học cho mình webpack ngay bây giờ và để dành Rollup cho sau này nếu bạn muốn.

Thời gian thực chiến - Tạo một cái gì đó

Chúc mừng! Bây giờ bạn có thể tự phong cho mình 75% JavaScript developer. Hãy tiếp tục và tạo ra một cái gì đó với tất cả những gì bạn đã học. Có thể tạo một số loại library mà bạn phải sử dụng Sass và JavaScript. Sau đó, sử dụng Webpack để chuyển đổi Sass sang CSS và sử dụng babel để dịch mã ES6. Khi bạn đã hoàn tất, release nó trên Github và npm.

Chọn một framework

Trong lộ trình cũ, phần này được sử dụng song song với những điều cơ bản nhưng tôi đã thay đổi nó sau Sass, xây dựng các công cụ và trình quản lý package, vì bạn sẽ phải sử dụng tất cả những thứ đó trong các framework và không có kiến thức, lúc này thì nó khá là đáng sợ phải không.

Trong các framework, có khá nhiều lựa chọn. Nhưng thường được sử dụng ngày nay là React, Vue và Angular. Ngày càng có nhiều nhu cầu về React.js. Tuy nhiên, bạn có thể chọn bất kỳ trong số những framework được liệt kê. Cá nhân tôi sẽ chọn React hoặc Angular. Một ghi chú nhỏ ở đây, khi mới bắt đầu, bạn có thể thấy Angular dễ dàng hơn một chút, có lẽ vì nó hỗ trợ hầu hết mọi thứ ngoài box, ví dụ: router mạnh mẽ hỗ trợ lazy loading, client HTTP có hỗ trợ interceptor, dependency injection, đóng gói CSS thành phần, v.v. mà không phải lo về việc chọn library bên ngoài. Nhưng React chắc chắn có ưu thế, nhìn vào cộng đồng xung quanh nó và cách Facebook làm để cải thiện nó. Chỉ cần đảm bảo không chọn bất cứ điều gì vì cường điệu hay thổi phồng, hãy google và tự so sánh xem những gì bạn hợp với.

Tôi sẽ để lại sự so sánh và trải nghiệm cá nhân của tôi với cả hai cho một bài đăng khác nhưng vì bài đăng này là về học tập, đây là cách bạn có thể tìm thấy các learning curve cho Angular và React.
(learning curve : đường cong học tập, thể hiện mối quan hệ giữa quá trình học tập và kinh nghiệm tích luỹ được và kết quả là sự tiến bộ đạt được).

Một khi bạn đã lựa framework, có một số điều chắc chắn rằng bạn có thể phải học. Ví dụ, nếu bạn quyết định chọn React; bạn có thể phải học Redux hoặc Mobx cho state management, tùy thuộc vào kích thước ứng dụng mà bạn sẽ làm việc. Mobx phù hợp cho các ứng dụng vừa và nhỏ, Redux phù hợp hơn cho các ứng dụng quy mô lớn hơn. Và bạn thậm chí có thể không cần bất kỳ cái nào và tuỳ thuộc vào native state management trong React nếu ứng dụng của bạn cho phép điều đó.

Nếu bạn chọn Angular, bạn sẽ phải học TypeScript (bạn có thể phát triển các ứng dụng Angular mà không cần tới nó nhưng khuyên là sử dụng nó) và Rx.js cũng sẽ có lợi cho bạn trong các ứng dụng Angular của bạn. Nó là một library thực sự mạnh mẽ và cũng phù hợp cho lập trình chức năng.

Và nếu bạn chọn Vue.js, bạn có thể phải học Vuex tương tự như Redux nhưng đối với Vue thì :

Bạn nên lưu ý rằng, Redux, Mobx và Rx.js không chỉ bị ràng buộc với các framework này, bạn cũng có thể sử dụng chúng trong các ứng dụng Vanilla JavaScrip của mình. Ngoài ra, nếu bạn chọn Angular thì hãy đảm bảo rằng đó là Angular 2+ chứ không phải Angular 1+.

Thực chiến time

Bây giờ bạn đã biết _everything_ rằng người ta cần phải xây dựng ứng dụng JavaScript hiện đại. Đi trước và làm cho một số ứng dụng với bất kỳ framework nào bạn đã chọn. Bạn có thể tìm thấy một số ý tưởng ở thư mục ý tưởng trong đầu bạn và chọn bất kỳ điều gì và bắt đầu! 

Và một khi bạn đã thực hiện xong, hãy đọc về cách đo lường và cải thiện hiệu suất. Ví dụ: xem qua Interactivity Time, Page Speed Index và Lighthouse Score, v.v.

Progressive WebApps

Và một khi bạn đã hoàn thành tất cả các bước được liệt kê ở trên, hãy tìm hiểu về nhân viên dịch vụ và cách tạo các progressive web apps.

Kiểm tra ứng dụng của bạn

Có rất nhiều công cụ khác nhau cho các mục đích khác nhau. Tôi chủ yếu thấy mình sử dụng kết hợp Jest, Mocha, Karma và Enzyme. Tuy nhiên, nhớ đọc hướng dẫn trước khi dùng, sẽ tốt hơn nếu bạn tìm hiểu các loại testing khác nhau, xem xét tất cả các tùy chọn có sẵn và sử dụng các tùy chọn phù hợp nhất cho nhu cầu của bạn.

Static type checkers

Static type checkers giúp bạn thêm type checking vào JavaScript. Bạn không cần học những thứ này nhưng chúng thực sự mang lại cho bạn “siêu năng lực” và còn có thể học trong vài giờ. Chủ yếu là TypeScript và Flow. Tôi yêu TypeScript và sẽ chọn nó nhưng hãy thoải mái kiểm tra cả hai và chọn một trong hai tuỳ sở thích của bạn.

Render phía máy chủ

Các kỹ năng mà bạn có được cho đến thời điểm này là đủ để giúp bạn sống sót ở bất kỳ vị trí nào với danh hiệu “Frontend Engineering”. Nhưng không nên dừng lại ở đây!

Tìm hiểu về kết xuất phía máy chủ trong bất kỳ framework bạn đã chọn. Có các tùy chọn khác nhau, tùy thuộc vào framework bạn đang sử dụng. Ví dụ: nếu bạn quyết định sử dụng React, đáng chú ý là Next.js và After.js. Đối với góc, có Universal. Và đối với Vue.js, có Nuxt.js.