2022 年我該如何成為前端工程師?

嗨!不知不覺又過了一年!不知道大家 2021 這一年過得如何?最近開始有聽到幾個朋友也想要試著學習前端開發,剛好也看到了這一篇在講前端開發者所需要技術的整理,簡單節錄一下一起分享給有需要的讀者們。

接下來的分享基本上以這篇文章的內容為主,會以我的觀點節錄一些重點來跟大家分享,所以如果想看第一手資訊或是習慣看英文的朋友也可以點進去直接閱讀。

成為一個前端開發者需要的「基本」要素

沒錯,這篇文章是站在作為一個基礎的前端開發者的角度來設想需要的技能/工具,所以對於想要尋找 WebAssembly 或是 Svelte.js 之類新潮工具和技術的讀者們,這篇文章可能沒有你們想要的資訊。

2022 年想成為前端開發者的話,你可以接觸的工具跟技術

首先最基本的答案,也是你去問大部分開發者都會在第一時間得到的答案,就是 HTMLCSSJavaScript

接著就是圍繞著這三個基礎技術的工具,像是:

  • 常常被提起的前端框架如 React ( 或是 Vue / Angular)
  • 整合開發環境工具 VSCode 等等

工具的部分,可以進一步接觸的則有:

  • 瀏覽器的開發者工具 (Chrome 的話就是 Chrome Developer Tools)
  • 套件版本管理器 NPM 還有程式碼打包器 Webpack
  • 常常用來測試和開發 API 功能的 REST API 工具 Postman InsomniaGraphQL

下面讓我們一個一個來看這些提到的技術。

1. HTML

這是應該是每個想成為前端工程師的人會聽到的第一個技術,也是最古老的網頁技術之一。雖然他相對單純,但想要開發前端,不能不了解 HTML。在現代前端開發裡面,已經很少人單純用 HTML 來實作網頁頁面,因為目前的主流已經是用 React 或 Vue 之類的框架了。

但這些框架如果你多看幾眼就會發現,這些框架要能夠使用得上手,也必須對一些 HTML 裡面常見的標籤(如 <h1> 、<span)有基本的了解。關於 HTML 相關基礎可以參考這一堂 Udemy 的課程:

2. CSS, Flexbox and Grid

除了 HTML 之外,CSS 也是另外一個在網頁開發中很重要的元素,CSS 主要用來讓網頁看起來更生動華麗。最近使用純 CSS 撰寫的開發者已經越來越少了,相對的使用像是 BootstrapTailwind 之類的 CSS 框架來做開發已經變得越來越主流了。

但因為目前 CSS 本身也在不斷的發展跟進化中,像是你現在會聽到的 Flexbox 跟 Grid。所以對於想學 CSS 的新手來說,還是建議從純 CSS 開始學習起會比較好,這邊推薦 CSS 一堂入門課程:

3. JavaScript

JavaScript 就不用說了吧,這是近幾年來幾乎是前端的中心,前端領域有很大一部分就是因為 JavaScript 的關係才得以引起風潮。

JavaScript 基本上掌管了網頁介面上的互動功能、甚至還有一些比較複雜的動畫特效,因此可以說是 JavaScript 讓整個網頁頁面活了過來。而且更因為前端框架如( Vue / Angular / React )的流行,讓 JavaScript 不只能處理介面互動的部分,甚至利用 JavaScript 就能執行整個前端產品的開發。

JavaScript 演變至今也已經從前端領域跨足到網站後端領域,現在透過 Node.js 你甚至可以進行後端 Server 的商業邏輯開發,從這一點也可以看出 JavaScript 在網站開發裡的重要性。所以不管你是前端還是後端工程師,最好都花點時間來看看這個正在改變世界的語言。

這邊推薦一堂基本的入門課程給各位初學者(文章推薦的課程):
–  The Complete JavaScript 2022: Build Real Project 

書籍的話則可以參考本人的作品《 JavaScript 前端概念三明治》,在書中我會大量運用圖片搭配文字解說來幫助你了解 JavaScript 裡面比較抽象的運作原理,讓你在學習過程中比較不那麼害怕。

4. React.js

就像前面提到的,JavaScript 經過這幾年的發展,已經有很大的進步,現在你不需要撰寫單純的 HTML / CSS ,透過 React.js 這樣的 JavaScript 框架,你也能處理好網頁裡面畫面版型、頁面切換的部分(基本上就是網站所有大小事),這也是為什麼在現在講到要找前端工作的話,學習一個像 React 這樣的框架都是必須的 。

2022 年要學 React 框架的話,推薦這一堂課給初學者們,在這堂課裡面你會學習到 React 的最新功能 – Hooks:


–  The Complete React Guide (with Hooks)

10 Technologies every Web developer should learn


當然前端框架除了 React ,也還有 Vue 跟 Angular等等強大的框架 ,但是我(作者)還是會推薦使用 React,畢竟使用它的公司還是比較多。

5. Responsive Web Design (RWD)

RWD 的中文翻譯是「自適應網頁設計」,它是一種態度概念,基本上就是在實作網頁時要在同一時間考慮到各個裝置寬度(電腦、平板、手機)的排版。

這是一個雖然不太起眼但是很重要的網頁開發觀念,畢竟網頁和手機 APP 不同,具有跨平台和裝置的特性,所以 RWD 在網頁開發者中幾乎是個一定要學習的技巧。就算很多時候我們使用的工具都會幫我們處理這個部分,知道背後的運作原理還是非常重要的。

2022 年想學 RWD 技巧的話推薦這堂課給你參考:

best course to learn Responsive web design

6. NPM (Node Package Manager)

前面看過前端開發相關的語言和技術了,現在我們來看看前端的基本工具—— NPM。NPM 中文翻作「Node 套件管理工具」,它其實不是技術,而是一個工具,但是是一個前端開發時最常聽到也最常使用的工具,NPM 用來把網路上別人開發好的函式庫裝到你自己正在開發的專案裡面,讓你可以不用一直重複造輪子,可以走在巨人的肩膀上,在開發時就能直接使用許多方便的功能。

NPM必須透過指令介面工具( Command Line Tool) 才能夠被使用,而且 不只在開發前端時會用到,在使用 Node.js 開發後端功能時也常常的,所以想要學習 NPM 的使用方式,可以看一些簡單的 Node.js 課程。

這邊推薦這一堂課程給你:

10 Frameworks every Web developer should learn

7. VSCode

講到軟體開發的時候, IDE ( integrated development environment, 整合開發環境)是其中一個最重要的工具》。長久以來在網頁開發的領域裡面沒有一個堪被稱為IDE 的工具,但是由微軟開發的 CSCode 這個產品則改變了這一切,如今 VScode 的竄紅已經不是新聞,如果你常常參加開發者的社群,不難發現 VSCode 是前端工程師們最常使用的一個 IDE 或編輯器。

IDE 之所以這麼方便就是因為他有很多好用的套件來讓你的開發體驗更為流暢、幫助你減少更多讓注意力分散的機會,像是程式碼高亮、程式碼區塊選擇、拼字檢查等等插件。

如果你想要成為一個有效率的網頁開發者,非常推薦你學 VSCode ,可以去看看有哪些快捷鍵、哪些方便的套件可以使用,這邊推薦一堂課程給你:

best web development tools and libraries

8. Chrome Developer Tools

Developer Tool 中文稱為「瀏覽器開發者工具」,是另外一個在做前端開發時常用的除錯工具。現在約有超過 70% 的使用者是使用 Chrome 來瀏覽網站,不過有很多網頁開發的初學者並不知道 Chrome 上其實有這個開發者工具(在網頁上點擊右鍵 > 檢查,就可以打開)。

透過開發者工具不只可以讓你看到 HTML 、 CSS 和 JavaScript 的原始碼,甚至也能透過改變 HTML、CSS 的數值來即時地看到想要嘗試的改變。這個工具強烈的好好學習,因為上面除了基本功能,也有很多更深入更仔細的的瀏覽器相關工具,這邊也推薦一堂課程給你:

Tools every Web developer should learn

9. Postman

又是一個一定要知道的前端開發工具 —— Postman。因為現在網頁開發中總是依靠 API 來拉取所需要的資料,所以你會需要像是 Postman 的 API 測試工具,你可以用 Postman 來送出一個 HTTP 請求、測試登入功能,或是藉此來觀察 API Server 回傳的資料細節,而且不管是哪一個網站的 API ,你都可以用 Postman 來做測試。

Postman 目前有提供 Chrome 套件和桌面版本,你都可以安裝來自己試試看,如果需要課程的話可以參考:

best course to learn Postman tool for API testing

10. GraphQL

如同上面提到的,在網頁產品開發中有很大一部分是依靠 API 來傳送或拉取資料。因此在某些公司中,比較資深的前端工程師不只要負責串接 API,甚至也負責了後端 API 的邏輯開發。

不論是哪一種情境,你都會知道怎麼跟 API 來做互動,最常見的 Restful API 雖然可以同時滿足開發和使用的需求,但是這個方式對於網站來說還是會有一些小小的缺點,例如在同一個頁面可能因為邏輯的關係,就需要拉取很多隻 API ,或是因此拉到了某些其實不太需要的資料。

GraphQL 的出現就是為了解決這個問題,它也已經準備好要推動後端 API 開發的下一個層次,如果你想要走在最前面,會建議你學習這個技術。

這邊推薦課程給你:

(Mujing 註:前面幾個提及的工具或技術可能真的是比較常見、到每間公司幾乎都有可能會使用的,但是以我自己的經驗來講,目前來說在台灣 GraphQL並不是到處都會使用,所以讀者可以自行斟酌要不要學習)

結語

以上就是 2022 年想要成為開發者所需要的基本技術和工具介紹。雖然你很有可能已經知道前端的三大基本元素:HTML、CSS、 JavaScript,但是他們仍然在不斷地進化和發展中,如 CSS 裡的 Grid 和 Flex 的出現、 JavaScript 則有像是 ES6的改版和 WebAssembly 的效能解決方案等等。

儘管這篇文章的作者已經盡可能的列出最重要最基礎的相關知識,身為一個網頁開發者,還是有很多必須要學習的,像是 HTTP、 SSL 憑證等等(比較深入的知識)。

不過就慢慢來吧,階段性有所目標的成長比較不會讓自己筋疲力盡!那先寫到這囉,下次有看到值得分享的東西再來寫給大家!

參考文章

作自己的腦內偵探 —— 利用 PDCA 的概念,見證每天進步 1% 的自己!

作自己的腦內偵探 —— 利用 PDCA 的概念,見證每天進步 1% 的自己!

嗨,我是 Mujing ,今天要講的跟技術比較沒有直接關係,我想要跟大家分享一個平常工作時可以逐步優化自己工作流程的方法,這個方法叫做 PDCA 筆記,最近剛好在研究。試著在工作時用過了幾次之後,我發現這套方法能夠讓自己看見自己執行任務的現況,再想辦法針對問題逐個改善。針對想要優化自己工作的流程卻不知道哪邊可以做得更好,或是怎麼樣做得更好的讀者,這邊推薦這個方法給你。 Outline PDCA 是一種思考的框架P、D、C、A 怎麼做?使用橫向 A4 紙假說的重要性建立一個長期目標寫在最後 PDCA 是一種思考的框架...

React 元件庫製造紀事錄 (二) – package.json 與 Webpack

React 元件庫製造紀事錄 (二) – package.json 與 Webpack

在元件庫系列文的第二部分,會試著用 webpack 來打包模組,並把過程記錄下來。我們在前面的文章裡面提到了許多種類的 JavaScrpt 模組系統,而模組系統的差異在 SSR 架構下,我們要製作元件庫時可能會是一個需要處理的問題,除了把所有元件庫的程式碼直接轉換成 UMD 的模組系統,我們也可以透過 package.json 來做處理,這一點我們也會一併說明。

React 元件庫製造紀事錄 (ㄧ) –  問題說明與第一個麻煩:JavaScript 的模組系統

React 元件庫製造紀事錄 (ㄧ) – 問題說明與第一個麻煩:JavaScript 的模組系統

這陣子為了解決了一個讓我蠻頭痛的問題,第一次接觸前端 module 的打包,也了解到原來平常我們很方便能夠用 Npm 或 Yarn 這類套件管理器裝一裝就能夠直接使用的一些第三方工具在功能開發完之後,為了要讓別人能夠使用所做的處理上並不是這麼的單純,隨著使用方式的不同,要處理的部份也會有所不一樣。 舉例來說,如果是一般純粹都是 JavaScript 函式庫,可能只需要透過 Babel 這類工具來處理 JavaScript 版本與瀏覽器的支援性問題就好。不過若你的專案需要處理 React 元件或是圖片 Icon...

瀏覽器的時光機—歷史堆疊、 pushState 與 replaceState API

瀏覽器的時光機—歷史堆疊、 pushState 與 replaceState API

或許 pushState 與 replaceState 這兩個詞你可能沒聽過,但是瀏覽器「上一頁、下一頁」功能你一定不陌生,其實這兩個 API 是瀏覽器提供給開發者操作瀏覽紀錄用的,透過這兩個 API 並搭配事件處理,我們就可以將瀏覽器預設的「上一頁下一頁」修改成我們想要的客製化結果。 使用情境說明pushState / replaceState 與點擊新連結有什麼不一樣pushState / replaceState 與 Stack 結構pushState / replaceState...