(Bài dịch đã được sự cho phép của tác giả)

Phát triển web là lĩnh vực luôn thay đổi – cách chúng ta xây dựng website ngày hôm nay hoàn toàn khác với cách chúng ta đã sử dụng một 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 Developer đều cảm thấy bối rối khi lựa chọn hướng đi riêng cho bản thân mình.

 

Tôi là tác giả và đang liên tục cải tiến “Developer Roadmap”, trong đó giới thiệu các lộ trình, tools và các công nghệ mà bạn muốn tìm hiểu trong mảng frontend, backend và operations. Tôi đã tạo ra các roadmaps này vào năm 2017, sau đó cập nhật vào năm 2018 và gần đây nhất được sửa đổi vào năm 2019. Tại thời điểm viết bài này, lộ trình phát triển cho các Frontend Developer cũng đã được cập nhật. Tôi vẫn đang làm việc theo lộ trình Backend and Operations / DevOps và hy vọng có thể chia sẻ trong thời gian tới đây.

Trong bài viết này, tôi sẽ tóm tắt và chia sẻ tới bạn động lực thúc đẩy tôi phát triển ra các lộ trình phát triển, một vài lầm tưởng bạn có thể gặp phải khi quyết định đi theo những lộ trình này và cuối cùng là một vài tips hữu ích để trở thành một Frontend Developer hiện đại trong năm 2019.

 

Động lực

Trước khi vào bài viết, tôi muốn giới thiệu qua một chút về bản thân. Tôi đã làm Full stack Development trong 6 năm qua và hiện đang làm Lead Engineer tại Tajawal, nơi tôi đang đóng nhiều vai trò khác nhau. Với tôi, đây không chỉ là sở thích mà còn là một trong những trách nhiệm để theo kịp các xu hướng, đưa ra các quyết định về công nghệ, đào tạo và duy trì động lực cho các Developer. 

Phát triển Web đã thay đổi và có nhiều tiến bộ trong thời gian ngắn; những lựa chọn về công nghệ có sẵn của frontend có thể gây trở ngại cho bất kỳ ai. Tôi hoạt động khá tích cực trong các cộng đồng mã nguồn mở và nếu tôi được trả một xu cho mỗi lần được hỏi hoặc nhìn thấy cây hỏi “Tôi nên học gì tiếp theo” xuất hiện trên các diễn đàn, hẳn tôi đã tích đủ tiền để về hưu vài năm về trước. Vào khoảng năm 2017, một giáo sư đại học cũ của tôi khi đang tổng hợp các hướng phát triển cho sinh viên của mình để giúp họ hiểu hơn về thị trường, đã liên hệ với tôi để giới thiệu cho cô ấy danh sách các tools và công nghệ nên sử dụng cho phát triển web. Tôi đã ghi lại một bản phác thảo thô và chuyển tiếp cho cô ấy nhưng sau đó tôi quyết định chỉnh sửa lại một chút và đưa nó lên GitHub có thể giới thiệu tới bất cứ ai về điều đó mỗi khi tôi được hỏi. Và đó là cách những roadmaps này được xây dựng nên. 

 

Những lầm tưởng

Trước khi bạn bắt đầu với các lộ trình, xin hãy lưu ý:

Mục đích của các lộ trình là giúp bạn có cách nhìn tổng quan và đưa ra các hướng dẫn nếu bạn cảm thấy băn khoăn liệu mình cần học tiếp theo, không nhằm mục đích khuyến khích bạn chạy theo các xu hướng công nghệ đang gây sốt. Bạn nên học cách tìm hiểu tại sao loại công nghệ này lại phù hợp hơn những loại công nghệ khác trong một số trường hợp nhất định và lưu ý rằng các công nghệ đang gây sốt không có nghĩa là sẽ phù hợp với công việc của bạn. 

Thứ hai, hãy làm một số nghiên cứu về thị trường việc làm của bạn.

Đừng bỏ qua một thực tế là các ngôn ngữ và tools phụ thuộc khá nhiều vào thị trường, vì vậy hãy thử nghiên cứu về các job mà bạn đang hướng tới. 

Thứ ba, bạn không cần phải biết tất cả mọi thứ được liệt kê ở đây.

Bạn không cần phải học tất cả những kiến thức được liệt kê ở đây thì mới xin được việc. Các roadmaps trông có vẻ đồ sộ nhưng đừng để chúng làm bạn sợ hãi nếu chỉ mới chập chững bước chân vào nghề. Tôi vừa cố gắng tóm gọn tất cả những thứ mà cuối cùng bạn sẽ học hoặc sử dụng. Bạn có thể học các phần kiến thức cơ bản tối thiểu trước và tiếp tục học phần còn lại khi bạn bắt đầu các dự án. 

 

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ỉ mới bước chân vào con đường phát triển web, tôi có một lộ trình cho bạn. Hãy nhìn vào lộ trình dưới đây và khoan đọc thêm gì khác; hãy học các mục được liệt kê trong lộ trình này và quay trở lại sau khi bạn đã thực hiện một vài dự án có sử dụng các công nghệ này.

 

 

Tin được không, chỉ cần tìm hiểu các mục được liệt kê phía trên là bạn sẽ có thể tự gọi cho mình một Web Developer và tìm một công việc trên thị trường. Tôi biết rất nhiều người chỉ học những kiến thức phía trên và đang kiếm được kha khá tiền từ công việc freelance hoặc công việc full time. Hãy dành thời gian cho tất cả các mục được liệt kê trong lộ trình phía trên, nắm vững kiến thức và thực hành nhiều lần với nhiều dự án khác nhau. Dưới đây là danh sách một số ý tưởng mà bạn có thể thực hiện: 

Nhiệm vụ

• Tạo một ứng dụng Pomodoro. Bạn có thể clone và tạo phiên bản web cho ứng dụng này
• Tạo một trang web sử dụng API của Github để lấy và hiển thị top 10 repo của tuần với định dạng đẹp mắt.
• Tạo một ứng dụng quản lý công việc đơn giản cho phép bạn thêm các tác vụ, đánh dấu khi hoàn thành, chỉnh sửa và xóa chúng.
• Tạo một đồng hồ bấm giờ đơn giản mà người dùng có thể bắt đầu, dừng, tạm dừng và reset.

Khi bạn đã hoàn thành những task này, hãy tìm hiểu về các hệ thống quản lý version của code, cách sử dụng Git cơ bản và tạo hồ sơ của bạn trên GitHub.

 

 

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

Khi bạn đã nắm vững những kiến thức cơ bản, hãy chuyển sang tìm hiểu cách viết CSS có thể bảo trì được và sử dụng các framworks CSS. Roadmap sẽ trông như thế này: 

 

 

Khi bạn đã hoàn thành những bước này, hãy tiếp tục thực hiện tasks sau cho các dự án mà bạn đã thực hiện trong giai đoạn 1.

Nhiệm vụ

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

 

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

Đây là giai đoạn cần thiết để bạn thực sự bước vào phát triển Frontend hiện đại. Ở giai đoạn này, hãy tiếp tục tìm hiểu thêm về JavaScript, Webpack là gì, hiểu các concepts khác nhau và tại sao chúng lại cần thiết. Hiểu babel là gì, tại sao chúng ta sử dụng nó và tìm hiểu cách tích hợp với webpack và cuối cùng là học cách phân tích code (linting) của bạn bằng ESlint. Tất cả các mục được liệt kê trong giai đoạn này đều xoay quanh webpack.

 

 

Bạn sẽ bắt đầu hiểu hơn về phát triển Frontend hiện đại vào thời điểm 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.

Nhiệm vụ

• 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 các mạng xã hội (nếu chúng tồn tại). Nó có thể hữu dụng với trình duyệt, đóng gói nó với webpack, sử dụng babel để chuyển mã và sử dụng ESLint cho việc linting.
• Tạo một ứng dụng danh sách việc cần làm đơn giản, sử dụng SASS cho CSS, thêm bootstrap cho styles, sử dụng BEM, chuyển mã Javascript bằng babel, đóng gói với webpack, tạo bản dựng sản xuất tối ưu hóa và triển khai nó trên Github Pages.

 

Giai đoạn 4: Các ứng dụng Frontend hiện đại

Bước tiếp theo, chúng ta cần quan tâm đến một số frontend framework. Có rất nhiều framework trên thị trường, tuy nhiên gần đây React, Angular và Vue là những framework phổ biến nhất. Bản thân tôi sẽ đề xuất bạn đọc sử dụng React.

Đầu tiên, bạn cần học React – dĩ nhiên rồi, và sau đó bắt đầu tìm hiểu lần lượt về redux, CSS trong JS. Không bắt buộc nhưng nếu có thời gian, bạn cũng nên biết thêm về Styled Components và CSS mô đun. 

 

 

Một khi đã biết về React, bạn hãy tiếp tục đọc thêm về Progressive web apps. Nó sẽ không quá “khó nuốt” nếu bạn đã có kiến thức căn bản về frontend framework. Đọc thêm về PWA checklist, tìm hiểu về service workers, đo lường hiệu suất, sử dụng lighthouse đồng thời xem xét các trình duyệt APIs khác nhau mà bạn có thể sử dụng làm lợi thế. Ở đây có thể kể đến như: Lưu trữ, vị trí, thông báo, định hướng thiết bị và thanh toán. Bạn cũng càn đọc thêm về mô hình RAIL và PRPL pattern.

Một khi bạn đã làm xong tất cả những điều trên, bạn có thể tự gọi mình là một frontend developer hiện đại rồi đấy! Hãy cố gắng thực hành những gì mà bạn đã được học. Dưới đây, tôi sẽ gợi ý một danh sách các task bạn có thể làm nếu đang hơi “bí” ý tưởng:

Nhiệm vụ:

• Tạo một ứng dụng đơn giản cho phép bạn chọn một số hashtag và sử dụng API tìm kiếm của Twitter để hiển thị cho bạn các tweet gần đây nhất có hashtag đó dưới bố cục dạng lưới như Trello. Cố gắng ghim các hashtag để khi người dùng refresh trang, nó vẫn sẽ nhớ các hashtag mà bạn đã chọn. Sử dụng react-router và thêm trang About.
• 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ấu hình thời gian làm việc và nghỉ ngơi, hiển thị thông báo và âm thanh khi nào giờ làm/giờ nghỉ bắt đầu hoặc kết thúc. 
• Tạo lại trang xu hướng GitHub bằng React, cho phép lọc ngôn ngữ và ngày tháng như GitHub. Bạn cũng có thể thêm các thư viện cho từng ngày cụ thể. 

 

Giai đoạn 5: Test tự động

Viết các bài test tự động cho các ứng dụng sẽ giúp bạn đỡ “đau não” hơn nhiều trong tương lai cũng như giúp CV xin việc của bạn được chú ý nhiều hơn. Để làm được điều này, đầu tiên hãy thử tìm hiểu nhiều loại test khác nhau, nhiều loại concept khác nhau như mocking, stubs, vân vân,.. Sau đó, bạn hãy tiếp tục học thêm về Jest, Enzyme và Cypress theo cách tương tự. Ngoài ra cũng cần học cách tính test coverage.

Task  

Đối với các task, hãy bắt đầu bằng việc viết các bài test unit, test tích hợp và test chức năng cho các ứng dụng mà bạn đã tạo ra ở Giai đoạn 4 kể trên. 

 

Giai đoạn 6: Static Type Checkers

Loại kiểm tra này sẽ giúp code của bạn trở nên dễ maintain hơn khi code của bạn mở rộng, nhanh hơn khi thực hiện tái cấu trúc, cung cấp hỗ trợ tốt hơn trong các IDEs và là tài liệu tốt nhất mà bạn có. Trong domain này sẽ chủ yếu là Flow và TypeScript. Tuy nhiên, tôi cho rằng sử dụng TypeScript sẽ có nhiều lợi thế hơn và sẽ khuyên bạn nên sử dụng chúng. 

 

 

Sau khi bạn đã hoàn thành việc học TypeScript, hãy thử chuyển đổi một ứng dụng JavaScript bất kỳ nào bạn đang sử dụng sang TypeScript.

 

Giai đoạn 7: Render Server-side

Các ứng dụng được render trên server sẽ có hiệu suất tốt hơn và cải thiện SEO hơn so với các ứng dụng được render trên client. Mặc dù điều này không hẳn là bắt buộc, tuy nhiên nếu sử dụng, nó sẽ giúp bạn tạo ra các ứng dụng frontend tốt hơn. Có rất nhiều lựa chọn khác nhau phụ thuộc vào frontend framework khác nhau mà bạn lựa chọn; Tuy nhiên nếu bạn đã chọn React.js thì nên đi kèm với Next.js bởi điều này sẽ hỗ trợ SSR trở nên dễ dàng hơn. 

 

 

Nhiệm vụ: Hãy chuyển đổi bất kỳ ứng dụng nào bạn đã làm ở trên để được render trên server-side bằng Next.js

 

Giai đoạn 8: Tiến lên phía trước

Tất cả các kiến thức liệt kê trong giai đoạn này không phải là kiến thức bắt buộc, tuy nhiên nếu hứng thú bạn vẫn có thể xem qua.

 

 

Xin lưu ý rằng ở đây vì độ dài của bài viết có hạn nên tôi sẽ không đi sâu vào phân tích mà chỉ đưa ra một bức tranh tổng thể thôi. Nếu bạn muốn biết sâu về nó, hãy thử tìm cách riêng trong quá trình nghiên cứu của bản thân nhé!

 

Lộ trình hoàn chỉnh

 

Biểu đồ hoàn chỉnh cho toàn bộ lộ trình được đưa ra dưới đây với một số chi tiết tôi đã bổ sung thêm.

Có thể lộ trình này vẫn còn thiếu một vài thứ, tuy nhiên tôi cho rằng đây là tất cả những gì bạn cần biết đối với vị trí Frontend Developer. Chìa khóa ở đây là: Hãy luyện tập nhiều nhất có thể. Dĩ nhiên, trông nó có vẻ hơi đáng sợ một chút lúc ban đầu: quá nhiều thứ phải học và bạn sẽ luôn sợ rằng mình sẽ bỏ lỡ một phần nào đấy. Tuy nhiên, hãy cứ “take it easy” thôi bởi theo thời gian, tôi tin rằng bạn sẽ tiến bộ lên mỗi ngày. Và đừng ngại ngần trong việc hỏi ý kiến hoặc nhờ người khác giúp đỡ; Bạn sẽ ngạc nhiên vì sự nhiệt tình của họ cho mà xem!

Lộ trình này cùng với các lộ trình của backend và operations sẽ được tôi lưu giữ trên trang GitHub cá nhân. Đừng quên tôi vẫn đang nâng cấp lộ trình của Backend, DevOps và sẽ release chúng trong một vài ngày tới. 

Cuối cùng thì bài này cũng đã kết thúc rồi! Bạn có thể thoải mái kết bạn Twitter với tôi hoặc gửi email nhé. Và đừng quên đón chờ những bài viết tiếp theo!

 

Tác giả: Kamran Ahmed

Link bài viết gốc: Tại đây

Dịch và chỉnh sửa: Vân Phạm, Ly Nguyễn, Thế Mạnh