原文出處：https://dev.to/aswin2001barath/junior-to-senior-web-developer-roadmap-breakdown-1525

您是初級開發人員，正在努力爬上公司的階梯並成為高級開發人員嗎？

您是一名感到迷茫、不知道從哪裡開始的全端開發人員嗎？ 🤔

嗯，您來對地方了！ 😎

這是初級開發人員成為受人尊敬的高級開發人員的逐步路線圖👨‍💻

先決條件

• 基本的 HTML、CSS 和 JavaScript 知識。

• MERN（MongoDB、ExpressJS、ReactJS、NodeJS）或 PERN（PostgreSQL、ExpressJS、ReactJS、NodeJS）堆疊知識很有幫助，但不是必要的。

以下是路線圖中基本技術的細分，您可以在成為高級開發人員的過程中逐步遵循這些技術👨‍💻

SSH

SSH 在安全遠端通訊中發揮著重要作用。透過熟悉 SSH 基礎知識、其命令、加密方法、SSH 金鑰管理以及將 SSH 應用於實際應用程式，您就可以順利成為高級開發人員。

• 到底什麼是 SSH？

  • SSH 是 Secure Shell 的縮寫，是一種旨在在兩台電腦之間建立安全通訊的協定。 （不用擔心這些花哨的術語——協議只是一堆規則，而 SSH 是一種特定類型的協議。）

• SSH 指令：SSH 的主要用途之一是在遠端電腦上執行指令。這意味著您可以建立與伺服器的連接並使用 SSH 命令與其互動。

• 加密：要真正掌握 SSH，了解加密等關鍵概念非常重要，其中涉及對稱和非對稱加密技術以及雜湊。這些概念為更深入地理解 SSH 的安全機制奠定了基礎。

• SSH 金鑰：SSH 的一個組成部分是使用 SSH 金鑰。這些密鑰由公鑰和私鑰組成。了解如何在伺服器上產生、管理和安全地儲存這些金鑰對於有效使用 SSH 至關重要。

• 練習並測試您的 SSH 技能：

  • 練習 SSH 技能的一個好方法是將本地電腦連接到 GitHub 等平台或 DigitalOcean 等雲端供應商。這種實務經驗將有助於鞏固您對 SSH 概念的理解。

  • 想像這樣的場景：“您的 Web 應用程式一夜之間神秘地從伺服器上消失。您的任務是使用 SSH 將所有專案檔案恢復到伺服器上。”成功完成此任務可以展示您的 SSH 技能和解決問題的能力。基本上，如果你能做到這一點，那你就太棒了！

表現：

效能優化是您成為高級開發人員的關鍵技能。以下技術將幫助您確保應用程式平穩且有效率地執行。透過掌握它們，您將成為性能大師。

I) 網路優化：

• 最小化檔案：最小化檔案至關重要，因為較小的檔案會導致更快的載入時間。這不僅可以增強使用者體驗，還可以降低專案的頻寬成本。在網路速度不同的行動裝置造訪網站的時代，這一點尤其重要。

  • 1. 檔案壓縮：較小的檔案意味著使用者的下載速度更快。了解如何使用 GZIP 等檔案壓縮技術來最小化檔案大小，以減少 HTML、CSS 和 JavaScript 等基於文字的檔案的大小。
  • 2. 影像最佳化：透過調整大小、壓縮和選擇正確的影像格式來優化影像可以顯著減小檔案大小。 ImageMagick 等工具或 TinyPNG 等線上服務可以幫助您完成此過程。

• 改善應用程式的交付：改進的交付可以加快頁面載入時間，這可以直接影響用戶的參與度和保留率。這對於全球可存取性和確保全球用戶獲得一致的體驗也至關重要。

  • 1. 內容交付網絡(CDN)：CDN 是一種分散式伺服器網絡，策略性地位於全球範圍內，用於從地理位置更靠近用戶的伺服器交付Web 內容，例如圖像、腳本和影片，從而更快的加載時間並減少延遲。作為初級開發人員，了解如何利用 CDN 來增強交付。
  • 2. HTTP/2 協定：HTTP/2 是萬維網使用的 HTTP 網路協定的主要修訂版。它透過同時發送多個檔案並透過多路復用、壓縮和標頭優化等功能實現更快的載入時間來增強網站效能。實作 HTTP/2 協定可以顯著改善交付。

• 練習並測試您的網路優化技能：

  • 效能測試：初級開發人員可以透過使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具進行效能測試來進行練習。這些工具評估網站的效能並提供改進建議。

  • 真實世界專案：初級開發人員可以透過參與真實世界專案進行練習。從頭開始建立和優化網站或 Web 應用程式可以提供實施網路優化的實務經驗。

II) 前端優化：

• 關鍵渲染路徑以及如何改進它：

  • 了解和優化關鍵渲染路徑對於使您的網站快速加載至關重要。它涉及優化從用戶請求網頁到視覺上完整的事件順序。關鍵面向包括最大限度地減少 CSS 和 JavaScript 等渲染阻塞資源、利用瀏覽器快取以及利用非同步載入技術。

• 漸進式 Web 應用程式 (PWA) 與程式碼最佳化：

  • 開發漸進式 Web 應用程式涉及最佳化程式碼以獲得卓越的使用者體驗。 PWA 是一種 Web 應用程式，可提供類似本機應用程式的體驗，具有離線功能、推播通知和快速載入時間等功能。程式碼優化實踐包括高效的快取策略和最大限度地減少 JavaScript 執行，同時確保互動順暢。

• 建立離線就緒的漸進式 Web 應用程式 (PWA)：

  • 了解如何開發離線工作的 PWA，甚至使用 JavaScript、HTML 和 CSS 將其提交到應用程式商店。離線功能、快取和響應式設計是確保 PWA 無縫運作（無論使用者的網路連線為何）的重要組成部分。

• 程式碼分割：

  • 程式碼分割是一種透過將 JavaScript 分成按需載入的較小套件來增強網站效能的策略。這種做法減少了初始載入時間並改善了整體使用者體驗，尤其是在較慢的網路連線上。

• React 和 Redux 應用程式的智慧渲染：

  • 透過智慧渲染技術提高 React 和 Redux 應用程式的速度。這涉及優化元件渲染和狀態管理，減少不必要的重新渲染，並確保您的應用程式快速響應用戶互動。

• 練習並測試您的知識：

  • 透過實際改善網站（例如公司登陸頁面）來提升您的技能。實施您在實際專案中學到的效能最佳化，然後測試結果。這種實務經驗對於鞏固您在前端優化方面的專業知識非常寶貴。

III) 後端優化

後端優化以及實踐和測試是確保您的應用程式能夠處理不斷增長的用戶群並提供高效、可靠的服務的基礎。

• 內容交付網路 (CDN)：

  • 內容交付網絡是分散式伺服器網絡，用於儲存網站內容的快取副本。這些伺服器策略性地分佈在全球各地，允許用戶從地理位置較近的伺服器存取資料。這可以減少延遲、加速內容交付並增強用戶體驗。

• 擴充資料庫：

  • 擴展資料庫涉及擴展資料庫的容量和效能以處理增加的資料和流量。技術包括垂直擴展（向單一伺服器加入更多資源）或水平擴展（加入更多伺服器來分配負載），確保您的應用程式在成長時保持回應靈敏且可靠。

• 壓縮來自後端的回應：

  • 壓縮來自後端的回應意味著減少從伺服器發送到客戶端的資料大小。 GZIP 壓縮等技術可以顯著減小響應大小，從而縮短載入時間並減少頻寬消耗。

• 快取:

  • 快取涉及將經常存取的資料或內容儲存在記憶體或磁碟上，以便更快地檢索。實施快取策略可以縮短回應時間、減少伺服器負載並增強應用程式的整體效能。

• 負載平衡和負載測試：

  • 實作負載平衡器對於在多個伺服器之間分配傳入網路流量至關重要。負載平衡可確保沒有任何一台伺服器不堪負荷，從而提高資源利用率並提高可靠性。

  • 負載測試模擬現實條件，以辨識效能瓶頸、確保可擴充性並最佳化您的基礎架構。

• 練習並測試您的知識：

  • 實作負載平衡器。

  • 對專案實際執行負載測試。

前端框架與概念

前端開發是您成為資深開發人員的基石。熟悉這些概念將為網路開發事業的蓬勃發展鋪路。

• React 和 Redux：React 和 Redux 是建立動態單頁應用程式的首選函式庫。首先掌握 React 基礎知識並建立一個專案。然後，深入研究 Redux，了解狀態管理並建立應用程式以實現可擴展性。

• Webpack4 + Parcel：Webpack4 和 Parcel 是用於捆綁專案文件和優化生產包的最新工具。獲得使用 Webpack 設定專案的實務經驗。

• 練習並測試你的技能：

  • 透過使用 React 和 Redux 建立專案來測試您的知識。

  • 了解使用 Webpack 設定專案的細節。

測試：

測試是一個重要的主題，但也經常被初學者和初級開發人員忘記。

公司喜歡測試。因此，如果您知道如何編寫單元測試和整合測試，您將編寫更好的軟體。

• 軟體測試 101： 了解什麼是測試、測試類型、目前 Web 開發世界中的測試環境、測試工具和函式庫的類型是什麼、如何使用它們以及如何設定一切。

• Jest：用於測試的頂級庫之一。學習編寫同步和非同步測試、編寫模擬並產生覆蓋率報告

• React 測試：然後深入為您的 React 應用程式編寫測試。學習使用快照測試和酵素來編寫智慧測試，以避免應用程式中出現錯誤。

到此結束時，您應該了解整個測試環境，並可以輕鬆地編寫您遇到的任何測試。

打字稿：

TypeScript 是目前 Web 開發環境中最熱門的話題之一。

• 靜態類型：了解靜態類型的基礎知識。了解為什麼 JavaScript 沒有靜態型別而是動態型別。

• Typescript 101：了解什麼是 TypeScript、如何使用 TypeScript、有哪些不同類型以及如何將它們新增到您的專案中。

• React 中的 Typescript：最終學習如何將 TypeScript 新增到您自己的 React 專案中。

再次確保您掌握這些主題。

SPA + 伺服器端

• 伺服器端渲染 (SSR)：透過伺服器端渲染深入研究 Web 渲染的起源。了解為什麼 SSR 在 Web 開發中曾經並且仍然有用。了解為什麼有些公司繼續依賴 SSR 來滿足特定需求。探索 React 中伺服器端渲染的實現，並權衡這種方法的優缺點。

• 客戶端渲染 (CSR)：深入了解單頁應用程式 (SPA) 中的客戶端渲染。了解企業社會責任的優點和缺點。了解何時選擇客戶端渲染而不是伺服器端渲染。了解如何實作客戶端渲染並評估兩種渲染方法的優缺點。

• Next.js：探索 Next.js，這是一個簡化伺服器端動態應用程式所建立的函式庫。了解 Next.js 如何促進伺服器端渲染和互動式資料驅動 Web 應用程式的開發。

在本節結束時，您將準備好決定是否需要為您的專案使用單頁應用程式或伺服器端呈現的應用程式。

安全：

• 前端安全性最佳化：學習跨網站腳本和 SQL 注入等註入攻擊。練習這些以了解它們是如何工作的。

• 後端安全優化：了解有關後端安全的更多資訊以及管理敏感資料的最佳實踐。

• 道德駭客 101：學習基本的道德駭客技術，以便我們在建立應用程式時能夠學習如何保護自己。

因此，在學習這些概念後，當您使用最新的提示和技巧以及實施最新的工具和技術來建立安全應用程式時，您必須充滿信心。

碼頭工人：

Docker 是一個容器化平台，可讓您將應用程式及其相依性打包到可移植、隔離的容器中。這些容器可以在從開發到生產的不同環境中一致運作。 Docker 是一個絕對會讓你驚嘆不已的工具。

• 容器：

  • 首先深入了解容器及其對公司建立和管理應用程式的方式的深遠影響。

  • 容器支援輕量級、一致且易於複製的環境，徹底改變了軟體開發和部署。

• Docker 101：製作容器

  • 透過了解如何建立 Docker 檔案和建立自己的容器來了解 Docker 的基礎知識。

  • 這些基礎知識構成了使用 Docker 輕鬆封裝和分發應用程式的基礎。

• Docker-compose：編排容器

  • 探索 Docker-compose，一個用於編排多容器 Docker 應用程式的工具。

  • 了解如何將多個容器作為單一服務進行定義、配置和管理，從而簡化複雜應用程式的部署。

• 微服務與單體架構：

  • 在整體架構中，單一大型程式碼庫處理所有應用程式功能，這使得更新和擴展具有挑戰性。

  • 容器支援微服務方法，其中應用程式被分為更小的、獨立的服務，可以單獨開發、部署和擴展。這種轉變提供了靈活性、可擴展性並提高了資源利用率。

  • 容器（如 Docker）有助於從整體架構轉向微服務。因此，請詳細了解每種架構的優缺點。

• 練習並測試您的 Docker 技能：

  • 了解如何將 Redis 伺服器、Postgres 資料庫和 API 伺服器全部組合到一個 docker 容器中，以便它們都透過一個命令執行。

在本節和操作專案之後，每當我們部署應用程式時，我們都會對 Docker 感到非常滿意。

Redis：

Redis 是最受歡迎、最常用的資料庫之一，是一種鍵值儲存。

• 資料庫 101：深入研究資料庫主題，深入了解各種類型的資料庫以及它們如何適應資料儲存解決方案的前景。

• 什麼是 Redis？：

  • Redis 是一個開源的記憶體鍵值儲存資料庫。

  • 它在資料儲存和檢索方面表現出色，使其成為需要高速資料存取的應用程式的多功能選擇。

• Redis 101：學習如何使用 Redis。了解如何使用 Redis 進行快取以使我們的網站更快並進行會話管理。

• Redis CLI：了解如何使用 Redis CLI。

• 練習您的 Redis 技能：啟動我們自己的 Redis 伺服器。

• 鍵值資料庫及其作用：

  • 像 Redis 這樣的鍵值資料庫提供了一種簡單而有效的資料儲存方式。

  • 它們將資料儲存為鍵和對應值對，從而實現快速資料檢索。

  • 這些資料庫在快速資料存取至關重要的場景中尤其有價值，例如快取、會話管理和即時應用程式。

• 何時使用 Redis 等資料庫：

  • Redis 非常適合速度和資料一致性至關重要的用例。

  • 考慮使用 Redis 來快取經常存取的資料、管理使用者會話、為即時應用程式提供支援以及確保對關鍵資訊的低延遲存取。

會話 + JWT

使用您的 React 專案，了解如何建立網站的整個動態部分：即使用以下技術的使用者管理。

• 會話驗證：了解如何建立新的個人資料頁面。了解如何使用基於會話的身份驗證（其中將使用 cookie）並了解如何實現它。

• 令牌身份驗證：了解有關令牌身份驗證（例如 JWT 令牌）的更多資訊。了解每種身份驗證類型的優缺點。

• 安全性身分驗證流程：了解如何實施可以在您選擇的任何應用程式中實施的安全性身分驗證流程。

• 練習您的 Redis 技能：學習如何使用和實施 Redis 進行會話管理

  • 這樣我們就有受保護的路線

  • 此外，這樣，只要我們有登入功能，我們就可以使用該系統，因為我們知道它是安全的並且遵循最佳實踐。

亞馬遜網路服務（「AWS」）：

Amazon Web Services，通常稱為 AWS，是一個強大的雲端平台，它改變了公司的營運方式，提供了無與倫比的可擴展性和效率。

AWS 101：

• 什麼是 AWS（亞馬遜網路服務）？：

  • AWS 是一個雲端運算平台，提供廣泛的服務，包括運算能力、儲存、資料庫、機器學習等。

  • 它提供可擴展的按需資源，使企業能夠創新和發展，而無需管理實體基礎設施的負擔。

• 基礎設施即服務 (IaaS)：

  • AWS 提供基礎架構即服務，讓使用者透過網際網路配置和管理虛擬化運算資源。

  • 這種方法消除了對本地硬體的需求，並提供了靈活性和可擴展性。

• 平台即服務 (PaaS)：

  • AWS 將其服務擴展到平台即服務，使開發人員能夠建置、部署和管理應用程式，而無需擔心底層基礎設施。

  • 這使開發人員能夠專注於編寫程式碼和交付價值。

• 使用 AWS 進行擴充：

  • AWS 使公司能夠有效擴展，並根據需要提供對資源的存取。

  • 它允許企業將其能力與需求相匹配，類似於Google、亞馬遜和微軟等科技巨頭，確保他們能夠無縫地為客戶提供服務。

• AWS Lambda 是一種無伺服器運算服務，使開發人員能夠執行程式碼來回應事件，而無需管理伺服器。它提供了一種經濟高效、可擴展且簡單的方式來執行雲端中的功能。

• Serverless 101：了解如何使用 Serverless 框架。

• 練習您的 AWS 技能：了解如何將 AWS Lambda 實施到您的 React 應用程式中。

最後，您將充滿信心地使用 AWS 並建立雲端中的功能。

CI/CD

當我們將所有內容聯繫在一起並建立瞭如何編寫優秀軟體和優秀應用程式的整體圖景之後；了解如何實際建立良好的流程以及如何實際將應用程式部署到生產中。

• 持續整合：了解有關良好持續整合實踐以及如何實施這些良好實踐和良好工具的更多資訊。

• 持續交付：了解有關良好持續交付實踐以及如何實施這些良好實踐和良好工具的更多資訊。

• 持續部署：了解有關良好持續部署實踐以及如何實施這些良好實踐和良好工具的更多資訊。

• 練習 CI/CD 技能：了解如何在專案中實施 Circle CI (CI/CD) 工具

  • 確保您的開發團隊從一開始就擁有正確的工具和正確的流程

  • 成功編寫錯誤更少、程式碼更簡潔的應用程式。

額外位

• 程式碼分析：了解當您第一次開始一個有大量文件並且不是您自己編寫程式碼的專案時該怎麼做！了解真正優化的提示和技巧。

• 建立高品質應用程式的一般最佳實踐。

軟技能

• 在本部落格中，我主要關注成為高級開發人員過程中的技術方面。然而，有效溝通和情緒智商等軟技能也發揮著至關重要的作用。

• 開發人員的七大軟技能及其學習方法：要更深入地探索各種軟技能，請考慮請參閱資深開發人員兼程式講師Andrei Neagoie 撰寫的部落格。

筆記

• 不同的公司可能對高級 Web 開發人員有不同的期望，因此請務必進行一些額外的研究來客製化您的開發路徑。

最後，在學習了上述所有主題之後，所有這些事情對您來說都會有意義。您將能夠將所有這些事情實施到您自己的專案、您自己的公司。您將了解它們中的每一個是如何連接的。

最重要的是，與其他需要數年時間學習這些技能的初級開發人員相比，借助本路線圖可以快速學習這些內容。

最佳資源

• 初級到高級 Web 開發人員路線圖部落格系列：一個部落格系列，我將學習並分享上述每個主題的知識。

• 不要成為初級開發人員：從初級到高級的路線圖：Andrei Neagoie 的詳細路線圖部落格（a高級開發人員）提供免費資源的連結。

• 零到精通課程：完整的初級到高級Web 開發人員路線圖課程：Andrei 的綜合課程Neagoie（同一高級開發人員）涵蓋了上述所有主題。

我是誰？

• 我是 Aswin Barath，軟體工程迷，喜歡建立 Web 應用程式，現在在我自由職業生涯的繁忙時間透過部落格 分享我的知識。

• 我也是像您一樣的初級開發人員，學習如何成為高級開發人員並在過程中分享我的知識。

• 這是我所有社交活動的連結，按平台分類在一個位置：https://linktr.ee/AswinBarath

謝謝 非常感謝您閱讀我的部落格🙂。