state_of_js_2022.yml

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

  - key: general.results.description
    t: The 2022 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.js2022
    t: |

      <span class="first-letter">經</span>過幾年相對穩定的發展，許多人開始對現狀感到好奇。

      Solid 與 Qwik 這些新一代前端框架的出現，或許暗示了 React 仍有不足之處。而 Remix 與 Next.js 則讓人重新思考：真正需要放到客戶端的程式碼有多少？

      這些問題需要更多資料才能釐清，好在今年的調查收到了 **39,472** 份回應，幾乎是去年的兩倍！

      由於填答人數眾多，你可能會發現某些出乎預料的結果，例如：某些功能為人知曉或實際使用的比例正逐年減少。

      更多資料代表著更多新的發現，這也是為什麼這次提供了兩種新的方式讓大家跟資料互動：**Data Explorer** 能交叉比對兩種變數，並標記異常結果；**Chart Filters** 能以薪水、國家、性別，以及其他人口統計變數過濾特定的圖表。

      另外，先前較籠統的「後端」分類已改成**渲染框架**頁面，而資源區則新增了**影片創作者**列表。

      最後，功能與套件的問題多了**評論**彈窗，讓你能夠看到其他人對調查裡提到的項目是怎麼想的。

      話不多說，一起看看 JavaScript 2022 年在忙些什麼吧！

      <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, **39,471** 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: |
      Highlighting blogs, podcasts, and sites was a good start, but this year we decided to go one step further
      and actually feature the people who make up the JavaScript community!

  - 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.css_missing_features.note
    t: |
      You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).

  - 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** is barely two years old, but with a **{value}** progression over the last year it's already gaining ground.

  - key: award.tool_satisfaction_award.comment
    t: Vite takes the top spot with a sky-high **{value}** retention ratio!

  - key: award.tool_interest_award.comment
    t: With a **{value}** interest ratio, Vite once again wins the gold!

  - key: award.most_write_ins_award.comment
    t: Many questions also accepted write-in answers, and with **{value}** mentions **Astro** was the most popular item overall.

  - key: award.most_commented_feature_award.comment
    t: With **{value}** comments, no other feature even came close to generating as much feedback as Private Fields.

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

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

  - key: conclusion.js2022
    t: |
      <span class="first-line">JavaScript 與 TypeScript 的發展變得比以往都還要蓬勃。</span>

      效能導向的創新持續在進行，不論以 reactivity 或 hydration 的角度來看皆是。舉例來說，[Svelte](https://www.youtube.com/watch?v=AdNJ3fydeao) 為了維持簡潔的開發體驗著重發展其編譯器。Solid [對 reactivity 的探索有了新的方向](https://www.youtube.com/watch?v=2iK9zzhSKo4)。Qwik [改變了我們對 resumability 的認知]((https://www.youtube.com/watch?v=Zddw6qy5pf0))。

      跨平台的解決方案也有令人振奮的創新，像 Tauri、Ionic 與 Flutter 都讓應用程式能夠跨足更多平台。

      放眼世界，各地都有優秀的人才，目前[在 GitHub 增長最快](https://octoverse.github.com/2022/global-tech-talent)的是奈及利亞與印度的開發者。全球都有令人驚嘆的專案，例如 Segun Adebayo 的 [Chakra UI](https://chakra-ui.com/)、Liyas Thomas 的 [Hoppscotch](https://hoppscotch.io/)，以及幫助他人成長學習的好夥伴，像 Ada Nduka Oyom 就創立了非營利組織 [SheCodeAfrica](https://shecodeafrica.org/)，目前已為超過一萬七千位非洲女性賦權。

      開發者對 React、Angular 或 Vue 這些既有框架的滿意度常常下降。有人可能會感到疑惑，但我認為這是開發工具接受前端戰場與生產環境的洗禮後導致的現象。這同時也反映了每種工具都有其極限，必須在各種情境下作出權衡取捨。下降的滿意度反倒象徵這些工具趨於成熟，而開發者也更能欣賞其帶來的寶貴價值。它們會在創新中學習，持續發展茁壯。

      最後，很高興看到 Vite 連續兩年蟬聯得獎區。建置相關技術正闊步向前，而我們也得益於此。太棒了！

  - key: conclusion.js2022.bio
    t: Director of Engineering and Web Infrastructure, Google

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

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

  # https://svelte.dev/blog/announcing-sveltekit-1.0
  - key: picks.lee_robinson.name
    t: SvelteKit 1.0
  - key: picks.lee_robinson.bio
    t: VP of Developer Experience at Vercel
  - key: picks.lee_robinson.description
    t: |
      Two years in the making, SvelteKit is finally ready for production –
      and it has no shortage of amazing features for developers.

  # - key: picks.vadim_makeev.name
  #   t: Server-Side Rendering
  # - key: picks.vadim_makeev.bio
  #   t: DevRel, Podcaster & Web Standards Advocate
  # - key: picks.vadim_makeev.description
  #   t: |
  #       The time has come to get our priorities straight.
  #       UX > DX, and it has always been like that. Performance FTW!

  # - key: picks.ben_ilegbodu.name
  #   t: Lee Robinson
  # - key: picks.ben_ilegbodu.bio
  #   t: Ben Ilegbodu, Principal Frontend Engineer @ Stitch Fix
  # - key: picks.ben_ilegbodu.description
  #   t: |
  #       Lee has been great at shepherding and advocating for Next.js.
  #       He's helped me a ton with Next and continues to build excitement
  #       for where it's going

  # - key: picks.shawn_wang.name
  #   t: Supabase
  # - key: picks.shawn_wang.bio
  #   t: Head of DX at Temporal
  # - key: picks.shawn_wang.description
  #   t: |
  #       Supabase is making Postgres accessible to more developers and showing
  #       everyone how a small focused team can out-ship peers 10x their size.

  # - key: picks.sarah_drasner.name
  #   t: Pawel Kozlowski
  # - key: picks.sarah_drasner.bio
  #   t: Director of Engineering, Core Developer Web at Google
  # - key: picks.sarah_drasner.description
  #   t: |
  #       Pawel Kozlowski is the kind of developer who can be open-minded to different
  #       approaches with humility and curiosity with the interest of improving things.

  # - key: picks.sara_vieira.name
  #   t: Paul Henschel
  # - key: picks.sara_vieira.bio
  #   t: International Agent of JS Bullshit
  # - key: picks.sara_vieira.description
  #   t: |
  #       Paul's work on animations and ReactThreeFiber
  #       have made doing any kind of 3D work on the web way easier.

  # - key: picks.mark_erikson.name
  #   t: Ryan Carniato
  # - key: picks.mark_erikson.bio
  #   t: Redux Maintainer
  # - key: picks.mark_erikson.description
  #   t: |
  #       Ryan's reactive JS framework SolidJS hit 1.0,
  #       and he wrote numerous articles analyzing advanced
  #       JS framework implementation concepts.

  # - key: picks.alyssa_nicoll.name
  #   t: BroccoDev's Twitch Stream
  # - key: picks.alyssa_nicoll.bio
  #   t: Sr. Developer Advocate at Progress
  # - key: picks.alyssa_nicoll.description
  #   t: |
  #     Mike Brocchi recently started streaming to Twitch. He is a brilliant programmer,
  #     developer, and most importantly teacher.
  #     I always have a blast watching his streams and learning from him.

  # - key: picks.michael_jackson.name
  #   t: esbuild
  # - key: picks.michael_jackson.bio
  #   t: Co-founder of Remix
  # - key: picks.michael_jackson.description
  #   t: |
  #     We have been building the Remix compiler on top of esbuild and it
  #     has definitely raised the bar as far as JS bundlers are concerned.
  #     It's incredibly fast and the plugin API allows us to do pretty much anything we want.

  # - key: picks.david_khourshid.name
  #   t: Remix
  # - key: picks.david_khourshid.bio
  #   t: Pianist and founder of Stately
  # - key: picks.david_khourshid.description
  #   t: |
  #       Remix is a full-stack web framework that feels old-school, but in a good way,
  #       by putting you on the path to create fast, complex, and accessible modern web apps.

  # - key: picks.kent_c_dodds.name
  #   t: Fly.io
  # - key: picks.kent_c_dodds.bio
  #   t: Director of Developer Experience, Remix
  # - key: picks.kent_c_dodds.description
  #   t: |
  #       Fly enabled me (a frontend engineer with a distain for DevOps)
  #       to confidently deploy a real-world, globally-distributed, production-grade
  #       app.

  # - key: picks.tejas_kumar.name
  #   t: Joe Haddad
  # - key: picks.tejas_kumar.bio
  #   t: Web Developer, Conference Speaker, and Director of DevRel at Xata
  # - key: picks.tejas_kumar.description
  #   t: |
  #       Joe works on Next.js at Vercel and is constantly looking to proudly
  #       demonstrate its power while actively listening
  #       to feedback from the community to support them better.

  # - key: picks.wes_bos.name
  #   t: TC39 Proposals
  # - key: picks.wes_bos.bio
  #   t: JavaScript Teacher & Podcast Host
  # - key: picks.wes_bos.description
  #   t: |
  #       A Git repo full of all the things that have been proposed to be added to JavaScript. It's really fun to read through all the ideas people have for the language and see them go through the stages.

  # - key: picks.scott_tolinski.name
  #   t: SvelteKit
  # - key: picks.scott_tolinski.bio
  #   t: Creator of Level-Up Tuts, co-host of Syntax
  # - key: picks.scott_tolinski.description
  #   t: |
  #       Svelte Kit provides the amazing developer experience of Svelte with all
  #       of the modern features of expected from a web platform.

  # https://astro.build/
  - key: picks.miguel_angel_duran.name
    t: Astro
  - key: picks.miguel_angel_duran.bio
    t: Twitch Coding Streamer & Content Creator
  - key: picks.miguel_angel_duran.description
    t: |
      Astro is a new exciting static site generator.
      Zero client JavaScript by default, lazy-loading hydration,
      and framework-agnostic. Built on top of Vite, it's blazing fast and easy to use.

  # https://sandpack.codesandbox.io/
  - key: picks.josh_comeau.name
    t: Sandpack
  - key: picks.josh_comeau.bio
    t: Software developer and educator
  - key: picks.josh_comeau.description
    t: |
      The folks at CodeSandbox open-sourced their ridiculously
      powerful in-browser bundler, and packaged
      it up in a world-class embedded code editor. Such an amazing tool!

  # https://github.com/tc39/proposal-type-annotations
  - key: picks.rich_harris.name
    t: Type Annotations Proposal
  - key: picks.rich_harris.bio
    t: Principal Software Engineer, Vercel
  - key: picks.rich_harris.description
    t: |
      I'm going to nominate the type annotations proposal, which was shared with the world this year.

  # https://twitter.com/mooeypoo
  - key: picks.cassidy_williams.name
    t: Moriel Schottlender
  - key: picks.cassidy_williams.bio
    t: CTO at Contenda, Memer and Dreamer
  - key: picks.cassidy_williams.description
    t: |
      Moriel is an inspiring developer who gives passionate,
      interesting talks about internationalization and accessibility,
      and some of the things she's built with Vue are SO cool,
      everyone should check them out!

  # https://www.withdiode.com/
  - key: picks.charlie_gerard.name
    t: Diode
  - key: picks.charlie_gerard.bio
    t: Senior Developer Advocate at Stripe, Author and Creative Technologist
  - key: picks.charlie_gerard.description
    t: |
      Diode is an interactive tool to build and simulate hardware projects in the browser.
      As a hardware tinkerer, this is really exciting and the interface built with
      Three.js is great!

  # https://arisa-fukuzaki.dev/
  - key: picks.alba_silvente.name
    t: Arisa Fukuzaki
  - key: picks.alba_silvente.bio
    t: FrontEnd developer working as DevRel at Storyblok
  - key: picks.alba_silvente.description
    t: |
      Arisa is a hybrid between FrontEnd and Dev Rels, lover of React and its ecosystem,
      she is always thinking about giving back to the community and contributes by giving talks,
       workshops and articles on the subject.

  # https://github.com/statelyai/xstate
  - key: picks.matt_pocock.name
    t: XState
  - key: picks.matt_pocock.bio
    t: TypeScript educator from the UK, building Total TypeScript.
  - key: picks.matt_pocock.description
    t: |
      If I were given something complicated to build from scratch,
      like a spreadsheet, WYSIWYG, or video calling app, I'd use XState.
      It's the only library I can rely on to build complex systems.

  # https://beta.reactjs.org/
  - key: picks.kathryn_grayson_nanz.name
    t: React Beta Docs
  - key: picks.kathryn_grayson_nanz.bio
    t: Developer Advocate at Progress
  - key: picks.kathryn_grayson_nanz.description
    t: |
      The new React docs are incredibly well-written, accessible for beginners,
      and beautifully designed.
      Documentation is one of the hardest things to do well,
      so this fantastic example is my pick of the year!

  - key: picks.ryan_carniato.name
    t: Astro
  - key: picks.ryan_carniato.bio
    t: Creator of Solid
  - key: picks.ryan_carniato.description
    t: |
      While Astro has been popularizing the "Islands" architecture for the past couple of years, 2022 saw it reach 1.0 and bring on-demand server rendering. It's never been easier to create great sites while shipping less JavaScript.

  - key: picks.theo_browne.name
    t: tRPC
  - key: picks.theo_browne.bio
    t: Youtube Ranter & CEO @Ping.gg
  - key: picks.theo_browne.description
    t: |
      2022 was a big year for fullstack type-safety, and tRPC deserves most of the credit. tRPC is one of those rare libraries that makes everything you used before feel… awful, honestly. Never felt more productive as a full stack engineer.

  - key: picks.sebastien_lorber.name
    t: Remotion
  - key: picks.sebastien_lorber.bio
    t: This Week In React founder and Docusaurus maintainer
  - key: picks.sebastien_lorber.description
    t: |
      The ability to create videos with React is rad. We can get creative and use any cutting-edge web technology, not only DOM/CSS. With the GitHub Unwrapped project, it has proved it can scale, render thousands of videos and be an awesome marketing tool.

  - key: picks.ben_holmes.name
    t: Zod
  - key: picks.ben_holmes.bio
    t:
  - key: picks.ben_holmes.description
    t: |
      Runtime safety came to define 2022 with tRPC's rise to stardom.
      Now, with Astro using Zod for type-safe Markdown and Remix users bringing Zod to form validation,
      it's becoming an must-have for any JavaScript developer

  - key: picks.tyler_mcginnis.name
    t: TanStack
  - key: picks.tyler_mcginnis.bio
    t: Founder, UI.dev
  - key: picks.tyler_mcginnis.description
    t: |
      My JavaScript pick of the year is TanStack, or anything else that
      Tanner and Dominik make.

  - key: picks.shaundai_person.name
    t: Sarah Drasner
  - key: picks.shaundai_person.bio
    t: Senior Software Engineer, Netflix
  - key: picks.shaundai_person.description
    t: |
      Sarah continues to give back to the community through blog posts, public speaking, and most recently - her book "Engineering Management for the Rest of Us".

  - 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 2022 State of JS survey ran from November 21 to December 22 2022, and collected 39,472 responses. The survey is run by [Sacha Greif](https://sachagreif.com/) and [Eric Burel](https://www.lbke.fr/), with help from a team of open-source contributors and consultants.

      This year's 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 the features or technologies that are currently most widespread are not always included.

      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.

      ### Representativeness & Inclusivity

      While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases.

      In order to counter-balance this, we are implementing three distinct strategies:

      - **Outreach**: we always try to reach out to different organizations (such as BIPOC- or LGBTQ-focused organizations, or online teaching platforms) to try and diversify our own audience.

      - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data.

      - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse.

      ### Project Funding

      Funding from this project comes from a variety of sources:

      - **T-shirt sales**.

      - **Chart Sponsorships**: members of the community can donate to the survey in exchange for having their name featured in the report.

      - **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/).

      - **Other Funding**: this year, [Google](https://www.google.com/) and [Nijibox](https://nijibox.jp/) funded my work on the survey directly.

      Any contribution or sponsorship is greatly appreciated. I 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-devographics-surveys-are-run-2022-edition-3oo4).

      - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.

      - **Data storage/processing**: MongoDB & MongoDB Aggregations.

      - **Data API**: Node.js GraphQL API.

      - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.

      - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library.

      - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).