[程式設計] 全端工程師學習地圖(通用 + 前端)

前言

2020 想要當一名網頁工程師,就要有一個覺悟是,要學很多東西,而且沒有學完的一天。對於初學者而言,常會不得其門而入。到底要如何一步步把自己的工具箱建起來,是本文做為一個 101 介紹,想要帶讀者理解的。

一個大型網站的建成,需要很多不同的知識。瀏覽器端有 JavaScript、HTML、CSS,後端有 Server、Database、Message Queue。而 Cloud Infrastructure 的部分,又有三家領先的公司 (AWS, Azure, GCP) 可以選擇。此外,光是要 coding 的編輯器,就有 VS Code, WebStorm, Atom, Sublime 可以挑選,同一時間 Vim 和 Emacs 的社群大概還在另一邊互戰。Shell 的部分,又有 Bash, Fish Shell, Zsh Shell。

本來想要一口氣把後端、Devops 都寫完,後來發現實在太長了,先切前端工程師的部分出來吧 XD(還不快幫我分享!!!!)

開始之前的心理建設

在開始之前,想要先說明幾個原則,完全了解這些原則之後,再往下學習,速度會快得很多,對自己也比較有信心。

  1. 這整串的技能樹,不可能在幾個月之內就學完。該做的事,也不是一次選多個技術學習,相反的,應該做的事是一個一個來,確保自己了解七成的概念,且可以在實戰中運用後,再選擇下一個技術來學習。為什麼是七成?因為另外的三成是需要時間來慢慢理解和反覆咀嚼的。
  2. 這篇不只網頁工程師可以看,其它種類的軟體工程師也可以參考。畢竟有些基礎的技能,像是 Linux、Shell、IDE 也是可以相通的。
  3. 著重在了解概念和邏輯。意即,為何我需要這項技術?以及學了這項技能,會帶給我什麼樣的好處?如此一來,學習會更有動力。
  4. 本文著重在給一個概括式的介紹,期望告訴讀者,在什麼情況下,你會需要學習什麼技術,並非以下介紹的東西全部都要學會。許多技術其實是在需要的時候才需要去學,先學起來沒有太大的意義。
  5. 進階的技術,並非必要,但是學會了,你會覺得你比別人強的。也就是你可以站上鄙視鏈更高端的 XD。要注意的一點是,比起學習更多進階的技術,能不能掌握好基本的技術才是重點,才不會落得樣樣說懂,樣樣皆鬆的冏境。
  6. 這邊介紹的技術,都是我懂的,而且我推薦的。這些技術我曾經,或現在正在使用,可見的將來也會繼續使用。除此之外,還有很多東西是我不懂的,還請見諒。
  7. 每一項技術,會大概講解他的運用場景,並附上一些好的 Github Repo、課程、文章連結。我認為對初學者比較好的方式是,買一或兩個課程,讓教學者替我們提取重要的概念,也就是花小錢省時間。此外,搭配一些文章看,會了解其它工程師遇到什麼問題。最後,還有餘力,就看優秀的 Github 原始碼。看GitHub 原始碼的優點是了解會非常的深入,對於初學者的學習會非常陡峭,可是卻是要成為一名高手的必備技能。
  8. 除了這些技術之外,還有很多技術,永遠沒有學完的一天。此外,各技術要深的話,也可以深到超出本篇很多。因此,找到自身興趣,保持持續學習的心很重要。

English(通用)

英文

想學好程式,筆者認為最重要的是學會基本的英文。如果可以學會英文,基本上,可以讀的資料會多出上百倍。雖然我的母語是中文,但在閱讀相關的 bug 或技術時,我 100% 使用英文下去搜,因為英文通常才能搜到正解。而且全世界寫英文的 blog 不是只有以英語為母語的國家,而是所有厲害的工程師。

有趣的是,習慣英文後,有些技術名詞還不知道中文怎麼說。

練習英文的方式有蠻多的,我個人是強迫自己去看 Github 的 Issue 和 Stack Overflow。一個極端但也蠻有效的方式是,把自己電腦、瀏覽器等設定全部調成英文。調成英文有一個好處是,就連 Google 搜尋出來的結果也預設會是英文。直接直球對決英文。

學習寫出文法正確的英文也很重要,這個部分我會推薦 Grammarly。他們有出 Chrome 的套件,會自動偵測目前寫的文字是否有文法問題。我在寫信件給客戶或公司的 senior 的時候,這個套件幫了我很大的忙避免掉一些時態和單複數的問題。免費版的功能有一點少,但我個人是夠用,如果對自己英文信心不足的, 可以選擇試試看 Premium 的功能,會提供比較完整的解說。

此外,把自己丟到英文的工作環境,學習聽說寫,增強英文能力的速度會超乎想像的快。如果很不幸,真的沒有機會可以和外國的同事用英文交流,也可以找一些英文溝通的網站,對於練習英文也會有幫助。最後最後,拜託不要拿著一本單字書,就開始背單字,上面的詞,做為一個合格的工程師大概 80% 都用不到。就算像我這類喜歡和外國人聊一點工作外的事的人,至少 50% 以上也用不到。你要做的只是多和說英文的人講話即可。

其它連結

  • Stack Overflow 程式問和答題的網站。問答通常比較細節,比較是解特定的 Bug。
  • Quora 綜合性問答的網站,類似英文版的知乎,會找到這裡時,通常是比較大層級或方向的問題。
  • Grammarly 修英文文法的瀏覽器套件。
  • TutorABC 廣告打很兇的 TutorABC,我沒試過,可以嘗試看看。

Linux(通用)

Linux

Linux 是一定要學會使用的作業系統,我剛開始學程式沒多久,就把 Windows 系統覆蓋成 Ubuntu 的系統。那段時間感覺像在練功,但只要習慣之後,就再也不會回去使用 Windows 了,除非打遊戲。目前我只有架設 Infrastructure 時才會使用 Linux,桌面環境早已換成另一個 Unix-like 的系統 —— OS X,也就是 MacBook。

這邊的話,我會推薦學習 Ubuntu, CentOS,如果想要客製化程度更高,或成為 Linux 神人的話,請毫不猶豫的灌 Arch Linux。但在網頁開發方面,Arch 稍微雞肋些,可以自行斟酌。習慣 Linux 之後,大部分的設定都可以搬過來 OS X 使用。OS X 兼顧商用軟體和 Unix-like 系統的優點,對於開發速度的提升很有幫助。

其它連結

Shell(通用)

Terminal

Shell 是使用者和作業系統溝通的介面。也就是那個黑黑的視窗,在微軟的系統上,叫做 DOS,在 Linux 和 OS X 上,叫做 terminal。在 OS X 上,我會推薦使用 iTerm2 取代預設的 terminal。至於 Shell 的部分,則使用 Zsh Shell 搭配 Oh my Zsh 即可。

學習使用 Shell 或 Command Line Interface (CLI) 的原因,是為了更快速和方便的操作作業系統。例如 cd 指令可以在各資料夾間移動, mv 可以更改檔名,或者移動檔案。比較進階像砍掉某個 process,用 shell 指令來做也會很方便。

Zsh Shell 的語法和原生的 Bash Shell 很類似,只是多了更多親民的功能。例如 ... 可以取代 cd ../.. 。因此 Bash 用習慣之後,就可以不用再折磨自己,跳到 Zsh Shell 吧!其它也有人用的Shell 像是 Fish Shell,我沒有用過,無聊的話也可以嘗試看看。

除了學習指令之外,Shell Script 也是很值得投資的學習。在寫 pipeline 的時候,如果會 Shell Script 的字串處理的話,會非常的方便。

其它連結

Git(通用)

Git

身為一個軟體工程師,Git 是一定需要的。Git 應該是到目前為止,解決分散式儲存程式碼,最為優秀和常見的解決方案了。順帶一提,發明 Git 和 Linux 的老兄是同一個人。

常見的指令,像是 add, commit, pull, push,都是必學的。如何處理 Merge Conflict、Rebase 的用法,這些也無法避免。

置於代管程式碼的網站,有 GitHubGitLabBitBucket。個人使用的話,推薦用 GitHub,因為可以收藏很多 Repo,現在也有 Private Repository 的功能。公司用的話,我推薦使用 GitLab。GitLab 以前為人詬病的速度,已經改善很多,加上內部直接整合 Gitlab CICD,適合新創公司使用。GitHub 也可以給公司使用,但需要自己牽其它 CICD 工具,像 CircleCI、Travis、Jenkins(會在之後介紹)。

其它連結

IDE 或編輯器(通用)

編輯器

所謂工欲善其事,必先利其器,IDE (Integrated Develop Environment,中文稱整合開發環境) 是非常重要,但也是非常多人忽略的部分。我常常看到一些工程師,非常不熟悉自己的工具,找一段程式碼找 5 分鐘,替換某一個字串又花 15 分鐘一個一個換,時間就這樣浪費掉。高手已經解完一張 ticket,正在往下一張去了。

目前市面上最多人使用的為 VSCode,由 Microsoft 所支持。另外 JetBrain 公司出的的系列也很不錯,我個人是 WebStorm、PyCharm 的重度使用者,原因是對 Vim 的支持較好。但對於不是 Vim 重度依賴者的人,VSCode 就是較好的選擇。

除了較為完整的方案外,也可以選擇輕量化的,像是 AtomSublime。但我個人比較不推薦,畢竟少了很多前述 IDE 預先裝好的功能。身為一個後端或 DevOps,很常會需要 ssh 進去 Linux 的主機。因此,學會使用 Linux 內建的編輯器也是很重要的。通常有三種可以選擇, Nano, Emacs, Vim。其中 Nano 最好操作,但個人最推薦 Vim,Vim 有很多好用的快速鍵。這幫助我在寫程式時,至少提升 3 倍以上的速度,也更能專心思考演算法或功能如何實作。

Emacs 的社群已經在旁邊暖機,準備要幹爆這篇了(誤

其它連結

HTML(前端)

HTML 5

這三個語言,是網頁前端的根本。我們需要 HTML 來建構網頁上的每一個元素(DOM Element)。目前最新的 HTML 為 HTML 5。好的 HTML 結構,可以大幅減少 CSS 和 JS 的量,是成為一個好的前端工程師的基本中基本。

和 HTML 相關的還包含 SEO (Search Engine Optimization,搜尋引擎優化),這個技能前端工程師不一定會需要,但還是值得了解一下。

其它連結

CSS(前端)

File:CSS3 logo and wordmark.svg - Wikimedia Commons
CSS 3

CSS 是一個並不算太難,但變化可以很多端的語法。在瀏覽器上的功能是妝飾和調整 HTML 的外觀。優秀和普通的前端工程師,所寫出來的 CSS,可維護程度是天差地遠。好的前端工程師,在版面縮放時,依然能注意到 Responsive Web Design,確保不會破版。

除了傳統的排版方式,CSS 第 3 版之後,必須學習的有 Flexbox。Grid System 的話,則可以選擇性學習。當然如果要成為一名很專的前端工程師,推薦都學。

CSS 的另一個重點學習技術有 Responsive Web Design。預處理器的部分則有 Sass, PostCSS。但目前主流的寫法是 CSS in JS,所以預處理器的部分,並非必要了解的。其它像是 BEM、OOCSS、SMACSS,也都是比較過時的東西,也是選擇性理解即可。

另外,對 css 很有愛,想要磨練自己的話,可以上一些像是 CodePen 的網站,或者以下的課程也有很大的幫助。但在實際開發網站中,這類型的 CSS 比較少用到,因此,我會列為 Optional,供比較偏向設計師的前端工程師學習。

其它連結

JavaScript (前端)

File:Javascript badge.svg - Wikimedia Commons
JavaScript

就學吧,基本中的基本。寫在瀏覽器上,可以用來回應使用者的操作、向 Server 傳送資料、或者顯示動畫。請至少從 ES6 開始學起,而且目標是完全理解 JavaScript 這個語言的任何細節,例如 Prototype Chain。更為現代的標準如 ES7 ES8,選擇性理解即可。

除了這個之外,還包含其它輔助開發 JavaScript 的工具,像是 Yarn 和 NPM。這兩個都是 JavaScript 界常見的 Package Manager,絕對必學。還有其它自動化和增強 JavaScript 開發流程的工具,像是 Gulp, Grunt,選擇性理解即可,並非必要。

其它連結

框架 Framework(前端)

三選一:React, Angular, Vue,沒了。個人推薦使用 React,目前的市佔率較大。但其它兩個也是不錯的選擇,不須要掙扎使用哪一項。因為完全學會其中一項後,要跳到另外一個是很容易的事。現實是,即使我當了幾年的網頁工程師,我還是僅僅會 React 一項。

學習 Framework 最快的方法,就是找幾門線上課,交叉比對,快速學習。除此之外,要完全熟悉該 Framework,也要搭配官方的 Document 看,所有最新的 Release 和用法都會寫在裡面。這個方法是每個高手都用得很純熟的。

其它連結

State Management(前端)

File:Redux.png - Wikimedia Commons
Redux

Web 的這一波大爆發,來自於 State Management Library 的改變。所謂的 State Management,就是針對使用者或者其它 input 的不同動作,Application 要能夠有相對應的反應,並記住目前的 State。例如,我按一個按鈕,要送出資料到後端,並把小視窗關起來,這完整的動作,就會交給 State Management Library 管理。

React 生態系的話,必要學習的就是 Redux。而 Angular 則是 RxJs,Vue 則是 VueX。這個主題非常的重要,能不能成為一個基本有戰力的前端,這是一定要學起來,而且對初學者而言,學習曲線最陡峭的技術。

其它連結

RESTful API (前端、後端)

RESTful API,全名叫做 Representational state transfer,是一個規範後端 API 的標準。了解這個之後,就可以和後端工程師合作,開始向後端發送或要資料。常見的 Method 有:GET、POST。字面上的意思,GET,就是我要向後端純粹資料,POST 則是告知 server,我要改後端或資料庫的現有狀態。

對於後端工程師來說,寫出來的 API 或介面,也要盡可能的符合 RESTful,單純拿資料,就用 GET,不要亂用什麼 PUT PATCH。雖然還是會 work,但就是自找麻煩,沒有任何好處。

其它連結

Linter (前端、後端)

ESLint - Pluggable JavaScript linter
ESLint

Linter,中文我不會翻譯 LOL。簡言之,就是控制程式碼風格的工具。JavaScript 界的話,就是 ESLint。然後風格的話,常見的有 Airbnb 和 Standard 兩種風格,沒有優劣之分。

我個人喜歡 Standard,原因很簡單,我討厭分號。

其它連結

測試(前端,進階)

Getting started with Jest. Recently I have came across some… | by Muhammad  Lahin | Medium
Jest

前端的測試,是較為進階的主題。測試的框架,直接推薦 Facebook 出的 Jest。Jest 的應用範圍很廣,小到單元測試 (Unit test),大到整合性測試 (Integration test),或者端對端測試 (End to end test),都派得上用場。

單元測試的部分,直接使用 Jest 的 Matcher 即可,基本上都有提供早期一些像 Chai, Mocha, Jasmine 的功能。稍微大一點到 DOM Level 的 Unit test 和 Integration test,可以使用 Airbnb 出的 Enzyme 解決。基本上可以學到這個部分,而且懂得如何寫出有意義 test 的工程師,應該都是高手了。

其它連結

TypeScript(前端,後端亦可用,進階)

File:Typescript logo 2020.svg - 維基百科,自由的百科全書
TypeScript

JavaScript 以往為了詬病的原因,最主要的就是太自由,沒有型別。這導致 JavaScript 難以推升到更多人,或者更大型的軟件開發。如果真要做的話,又會花很多時間在處理一些很低級的 runtime error。TypeScript 可以解決這個問題。

TypeScript,簡單來說就是 JavaScript 加上型別 (Type)。假設某一個變數已經被指定為 Number type 了,在其它地方又用 String type 的方式操作,TypeScript transpiler 就不會讓你過,等於在 build 的階段,就先處理掉一些 runtime 會炸掉的潛在危機。

TypeScript 原本是 Angular 界的標配,但現在 React 和 Vue 都已經開始支持 TypeScript 了。

其它連結

後端渲染 Server-Side Rendering (前端,進階)

File:Nextjs-logo.svg - Wikimedia Commons
Next.js

React 剛出的時候,只有 Client-Side Rendering。所謂的 Client-Side Rendering,就是使用者第一次上某個網站的時候,只會拿到一個 HTML file。接著瀏覽器才會去拿之後要渲染的 Js 檔案,把 Virtual DOM 渲染到瀏覽器上。做完這步後,才 call server API 去拿資料補上。因此,會有一小小段時間,瀏覽器會看起來什麼資料都沒有。對於外部網站的 SEO 和使用者體驗而言,是很傷的一件事。

所幸之後有 Server-Side Rendering,有一個前端的 Server 會先把 DOM 的結構和資料都填好,才傳到前端去。如此一來,搜尋引擎的爬蟲和使用者會直接看到填好的資料,不僅 SEO 較好,整體的用戶舒適感也較高。

一樣,三個框架分別推薦三種 Server-Side Rendering Library。

其它連結

GraphQL (前端、後端,進階)

Using GraphQL and Node.js to Make a Basic Chat App — The Backend | by The  Full Code | Medium
GraphQL

最後一個要介紹的工具,叫做 GraphQL,也是由 Facebook 最先推出(天啊 Facebook 你到底要出多少好用的工具啊。)GraphQL 做為提升資料 Query 彈性的一個解決方案,本身是架在 RESTful API 上的。

想像一個情境,在 RESTful API 上,前端要和後端拿好多個 User,做管理 User 的頁面。後端就直接跟前端說,我會傳回每一個 User 的姓名和生日。對前端來說,我不能只拿姓名,和只拿生日,我就是得全部拿。假設現在突然多一個功能,User 管理這一頁,需要多顯示每個 User 購物車內部的物品數量。慘了,前端只好再去央求後端,看能不能順便傳回一個欄位,顯示購物車內物品的數量。

有了 GraphQL 後,User 和物品,被視為一個一個實體,定義在 GraphQL Layer,並且事先關連起來。有其它頁要多加顯示物品?那前端工程師改一下 GraphQL query string 即可。如此一來,即大幅提升 API 的重覆使用性和彈性。

GraphQL 主要推薦 Apollo client 和 Apollo server。另外也有 Relay 可以使用,但我覺得 Apollo 就很夠用了。

其它連結

結語

我覺得學習程式的路上,如果有人可以給出一個概括,那麼對於建構自身的技能樹會有很大的幫助。本文旨在提供一個前端工程師或軟體工程師的 101 課,希望能帶讀者快速了解,自己還需要補足哪些知識和技能。

此外,要注意的一點是,沒有一個人能真正成為前後端都超強的全端工程師,找到自己有興趣的方向去學深,會對職涯更有幫助!

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

分享:

This Post Has One Comment

  1. AshleyKuo

    才剛起步認真啃完CSS看到這篇文好比哥倫布發現新大陸。
    哥倫布真的沒有原地戲劇性暈眩嗎…?(暴風哭泣)

Leave a Reply