Web development là một lĩnh vực luôn thay đổi — cách chúng ta xây dựng trang web ngày nay hoàn toàn khác với cách chúng ta dùng vài năm trước đây. Với rất nhiều công cụ có sẵn và những công cụ mới xuất hiện mỗi ngày, hầu hết các Frontend developer sẽ đều có những lúc cảm thấy băn khoăn về con đường mình sẽ đi.

Tôi là tác giả của bài viết “Developer Roadmap”, trong đó liệt kê lộ trình, công cụ và các công nghệ bạn cần sử dụng để bước vào các mảng như frontend, backend hay operation. Tôi viết lộ trình này lần đầu vào năm 2017, cập nhật một lần năm 2018 và lần sửa đổi gần đây nhất là vào năm nay. Khi tôi viết bài viết này, lộ trình cho Frontend developer đã được cập nhật lại. Tôi vẫn đang làm việc với lộ trình dành cho backend và operation. Mong là nó sẽ được phát hành trong vài ngày nữa.

Trong bài viết này, tôi sẽ tóm tắt lại một chút và chia sẻ với bạn động lực đằng sau việc tạo những lộ trình này, một vài lời disclaimer nếu bạn quyết định đi theo những lộ trình này nhưng cuối cùng lại xảy ra sự cố, và một vài lời khuyên dành cho bạn nếu bạn muốn trở thành một frontend developer “hiện đại” của năm 2019.

Khóa Web Front - end cho người mới bắt đầu - đảm bảo đầu ra 

Động lực

Trước khi bắt đầu với bài viết, để các bạn rõ hơn về tôi thì tôi đã làm Fullstack Development trong 6 năm qua và hiện đang làm lead engineer tại tajawal, nơi mà tôi phải làm ở nhiều vị trí. Không chỉ là sở thích, việc theo dõi các xu hướng, đưa ra quyết định trong công nghệ và tạo động lực, training các developer khác là một phần công việc của tôi.
Web Development đã phát triển rất nhiều và rất nhanh. Số lựa chọn hiện có cho một frontend developer nhiều đến mức có thể gây trở ngại với bất cứ ai. Tôi khá active trên các cộng đồng và opensource; Vào năm 2017, Circa, một giáo sư đại học cũ của tôi đang chuẩn bị một bộ các lộ trình cho sinh viên đẻ họ biết rõ về thị trường development hiện tại, cô liên hệ với tôi để đưa cho cô một danh sách các công cụ và công nghệ để phát triển web. Tôi đã viết lại một bản raw và gửi cho cô, nhưng sau đó tôi quyết định sửa sang nó một chút và đưa nó lên GitHub để có thể giới thiệu điều này cho bất cứ ai mỗi khi tôi được hỏi. Và đó là cách mà những lộ trình này ra đời.

Disclaimer

Trước khi bạn bắt đầu với lộ trình, hãy ghi nhớ một vài disclaimer như sau:
Mục đích của lộ trình này là cung cấp cho bạn ý tưởng về bối cảnh chung và hướng dẫn bạn nếu bạn không biết phải học gì tiếp theo, cũng như có thể không hề khuyến khích bạn học những thứ đang hợp thời/ đang là xu hướng. Bạn nên có những sự thấu hiểu nhất định về lý do tại sao một tool sẽ phù hợp trong một số hoàn cảnh hơn các tool khác, và hãy nhớ rằng “xu hướng” không bao giờ đồng nghĩa với “phù hợp nhất”.
Thứ 2, hãy nghiên cứu một chút về thị trường làm việc của bạn.
Đừng bỏ qua thực tế là ngôn ngữ và tool có thể phụ thuộc rất nhiều vào thị trường, do đó hay nghiên cứu về thị trường làm việc mà bạn đang nhắm vào.
Thứ 3, bạn không cần thiết phải học và biết mọi thứ được list ra trong bài viết này.
Bạn không cần phải học mọi thứ được liệt kê ở đây để có thể kiếm được công việc đầu tiên cho mình. Các lộ trình được liệt kê ở đây có vẻ rất đao to búa lớn, nhưng đừng để bị chúng dọa nếu bạn vừa mới chỉ bước chân vào lĩnh vực web development. Tôi chỉ đang cố gắng đưa vào tất cả mọi thứ mà cuối cùng bạn sẽ phải học và sử dụng. Bạn có thể học các phần căn bản tối thiểu và tiếp tục học những phần còn lại trong lúc xây dựng website.

Giai đoạn 1 — Sẵn sàng cho công việc

Nếu bạn là người mới bắt đầu và chỉ vừa mới bước vào lĩnh vực web development, có một lộ trình khác cho bạn. Hãy nhìn vào lộ trình dưới đây và ngừng đọc thêm nữa; hoàn thành các mục được liệt kê trong lộ trình này và quay lại sau khi bạn đã thực hiện một vài dự án sử dụng chúng.

Chỉ cần học các mục được liệt kê và bạn sẽ có tự gọi mình là một web developer và kiếm công việc trong thị trường lao động. Tôi biết rất nhiều người đã và đang kiếm tiền kha khá từ công việc freelancer hoặc fulltime. Dành thời gian cho tất cả các mục được liệt kê trong lộ trình, nắm vững tất cả những điều này, đồng thời thực hành thật nhiều. Hãy làm nhiều và rất nhiều dự án; đây là danh sách một số gợi ý mà bạn có thể làm.

Task

  • Tạo một ứng dụng Pomodoro. Bạn có thể sao chép và tạo ra một phiên bản web cho ứng dụng này
  • Tạo ra một trang web sử dụng GitHub Repositories API để nạp và hiển thị top 10 kho lưu trữ (Repository) của tuần với định dạng đẹp và có tính phản hồi.
  • Tạo một ứng dụng todo-list đơn giản cho phép bạn thêm task, đánh dấu đã làm, sửa và xóa nội dung.
  • Tạo ra một Stopwatch đơn giản có thể start, stop, pause và reset.

Khi bạn đã hoàn thành những việc này, hãy tìm hiểu về các loại control version system (hệ thống kiểm soát phiên bản), tìm hiểu cách sử dụng cơ bản của Git và tạo profile trên GitHub.

Giai đoạn 2 — Viết CSS tốt hơn

Khi bạn đã đảm bảo được hết những phần căn bản, hãy chuyển sang bước tiếp theo và tìm hiểu cách viết maintainable CSS và sử dụng các framework CSS. Lộ trình như sau:

Khi bạn đã hoàn thành bước này, hãy tiếp tục và thực hiện các task sau cho các project bạn đã thực hiện trong giai đoạn 1:

  • Thêm bootstrap cho các dự án trên bằng cách sử dụng npm hoặc yarn.
  • Chuyển đổi các dự án để sử dụng BEM
  • Viết CSS trong SASS
  • Tự động việc chuyển đổi SASS sang CSS bằng cách sử dụng NPM Script

Giai đoạn 3 - Tăng tốc

Giai đoạn này sẽ đến vài lần, và là lúc bạn bước chân vào mảng frontend development hiện đại. Hãy tiếp tục và tìm hiểu thêm về JavaScript. Tìm hiểu Webpack là gì, hiểu các khái niệm khác nhau và tại sao nó lại cần thiết. Hiểu babel là gì, tại sao chúng ta sử dụng nó, tìm hiểu cách tích hợp với webpack và cuối cùng tìm hiểu cách lint code của bạn với ESlint. Tất cả các mục được liệt kê trong giai đoạn này xoay quanh webpack.

 Bạn sẽ bắt đầu nhận được “hương vị” mordern frontend development vapf cuối tuần đầu tiên của giai đoạn này. Khi bạn đã hoàn thành giai đoạn này, hãy tiếp tục và thực hiện các bước dưới đây để hiểu rõ hơn về các tool

Task:

  • Tạo 1 npm package lấy tên người dùng và trả về danh sách các link được tìm thấy trên mxh (nếu tồn tại). Nó có thể được sử dụng trong browser, gói lại với webpack, sử dụng babel để phiên mã và sử dụng ESLint cho linting.
  • Tạo một ứng dụng todo list đơn giản, sử dụng SASS cho CSS, thêm bootstrap , sử dụng BEM, dịch mã JavaScript bằng babel, đóng gói với webpack, tạo bản dựng tối ưu và triển khai nó trên Github Pages.

Giai đoạn 4 — Modern Frontend Application

 Bước tiếp theo là tìm hiểu về một frontend framework. Có nhiều lựa chọn nhưng những lựa chọn phổ biến nhất hiện nay là React, Angular và Vue. Tôi gợi ý bạn nên tìm hiểu React
Trước hết hãy tìm hiểu React, sau đó tìm hiểu về CSS trong JS, ngoài ra, nếu thích bạn có thể xem các Styled Component và CSS modules nếu bạn thích.

Khi bạn đã biết về React, hãy tiếp tục và đọc về các Progressive web apps. Bây giờ bạn đã biết các frontend framework, những thứ này sẽ không thể làm khó bạn. Hãy xem PWA checklist, đọc về service workers, đo lường performance, sử dụng lighthouse và xem các trình duyệt API mà bạn có thể dùng để phát huy lợi thế của mình. Ví dụ: lưu trữ, đo lường hiệu suất, sử dụng lighthouse và xem các API browser khác nhau mà bạn có thể sử dụng để, ví dụ: Storage, Location, Notifications, Device Orientation và Payments. Ngoài ra nên đọc về RAIL model và PRPL pattern.
Một khi bạn đã hoàn thành việc này, bạn sẽ có thể gọi mình là một frontend developer hiện đại. Hãy đảm bảo là bạn thực hành những gì đã học. Dưới đây là danh sách những task bạn có thể chọn để thực hiện:

  • Tạo một ứng dụng đơn giản cho phép bạn chọn một vài hashtag và dùngAPI tìm kiếm của Twitter để tìm nạp và hiển thị cho bạn các tweet gần đây nhất cho các hashtag đó trong lưới bố cục như trello. Cố gắng ghim các hashtag để khi người dùng làm mới trang, trang sẽ nhớ các hashtag mà bạn đã chọn. Sử dụng React Router và thêm về các page.
  • Tạo một ứng dụng pomodoro tương tự như ứng dụng này cho phép người dùng cài đặt thông số về thời lượng làm việc và thời gian nghỉ, hiển thị noti và phát chuông khi công việc hoặc giờ nghỉ kết thúc/ bắt đầu.
  • Tạo lại github trending page bằng React và cho phép filter lọc bằng language và date giống như github.

Giai đoạn 5 — Automated Testing

Học cách viết automated test cho các ứng dụng của bạn sẽ giúp bạn đỡ đau đầu hơn trong tương lai và sẽ giúp bạn có một vị trí tốt hơn trong công việc. Đầu tiên, hãy tiếp tục và tìm hiểu các loại test khác nhau, các khái niệm khác nhau như mocking, stubs, vv. Sau đó, hãy tiếp tục và tìm hiểu Jest, Enzyme và Cypress tương tự như thế. Ngoài ra hãy học cách tính toán phạm vi kiểm tra.

 Tasks

Về phần task, hãy tiếp tục và viết unit, integration, functional test cho ứng dụng mà bạn đã tạo ở giai đoạn thứ 4 trở về trước.

Giai đoạn 6 — Static Type Checkers

Type checker giúp bạn khiến code của mình dễ bảo trì hơn khi được phát triển lên, tăng sự linh hoạt khi thực hiên tái cấu trúc, hỗ trợ tốt hơn các IDE và là kiểu tài liệu tốt nhất mà bạn có thể có được. Có chủ yếu là Flow và TypeScript trong domain này. Tuy nhiên, Typescript có vẻ có nhiều sự thúc đẩy hơn, và tôi khuyên bạn nên chọn nó.

Khi bạn đã hoàn thành việc học TypeScript, hãy tiếp tục và chuyển đổi bất kỳ ứng dụng JavaScript hiện có nào của bạn sang TypeScript.

Giai đoạn 7 —Server-side Rendering

Các ứng dụng server-side rendering giúp cho hiệu suất hoạt động tốt hơn, và cải thiện SEO hơn các ứng dụng client rendering. Mặc dù đây không phải là một yêu cầu, nhưng Server-side rendering chắc chắn sẽ giúp bạn trong việc tạo ra các ứng dụng frontend tốt hơn. Có nhiều lựa chọn dựa trên frontend framework mà bạn chọn; nhưng nếu bạn đã chọn React.js thì bạn nên sử dụng Next.js, điều này giúp SSR trở nên dễ dàng.

Về task, chuyển đổi bất kỳ ứng dụng nào bạn đã thực hiện ở trên thành server-side rendered bằng Next.js

Giai đoạn 8 — Đi xa hơn

Tất cả mọi thứ hiển thị trong giai đoạn này là tùy chọn và không thực sự cần thiết cho bạn nhưng nếu bạn muốn dùng thử, hãy tiếp tục và xem xét.

Lộ trình hoàn chỉnh

Lộ trình hoàn chỉnh cho toàn bộ quá trình được đưa ra dưới đây với một số chi tiết bổ sung:

Có thể có những thứ vẫn còn thiếu trong lộ trình nhưng đây là tất cả những gì bạn cần cho bất kỳ vai trò nào của Frontend Engineer. Và hãy nhớ chìa khóa là “practice”. Nó có thể trông đáng sợ hơn lúc ban đầu và bạn sẽ cảm thấy như bạn không nắm bắt được nhiều, nhưng điều đó là bình thường và theo thời gian bạn sẽ cảm thấy rằng bạn đang ngày càng tốt hơn. Cũng đừng quên nhờ sự giúp đỡ nếu bạn gặp khó khăn, bạn sẽ ngạc nhiên bởi có rất nhiều người sẵn sàng giúp đỡ bạn.