State of JS 2024:前端開發者的年度技能檢測指南

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。


問卷章節介紹:

1. Demographics

調查填答者的地域分布與背景。需要注意的是,由於中國開發者參與度僅約 1%,可能導致 Vue.js 的數據低於實際使用情況。


2. Features

  • 參考 JavaScript 新語法的接受度,篩選出可應用於專案的實用功能。
  • 雖然調查結果標示了瀏覽器支援狀況,但實際使用前仍建議參考 MDNCanIUse 中的詳細資訊,以確保能在你的專案中正常使用。


3. Libraries

調查結果分為以下類別,建議要了解每個類別所要解決的問題是什麼:

  • Front-end Frameworks (前端框架)
  • Meta-Frameworks (元框架)
  • Testing (測試工具)
  • Mobile & Desktop (行動與桌面開發)
  • Build Tools (建置工具)
  • Monorepo Tools (Monorepo 工具)
  • Other Tools (其他工具)


4. Usage

  • 參考 JavaScript/TypeScript Balance 能了解 Typescript 的普及程度。
  • 若是不清楚 Compiled Code Balance 的含義,建議先理解在專案中使用 webpack、Vite 等 build tool 的目的,並區分 build time 與 run time 的差異。
  • 關於 Application Patterns,建議至少掌握前三名(SPA、SSR、SSG)的概念與適用場景。


5. Resources

如果一年一次的問卷內容不夠,這裡也有各類學習資源可以參考。



結語

State of JS 不僅是一份數據報告,更是幫助開發者成長的學習指南。透過這次調查結果,你可以補足自己的技術盲點,設定清晰的學習目標,讓自己在快速變化的前端生態中保持競爭力。

avatar-img
4會員
39內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
前端轉職經驗談 的其他內容
前端初學者容易因為要學的知識太多,而不知道該如何取捨。這邊推薦依序完成以下三個專案,並配合專案實作來逐步學習相關的技術與知識。
上一篇文章提到了 成為優秀 PM 重要的三件事。這邊也分享我認為從 PM 的角度,成為優秀的工程師最重要的三件事。如果有其他不同的想法,也歡迎留言補充與指教。 1. 持續同步資訊 當進度落後或遇到問題時,第一時間說明潛在風險與影響,不要到最後一刻才揭露問題。 另外,也不要只專注於程式碼開
前陣子與同事閒聊時,發現大家對某位 PM 一致給予了高評價。因此思考了一下是哪些行為,能讓 PM 成為工程師們想合作的對象,並寫下了這篇文章。 內容為個人觀點,如果有其他不同的想法,歡迎留言補充與指教。在下一篇文章中,我會反過來從 PM 的角度出發,分享成為優秀的工程師要掌握的三件事。
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
前端初學者容易因為要學的知識太多,而不知道該如何取捨。這邊推薦依序完成以下三個專案,並配合專案實作來逐步學習相關的技術與知識。
上一篇文章提到了 成為優秀 PM 重要的三件事。這邊也分享我認為從 PM 的角度,成為優秀的工程師最重要的三件事。如果有其他不同的想法,也歡迎留言補充與指教。 1. 持續同步資訊 當進度落後或遇到問題時,第一時間說明潛在風險與影響,不要到最後一刻才揭露問題。 另外,也不要只專注於程式碼開
前陣子與同事閒聊時,發現大家對某位 PM 一致給予了高評價。因此思考了一下是哪些行為,能讓 PM 成為工程師們想合作的對象,並寫下了這篇文章。 內容為個人觀點,如果有其他不同的想法,歡迎留言補充與指教。在下一篇文章中,我會反過來從 PM 的角度出發,分享成為優秀的工程師要掌握的三件事。
當要顯示的文字過長時,一般會使用 CSS 隱藏超出的部分,並在文字尾端顯示 ... 來表示內容並未完全顯示。 Demo:https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm 單行文字截斷 overflow: hidden; whi
文章介紹如何使用 Next.js 和 Vercel ,透過串接 OpenAI API 來建立具備 AI 功能的網站。
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
由於去年我是直接從JS直播班出發的,想當然沒參加過體驗營這類的短期嘗鮮課程,就抱著試試看的心態來體驗看看了,也因為我本身有一些些基礎了,這次就果斷幫自己加碼擔任志工,多多少少能幫助到剛開始就卡住的同學,希望能借著多次的經驗累積來增加我的經歷。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
由於去年我是直接從JS直播班出發的,想當然沒參加過體驗營這類的短期嘗鮮課程,就抱著試試看的心態來體驗看看了,也因為我本身有一些些基礎了,這次就果斷幫自己加碼擔任志工,多多少少能幫助到剛開始就卡住的同學,希望能借著多次的經驗累積來增加我的經歷。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
在過年期間,利用集中時間跟完Mosh Hamedani的Next.js課程,掌握了前端至後端的技術應用。本文分享了學習過程中的收穫與成果,以及對於未來應用的展望。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法