js2023.yml

locale: zh-Hant
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.results.description
    t: The 2023 edition of the annual survey about the latest trends in the JavaScript ecosystem.

  - key: general.livestream_announcement
    t: Make sure to tune in for our [special survey results livestream](https://dev.to/sachagreif/state-of-javascript-2021-livestream-24a5) on February 22! (English)

  ###########################################################################
  # Introduction
  ###########################################################################

  - key: introduction.js2023
    t: |

      <span class="first-letter">現</span>在應該很清楚了，無論好壞，JavaScript 都不會慢下來。

      Server component、server action、signal、編譯器⋯⋯等，新技術推出的速度超過大多數人的學習速度。

      避免 JavaScript 疲勞的訣竅在於，記得可以選擇自己的道路：你當然可以走在科技最前端，成為最早擁抱新技術的人；但也能放慢腳步，專注在穩定、成熟的科技——給狂熱的新技術幾年時間冷卻，再來接觸。

      說到慢下來，你可能會疑惑：再六個月就 *2024* 年了，為什麼 2023 年的調查結果等到現在才發布？老實說，發起新的 [State of HTML](https://2023.stateofhtml.com/) 調查、構思新的問卷格式、收集比以往更自由的回答內容，以及重寫許多資料視覺化的程式碼，不誇張地說，最終的工作量恐怕已經超過負荷。

      希望這一切額外付出的心力，成果是值得的。而我們也確實計畫未來要加快速度。

      話不多說，一起看看 JavaScript 最近在忙什麼吧！

      <span class="conclusion__byline">—— Sacha Greif</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: T-shirt

  - key: sections.tshirt.description
    t: |
      ## Support the Survey With the State of JavaScript T-Shirt

      Between the bad video quality, the bulky cassettes, and having to rewind, there's not much to miss about the VHS era. But one thing we *do* miss are the amazing 90s visuals that used to adorn blank VHS tapes. 

      But now, thanks to the talented Christopher Kirk-Nielsen you can enjoy all this retro radness while also celebrating your love for JavaScript at the same time!

  - key: tshirt.about
    t: About the T-shirt

  - key: tshirt.description
    t: |
      We use a high-quality, super-soft tri-blend shirt with a slim fit printed by our partners at Cotton Bureau.

  - key: tshirt.getit
    t: Get It

  - key: tshirt.price
    t: USD $29 + shipping

  - key: tshirt.designer.heading
    t: About the Designer

  - key: tshirt.designer.name
    t: Christopher Kirk-Nielsen

  - key: tshirt.designer.bio
    t: |
      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!

  ###########################################################################
  # Sections
  ###########################################################################

  - key: sections.user_info.description
    t: |
      This year, **23,540** respondents took part in the survey. And in order
      to help highlight different voices and surface deeper insights, we made a special
      effort to provide new ways to break our data down.

  - key: sections.features.description
    t: |
      JavaScript may move fast, but it seems like JavaScript developers move even faster, as many relatively new features already show high adoption levels.

  - key: sections.technologies.description
    t: |
      This year's results point to a high degree of fragmentation in the JavaScript world. But while this can sometimes cause headaches, all that competition does make for a very dynamic ecosystem.

  - key: sections.tools_others.description
    t: |
      Picking a technology can often come down to a series of tough choices between 
      competing priorities, and this year we tried to capture this process using a new bracket-style question format.

  - key: sections.environments.description
    t: |
      Accessibility has long been an after-thought when it comes to web development, but many developers
      are now realizing that it should in fact be the foundation on which everything else rests.

  - key: sections.resources.description
    t: |
      Rather than provide predefined lists of options for survey respondents to pick from, we decided to simply offer raw text fields. This led to quite a few new entrants in this year's Resources section!

  - key: sections.opinions.description
    t: |
      Whether it's pain points that hold you back today, or missing features that you hope to use
      tomorrow, this was your chance to vent and share your gripes with JavaScript!

  ###########################################################################
  # Charts
  ###########################################################################

  - key: options.features_categories.language
    aliasFor: sections.language.title
  - key: options.features_categories.browser_apis
    aliasFor: sections.browser_apis.title
  - key: options.features_categories.other_features
    aliasFor: sections.other_features.title

  - key: blocks.tools_quadrant.description
    t: |
      This chart shows each technology's **retention ratio** over its total **user count**.
      It can be divided into four quadrants:

        - **1**: Low usage, high retention. Technologies worth keeping an eye on.

        - **2**: High usage, high retention. Safe technologies to adopt.

        - **3**: Low usage, low retention. Technologies that are harder to recommend currently.

        - **4**: High usage, low retention. Reassess these technologies if you're currently using them.

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.

  - key: blocks.source.note
    t: >

      This chart aggregates a mix of referrers, URL parameters, and freeform answers. 

      - State of JS: the [State of JS](https://stateofjs.com) mailing list.

      - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.

      - Work: matches `work`, `colleagues`, `coworkers`, etc.

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.

  - key: award.tool_usage_delta_award.comment
    t: |
      **Vite** continues to be the fastest-growing library out there, with a **{value}** year-over-year increase in usage!

  - key: award.tool_satisfaction_award.comment
    t: Vite once again takes the top spot, with **{value}** of developers willing to use it again!

  - key: award.tool_interest_award.comment
    t: Did you guess Vite? Close, but this year **Vitest** is the technology developers are most interested in with a **{value}** interest ratio.

  - key: award.most_write_ins_award.comment
    t: With **{value}** mentions, **Bun** was the most mentioned technology overall in freeform questions.

  - key: award.most_commented_tool_award.comment
    t: With **{value}** comments, React showed that it's once again the most-discussed library around.

  - key: award.most_loved_tool_award.comment
    t: With **{value}** of all developers having a positive opinion of it, Vite concludes its sweep of these awards by being the most-loved technology around!

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: conclusion.js2023.cassidy_williams
    t: |
      <span class="first-line">各位，今年網際網路的發展真是太酷啦。</span>

      各式各樣令人振奮的改變正在發生，我已經準備好爆米花，一邊建構一邊看著！

      無數「小巧」的套件（如 Preact、Solid，以及 htmx）所獲得的正向感受，超過巨大的對手（如 Next.js），太驚人了。Angular 開始有稍微復出的跡象，值得觀察是否會持續到明年。另外，有些人變得不再那麼喜歡業界寵兒。跟 Rust 有關的系統正在成長。Astro 似乎非常積極投入開發者支援。 

      瀏覽器功能方面似乎衝得太快了，沒人趕得上。這不一定是件壞事！但我完全可以理解，把瀏覽器支援度放在那些酷玩意之前的考量。 

      雖然這樣說，我個人很喜歡使用某些新的陣列方法，也很樂見越來愈多人開始支援 PWA。

      明年我們打算讓問卷回覆更多樣，讓更多人參與開發，希望所有新的、令人開心的改變都變得有趣而不可怕！感謝 Sacha 與團隊讓我參與，也謝謝你們再度執行了一次很棒又有價值的調查。

      線上見！

  - key: conclusion.js2023.cassidy_williams.bio
    t: 開發提倡者、工程師、開源參與者、迷因愛好者

  - key: conclusion.js2023.theo_browne
    t: |
      <span class="first-line">Javascript 正往伺服器端移動，這讓人忐忑不安。</span>

      從去年的調查結果中可以發現採用伺服器端渲染框架（如 Next、Nuxt、Remix、SvelteKit）快速成長的趨勢。今年換成 server 優先模式（例如 Partial Hydration 與 Island 架構）的採用率翻倍。

      框——呃，套件如 htmx 顯示，不只有 web 開發者獲得善用 server 的好處。SPA 依舊不會消失（看看 [Inertia](https://inertiajs.com/) 吧），但隨著這些新模式繼續改進，市場似乎也在跟進。

      這個轉變方向並不完全受到青睞。React 持續成長，但 React 開發者開始擔憂它的方向。一路走來非常⋯⋯不容易，但每天都有新進展。

      React 生態圈之外有愈來愈多選擇。從 [Nuxt](https://roe.dev/blog/nuxt-server-components) 到 [SolidStart](https://docs.solidjs.com/solid-start/reference/server/use-server) 再到 [Astro](https://astro.build/blog/astro-480/#experimental-astro-actions)，所有最好的 React Server Component 功能正朝每位開發者推出。

      當然，Vite 繼續主宰全場，它同時也是 app 開發者與框架作者的共同選擇。很難想像沒有它的日子！

  - key: conclusion.js2023.theo_browne.bio
    t: Ping、uploadthing、create-t3-app 的作者，以及影片創作者

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_pick
    t: "My 2023 Pick: "
  - key: picks.intro
    t: We asked members of the JavaScript community to share their “pick of the year”

  # https://leaddev.com/personal-development/how-build-trust-new-engineering-manager
  - key: picks.emma_bostian.name
    t: How to build trust as a new engineering manager
  - key: picks.emma_bostian.bio
    t: Engineering Manager, instructor, and co-host of the Ladybug Podcast.
  - key: picks.emma_bostian.description
    t: |
      I've found the blog posts on LeadDev under Skills for new managers to be invaluable as a new Engineering Manager. They provide great resources for anyone looking to expand their engineering leadership and management skills!

  # https://pocketbase.io
  - key: picks.fireship.name
    t: Pocketbase
  - key: picks.fireship.bio
    t: Google developer expert, data enthusiast, and YouTuber
  - key: picks.fireship.description
    t: |
      My pick of the year is the Pocketbase project - an open-source SQLite powered backend. Its JavaScript SDK gives web developers everything needed to build a serious application, and amazingly, can be deployed as a single binary to any $5 server.

  # https://www.localfirst.fm/
  - key: picks.rich_harris.name
    t: localfirst.fm
  - key: picks.rich_harris.bio
    t: Open source troublemaker at Vercel. Creator of Rollup and Svelte
  - key: picks.rich_harris.description
    t: |
      If you're interested in where software is heading, this podcast is required listening. It'll renew your optimism about the future of web development.

  # https://tldraw.com
  - key: picks.david_khourshid.name
    t: tldraw
  - key: picks.david_khourshid.bio
    t: Creator of XState and founder of [http://stately.ai](Stately)
  - key: picks.david_khourshid.description
    t: |
      Much more than an infinite canvas, tldraw reimagines what is possible with user interfaces, from its impressive AI experiments to its attention to drawing detail. Its source code is readily available too, and I appreciate the state machines and extensible API for endless tinkering.

  # https://replicache.dev/
  - key: picks.dax_raad.name
    t: Replicache
  - key: picks.dax_raad.bio
    t: Building [SST](https://sst.dev/) and [terminal](https://www.terminal.shop/)
  - key: picks.dax_raad.description
    t: |
      No technology has had a bigger impact on the quality of what I've shipped in years.  I think they are carrying the torch on pushing what can be done on the web.

  # https://lexical.dev/
  - key: picks.german_jablonski.name
    t: Lexical
  - key: picks.german_jablonski.bio
    t: CEO and creator of [Fluski](https://fluski.com/), notes and spreadsheet manager
  - key: picks.german_jablonski.description
    t: |
      It's been an exceptional year for the Meta text editor. Its ingenious data model and lifecycle have greatly influenced the way I program.

  # https://marvinh.dev/blog/speeding-up-javascript-ecosystem/
  - key: picks.alina_listunova.name
    t: Speeding up the JavaScript ecosystem
  - key: picks.alina_listunova.bio
    t: Front-end Developer, Technical Translator 🇺🇦
  - key: picks.alina_listunova.description
    t: |
      Started in late 2022, this ongoing article series by Preact developer Marvin Hagemeister reveals time-inefficient elements in modern JavaScript projects and approaches. It is truly a fascinating piece for performance-conscious professionals.

  # https://www.rspack.dev/
  - key: picks.shadowingszy.name
    t: Rspack
  - key: picks.shadowingszy.bio
    t: Architect of Datawhale, senior front-end R&D engineer of ByteDance
  - key: picks.shadowingszy.description
    t: |
      Rspack is a Rust-based web bundler with extremely excellent performance. By using Rust, it has solved a large number of performance bottlenecks of JS bundler. And it can be compatible with the ecosystem of webpack.

  # https://nuxt.com/
  - key: picks.quarkstuff.name
    t: Nuxt 4
  - key: picks.quarkstuff.bio
    t: Web & Game dev nerd
  - key: picks.quarkstuff.description
    t: |
      Nuxt 4 is one of the releases of all time. Few things broken, some things improved, and fairly easy to migrate. Give it a go if you havent yet!

  # https://www.npmjs.com/package/tess2
  - key: picks.martin_heidegger.name
    t: tess2.js
  - key: picks.martin_heidegger.bio
    t: Web developer, event organizer
  - key: picks.martin_heidegger.description
    t: |
      I have not done a lot of JavaScript last year, but I was impressed by the tess2 algorithm, a 10-year-old npm library that still performs well!

  # https://auto-animate.formkit.com/
  - key: picks.sacha_greif.name
    t: AutoAnimate
  - key: picks.sacha_greif.bio
    t: State of JS creator
  - key: picks.sacha_greif.description
    t: |
      Formkit's AutoAnimate library, which you can see in action right here on this site, does exactly what its name implies and somehow figures out how to add animations to your apps with a single line of code!

  # https://nuxt.com/
  - key: picks.rexhent.name
    t: Nuxt
  - key: picks.rexhent.bio
    t: Aspiring Linux and web developer
  - key: picks.rexhent.description
    t: |
      Nuxt is focused on DX & UX. It's stable and continuously improving. It has the best devtools out of any framework and has created UnJS, and other tooling that powers new frameworks, like Nitro. They are a pillar of the FOSS community.

  # https://medium.com/@devgustavovasquez/the-future-of-web-development-embracing-interoperable-runtimes-bd2006e9b9d7
  - key: picks.gustavo_vasquez.name
    t: Web Interoperable Runtimes
  - key: picks.gustavo_vasquez.bio
    t: Software Engineer 🇧🇷
  - key: picks.gustavo_vasquez.description
    t: |
      Web Interoperable Runtimes are execution environments that allow code to run consistently across multiple platforms and environments. I believe that working with such a standard exposes us to the future of web development.

  # https://x.com/wunderacle
  - key: picks.augustin_mauroy.name
    t: Claudio Wunder
  - key: picks.augustin_mauroy.bio
    t: Web developer and an OSS enthusiast
  - key: picks.augustin_mauroy.description
    t: |
      Claudio is a superb person. He helped me to grow as a dev, but he also made it possible to redesign the Node website, thanks to his leadership skills. And he continues to push the Node project forward.

  # https://www.electronjs.org/
  - key: picks.kilian_valkhof.name
    t: Electron
  - key: picks.kilian_valkhof.bio
    t: Creator of Polypane Browser for Developers
  - key: picks.kilian_valkhof.description
    t: |
      With everyday apps like VS Code, Figma, Discord, Slack and 1Password all running on Electron, it remains an integral part of the JS and developer ecosystem. Many tools we all use wouldn't exist without it, and when used correctly it's a powerful platform indeed.

  # - key: picks.xxxx.name
  #   t:
  # - key: picks.xxxx.bio
  #   t:
  # - key: picks.xxxx.description
  #   t: |

  ###########################################################################
  # Sponsors
  ###########################################################################

  - key: sponsors.frontendmasters.description
    t: Advance your skills with in-depth, modern front-end engineering courses.
  - key: sponsors.google_chrome.description
    t: Thanks to the Google Chrome team for supporting our work.
  - key: sponsors.renderatl.description
    t: This is a tech conference focused on Front-End Engineering.

  ###########################################################################
  # FAQ/About
  ###########################################################################

  - key: about.content
    t: |
      The 2023 State of JavaScript survey ran from November 22 to December 12 2023, and collected 23,540 responses. The survey is run by [Devographics](https://devographics.com/), a collective consisting of me ([Sacha Greif](https://sachagreif.com/)) and [Eric Burel](https://www.lbke.fr/), as well as invited experts and open-source contributors. 

      The State of JavaScript logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

      ### Survey Goals

      This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 

      As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why features or technologies may sometimes be omitted even if they are currently widespread 

      It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire ecosystem. 

      ### Survey Design

      The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues?q=is%3Aissue+is%3Aopen+label%3A%22State+of+JS+2022%22). 

      All survey questions were optional. 

      ### Survey Audience

      The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 

      Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the "Sources" chart. 

      ### Project Funding

      Funding from this project comes from a variety of sources:

      - **T-shirt sales**. 

      - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partners [Frontend Masters](https://frontendmasters.com/) and [RenderATL](https://www.renderatl.com/).

      - **Direct Funding**: this year, [Google](https://www.google.com/) funded my work on the survey. 

      Any contribution or sponsorship is greatly appreciated. we would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  

      ### Technical Overview

      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a).