diff --git a/common.yml b/common.yml index 38a43123fba..10eed046126 100644 --- a/common.yml +++ b/common.yml @@ -120,6 +120,8 @@ translations: t: Data Processing - key: credits.back_end_development t: Back-End Development + - key: credits.survey_review + t: Survey Review # support - key: general.support_from @@ -315,6 +317,9 @@ translations: # Options ########################################################################### + - key: options.experience.title + t: Experience + # other answer - key: options.other t: Other… @@ -345,13 +350,30 @@ translations: t: | Used it » Negative experience + - key: options.features.na + t: None + # features (short) - key: options.features.never_heard.short - t: 🤷 Never heard of it + t: Never heard of it - key: options.features.heard.short - t: 👀 Heard of it + t: Heard of it - key: options.features.used.short - t: 🤓 Used it + t: Used it + + - key: options.experience.never_heard + aliasFor: options.features.never_heard.short + - key: options.experience.heard + aliasFor: options.features.heard.short + - key: options.experience.used + aliasFor: options.features.used.short + + - key: options.experience.never_heard.short + aliasFor: options.features.never_heard.short + - key: options.experience.heard.short + aliasFor: options.features.heard.short + - key: options.experience.used.short + aliasFor: options.features.used.short # features (no emoji) - key: options.features.never_heard.label @@ -369,6 +391,83 @@ translations: - key: options.features.used.label.short t: Used it + # aliases + - key: options.experience.never_heard.label.short + aliasFor: options.features.never_heard.label.short + - key: options.experience.heard.label.short + aliasFor: options.features.heard.label.short + - key: options.experience.used.label.short + aliasFor: options.features.used.label.short + + - key: options.experience.never_heard.description + t: Respondents who have never heard about an item. + - key: options.experience.heard.description + t: Respondents who have heard about an item, but haven't used it. + - key: options.experience.used.description + t: Respondents who have used an item. + + # sentiments + + - key: options.sentiment.title + t: Sentiment + + - key: options.sentiment.positive.label + t: Positive Sentiment + - key: options.sentiment.neutral.label + t: Neutral Sentiment + - key: options.sentiment.negative.label + t: Negative Sentiment + + - key: options.sentiment.never_heard.positive.label + aliasFor: followups.sentiment_interested + - key: options.sentiment.never_heard.negative.label + aliasFor: followups.sentiment_not_interested + + - key: options.sentiment.heard.positive.label + aliasFor: followups.sentiment_interested + - key: options.sentiment.heard.negative.label + aliasFor: followups.sentiment_not_interested + + - key: options.sentiment.used.positive.label + aliasFor: followups.sentiment_positive_experience + - key: options.sentiment.used.negative.label + aliasFor: followups.sentiment_negative_experience + + - key: options.sentiment.positive.label.short + t: Positive + - key: options.sentiment.neutral.label.short + t: Neutral + - key: options.sentiment.negative.label.short + t: Negative + - key: options.sentiment.positive.short + aliasFor: options.sentiment.positive.label.short + - key: options.sentiment.neutral.short + aliasFor: options.sentiment.neutral.label.short + - key: options.sentiment.negative.short + aliasFor: options.sentiment.negative.label.short + + - key: options.sentiment.never_heard.positive.label.short + aliasFor: followups.sentiment_interested + - key: options.sentiment.never_heard.negative.label.short + aliasFor: followups.sentiment_not_interested + + - key: options.sentiment.heard.positive.label.short + aliasFor: followups.sentiment_interested + - key: options.sentiment.heard.negative.label.short + aliasFor: followups.sentiment_not_interested + + - key: options.sentiment.used.positive.label.short + aliasFor: followups.sentiment_positive_experience + - key: options.sentiment.used.negative.label.short + aliasFor: followups.sentiment_negative_experience + + - key: options.sentiment.positive.description + t: Respondents who are interested in learning more about a technology; or are willing to use it again. + - key: options.sentiment.neutral.description + t: Responents who did not indicate any sentiment about a technology. + - key: options.sentiment.negative.description + t: Respondents who are not interested in learning more about a technology; or have used it and had a negative experience. + # patterns - key: options.patterns.use_never t: Almost always avoid @@ -473,7 +572,7 @@ translations: # age (short versions) - key: options.age.range_less_than_10.short - t: "<=10" + t: "<10" - key: options.age.range_10_18.short t: 11-18 - key: options.age.range_18_24.short @@ -489,6 +588,33 @@ translations: - key: options.age.range_more_than_65.short t: ">65" + # age 2 + - key: options.age.range_under_20 + t: 20 years old and under + - key: options.age.range_20_29 + t: 20-29 years old + - key: options.age.range_30_39 + t: 30-39 years old + - key: options.age.range_40_49 + t: 40-49 years old + - key: options.age.range_50_59 + t: 50-59 years old + - key: options.age.range_over_60 + t: 60 years old or older + + - key: options.age.range_under_20.short + t: "<20" + - key: options.age.range_20_29.short + t: 20-29 + - key: options.age.range_30_39.short + t: 30-39 + - key: options.age.range_40_49.short + t: 40-49 + - key: options.age.range_50_59.short + t: 50-59 + - key: options.age.range_over_60.short + t: ">60" + # years of experience - key: options.years_of_experience.range_less_than_1 t: Less than one year @@ -517,6 +643,42 @@ translations: - key: options.years_of_experience.range_more_than_20.short t: ">20 years" + # years of experience v2 + - key: options.years_of_experience.range_under_1 + t: Less than one year + - key: options.years_of_experience.range_1_3 + t: 1 to 3 years + - key: options.years_of_experience.range_4_6 + t: 4 to 6 years + - key: options.years_of_experience.range_7_9 + t: 7 to 9 years + - key: options.years_of_experience.range_10_12 + t: 10 to 12 years + - key: options.years_of_experience.range_13_15 + t: 13 to 15 years + - key: options.years_of_experience.range_16_20 + t: 16 to 20 years + - key: options.years_of_experience.range_over_20 + t: More than 20 years + + # years of experience v2 (short versions) + - key: options.years_of_experience.range_under_1.short + t: "<1 years" + - key: options.years_of_experience.range_1_3.short + t: 1-3 years + - key: options.years_of_experience.range_4_6.short + t: 4-6 years + - key: options.years_of_experience.range_7_9.short + t: 7-9 years + - key: options.years_of_experience.range_10_12.short + t: 10-12 years + - key: options.years_of_experience.range_13_15.short + t: 13-15 years + - key: options.years_of_experience.range_16_20.short + t: 16-20 years + - key: options.years_of_experience.range_over_20.short + t: ">20 years" + # company size - key: options.company_size.na t: 🚫 Not Applicable @@ -575,6 +737,21 @@ translations: - key: options.yearly_salary.range_more_than_200 t: More than $200k + - key: options.yearly_salary.range_0_20 + t: $0k-$20k + - key: options.yearly_salary.range_20_40 + t: $20k-$40k + - key: options.yearly_salary.range_40_60 + t: $40k-$60k + - key: options.yearly_salary.range_60_80 + t: $60k-$80k + - key: options.yearly_salary.range_80_100 + t: $80k-$100k + - key: options.yearly_salary.range_100_150 + t: $100k-$150k + - key: options.yearly_salary.range_150_200 + t: $150k-$200k + # salary (short versions) - key: options.yearly_salary.na.short t: N/A @@ -1074,6 +1251,27 @@ translations: - key: options.percentage_segments.range_91_100 t: 91-100% + # - key: options.percentage_segments.range_0_10 + # t: 0-10% + - key: options.percentage_segments.range_10_20 + t: 10-20% + - key: options.percentage_segments.range_20_30 + t: 20-30% + - key: options.percentage_segments.range_30_40 + t: 30-40% + - key: options.percentage_segments.range_40_50 + t: 40-50% + - key: options.percentage_segments.range_50_60 + t: 50-60% + - key: options.percentage_segments.range_60_70 + t: 60-70% + - key: options.percentage_segments.range_70_80 + t: 70-80% + - key: options.percentage_segments.range_80_90 + t: 80-90% + - key: options.percentage_segments.range_90_100 + t: 90-100% + - key: options.completion_stats.range_0_10 aliasFor: options.percentage_segments.range_0_10 - key: options.completion_stats.range_11_20 @@ -1095,6 +1293,27 @@ translations: - key: options.completion_stats.range_91_100 aliasFor: options.percentage_segments.range_91_100 + - key: options.completion_stats.range_0_10 + aliasFor: options.percentage_segments.range_0_10 + - key: options.completion_stats.range_10_20 + aliasFor: options.percentage_segments.range_10_20 + - key: options.completion_stats.range_20_30 + aliasFor: options.percentage_segments.range_20_30 + - key: options.completion_stats.range_30_40 + aliasFor: options.percentage_segments.range_30_40 + - key: options.completion_stats.range_40_50 + aliasFor: options.percentage_segments.range_40_50 + - key: options.completion_stats.range_50_60 + aliasFor: options.percentage_segments.range_50_60 + - key: options.completion_stats.range_60_70 + aliasFor: options.percentage_segments.range_60_70 + - key: options.completion_stats.range_70_80 + aliasFor: options.percentage_segments.range_70_80 + - key: options.completion_stats.range_80_90 + aliasFor: options.percentage_segments.range_80_90 + - key: options.completion_stats.range_90_100 + aliasFor: options.percentage_segments.range_90_100 + - key: options.knowledge_score.range_0_10 aliasFor: options.percentage_segments.range_0_10 - key: options.knowledge_score.range_11_20 @@ -1148,10 +1367,8 @@ translations: t: Other options you use for the current section not mentioned in the list above. - key: tools.happiness t: Overall Happiness - - key: tools.happiness.description - t: > - On a scale of one (very unhappy) to five (very happy), how happy are - you with the current overall state of things as it relates to the options listed above? + - key: tools.happiness.question + t: How happy are you with the current state of things as it relates to the options listed above? ########################################################################### # Demographics (About You/User Info) @@ -1160,57 +1377,57 @@ translations: # age - key: user_info.age t: Age - - key: user_info.age.description + - key: user_info.age.question t: How old are you, in years? # years of experience - key: user_info.years_of_experience t: Years of Experience - - key: user_info.years_of_experience.description + - key: user_info.years_of_experience.question t: How long have you been working or studying in this field, in years? # company size - key: user_info.company_size t: Company Size - - key: user_info.company_size.description + - key: user_info.company_size.question t: How many people work at your organization, including yourself? # salary ranges - key: user_info.yearly_salary t: Yearly Income - - key: user_info.yearly_salary.description - t: Your yearly income in U.S. dollar. + - key: user_info.yearly_salary.question + t: What is your yearly gross (pre-tax) income in U.S. dollar? # job title - key: user_info.job_title t: Job Title - - key: user_info.job_title.description + - key: user_info.job_title.question t: How do you introduce yourself to others? # javascript proficiency - key: user_info.javascript_proficiency t: JavaScript Proficiency - - key: user_info.javascript_proficiency.description + - key: user_info.javascript_proficiency.question t: How proficient are you at JavaScript? # css proficiency - key: user_info.css_proficiency t: CSS Proficiency - - key: user_info.css_proficiency.description + - key: user_info.css_proficiency.question t: How proficient are you at CSS? # backend proficiency - key: user_info.backend_proficiency t: Back-end Proficiency - - key: user_info.backend_proficiency.description + - key: user_info.backend_proficiency.question t: How proficient are you at back-end development? # gender - key: user_info.gender t: Gender - - key: user_info.gender.description + - key: user_info.gender.question t: > - Which of the following options describes you, if any? Please pick one. + Which one of the following options describes you? - key: user_info.gender.note t: > While we know collecting and publishing diversity data can be a sensitive issue, @@ -1220,9 +1437,9 @@ translations: # race & ethnicity - key: user_info.race_ethnicity t: Race & Ethnicity - - key: user_info.race_ethnicity.description + - key: user_info.race_ethnicity.question t: > - Which of the following options describe you, if any? Please check all that apply. + Which of the following options describe you? - key: user_info.race_ethnicity.note t: > While we know collecting and publishing diversity data can be a sensitive issue, @@ -1240,10 +1457,12 @@ translations: # disability status - key: user_info.disability_status t: Disability Status - - key: user_info.disability_status.description + - key: user_info.disability_status.question t: > - Which of the following disabilities do you experience, if any? Please check all that apply. - Note that this can include temporary disabilities or injuries. + Which of the following disabilities do you experience? + - key: user_info.disability_status.prompt + t: > + Please check all that apply. Note that this can include temporary disabilities or injuries. # disability status (other) - key: user_info.disability_status.others @@ -1253,7 +1472,9 @@ translations: # other info - key: user_info.how_did_user_find_out_about_the_survey - t: How did you hear about this survey? + t: Source + - key: user_info.how_did_user_find_out_about_the_survey.question + t: Where did you hear about this survey? - key: user_info.email t: Your Email - key: user_info.email.description @@ -1264,7 +1485,7 @@ translations: We do not store any personal data, so after you fill in your email address we will use it to generate a unique anonymized identifier and then delete the address itself from our records. - key: user_info.country t: Country or Region - - key: user_info.country.description + - key: user_info.country.question t: Where do you currently reside? - key: user_info.github_username @@ -1284,7 +1505,7 @@ translations: - key: user_info.industry_sector t: Industry Sector - - key: user_info.industry_sector.description + - key: user_info.industry_sector.question t: Which industry sector(s) do you work in? - key: user_info.industry_sector.others t: Other Industry Sectors @@ -1294,18 +1515,18 @@ translations: - key: usage.industry_sector aliasFor: user_info.industry_sector - key: usage.industry_sector.description - aliasFor: user_info.industry_sector.description + aliasFor: user_info.industry_sector.question - key: usage.industry_sector.others aliasFor: user_info.industry_sector.others - key: usage.industry_sector_freeform aliasFor: user_info.industry_sector.others - key: usage.industry_sector.others.description - aliasFor: user_info.industry_sector.description + aliasFor: user_info.industry_sector.question # degree - key: user_info.higher_education_degree t: Higher Education Degree - - key: user_info.higher_education_degree.description + - key: user_info.higher_education_degree.question t: Do you have a higher education degree? # employment status @@ -1318,7 +1539,7 @@ translations: - key: user_info.completion_stats t: Survey Completion - key: user_info.completion_stats.description - t: Which proportion of the survey did respondents fill out? + t: The proportion of the survey filled out by respondents. # email_temporary (receive updates?) - key: user_info.receive_notifications @@ -1330,6 +1551,8 @@ translations: # how can we improve the survey? - key: user_info.how_can_we_improve + t: Survey Improvements + - key: user_info.how_can_we_improve.question t: How could we improve this survey? ########################################################################### @@ -1343,7 +1566,7 @@ translations: # first steps - key: resources.first_steps t: First Learning Methods - - key: resources.first_steps.description + - key: resources.first_steps.question t: When first starting out, how did you initially learn coding? - key: resources.first_steps.others t: Other First Learning Methods @@ -1353,31 +1576,48 @@ translations: # blogs & magazines - key: resources.blogs_news_magazines t: Blogs & Magazines - - key: resources.blogs_news_magazines.description - t: Which blogs/magazines/etc. do you read? + - key: resources.blogs_news_magazines.question + t: Which blogs/magazines/newsletters/etc. do you read? - key: resources.blogs_news_magazines.others t: Other Blogs & Magazines - key: resources.blogs_news_magazines.others.description t: Other answers (freeform field). - key: options.blogs_news_magazines.na t: 🚫 None + - key: resources.blogs_news_magazines.placeholder + t: | + Blog/newsletter #{index}… # sites & courses - key: resources.sites_courses t: Sites & Courses - - key: resources.sites_courses.description - t: Which sites/courses/etc. do you consult? + - key: resources.sites_courses.question + t: Which sites/courses/etc. do you consult to learn JavaScript? - key: resources.sites_courses.others t: Other Sites & Courses - key: resources.sites_courses.others.description t: Other answers (freeform field). - key: options.sites_courses.na t: 🚫 None + - key: resources.sites_courses.placeholder + t: | + Site/course #{index}… + + # paid courses + - key: resources.paid_courses + t: Paid Courses + - key: resources.paid_courses.question + t: Which **paid resources** (courses, videos, books, etc.) have you used to learn JavaScript? + - key: options.paid_courses.na + t: 🚫 None + - key: resources.paid_courses.placeholder + t: | + Course/book #{index}… # podcasts - key: resources.podcasts t: Podcasts - - key: resources.podcasts.description + - key: resources.podcasts.question t: Which programming-related podcasts do you listen to? - key: resources.podcasts.others t: Other Podcasts @@ -1385,12 +1625,15 @@ translations: t: Other answers (freeform field). - key: options.podcasts.na t: 🚫 None + - key: resources.podcasts.placeholder + t: | + Podcast #{index}… # people - key: resources.people t: People - - key: resources.people.description - t: People you read, follow, or just want to highlight. + - key: resources.people.question + t: Which individuals do you read, follow, or just want to highlight in the JavaScript community? # - key: resources.people.others # t: Other People # - key: resources.people.others.description @@ -1403,11 +1646,14 @@ translations: (freeform field, comma-separated names). - key: options.people.na t: 🚫 None + - key: resources.people.placeholder + t: | + Person #{index}… # other surveys - key: resources.other_surveys t: Other Surveys - - key: resources.other_surveys.description + - key: resources.other_surveys.question t: Which other developer surveys do you participate in? - key: resources.other_surveys.others t: Additional surveys not mentioned above @@ -1420,17 +1666,20 @@ translations: - key: user_info.other_surveys aliasFor: resources.other_surveys - key: user_info.other_surveys.question - aliasFor: resources.other_surveys.description + aliasFor: resources.other_surveys.question # video creators - key: resources.video_creators t: Video Creators - - key: resources.video_creators.description - t: Creators you follow on video-centric platforms such as YouTube, Twitch, TikTok, etc. + - key: resources.video_creators.question + t: Which programming-related video creators do you follow (on YouTube, Twitch, etc.)? - key: resources.video_creators.others t: Other Video Creators - key: options.video_creators.na t: 🚫 None + - key: resources.video_creators.placeholder + t: | + Video creator #{index}… ########################################################################### # Follow-Up Questions @@ -1482,3 +1731,8 @@ translations: # t: # - key: followups. # t: + + # entities info + + - key: entity.learn_more + t: Learn more… diff --git a/countries.yml b/countries.yml index 941cc801b41..35d99eb81a9 100644 --- a/countries.yml +++ b/countries.yml @@ -20,8 +20,12 @@ translations: t: Belarus - key: options.country.BRA t: Brazil + - key: options.country.BGR + t: Bulgaria - key: options.country.CAN t: Canada + - key: options.country.CRI + t: Costa Rica - key: options.country.CHE t: Switzerland - key: options.country.CHL @@ -34,26 +38,38 @@ translations: t: Colombia - key: options.country.CIV t: Côte d'Ivoire + - key: options.country.CYP + t: Cyprus - key: options.country.CZE t: Czechia + - key: options.country.DEU + t: Germany - key: options.country.DNK t: Denmark - key: options.country.EGY t: Egypt - key: options.country.ETH t: Ethiopia + - key: options.country.FIN + t: Finland - key: options.country.FRA t: France - - key: options.country.DEU - t: Germany - key: options.country.GHA t: Ghana - key: options.country.GBR t: United Kingdom + - key: options.country.HKG + t: Hong Kong + - key: options.country.HUN + t: Hungary - key: options.country.IND t: India - key: options.country.IDN t: Indonesia + - key: options.country.IRL + t: Ireland + - key: options.country.ISL + t: Iceland - key: options.country.IRN t: Iran - key: options.country.IRQ @@ -66,8 +82,12 @@ translations: t: Japan - key: options.country.KEN t: Kenya + - key: options.country.LUX + t: Luxembourg - key: options.country.KOR t: South Korea + - key: options.country.MDA + t: Moldova - key: options.country.MEX t: Mexico - key: options.country.MMR @@ -98,6 +118,8 @@ translations: t: Spain - key: options.country.SWE t: Sweden + - key: options.country.TWN + t: Taiwan - key: options.country.TZA t: Tanzania - key: options.country.THA @@ -108,6 +130,8 @@ translations: t: Uganda - key: options.country.UKR t: Ukraine + - key: options.country.ARE + t: United Arab Emirates - key: options.country.USA t: United States of America - key: options.country.VNM diff --git a/legacy.yml b/legacy.yml index 89b9ba60af6..40368d6732d 100644 --- a/legacy.yml +++ b/legacy.yml @@ -812,55 +812,55 @@ translations: # age - key: user_info.age t: Age - - key: user_info.age.description + - key: user_info.age.question t: How old are you, in years? # years of experience - key: user_info.years_of_experience t: Years of Experience - - key: user_info.years_of_experience.description + - key: user_info.years_of_experience.question t: How long have you been working or studying in this field, in years? # company size - key: user_info.company_size t: Company Size - - key: user_info.company_size.description + - key: user_info.company_size.question t: How big is your company, in number of employees? # salary ranges - key: user_info.yearly_salary t: Yearly Salary - - key: user_info.yearly_salary.description + - key: user_info.yearly_salary.question t: Your yearly salary in U.S. dollar. # job title - key: user_info.job_title t: Job Title - - key: user_info.job_title.description + - key: user_info.job_title.question t: How do you introduce yourself to others? # javascript proficiency - key: user_info.javascript_proficiency t: JavaScript Proficiency - - key: user_info.javascript_proficiency.description + - key: user_info.javascript_proficiency.question t: How proficient are you at JavaScript? # css proficiency - key: user_info.css_proficiency t: CSS Proficiency - - key: user_info.css_proficiency.description + - key: user_info.css_proficiency.question t: How proficient are you at CSS? # backend proficiency - key: user_info.backend_proficiency t: Back-end Proficiency - - key: user_info.backend_proficiency.description + - key: user_info.backend_proficiency.question t: How proficient are you at back-end development? # gender - key: user_info.gender t: Gender - - key: user_info.gender.description + - key: user_info.gender.question t: > Which of the following options describes you, if any? Please pick one. - key: user_info.gender.note @@ -872,7 +872,7 @@ translations: # race & ethnicity - key: user_info.race_ethnicity t: Race & Ethnicity - - key: user_info.race_ethnicity.description + - key: user_info.race_ethnicity.question t: > Which of the following options describe you, if any? Please check all that apply. - key: user_info.race_ethnicity.note @@ -888,7 +888,7 @@ translations: # disability status - key: user_info.disability_status t: Disability Status - - key: user_info.disability_status.description + - key: user_info.disability_status.question t: > Which of the following disabilities do you experience, if any? Please check all that apply. Note that this can include temporary disabilities or injuries. @@ -930,7 +930,7 @@ translations: - key: user_info.industry_sector t: Industry Sector - - key: user_info.industry_sector.description + - key: user_info.industry_sector.question t: Which industry sector(s) do you work in? - key: user_info.industry_sector.others t: Other Industry Sectors @@ -940,7 +940,7 @@ translations: # degree - key: user_info.higher_education_degree t: Higher Education Degree - - key: user_info.higher_education_degree.description + - key: user_info.higher_education_degree.question t: Do you have a higher education degree? # email_temporary (receive updates?) @@ -961,7 +961,7 @@ translations: - key: tools_others.libraries t: Libraries - - key: tools_others.libraries.description + - key: tools_others.libraries.question t: Which libraries do you regularly use? - key: tools_others.libraries.others t: Other Libraries @@ -970,7 +970,7 @@ translations: - key: tools_others.text_editors t: Text Editors - - key: tools_others.text_editors.description + - key: tools_others.text_editors.question t: Which text editor(s) do you regularly use? - key: tools_others.text_editors.others t: Other Text Editors @@ -979,7 +979,7 @@ translations: - key: tools_others.utilities t: Utilities - - key: tools_others.utilities.description + - key: tools_others.utilities.question t: Which utilities or tools do you regularly use? - key: tools_others.utilities.others t: Other Utilities @@ -988,7 +988,7 @@ translations: - key: tools_others.browsers t: Browsers - - key: tools_others.browsers.description + - key: tools_others.browsers.question t: Which browser(s) do you primarily work in during initial development? - key: tools_others.browsers.others t: Other Browsers @@ -997,7 +997,7 @@ translations: - key: tools_others.build_tools t: Build Tools - - key: tools_others.build_tools.description + - key: tools_others.build_tools.question t: Which build tools do you use? - key: tools_others.build_tools.others t: Other Build Tools @@ -1006,7 +1006,7 @@ translations: - key: tools_others.non_js_languages t: Non-JavaScript Languages - - key: tools_others.non_js_languages.description + - key: tools_others.non_js_languages.question t: Which other programming languages do you use? - key: tools_others.non_js_languages.others t: Other Languages @@ -1015,7 +1015,7 @@ translations: - key: tools_others.javascript_flavors t: JavaScript Flavors - - key: tools_others.javascript_flavors.description + - key: tools_others.javascript_flavors.question t: Languages that compile to JavaScript - key: tools_others.javascript_flavors.others t: Other JavaScript Flavors @@ -1029,7 +1029,7 @@ translations: # first steps - key: resources.first_steps t: First Learning Methods - - key: resources.first_steps.description + - key: resources.first_steps.question t: When first starting out, how did you initially learn coding? - key: resources.first_steps.others t: Other First Learning Methods @@ -1039,7 +1039,7 @@ translations: # blogs & magazines - key: resources.blogs_news_magazines t: Blogs & Magazines - - key: resources.blogs_news_magazines.description + - key: resources.blogs_news_magazines.question t: Which blogs/magazines/etc. do you read? - key: resources.blogs_news_magazines.others t: Other Blogs & Magazines @@ -1049,7 +1049,7 @@ translations: # sites & courses - key: resources.sites_courses t: Sites & Courses - - key: resources.sites_courses.description + - key: resources.sites_courses.question t: Which sites/courses/etc. do you consult? - key: resources.sites_courses.others t: Other Sites & Courses @@ -1059,7 +1059,7 @@ translations: # podcasts - key: resources.podcasts t: Podcasts - - key: resources.podcasts.description + - key: resources.podcasts.question t: Which programming-related podcasts do you listen to? - key: resources.podcasts.others t: Other Podcasts @@ -1085,7 +1085,7 @@ translations: # other surveys - key: resources.other_surveys t: Other Surveys - - key: resources.other_surveys.description + - key: resources.other_surveys.question t: Which other developer surveys do you participate in? - key: resources.other_surveys.others t: Additional surveys not mentioned above diff --git a/results.yml b/results.yml index 92f5e6d8548..c006df7fa7c 100644 --- a/results.yml +++ b/results.yml @@ -75,6 +75,42 @@ translations: - key: options.experience_ranking.awareness t: Awareness + - key: ratios.interest + aliasFor: options.experience_ranking.interest + - key: ratios.usage + aliasFor: options.experience_ranking.usage + - key: ratios.awareness + aliasFor: options.experience_ranking.awareness + - key: ratios.retention + t: Retention + - key: ratios.positivity + t: Positivity + + - key: ratios.interest.description + t: > + Proportion of **positive sentiment** among respondents having **heard about** an item + - key: ratios.usage.description + t: > + Proportion of respondents **having used** an item + - key: ratios.awareness.description + t: > + Proportion of respondents **having heard about or used** an item + - key: ratios.retention.description + t: > + Proportion of **positive sentiment** among respondents having **used** an item + - key: ratios.positivity.description + t: > + Proportion of **positive sentiment** among all respondents + + - key: modes.rank + t: Rank + - key: modes.value + t: Value + - key: modes.rank.description + t: Place according to rank + - key: modes.value.description + t: Place according to value + - key: options.features_mode.grouped t: Grouped - key: options.features_mode.awareness_rank @@ -243,16 +279,12 @@ translations: - key: user_info.locale t: Language - key: user_info.locale.description - t: What language did respondents select to fill out the survey? - - key: user_info.locale.note - t: > - This data is collected automatically based on respondent's settings while taking the survey; - Languages with fewer than 20 respondents not shown. + t: The language respondents selected to fill out the survey - key: user_info.source t: Source - key: user_info.source.description - t: How did respondents find out about the survey? + t: How respondents found out about the survey - key: user_info.source.note t: Respondent source is computed based on referrer data, URL tracking data, and self-reported answers. @@ -404,6 +436,12 @@ translations: # Tools & Methodologies ########################################################################### + - key: tools.all_items.experience + t: Libraries Experience & Sentiment + + - key: tools.all_items.experience.short + aliasFor: tools.experience + # general - key: tools.links t: Links @@ -463,6 +501,10 @@ translations: t: npm - key: blocks.entity.youtube_link t: YouTube + - key: blocks.entity.mdn_link + t: MDN + - key: blocks.entity.caniuse_link + t: CanIUse # people - key: blocks.people.name @@ -506,13 +548,13 @@ translations: This chart shows each technology's **retention ratio** over its total **user count**. It can be divided into four quadrants: - - **ASSESS**: Low usage, high retention. Technologies worth keeping an eye on. + - **1**: Low usage, high retention. Technologies worth keeping an eye on. - - **ADOPT**: High usage, high retention. Safe technologies to adopt. + - **2**: High usage, high retention. Safe technologies to adopt. - - **AVOID**: Low usage, low retention. Technologies probably best avoided currently. + - **3**: Low usage, low retention. Technologies that are harder to recommend currently. - - **ANALYZE**: High usage, low retention. Reassess these technologies if you're currently using them. + - **4**: High usage, low retention. Reassess these technologies if you're currently using them. # category other tools - key: blocks.category_other_tools @@ -540,7 +582,7 @@ translations: # tool tier list - key: blocks.tools_tier_list t: Library Tier List - - key: blocks.tools_tier_list.description + - key: blocks.tools_tier_list.note t: | This chart ranks libraries based on their retention ratio (percentage of users who would use a library again). Note that libraries used by less than 10% of survey @@ -653,9 +695,11 @@ translations: t: > You can copy paste this query into our public GraphQL API. - key: export.export_json - t: Get JSON Data + t: JSON Data - key: export.export_graphql - t: Get GraphQL Query + t: GraphQL Query + - key: export.export_filters + t: Filters Code - key: custom_data.heading t: Custom Chart @@ -722,25 +766,22 @@ translations: # other - key: blocks.freeform - t: (freeform question) + t: Freeform # Reading List - key: features.reading_list t: Reading List - - key: features.reading_list.description - t: How many respondents added each item to their reading list? - key: features.reading_list.note t: > - The “Reading List” feature lets respondents save items they want to learn more - about while taking the survey; and get a recap of useful resources about them at - the end of the survey. + How many time each item was added to respondent's Reading List, a feature that lets people + learn more about specific topics as they take the survey. ########################################################################### # Charts ########################################################################### - key: chart_units.respondents - t: "{count} question respondents ({percentage}% completion percentage)" + t: "**{count}** question respondents out of **{total}** survey participants (**{percentage}%** completion percentage)" - key: chart_units.percentage t: Percents - key: chart_units.count @@ -754,32 +795,44 @@ translations: - key: chart_units.percentageSurvey aliasFor: chart_units.percentage_survey - key: chart_units.percentage_bucket - t: "% of bucket" + t: Percentages - key: chart_units.percentageBucket aliasFor: chart_units.percentage_bucket - key: chart_units.average - t: Average {axis} + t: Average - key: chart_units.averageByFacet aliasFor: chart_units.average + - key: chart_units.facetCounts + t: Counts + - key: chart_units.percentilesByFacet - t: "{axis} Percentiles" + t: Percentiles - key: charts.average t: Average {axis} - key: charts.mean t: Mean - - key: charts.overall - t: Overall - key: charts.all_respondents t: All Respondents + - key: charts.overall + aliasFor: charts.all_respondents - key: charts.facet_responses t: "{count} responses" + - key: charts.facet_respondents + t: "({count} respondents)" - - key: charts.freeform_data + - key: charts.nth_percentile + t: "{percentile}th percentile" + - key: charts.nth_percentile_value + t: "{percentile}th percentile: {value}" + + - key: charts.freeform_data_indicator t: (freeform answers) - key: charts.insufficient_data t: Insufficient Data + - key: charts.insufficient_data.description + t: Segments with fewer than {value} respondents are not included in the results. - key: charts.axis_legends.years_of_experience t: Years of Experience @@ -803,6 +856,8 @@ translations: t: Interest % - key: charts.axis_legends.satisfaction_percentage t: Retention % + - key: charts.axis_legends.retention_percentage + t: Retention % - key: charts.axis_legends.usage_percentage t: Usage % - key: charts.axis_legends.awareness_percentage @@ -889,19 +944,37 @@ translations: t: No Answer - key: charts.no_match - t: Other Answers + t: Unmatched Answers - key: charts.no_match.short - t: Other Answers + t: Unmatched Answers + - key: charts.no_match.description + t: Freeform answers that could not be matched to a specific datapoint - key: charts.cutoff_answers - t: Other Answers + t: Cutoff Answers - key: charts.cutoff_answers.short - t: Other Answers + t: Cutoff Answers + - key: charts.cutoff_answers.description + t: Answers that scored below the defined threshold - key: charts.other_answers t: Other Answers - key: charts.other_answers.short t: Other Answers + - key: charts.other_answers.description + t: Other answers not included above + + - key: charts.overlimit_answers + t: Over Limit + - key: charts.overlimit_answers.short + t: Over Limit + - key: charts.overlimit_answers.description + t: Answers that were outside of the defined number of items requested + + - key: charts.freeform_data + t: Freeform Data + - key: charts.freeform_data.description + t: Data gathered through a freeform text field - key: charts.tick.links t: Links @@ -918,6 +991,18 @@ translations: t: > Note that averages are calculated by taking the midpoint value of each range as an approximate representative value. + - key: charts.share + t: Share Chart… + - key: charts.export + t: Export Data… + + - key: charts.mode + t: > + Mode: + - key: charts.view + t: > + View: + ########################################################################### # Comments ########################################################################### @@ -935,6 +1020,13 @@ translations: - key: comments.share t: Share Comment + - key: comments.filter.experience + t: "Experience: " + - key: comments.filter.sentiment + t: "Sentiment: " + - key: comments.filter.all + t: All + ########################################################################### # Sharing ########################################################################### @@ -954,7 +1046,7 @@ translations: - key: share.site.body t: "Here are some interesting survey results: {link}" - key: share.block.twitter_text - t: "{hashtag} {year}: {title} {link}" + t: "{siteTitle}: {title}" - key: share.block.subject t: "{siteTitle} Survey Results" - key: share.block.body @@ -972,7 +1064,7 @@ translations: - key: share.link t: Link to section - key: share.url - t: Get link + t: Copy link - key: share.close t: Close @@ -1078,13 +1170,18 @@ translations: - key: award.tool_usage_delta_award.title t: Most Adopted Technology - key: award.tool_usage_delta_award.description - t: Awarded to the technology with the largest year-over-year “would use again” progression. + t: Awarded to the technology with the largest year-over-year usage progression. - - key: award.tool_satisfaction_award.title + - key: award.tool_retention_award.title t: Highest Retention - - key: award.tool_satisfaction_award.description + - key: award.tool_retention_award.description t: Awarded to the technology with the highest percentage of returning users. + - key: award.tool_satisfaction_award.title + aliasFor: award.tool_retention_award.title + - key: award.tool_satisfaction_award.description + aliasFor: award.tool_retention_award.description + - key: award.tool_interest_award.title t: Highest Interest - key: award.tool_interest_award.description @@ -1115,6 +1212,11 @@ translations: - key: award.most_commented_tool_award.description t: Awarded to the library which received the most comments. + - key: award.most_loved_tool_award.title + t: Most Loved Library + - key: award.most_loved_tool_award.description + t: Awarded to the technology with the highest proportion of positive opinions. + ########################################################################### # Hints ########################################################################### @@ -1468,20 +1570,33 @@ translations: - key: filters.compare_data t: Compare Data - key: filters.customize_chart - t: Customize Chart + t: Add Filters… - key: filters.docs t: Documentation - key: filters.compare_chart t: Customize “{chartName}” + - key: filters.edit_variant_with_name + t: Edit “{name}” + - key: filters.edit_name + t: "Edit Name" + - key: filters.edit_name.description + t: "Edit chart variant name:" + - key: filters.create_variant + t: Create New Variant + - key: filters.delete_variant + t: Delete Chart + - key: filters.delete_variant_confirm + t: Delete chart variant “{name}”? + - key: filters.edit_variant + t: Edit Options… - key: filters.filters.description t: | - Using a combination of demographics filters, you can define up to four **custom data series** to dynamically - load and compare them with the default data for this question. + Define a combination of filters to compare multiple versions of the same chart side-by-side - key: filters.facets.description t: | - Pick a variable to break down each bar into "facets". + Pick a variable and use it to further break down each row of a chart into segments. - key: filters.grid_mode - t: Side-by-Side + t: Filters - key: filters.combined_mode t: Combined - key: filters.facet_mode @@ -1489,6 +1604,11 @@ translations: - key: filters.facet t: "Facet:" + - key: filters.facet_view + t: Segmented bars + - key: filters.grid_view + t: Side-by-side grid + - key: filters.series.heading t: Series {index} - key: filters.series.add @@ -1516,6 +1636,10 @@ translations: t: is one of - key: filters.operators.nin t: is not one of + - key: filters.operators.lt + t: is lower than + - key: filters.operators.gt + t: is greater than - key: filters.value.add t: Add Value - key: filters.value.delete @@ -1560,3 +1684,145 @@ translations: - key: filters.facet.select t: Select a facet… + + - key: filters.by_x + t: By {name} + + - key: filters.vs_x + t: Vs. {name} + + - key: dataloader.failed_request + t: > + Oh no! The API request failed with the following message: + - key: dataloader.submit_report_prompt + t: > + Submit a bug report to let us know about this issue, and we'll do our best to + fix it: + - key: dataloader.submit_issue + t: Submit Issue + + # advanced options + + - key: filters.advanced_options + t: Advanced Options + + - key: filters.options.cutoff + t: Cutoff Threshold + - key: filters.options.cutoff.description + t: Exclude any value under this threshold from the data + + - key: filters.options.limit + t: Limit + - key: filters.options.limit.description + t: Limit the results to the first n items + + - key: filters.options.showDefaultSeries + aliasFor: filters.series.show_default + - key: filters.options.showDefaultSeries.description + t: Show the default (unfiltered) data series when using Grid mode + + ########################################################################### + # Chart Controls + ########################################################################### + + - key: charts.group_by + t: > + Group by: + - key: charts.group.experience + t: Experience + - key: charts.group.sentiment + t: Sentiment + + - key: charts.display_mode + t: > + Display mode: + - key: charts.display_mode.split + t: Split View + - key: charts.display_mode.stacked + t: Stacked View + + - key: charts.order + t: > + Sort order: + + - key: charts.sort_by + t: > + Sort by: + - key: charts.sort_by_sort + t: > + Sort by "**{sort}**"" + - key: charts.sorted_by_sort_order + t: > + Sorted by "**{sort}**"", **{order}** + - key: charts.order.asc + t: Ascending + - key: charts.order.desc + t: Descending + + - key: charts.actions.customize + aliasFor: filters.customize_chart + - key: charts.actions.data + t: Get Chart Data + - key: charts.actions.share + t: Share Chart + + - key: charts.vs + t: vs. + + - key: charts.custom_variant + t: Variant {index} + - key: charts.new_variant_name_prompt + t: Enter a short descriptive name for your new chart (e.g. “vs. Income”, “by Gender”, etc.) + + - key: charts.show_all_rows + t: Show All + - key: charts.show_all_rows.x_hidden + t: Show All ({count} hidden) + + - key: charts.metadata.completion + t: > + **{value}** completion rate (out of {total} survey participants) + - key: charts.metadata.respondents + t: > + **{value}** question respondents + - key: charts.metadata.average + t: > + **{value}** mean (average) value + - key: charts.metadata.median + t: > + **{value}** median value + + ########################################################################### + # Multi Items Experience Chart + ########################################################################### + + - key: charts.multiexp.cell_group_tooltip.experience + t: > + **{value}%** of respondents answered "**{answer}**" + + - key: charts.multiexp.cell_group_tooltip.sentiment + t: > + **{value}%** of respondents had a **{answer}** sentiment + + - key: charts.multiexp.cell_tooltip + t: > + **{value}%** of respondents answered "**{experience}**" and had a **{sentiment}** sentiment + + - key: charts.multiexp.cell_tooltip_neutral + t: > + **{value}%** of respondents answered "**{experience}**" and did not pick any sentiment + + ########################################################################### + # Raw Freeform Answers + ########################################################################### + + - key: answers.answers + t: Freeform Answers + - key: answers.answers_for + t: Answers matching “{name}” + - key: answers.description + t: | + These freeform answers were matched to the **{name}** keyword through a combination of + automated and manual data processing. + - key: answers.report_abuse + t: Report this answer diff --git a/state_of_css.yml b/state_of_css.yml index e31fb878789..f2f6a5d84d3 100644 --- a/state_of_css.yml +++ b/state_of_css.yml @@ -680,7 +680,7 @@ translations: - key: tools_others.utilities t: Utilities - - key: tools_others.utilities.description + - key: tools_others.utilities.question t: Which utilities or tools do you regularly use? - key: tools_others.utilities.others t: Other Utilities @@ -692,7 +692,7 @@ translations: - key: other_tools.utilities aliasFor: tools_others.utilities - key: other_tools.utilities.description - aliasFor: tools_others.utilities.description + aliasFor: tools_others.utilities.question - key: other_tools.utilities.others aliasFor: tools_others.utilities.others - key: other_tools.utilities.others.description @@ -702,7 +702,7 @@ translations: - key: tools_others.browsers t: Browsers - - key: tools_others.browsers.description + - key: tools_others.browsers.question t: Which browser(s) do you primarily work in during initial development? - key: tools_others.browsers.others t: Other Browsers @@ -712,7 +712,7 @@ translations: - key: other_tools.browsers aliasFor: tools_others.browsers - key: other_tools.browsers.description - aliasFor: tools_others.browsers.description + aliasFor: tools_others.browsers.question - key: other_tools.browsers.others aliasFor: tools_others.browsers.others - key: other_tools.browsers.others.description diff --git a/state_of_html.yml b/state_of_html.yml index 20c3cee34b4..bcf72e674b8 100644 --- a/state_of_html.yml +++ b/state_of_html.yml @@ -114,7 +114,7 @@ translations: t: Form Pain Points - key: features.forms_pain_points.question t: What are your pain points around HTML forms? - - key: features.forms_pain_points.description + - key: features.forms_pain_points.prompt t: | Think of the various form controls (e.g. ``, ``, ``, `` etc.), behaviors (e.g. validation, autocomplete), handling forms via JS, editing APIs (e.g. `contentEditable`) etc. @@ -185,7 +185,7 @@ translations: t: Interactivity Pain Points - key: features.interactivity_pain_points.question t: What are your pain points around dynamic HTML changes? - - key: features.interactivity_pain_points.description + - key: features.interactivity_pain_points.prompt t: | Browser incompatibilities or lack of support, missing features, and other problems you face around interactive elements and behaviors (except forms), DOM manipulation, events, and related APIs. @@ -270,7 +270,7 @@ translations: t: Content Pain Points - key: features.content_pain_points.question t: What are your pain points around managing content in HTML? - - key: features.content_pain_points.description + - key: features.content_pain_points.prompt t: | Think of embedding (multimedia, iframes, SVG, etc), machine-readable data, internationalization & localization, security & privacy, performance etc. Missing features, browser incompatibilities, and other problems you face are all fair game. @@ -337,7 +337,7 @@ translations: t: Using Web Components Pain Points - key: features.using_web_components_pain_points.question t: What are your biggest pain points around *consuming* web components? - - key: features.using_web_components_pain_points.description + - key: features.using_web_components_pain_points.prompt t: Using Web Components that you or others have made. Missing features, browser incompatibilities, etc. - key: features.using_web_components_pain_points.placeholder t: | @@ -347,7 +347,7 @@ translations: t: Making Web Components Pain Points - key: features.making_web_components_pain_points.question t: What are your biggest pain points around *making* web components? - - key: features.making_web_components_pain_points.description + - key: features.making_web_components_pain_points.prompt t: | What prevents you from creating the amazing components you envision? Missing features, browser incompatibilities, etc. - key: features.making_web_components_pain_points.placeholder @@ -611,9 +611,12 @@ translations: t: Which existing HTML features or browser APIs are you unable to use for other reasons (and why)? - key: usage.html_functionality_features.description t: | - Good candidates might be existing HTML features that you often have to recreate or augment using JS. + Existing HTML features that you often have to recreate or augment using JS. + # - key: usage.html_functionality_features.description + # t: | + # Existing HTML features that you often have to recreate or augment using JS. - Please also specify the reason, such as lack of functionality, difficult styling, poor accessibility, etc. + # Please also specify the reason, such as lack of functionality, difficult styling, poor accessibility, etc. - key: usage.html_functionality_features.placeholder.1 t: | @@ -692,7 +695,9 @@ translations: - key: options.html_missing_elements.context_menu t: Context Menu / Right-Click Menu - key: options.html_missing_elements.datatable - t: Data table (with sorting, filtering, etc.) + t: Data table + - key: options.html_missing_elements.datatable.description + t: Data table with sorting, filtering, etc. - key: options.html_missing_elements.dropdown_menu t: Dropdown Menu - key: options.html_missing_elements.image_zoom diff --git a/state_of_html_2023.yml b/state_of_html_2023.yml index 1bb5782f43e..bafc7bc4f87 100644 --- a/state_of_html_2023.yml +++ b/state_of_html_2023.yml @@ -5,4 +5,171 @@ translations: ########################################################################### - key: general.results.description - t: The 2022 edition of the annual survey about the latest trends in the HTML ecosystem. + t: The 2023 edition of the annual survey about the latest trends in the HTML ecosystem. + + - key: introduction.html2023 + t: > + While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, + it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. + After all once you've learned about ``s and ``s 1 through 6, what else is there to know? + + + Quite a lot, as it turns out! Once again we drafted [Lea Verou](https://lea.verou.me/) to put her in-depth + knowledge of the web platform to work, and help us craft a survey that ended up reaching far + beyond pure HTML to cover accessibility, web components, and much more. + + + This partly explains why this report has taken so long to come out – there was + just a *lot* of new data to process! Hopefully you'll find that the result was worth the wait. + + + Beyond the data included here, we've also improved our **chart customization** feature to let you tailor + each data visualization to an even greater degree. If you find any interesting + insights in the process, be sure to let us know! + + + You can learn more about all this in [this post](https://dev.to/sachagreif/discover-the-state-of-html-2023-survey-results-n10), or by watching a [quick YouTube video](https://www.youtube.com/watch?v=G-rFwp2zUT4) + + + With all this out of the day, welcome to the results for the first ever State of HTML survey. + After this, I'm willing to bet you won't look at good old HTML quite the same way ever again! + + ########################################################################### + # Tshirt + ########################################################################### + + - key: sections.tshirt.title + t: T-shirt + + - key: sections.tshirt.description + t: | + ## Support the Survey With the State of HTML T-Shirt + + Do you miss the the good old days of the mid-90s, when HTML was king and VHS tape covers featured futuristic, colorful artwork? + + The bad news is that even with 2024's technology, you can't yet go back in time to relive those glory days. But what you *can* do is wear this awesome original retro t-shirt, designed by none other than the talented Christopher Kirk-Nielsen. + + - 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 $32 + 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 Introductions + ########################################################################### + + - key: sections.user_info.description.html2023 + t: | + Welcome to the State of HTML survey results. This first-ever edition reached **20,904** participants from all around the world. + + - key: sections.features.description.html2023 + t: | + HTML features and other browser APIs + + ########################################################################### + # Other Content + ########################################################################### + + - key: features.all_features + t: All Features + + - key: features.all_features.description + t: | + This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both. + + + Note that you can also find a more specific breakdown of the same data in each feature sub-section. + + ########################################################################### + # 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.tokyodev.description + t: Find your dream developer job in Japan today. + - key: sponsors.renderatl.description + t: The tech conference focused on Front-End Engineering. + + ########################################################################### + # Conclusion + ########################################################################### + + - key: conclusion.html2023.lea_verou.bio + t: W3C Technical Architecture Group Member & MIT CSAIL Researcher + - key: conclusion.html2023.lea_verou + t: > + *Phew!* This survey has taken a monumental effort by dozens of people across six continents. Not only did it set a new record for the most responses in a “State of…” survey debut, its data collection UI pioneered innovations that gave us unparalleled insight into developer attitudes, and will ripple far beyond its scope. + + + Some argue that improving HTML is futile, but the survey resoundingly demonstrates the contrary. **Developers crave more interactive HTML elements**: not only were interactive elements like `` or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top [missing elements](https://2023.stateofhtml.com/en-US/usage/#html_missing_elements) were interactive widgets. + + + However, **making simple things easy** by providing canned functionality is no longer sufficient. **Making complex things possible** by supporting thorough customization is a necessity: insufficient customizability, especially around **styling**, was by far the top recurring pain point. + + + As a result, form elements were also the elements [most frequently recreated](https://2023.stateofhtml.com/en-US/usage/#html_functionality_features); a lose-lose outcome that makes both developers and end-users suffer. Thankfully, there are many new initiatives to improve this, so the future looks bright. + + + Another big need is extensibility. It does not scale if only standards bodies have the privilege to extend HTML; and besides, generic elements cannot possibly address the enormous diversity of needs. Unfortunately, **Web Components APIs** (and especially Shadow DOM), while widely used, appear to fall short in terms of meeting developer needs and providing a smooth developer experience, as they topped the charts of worst experiences across the survey. However, the ongoing activity in this area (some of which I have been part of) leaves me hopeful that while it has been a rocky path, they are on track to reach their full potential. + + + Which brings me to my final point: it is important to remember that this survey is only a snapshot of developer perspectives and reflects the state of the web platform at the time. However, a primary goal of these surveys is to improve the status quo by providing better visibility into developer needs. How many of today’s pain points will be addressed tomorrow as a result? Join us later this year for the survey’s second iteration and let’s find out! + + ########################################################################### + # About + ########################################################################### + + - key: about.content + t: | + The 2023 State of HTML survey ran from September 19 to October 19 2023, and collected 20,904 responses. + + The survey design effort was lead by [Lea Verou](https://lea.verou.me/) thanks to a grant from Google. Lea also oversaw the prototyping, testing, and implementation of new UI data collection elements; contributed to data processing; and helped with data visualization. + + The survey infrastructure 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. + + The survey was openly accessible online and respondents were not filtered or selected in any way. + + ### 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 partner [Frontend Masters](https://frontendmasters.com/). + + - **Other Funding**: [Google](https://www.google.com/) and [TokyoDev](https://www.tokyodev.com/) also funded work on the survey. + + ### 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). diff --git a/state_of_js.yml b/state_of_js.yml index 000d6ba4722..67678d9579f 100644 --- a/state_of_js.yml +++ b/state_of_js.yml @@ -27,6 +27,11 @@ translations: # Sections ########################################################################### + - key: sections.features.title + t: Features + - key: sections.features.description + t: Syntax, browser APIs, and other features. + - key: sections.syntax.title t: Syntax - key: sections.syntax.description @@ -241,18 +246,27 @@ translations: - key: options.top_js_pain_points.date_management.description aliasFor: options.js_pain_points.date_management.description + - key: options.top_js_pain_points.performance + t: Performance + - key: options.top_js_pain_points.performance.description + t: Writing performant and efficient JavaScript code + - key: options.top_js_pain_points.build_tools t: Build Tools + - key: options.top_js_pain_points.build_tools.description + t: Managing tooling to bundle your code + - key: options.top_js_pain_points.typing t: Typing + - key: options.top_js_pain_points.typing.description + t: Managing and maintaining types + - key: options.top_js_pain_points.typescript t: TypeScript - key: options.top_js_pain_points.esm_cjs t: ESM vs CJS - key: options.top_js_pain_points.testing t: Testing - - key: options.top_js_pain_points.performance - t: Performance - key: options.top_js_pain_points.too_many_choices t: Too Many Choices - key: options.top_js_pain_points.react @@ -420,11 +434,11 @@ translations: - key: options.js_app_patterns.static_site_generation t: Static Site Generation (SSG) - key: options.js_app_patterns.static_site_generation.description - t: Pre-rendered static content, with or without a client-side dynamic element + t: Static content pre-rendered at build time, with or without a client-side dynamic element - key: options.js_app_patterns.server_side_rendering t: Server-Side Rendering (SSR) - key: options.js_app_patterns.server_side_rendering.description - t: Dynamically rendering HTML content on the server before rehydrating it on the client + t: Dynamically rendering HTML content on the server on request, before rehydrating it on the client - key: options.js_app_patterns.partial_hydration t: Partial Hydration - key: options.js_app_patterns.partial_hydration.description @@ -444,7 +458,7 @@ translations: - key: options.js_app_patterns.incremental_static_generation t: Incremental Static Generation - key: options.js_app_patterns.incremental_static_generation.description - t: Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR, Gatsby DSG) + t: Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR & on-demand revalidation, Gatsby DSG) - key: options.js_app_patterns.streaming_ssr t: Streaming SSR - key: options.js_app_patterns.streaming_ssr.description @@ -457,6 +471,10 @@ translations: t: Edge Rendering - key: options.js_app_patterns.edge_rendering.description t: Altering rendered HTML at the edge before sending it on to the client + - key: options.js_app_patterns.partial_prerendering + t: Partial Prerendering + - key: options.js_app_patterns.partial_prerendering.description + t: Render a route with a static loading shell, while keeping some parts dynamic - key: options.js_app_patterns.micro_frontend t: Micro Frontend @@ -521,6 +539,11 @@ translations: - key: features.dynamic_import t: Dynamic Import + - key: features.syntax_features + t: Syntax Features + - key: features.syntax_features.question + t: Which of these syntax features have you used? + - key: features.string_features t: String Features - key: features.string_features.question @@ -531,6 +554,26 @@ translations: - key: features.array_features.question t: Which of these Array features have you used? + - key: features.async_features + t: Async Features + - key: features.async_features.question + t: Which of these async features have you used? + + - key: features.browser_api_features + t: Browser APIs + - key: features.browser_api_features.question + t: Which of these browser APIs have you used? + + - key: features.language_pain_points + t: Language Pain Points + - key: features.language_pain_points.question + t: What are your main pain points regarding the JavaScript language? + + - key: features.browser_apis_pain_points + t: Browser APIs Pain Points + - key: features.browser_apis_pain_points.question + t: What are your main pain points regarding browser APIs? + # patterns - key: patterns.object_oriented_programming t: Object-Oriented Programming @@ -569,13 +612,208 @@ translations: Libraries are loaded from [Best of JS](https://bestofjs.org/). If a project is missing, you can [submit it here](https://github.com/michaelrambeau/bestofjs/issues/new?template=add-a-project-to-best-of-javascript.md). + - key: tools.pain_points + t: Pain Points + - key: tools.ratios + t: Ratios Over Time + - key: tools.experience + t: Experience & Sentiment + - key: tools.others + t: Other Tools + + # front-end frameworks + + - key: tools.front_end_frameworks_ratios + t: Front-end Frameworks Ratios Over Time + - key: tools.front_end_frameworks_ratios.short + aliasFor: tools.ratios + + - key: tools.front_end_frameworks_experience + t: Front-end Frameworks Experience & Sentiment + - key: tools.front_end_frameworks_experience.short + aliasFor: tools.experience + + - key: tools.front_end_frameworks.others + t: Other Front-end Frameworks + - key: tools.front_end_frameworks.others.short + aliasFor: tools.others + + - key: tools.front_end_frameworks_happiness + t: Front-end Frameworks Happiness + - key: tools.front_end_frameworks_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.front_end_frameworks_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of front-end frameworks? + + - key: tools.front_end_frameworks_pain_points + t: Front-end Frameworks Pain Points + - key: tools.front_end_frameworks_pain_points.short + aliasFor: tools.pain_points + - key: tools.front_end_frameworks_pain_points.question + t: What pain points have you encountered when using front-end frameworks? + + # meta-frameworks + + - key: tools.meta_frameworks_ratios + t: Meta-Frameworks Ratios Over Time + - key: tools.meta_frameworks_ratios.short + aliasFor: tools.ratios + + - key: tools.meta_frameworks_experience + t: Meta-Frameworks Experience & Sentiment + - key: tools.meta_frameworks_experience.short + aliasFor: tools.experience + + - key: tools.meta_frameworks.others + t: Other Meta-Frameworks + - key: tools.meta_frameworks.others.short + aliasFor: tools.others + + - key: tools.meta_frameworks_happiness + t: Meta-Frameworks Happiness + - key: tools.meta_frameworks_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.meta_frameworks_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of meta-frameworks? + + - key: tools.meta_frameworks_pain_points + t: Meta-Frameworks Pain Points + - key: tools.meta_frameworks_pain_points.short + aliasFor: tools.pain_points + - key: tools.meta_frameworks_pain_points.question + t: What pain points have you encountered when using meta-frameworks? + + # testing + + - key: tools.testing_ratios + t: Testing Tools Ratios Over Time + - key: tools.testing_ratios.short + aliasFor: tools.ratios + + - key: tools.testing_experience + t: Testing Tools Experience & Sentiment + - key: tools.testing_experience.short + aliasFor: tools.experience + + - key: tools.testing.others + t: Other Testing Tools + - key: tools.testing.others.short + aliasFor: tools.others + + - key: tools.testing_happiness + t: Testing Tools Happiness + - key: tools.testing_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.testing_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of testing tools? + + - key: tools.testing_pain_points + t: Testing Tools Pain Points + - key: tools.testing_pain_points.short + aliasFor: tools.pain_points + - key: tools.testing_pain_points.question + t: What pain points have you encountered when using testing tools? + + # mobile & desktop + + - key: tools.mobile_desktop_ratios + t: Mobile & Desktop Tools Ratios Over Time + - key: tools.mobile_desktop_ratios.short + aliasFor: tools.ratios + + - key: tools.mobile_desktop_experience + t: Mobile & Desktop Tools Experience & Sentiment + - key: tools.mobile_desktop_experience.short + aliasFor: tools.experience + + - key: tools.mobile_desktop.others + t: Other Mobile & Desktop Tools + - key: tools.mobile_desktop.others.short + aliasFor: tools.others + + - key: tools.mobile_desktop_happiness + t: Mobile & Desktop Tools Happiness + - key: tools.mobile_desktop_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.mobile_desktop_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of mobile & desktop tools? + + - key: tools.mobile_desktop_pain_points + t: Mobile & Desktop Tools Pain Points + - key: tools.mobile_desktop_pain_points.short + aliasFor: tools.pain_points + - key: tools.mobile_desktop_pain_points.question + t: What pain points have you encountered when using JavaScript to build mobile & desktop apps? + + # build tools + + - key: tools.build_tools_ratios + t: Build Tools Ratios Over Time + - key: tools.build_tools_ratios.short + aliasFor: tools.ratios + + - key: tools.build_tools_experience + t: Build Tools Experience & Sentiment + - key: tools.build_tools_experience.short + aliasFor: tools.experience + + - key: tools.build_tools.others + t: Other Build Tools + - key: tools.build_tools.others.short + aliasFor: tools.others + + - key: tools.build_tools_happiness + t: Build Tools Happiness + - key: tools.build_tools_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.build_tools_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of build tools? + + - key: tools.build_tools_pain_points + t: Build Tools Pain Points + - key: tools.build_tools_pain_points.short + aliasFor: tools.pain_points + - key: tools.build_tools_pain_points.question + t: What pain points have you encountered when using build tools? + + # monorepo tools + + - key: tools.monorepo_tools_ratios + t: Monorepo Tools Ratios Over Time + - key: tools.monorepo_tools_ratios.short + aliasFor: tools.ratios + + - key: tools.monorepo_tools_experience + t: Monorepo Tools Experience & Sentiment + - key: tools.monorepo_tools_experience.short + aliasFor: tools.experience + + - key: tools.monorepo_tools.others + t: Other Monorepo Tools + - key: tools.monorepo_tools.others.short + aliasFor: tools.others + + - key: tools.monorepo_tools_happiness + t: Monorepo Tools Happiness + - key: tools.monorepo_tools_happiness.short + aliasFor: charts.axis_legends.happiness + - key: tools.monorepo_tools_happiness.question + t: On a scale of 0 (very unhappy) to 4 (very happy), how happy are you with the current state of monorepo tools? + + - key: tools.monorepo_tools_pain_points + t: Monorepo Tools Pain Points + - key: tools.monorepo_tools_pain_points.short + aliasFor: tools.pain_points + - key: tools.monorepo_tools_pain_points.question + t: What pain points have you encountered when using monorepo tools? + ########################################################################### # Other Tools ########################################################################### - key: tools_others.libraries t: Libraries - - key: tools_others.libraries.description + - key: tools_others.libraries.question t: Which libraries do you regularly use? - key: tools_others.libraries.others t: Other Libraries @@ -584,7 +822,7 @@ translations: - key: tools_others.text_editors t: Text Editors - - key: tools_others.text_editors.description + - key: tools_others.text_editors.question t: Which text editor(s) do you regularly use? - key: tools_others.text_editors.others t: Other Text Editors @@ -593,7 +831,7 @@ translations: - key: tools_others.utilities t: Utilities - - key: tools_others.utilities.description + - key: tools_others.utilities.question t: Which utilities or tools do you regularly use? - key: tools_others.utilities.others t: Other Utilities @@ -602,7 +840,7 @@ translations: - key: tools_others.browsers t: Browsers - - key: tools_others.browsers.description + - key: tools_others.browsers.question t: Which browser(s) do you primarily work in during initial development? - key: tools_others.browsers.others t: Other Browsers @@ -611,7 +849,7 @@ translations: - key: tools_others.build_tools t: Build Tools - - key: tools_others.build_tools.description + - key: tools_others.build_tools.question t: Which build tools do you use? - key: tools_others.build_tools.others t: Other Build Tools @@ -620,7 +858,7 @@ translations: - key: tools_others.non_js_languages t: Non-JavaScript Languages - - key: tools_others.non_js_languages.description + - key: tools_others.non_js_languages.question t: Which other programming languages do you use? - key: tools_others.non_js_languages.others t: Other Languages @@ -629,7 +867,7 @@ translations: - key: tools_others.javascript_flavors t: JavaScript Flavors - - key: tools_others.javascript_flavors.description + - key: tools_others.javascript_flavors.question t: Languages that compile to JavaScript - key: tools_others.javascript_flavors.others t: Other JavaScript Flavors @@ -638,7 +876,7 @@ translations: - key: tools_others.runtimes t: JavaScript Runtimes - - key: tools_others.runtimes.description + - key: tools_others.runtimes.question t: Which engines/runtimes/execution environments do you regularly use? - key: tools_others.runtimes.others t: Other Runtimes @@ -647,7 +885,7 @@ translations: - key: tools_others.package_registries t: Package Registries - - key: tools_others.package_registries.description + - key: tools_others.package_registries.question t: Which package registries do you regularly fetch packages from? - key: tools_others.package_registries.others t: Other Package Registries @@ -661,35 +899,35 @@ translations: - key: tools_others.backend_as_a_service t: Backend-as-a-Service Providers - - key: tools_others.backend_as_a_service.description + - key: tools_others.backend_as_a_service.question t: Services that host your data and offer a client API to access it. - key: tools_others.backend_as_a_service.others t: Other BaaS Providers - key: tools_others.date_management t: Date Management - - key: tools_others.date_management.description + - key: tools_others.date_management.question t: Libraries that help with date and timezone management. - key: tools_others.date_management.others t: Other Date Management Libraries - key: tools_others.data_visualization t: Data Visualization - - key: tools_others.data_visualization.description + - key: tools_others.data_visualization.question t: Libraries that help with charts and other data visualizations. - key: tools_others.data_visualization.others t: Other Data Visualization Libraries - key: tools_others.graphics_animation t: Graphics & Animations - - key: tools_others.graphics_animation.description + - key: tools_others.graphics_animation.question t: Libraries dedicated to graphics and animation. - key: tools_others.graphics_animation.others t: Other Graphics & Animations Libraries - key: tools_others.data_fetching t: Data Fetching - - key: tools_others.data_fetching.description + - key: tools_others.data_fetching.question t: Libraries that manage data fetching and caching. - key: tools_others.data_fetching.others t: Other Data Fetching Libraries @@ -697,7 +935,7 @@ translations: - key: other_tools.libraries aliasFor: tools_others.libraries - key: other_tools.libraries.description - aliasFor: tools_others.libraries.description + aliasFor: tools_others.libraries.question - key: other_tools.libraries.others aliasFor: tools_others.libraries.others - key: other_tools.libraries.others.description @@ -706,7 +944,7 @@ translations: - key: other_tools.text_editors aliasFor: tools_others.text_editors - key: other_tools.text_editors.description - aliasFor: tools_others.text_editors.description + aliasFor: tools_others.text_editors.question - key: other_tools.text_editors.others aliasFor: tools_others.text_editors.others - key: other_tools.text_editors.others.description @@ -715,7 +953,7 @@ translations: - key: other_tools.utilities aliasFor: tools_others.utilities - key: other_tools.utilities.description - aliasFor: tools_others.utilities.description + aliasFor: tools_others.utilities.question - key: other_tools.utilities.others aliasFor: tools_others.utilities.others - key: other_tools.utilities.others.description @@ -724,7 +962,7 @@ translations: - key: other_tools.browsers aliasFor: tools_others.browsers - key: other_tools.browsers.description - aliasFor: tools_others.browsers.description + aliasFor: tools_others.browsers.question - key: other_tools.browsers.others aliasFor: tools_others.browsers.others - key: other_tools.browsers.others.description @@ -733,7 +971,7 @@ translations: - key: other_tools.build_tools aliasFor: tools_others.build_tools - key: other_tools.build_tools.description - aliasFor: tools_others.build_tools.description + aliasFor: tools_others.build_tools.question - key: other_tools.build_tools.others aliasFor: tools_others.build_tools.others - key: other_tools.build_tools.others.description @@ -742,7 +980,7 @@ translations: - key: other_tools.non_js_languages aliasFor: tools_others.non_js_languages - key: other_tools.non_js_languages.description - aliasFor: tools_others.non_js_languages.description + aliasFor: tools_others.non_js_languages.question - key: other_tools.non_js_languages.others aliasFor: tools_others.non_js_languages.others - key: other_tools.non_js_languages.others.description @@ -751,7 +989,7 @@ translations: - key: other_tools.javascript_flavors aliasFor: tools_others.javascript_flavors - key: other_tools.javascript_flavors.description - aliasFor: tools_others.javascript_flavors.description + aliasFor: tools_others.javascript_flavors.question - key: other_tools.javascript_flavors.others aliasFor: tools_others.javascript_flavors.others - key: other_tools.javascript_flavors.others.description @@ -767,7 +1005,7 @@ translations: - key: other_tools.runtimes aliasFor: tools_others.runtimes - key: other_tools.runtimes.description - aliasFor: tools_others.runtimes.description + aliasFor: tools_others.runtimes.question - key: other_tools.runtimes.others aliasFor: tools_others.runtimes.others - key: other_tools.runtimes.others.description @@ -776,7 +1014,7 @@ translations: - key: other_tools.package_registries aliasFor: tools_others.package_registries - key: other_tools.package_registries.description - aliasFor: tools_others.package_registries.description + aliasFor: tools_others.package_registries.question - key: other_tools.package_registries.others aliasFor: tools_others.package_registries.others - key: other_tools.package_registries.others.description @@ -790,35 +1028,35 @@ translations: - key: other_tools.backend_as_a_service aliasFor: tools_others.backend_as_a_service - key: other_tools.backend_as_a_service.description - aliasFor: tools_others.backend_as_a_service.description + aliasFor: tools_others.backend_as_a_service.question - key: other_tools.backend_as_a_service.others aliasFor: tools_others.backend_as_a_service.others - key: other_tools.date_management aliasFor: tools_others.date_management - key: other_tools.date_management.description - aliasFor: tools_others.date_management.description + aliasFor: tools_others.date_management.question - key: other_tools.date_management.others aliasFor: tools_others.date_management.others - key: other_tools.data_visualization aliasFor: tools_others.data_visualization - key: other_tools.data_visualization.description - aliasFor: tools_others.data_visualization.description + aliasFor: tools_others.data_visualization.question - key: other_tools.data_visualization.others aliasFor: tools_others.data_visualization.others - key: other_tools.graphics_animation aliasFor: tools_others.graphics_animation - key: other_tools.graphics_animation.description - aliasFor: tools_others.graphics_animation.description + aliasFor: tools_others.graphics_animation.question - key: other_tools.graphics_animation.others aliasFor: tools_others.graphics_animation.others - key: other_tools.data_fetching aliasFor: tools_others.data_fetching - key: other_tools.data_fetching.description - aliasFor: tools_others.data_fetching.description + aliasFor: tools_others.data_fetching.question - key: other_tools.data_fetching.others aliasFor: tools_others.data_fetching.others @@ -837,7 +1075,7 @@ translations: - key: other_tools.hosting t: Hosting Services - key: other_tools.hosting.question - t: Which of services have you used to host your apps? + t: Which of these services have you used to host JavaScript apps? ########################################################################### # Usage @@ -845,35 +1083,37 @@ translations: - key: usage.js_app_patterns t: Application Patterns - - key: usage.js_app_patterns.description + - key: usage.js_app_patterns.question t: Which of the following architecture and rendering patterns have you used **in the last year**? - key: usage.js_app_patterns.others t: Other App Patterns - key: usage.what_do_you_use_js_for + t: JavaScript Usage + - key: usage.what_do_you_use_js_for.question t: What do you use JavaScript for? - key: usage.what_do_you_use_js_for.others t: Other JavaScript Use Cases - key: usage.js_ts_balance t: JavaScript/TypeScript Balance - - key: usage.js_ts_balance.description + - key: usage.js_ts_balance.question t: How do you divide your time between writing JavaScript and TypeScript code? - key: tools_others.edge_runtimes t: JavaScript Edge/Serverless Runtimes - - key: tools_others.edge_runtimes.description + - key: tools_others.edge_runtimes.question t: Which edge or serverless runtimes do you regularly use? - key: tools_others.edge_runtimes.others t: Other Edge Runtimes - key: other_tools.edge_runtimes aliasFor: tools_others.edge_runtimes - key: other_tools.edge_runtimes.description - aliasFor: tools_others.edge_runtimes.description + aliasFor: tools_others.edge_runtimes.question - key: usage.usage_type t: JavaScript Usage - - key: usage.usage_type.description + - key: usage.usage_type.question t: In what context do you primarily use JavaScript? - key: usage.usage_type.others t: Other Usages @@ -885,7 +1125,7 @@ translations: - key: usage.industry_sector_js aliasFor: usage.industry_sector - - key: usage.industry_sector_js.description + - key: usage.industry_sector_js.question t: Which industry sector(s) are you using JavaScript in? - key: usage.industry_sector_js.others aliasFor: usage.industry_sector.others @@ -933,12 +1173,22 @@ translations: t: How happy are you with the state of rendering frameworks? - key: happiness.state_of_the_web + t: Web Technologies Happiness + - key: happiness.state_of_the_web.question t: How happy are you with the general state of web technologies? - key: happiness.state_of_js + t: JavaScript Happiness + - key: happiness.state_of_js.question t: How happy are you with the general state of JavaScript? # Pain Points + + - key: usage.top_js_pain_points + aliasFor: opinions.js_pain_points + - key: usage.top_js_pain_points.question + t: What aspects of JavaScript do you struggle with the most? + - key: opinions.js_pain_points t: JavaScript Pain Points - key: opinions.js_pain_points.description @@ -956,6 +1206,12 @@ translations: aliasFor: opinions_others.js_pain_points.others # Missing Features + + - key: usage.top_currently_missing_from_js + t: Missing Features + - key: usage.top_currently_missing_from_js.question + aliasFor: opinions.currently_missing_from_js + - key: opinions.currently_missing_from_js t: What do you feel is currently missing from JavaScript? - key: opinions.currently_missing_from_js.description diff --git a/state_of_js_2023.yml b/state_of_js_2023.yml index 281c69739e1..8ad89209695 100644 --- a/state_of_js_2023.yml +++ b/state_of_js_2023.yml @@ -1,4 +1,3 @@ -# WIP DO NOT TRANSLATE YET locale: en-US translations: ########################################################################### @@ -6,10 +5,7 @@ translations: ########################################################################### - 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) + t: The 2023 edition of the annual survey about the latest trends in the JavaScript ecosystem. ########################################################################### # Introduction @@ -18,21 +14,17 @@ translations: - key: introduction.js2023 t: | - After years of relative stability, many are now beginning to question the status quo. - - New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client. + It should be clear by now that, for better or for worse, JavaScript is not slowing down. - We'll need all the data we can get if we want to make sense of all this, and in fact this year's survey received a massive **39,472** responses, almost double last year's amount! + Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. - Because of this newly expanded audience you might notice some unexpected results, such as some features going down year-over-year in terms of awareness or usage. + The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; but you can also keep a slower pace and focus on stable, mature technologies – and eventually get to the new hotness once it's had a couple years to cool down. - But having more data can potentially mean new insights, and that's why we've developed two new ways to interact with our dataset: the **Data Explorer** lets you cross-reference two variables and highlight any outlying results; while **Chart Filters** let you filter specific charts by income, country, gender, and many other demographic variables. + Speaking of taking it slow, you might be wondering why these 2023 survey results are being released six months into *2024*. The truth is, between launching the new [State of HTML](https://2023.stateofhtml.com/) survey, innovating new question formats, collecting more freeform data than ever, and rewriting a lot of our data visualization codebase, we ended up with a workload that was probably a bit too ambitious, to say the least. - We've also replaced our catch-all "back-end" category with a more specific **Rendering Frameworks** page and added a new **Video Creators** list to the Resources section. + Hopefully the result of all this extra effort will be worth it though. And we do plan on much faster turnarounds going forward. - Finally, Features and Libraries questions also now have a **Comments** popup that lets you see what people actually think of the items mentioned in the survey! - - With all this out of the way, let's discover what JavaScript has been up to in 2022! + With all this out of the way, let's discover what JavaScript has been up to lately! – Sacha Greif @@ -62,7 +54,7 @@ translations: t: Get It - key: tshirt.price - t: USD $29 + shipping + t: USD $32 + shipping - key: tshirt.designer.heading t: About the Designer @@ -80,37 +72,33 @@ translations: - key: sections.user_info.description t: | - This year, **39,471** respondents took part in the survey. And in order + 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. + This year we put special emphasis on identifying developer pain points with JavaScript. As one might expect, the **lack of native typing** and **browser inconsistencies** led their respective charts, each affecting nearly a third of developers. - - key: sections.technologies.description + - key: sections.libraries.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. + We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least! - - key: sections.tools_others.description + - key: sections.other_tools.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. + While the JavaScript conversation often seems to boild down to which framework to pick, it's worth remembering that there's a whole galaxy of other tools, services, and platforms to explore beyond that! - - key: sections.environments.description + - key: sections.usage.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. + Once again it seems like TypeScript has established itself as the default, at least among survey respondents. But apart from that, JavaScript usage remains as varied as ever! - 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! + 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 + - key: sections.awards.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! + This year's awards were dominated by one very specific project… how quickly will you guess what it is? ########################################################################### # Charts @@ -123,19 +111,6 @@ translations: - 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 ########################################################################### @@ -164,331 +139,222 @@ translations: - 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. + **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 takes the top spot with a sky-high **{value}** retention ratio! + t: Vite once again takes the top spot, with **{value}** of developers willing to use it again! - key: award.tool_interest_award.comment - t: With a **{value}** interest ratio, Vite once again wins the gold! + 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: 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. + 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 still the most-discussed library around. + 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.js2022 + - key: conclusion.js2023.cassidy_williams + t: | + Y'all, what a cool year to be on the internet. + + There's so many interesting and exciting changes happening, and I've got my popcorn next to my keyboard, building and watching! + + The fact that so many "smaller" libraries like Preact, Solid, and htmx are climbing in positive sentiment over something massive like Next.js is fascinating. We're starting to see Angular make a bit of a comeback, and we'll see if that trend continues next year. We're seeing people fall out of love with some of the industry darlings. We're seeing very Rusty systems grow. Astro feels like it's off to the races in developer support. + + In terms of actual browser features, it almost feels like we're going too fast for the world to catch up. Which is not always a bad thing, necessarily! But I totally echo the sentiments that browser support is my primary concern over all the cool things coming out. + + That being said, I'm personally loving using some of the new array features and the fact that more and more folks are supporting PWAs. + + Next year, let's improve the diversity of responses, get more people developing, and hopefully all of the new and exciting changes err on the side of fun, rather than intimidating! Thanks Sacha and team for including me here, and for running another awesome and valuable survey. + + See you online! + + - key: conclusion.js2023.cassidy_williams.bio + t: Dev advocate, engineer, open sourcer, and memer + + - key: conclusion.js2023.theo_browne t: | - JavaScript and TypeScript are more vibrant than ever. + Javascript is moving to the server, and we’re uneasy about it. - We saw a continuation of performance-lead innovations, many in reactivity and hydration (or the lack thereof). For example, [Svelte](https://www.youtube.com/watch?v=AdNJ3fydeao) took on simplicity in developer ergonomics and leaned into the compiler. Solid’s explored [new approaches to reactivity](https://www.youtube.com/watch?v=2iK9zzhSKo4), while Qwik [shifted our mental model with resumability](https://www.youtube.com/watch?v=Zddw6qy5pf0). + In last year’s survey, we saw quickly growing adoption of server-rendered frameworks like Next, Nuxt, Remix, and SvelteKit. This year, we shifted to server-first patterns such as Partial Hydration and Islands, which doubled in their adoption. - Innovation is also exciting to see in multi-platform solutions like Tauri, Ionic and Flutter, which opens the door to see applications that span across even more platforms. + Frame-, err, libraries like htmx show that web devs aren’t the only ones benefiting from utilizing the server. SPAs aren’t going anywhere (take a look at [Inertia](https://inertiajs.com/) for proof), but as these new patterns continue to improve, the market seems to be following along. - We see globally distributed talent- like Nigeria and now India [having the highest developer growth on GitHub](https://octoverse.github.com/2022/global-tech-talent). Around the world, there are amazing projects like Segun Adebayo's [Chakra UI](https://chakra-ui.com/), or Liyas Thomas's [Hoppscotch](https://hoppscotch.io/), and folks supporting other people’s growth and learning like Ada Nduka Oyom who founded [SheCodeAfrica](https://shecodeafrica.org/), a non-profit organization that has helped empower over 17K women across Africa. + This move has not been unanimously loved. React’s continued to grow, but React developers are increasingly concerned about its direction. Getting here has been… rough, but progress is being made every day. - When we look at established frameworks like React, Angular, or Vue we often see a drop in satisfaction, and people may wonder what it means for the future. I believe that this decline is a function of the tool being battle-tested and used in production, of finding the rough edges and experiencing the trade-offs every tool has. It’s a sign of maturity and clear-eyed appreciation for what these tools can offer. They will also learn from innovation in the space and continue to evolve. + We’re also seeing more options appear outside of the React ecosystem. From [Nuxt](https://roe.dev/blog/nuxt-server-components) to [SolidStart](https://docs.solidjs.com/solid-start/reference/server/use-server) to [Astro](https://astro.build/blog/astro-480/#experimental-astro-actions), all of the best React Server Component features are rolling out to every developer. - Finally, I couldn’t be happier to see Vite’s absolute resounding presence in the award section for the second year in a row. Build and serve tech is truly making massive strides and we all benefit from this hard work. Bravo! + And of course, Vite has continued to dominate, and is the choice for app developers and framework authors alike. Hard to imagine where we’d be today without it! - - key: conclusion.js2022.bio - t: Director of Engineering and Web Infrastructure, Google + - key: conclusion.js2023.theo_browne.bio + t: Creator of Ping, uploadthing, create-t3-app, and video creator ########################################################################### # Picks ########################################################################### - key: picks.my_pick - t: "My 2022 Pick: " + t: "My 2023 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. + # 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! - # - 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 + # 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: Type Annotations Proposal + t: localfirst.fm - key: picks.rich_harris.bio - t: Principal Software Engineer, Vercel + t: Open source troublemaker at Vercel. Creator of Rollup and Svelte - 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: Open source maintainer at Astro - - 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: | - + 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://unjs.io/ + - key: picks.quarkstuff.name + t: UnJS + - key: picks.quarkstuff.bio + t: Web & Game dev nerd + - key: picks.quarkstuff.description + t: | + The UnJS ecosystem is like a developer's toybox. From ofetch and consola to citty and nitro, there is likely something there for your next big project. + + # 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. + + # https://x.com/dawntraoz + - key: picks.arisa_fukuzaki.name + t: Alba Silvente Fuentes + - key: picks.arisa_fukuzaki.bio + t: Senior DevRel Engineer & Docs at Storyblok + - key: picks.arisa_fukuzaki.description + t: | + Alba writes about frontend development, web architecture, and web performance, spoke at many conferences, and has a podcast, "No me da la vida". She has been inspiring many devs, and I'm one of them! + + # - key: picks.xxxx.name + # t: + # - key: picks.xxxx.bio + # t: + # - key: picks.xxxx.description + # t: | ########################################################################### # Sponsors ########################################################################### @@ -497,8 +363,10 @@ translations: 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.tokyodev.description + t: Find your dream developer job in Japan today. - key: sponsors.renderatl.description - t: This is a tech conference focused on Front-End Engineering. + t: The tech conference focused on Front-End Engineering. ########################################################################### # FAQ/About @@ -506,21 +374,21 @@ translations: - 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. + The 2023 State of JavaScript survey ran from November 22 to December 12 2023, and collected 23,540 responses. The results were published on June 20, 2024. 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. - This year's logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + 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 the features or technologies that are currently most widespread are not always included. + 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). + 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+2023%22). All survey questions were optional. @@ -530,44 +398,18 @@ translations: 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. + - **Direct Funding**: this year, [Google](https://www.google.com/) funded my work on the survey. - 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. + 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-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). + 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). diff --git a/state_of_react.yml b/state_of_react.yml index c682a10161d..ba73d8289d2 100644 --- a/state_of_react.yml +++ b/state_of_react.yml @@ -90,9 +90,9 @@ translations: # - key: sections.testing.description # t: Testing utilities and libraries - - key: sections.other_tools.title + - key: sections.tools.title t: Other Tools - - key: sections.other_tools.description + - key: sections.tools.description t: Other React utilities and libraries - key: sections.usage_react.title @@ -222,10 +222,6 @@ translations: t: > `use` is a React Hook that lets you read the value of a resource like a Promise or context. - - key: features.usetransition.description - t: > - `useTransition` is a React Hook that lets you update the state without blocking the UI. - - key: features.starttransition.description t: > `startTransition` lets you update the state without blocking the UI. @@ -265,7 +261,7 @@ translations: # tools - key: tools.component_libraries_others - t: Other Libraries + t: Other Component Libraries - key: tools.component_libraries_others.question t: What other component libraries have you used? @@ -327,9 +323,9 @@ translations: - key: tools.back_end_infrastructure_pain_points.question t: What pain points have you encountered related to back-end and infrastructure? - - key: other_tools.testing + - key: tools.testing t: Testing Libraries - - key: other_tools.testing.question + - key: tools.testing.question t: Which libraries do you use to test your React apps? # - key: tools.testing_happiness @@ -337,9 +333,9 @@ translations: # - key: tools.testing_happiness.description # t: How happy are you with the current state of testing libraries? - - key: other_tools.mobile_development + - key: tools.mobile_development t: Mobile Development - - key: other_tools.mobile_development.question + - key: tools.mobile_development.question t: Which libraries have you used for mobile development? # - key: tools.mobile_development_others @@ -350,94 +346,94 @@ translations: # t: How happy are you with the current state of mobile development? # other tools - - key: other_tools.form_libraries + - key: tools.form_libraries t: Form Libraries - # - key: other_tools.form_libraries.description + # - key: tools.form_libraries.description # t: Libraries for generating and validating forms. - - key: other_tools.form_libraries.question + - key: tools.form_libraries.question t: Which libraries have you used to manage forms? - key: options.form_libraries.na t: None - - key: other_tools.build_tools + - key: tools.build_tools t: Build Tools - # - key: other_tools.build_tools.description + # - key: tools.build_tools.description # t: Build tools and bundlers. - - key: other_tools.build_tools.question + - key: tools.build_tools.question t: Which build tools and bundlers have you used? - - key: other_tools.animation_libraries + - key: tools.animation_libraries t: Animation - # - key: other_tools.animation.description + # - key: tools.animation.description # t: Libraries to help manage animations and transitions. - - key: other_tools.animation_libraries.question + - key: tools.animation_libraries.question t: Which animation libraries have you used? - - key: other_tools.auth + - key: tools.auth t: Authentication - # - key: other_tools.auth.description + # - key: tools.auth.description # t: Libraries and services for managing authentication and accounts. - - key: other_tools.auth.question + - key: tools.auth.question t: Which libraries and services have you used to handle authentication? - - key: other_tools.data_visualization_libraries + - key: tools.data_visualization_libraries t: Data Visualization - # - key: other_tools.data_visualization.description + # - key: tools.data_visualization.description # t: Data visualization and graphics libraries. - - key: other_tools.data_visualization_libraries.question + - key: tools.data_visualization_libraries.question t: Which data visualization and graphics libraries have you used? - - key: other_tools.css_tools + - key: tools.css_tools t: CSS Tools & Libraries - # - key: other_tools.css_tools.description + # - key: tools.css_tools.description # t: CSS libraries, frameworks, and utilities you use to style your React app. - - key: other_tools.css_tools.question + - key: tools.css_tools.question t: Which libraries or frameworks have you used to style your React apps? - - key: other_tools.other_frontend_frameworks + - key: tools.other_frontend_frameworks t: Other Front-end Frameworks - # - key: other_tools.other_frontend_frameworks.description + # - key: tools.other_frontend_frameworks.description # t: > # Other front-end frameworks - - key: other_tools.other_frontend_frameworks.question + - key: tools.other_frontend_frameworks.question t: > Which other front-end frameworks have you used? - - key: other_tools.hosting + - key: tools.hosting t: Hosting Services - # - key: other_tools.hosting.description + # - key: tools.hosting.description # t: Services you use to host your React apps. - - key: other_tools.hosting.question + - key: tools.hosting.question t: Which of services have you used to host your React apps? - - key: other_tools.backend_language + - key: tools.backend_language t: Back-end Languages - - key: other_tools.backend_language.question + - key: tools.backend_language.question t: Which language(s) are your back-end apps written in? - - key: other_tools.other_services + - key: tools.other_services t: Other Services - - key: other_tools.other_services.question + - key: tools.other_services.question t: What other services have you used with your React apps? - - key: other_tools.validation + - key: tools.validation t: Schema & Validation Libraries - - key: other_tools.validation.question + - key: tools.validation.question t: Which libraries have you used for validating data against a schema? - - key: other_tools.ai_tools + - key: tools.ai_tools t: AI Tools - - key: other_tools.ai_tools.question + - key: tools.ai_tools.question t: What AI tools or services have you used to help you write React code? - - key: other_tools.renderers + - key: tools.renderers t: React Renderers - - key: other_tools.renderers.question + - key: tools.renderers.question t: Which libraries have you used to render React to different platforms or environments? - - key: other_tools.other_tools + - key: tools.other_tools t: Other Tools - - key: other_tools.other_tools.question + - key: tools.tools.question t: What other tools have you used to develop React apps? # CSS diff --git a/state_of_react_2023.yml b/state_of_react_2023.yml new file mode 100644 index 00000000000..be7b5d66c88 --- /dev/null +++ b/state_of_react_2023.yml @@ -0,0 +1,473 @@ +locale: en-US +translations: + ########################################################################### + # General + ########################################################################### + + - key: general.results.description + t: The 2023 edition of the annual survey about the latest trends in the React ecosystem. + + ########################################################################### + # Introduction + ########################################################################### + + - key: introduction.react2023 + t: | + + React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. + + The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. + + In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server Components and the upcoming Compiler. + + That being said, please note that this data was collected between **October 27** and **November 15, 2023**, which does mean that React 19 –as well as any other development that may have taken place after that time period– isn't covered. + + Even so, there's still a lot to explore here, from component libraries, to state management techniques, to application patterns. So let's discover the results of the first ever State of React community survey together! + + *This in an unofficial survey unaffiliated with Meta, Vercel, or the React team.* + + – Sacha Greif + + ########################################################################### + # Tshirt + ########################################################################### + + - key: sections.tshirt.title + t: T-shirt + + - key: sections.tshirt.description + t: | + ## Support the Survey With the official State of React T-Shirt + + Is it a library? A framework? An unknown element on the verge of mutating into a dangerous, unstable entity? Whatever your feelings about React, you will find them reflected in this design that echoes anime and science-fiction. + + - key: tshirt.about + t: About the T-shirt + + - key: tshirt.description + t: | + We use a high-quality shirt printed by our partners at Cotton Bureau. + + - key: tshirt.getit + t: Get It + + - key: tshirt.price + t: USD $32 + 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)! + + ########################################################################### + # Content + ########################################################################### + + # user_info + + - key: sections.user_info.description + t: | + **13,003** respondents took part in the first ever State of React survey. A small sample of the overall community to be sure, but still large enough to provide us with valuable data! + + - key: user_info.country.takeaway + t: | + The majority of respondents came from the **U.S.** and **Europe**. + + - key: user_info.locale.takeaway + aliasFor: user_info.locale.description + + - key: user_info.completion_stats.takeaway + aliasFor: user_info.completion_stats.description + + # features + + - key: sections.features.description + t: | + We asked respondents about their thoughts on **28** distinct features, from omnipresent hooks such as `useState`, to more niche APIs like `useDeferredValue`. Be sure to try and sort by “sentiment”! + + - key: features.all_features + t: All Features + + - key: features.all_features.takeaway + t: | + This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both. + + - key: features.reading_list.takeaway + t: > + **30%** of respondents added at least one item to their reading list while taking the survey in order to learn more about them later. Here is a breakdown of their picks. + + - key: features.main_apis_items + t: Main APIs Experience & Sentiment + - key: features.main_apis_pain_points.takeaway + t: > + Among the most common React APIs, `forwardRef` was by far the one generating the most pain for developers, with `memo` a close second. Thankfully the React team is in the process of rolling out better alternatives to both. + + - key: features.hooks_items + t: Hooks Experience & Sentiment + - key: features.hooks_pain_points.takeaway + t: > + Unsurpringly, `useEffect` and `useCallback` were cited as the most problematice React hooks, in large part due to the management of dependency arrays. + + - key: features.new_apis_items + t: New APIs Experience & Sentiment + - key: features.new_apis_pain_points.takeaway + t: > + While React's ability to keep evolving and stay relevant over time is one of its best assets, it also comes at a cost and new APIs such as **Server Components** can definitely be tough to adopt. + + # libraries + + - key: sections.libraries.description + t: | + We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least! + + - key: tools.all_tools_experience + t: Libraries Experience & Sentiment + - key: tools.all_tools_experience.takeaway + t: > + Among React libraries and frameworks, **Next.js** and **TanStack Query** lead the way in terms of overall positivity. + + Note that some items such as `useState` and `fetch` were also included in order to provide a baseline, even though they're not libraries themselves. + + - key: tools.scatterplot_overview + t: Libraries Retention vs Usage + - key: tools.scatterplot_overview.takeaway + t: > + Among libraries and frameworks, **Next.js** was the only item boasting both high retention and high usage. On the other hand, while even more respondents had used **Create React App**, a lot fewer were willing to keep using it going forward. + + # component libraries + + - key: tools.component_libraries_experience + t: Component Libraries Experience & Sentiment + - key: tools.component_libraries_experience.takeaway + t: > + **React Aria** and **Radix** lead the rankings in terms of positivity, proving that the headless approach to component libraries has a lot going for it. + + # state management + + - key: tools.state_management_experience + t: State Management Experience & Sentiment + - key: tools.state_management_experience.takeaway + t: > + Beyond **useState**, the state management solution with the highest positivity ratio is **Zustand**. And while **Redux** still boasts a large userbase, it isn't quite as beloved. + + # data loading + + - key: tools.data_loading_experience + t: Data Loading Experience & Sentiment + - key: tools.data_loading_experience.takeaway + t: > + **TanStack Query** has been making waves for a while now, and it turns out its reputation is reflected in the data since it's the data loading method respondents felt the most positive about, right after the native `fetch` API. + + # back-end infrastructure + + - key: tools.meta_frameworks_experience + t: Meta-Frameworks Experience & Sentiment + - key: tools.meta_frameworks_experience.takeaway + t: > + While you'll certainly have no trouble finding people complaining about **Next.js**, it still managed to top the positivity rankings for meta-frameworks, followed by **Remix** and **Astro**. + + #other_tools + + - key: sections.other_tools.description + t: | + React is known for focusing on UI rendering while being fairly agnostic about the other parts of your app, and that's reflected in the vibrant ecosystem that has emerged to fill these gaps! + + # usage + + - key: sections.usage.description + t: | + No matter what version you use, application pattern you adopt, or industry sector you belong to, there's no wrong way to use React! + + - key: usage.js_app_patterns.takeaway + t: > + Despite the focus on static site generation, server-side rendering, and server components, it's interesting to note that the vast majority of React users still work on Single Page Applications. + + - key: usage.react_version.takeaway + t: > + Note that the survey was conducted **before** the announcement or release of React 19. + + # resources + + - key: sections.resources.description + t: | + One of the big reason for React's continued dominance is the sheer amount of documentation, blog posts, videos, and other resources it has accumulated over the years. Here's just a small sample! + + - key: resources.learning_methods.takeaway + t: | + The React team has done a great job with the new React docs site, so it shouldn't be surprised that it has become the number one way people learn about the framework. + + - key: resources.blogs_news_magazines.takeaway + t: | + While this list is populated by many usual suspects, it's worth celebrating the presence of React-specific media such as **This Week in React** or **React Status**. + + - key: resources.sites_courses.takeaway + t: | + While **Stack Overflow** has gone through its own share of AI-related trouble recently, it still tops the rankings for now. + + - key: resources.podcasts.takeaway + t: | + **Syntax** continues to assert its dominance over the dev podcast landscape. Also interesting to note the lack of any active React-specific podcast in the top 10. + + - key: resources.video_creators.takeaway + t: | + While **Theo** and **Web Dev Simplified** both featured React content, it's interesting to note that despite not typically covering React, **The Primeagen** still comes in at #3. + + - key: resources.people.takeaway + t: | + When it comes to being an influential figure in the React community, it's no surprise that **Dan Abramov** tops the rankings – Although **Kent C. Dodds** and **Theo** both seem to be challenging for the crown. + + #awards + - key: sections.awards.description + t: | + This year's awards were dominated by one very specific project… how quickly will you guess what it is? + + ########################################################################### + # 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 + + ########################################################################### + # 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.react2023.josh_comeau + t: | + + What a year! + + With the introduction of React Server Components, I’d say this has been the biggest year for React since 2018, when React Hooks were first introduced. + + In the 5 years since 2018, Hooks have reached overwhelming adoption. A whopping 99.5% of survey respondents have adopted `useState`, and less than 2% are unhappy about it. Class components still exist, but they’ve been relegated to legacy codebases and the occasional error boundary component. + + I wonder, though… Will we all be using Server Components 5 years after their release, in 2028? I’m not so sure. The Server Components paradigm requires deep integration with the bundler and router. It’s not something that most developers can start incrementally adopting in their current React codebase. + + React developers like to keep up-to-date; 71% of survey respondents said they were using React 18, the newest version available when this data was collected. At the same time, the most widely-used React environment is still Create React App, despite being officially deprecated and not having a release since April 2022. We’ll happily update React when a new version comes out, but we’re not about to switch to a different environment; 37% of survey respondents have never even used SSR (Server Side Rendering), even though it’s been an option for over a decade now! + + If I had to guess, I’d say that in 2028, there will be two Reacts in wide circulation with roughly equivalent usage. The “full-stack” version, with Server Components and Server Actions, and the client-only Single Page App version. + + We live in interesting times! I’m excited to see how React and its ecosystem evolves over the coming years. ❤️ + + - key: conclusion.react2023.josh_comeau.bio + t: Software engineer and educator. Creator of [The Joy of React](https://www.joyofreact.com/) + + ########################################################################### + # Picks + ########################################################################### + + - key: picks.my_pick + t: "My 2023 Pick: " + - key: picks.intro + t: We asked members of the React community to share their “pick of the year” + + # https://zustand-demo.pmnd.rs + - key: picks.jack_herrington.name + t: Zustand + - key: picks.jack_herrington.bio + t: Principal Engineer and YouTuber + - key: picks.jack_herrington.description + t: | + Simple, elegant, extensible state management that "just works" (tm). Nowadays, you might not need state management, but if you do, Zustand is a great place to start. + + # https://react.dev/reference/rsc/server-components + - key: picks.alex_sidorenko.name + t: React Server Components + - key: picks.alex_sidorenko.bio + t: Making short videos about Next.js on Twitter + - key: picks.alex_sidorenko.description + t: | + Eleven years ago, React reimagined web development by challenging established practices. Now, React is doing this again with RSC. + + P.S. Shout out to the Next.js team for pushing this new vision forward. + + # https://youtube.com/watch?v=zqhE-CepH2g + - key: picks.sam_selikoff.name + t: | + "Mind the Gap" – Ryan Florence's talk at Big Sky Dev Con 2024 + - key: picks.sam_selikoff.bio + t: Videos for frontend developers on Build UI and YouTube, co-host of the Frontend First podcast + - key: picks.sam_selikoff.description + t: | + Ryan masterfully shows how React's new "use server" and "use client" directives let us build rich features on both sides of the network, using the same unified paradigm. A must-watch for any React developer. + + # https://www.remotion.dev/ + - key: picks.sebastien_lorber.name + t: Remotion + - key: picks.sebastien_lorber.bio + t: Creator of [This Week in React](https://thisweekinreact.com/) + - key: picks.sebastien_lorber.description + t: | + The idea of creating programmatic videos in React continues to fascinate me. Remotion is a rather discreet project, which continues to grow slowly but steadily, successfully adopted by DevRels, educators, indie makers and larger companies (notably GitHub's Unwrapped video campaign). + + # https://buildui.com/posts/instant-search-params-with-react-server-components + - key: picks.aurora_scharff.name + t: Instant Search Params with React Server Components + - key: picks.aurora_scharff.bio + t: Web developer and consultant at Inmeta + - key: picks.aurora_scharff.description + t: | + This blog post goes through a problem you would must likely encounter when building a proper app with the Next.js App Router: handling search params. It’s surprisingly hard to make interactions behave “perfectly”, and the post end with the solution: useOptimistic. It also teaches you about transitions with lots of sandbox demos. + + # https://mui.com/blog/introducing-pigment-css/ + - key: picks.josh_comeau.name + t: Pigment CSS + - key: picks.josh_comeau.bio + t: Software engineer and educator. Creator of [The Joy of React](https://www.joyofreact.com/) + - key: picks.josh_comeau.description + t: | + The Material UI team is building a next-gen CSS-in-JS library that pulls the styled API into the React Server Components era. There’s no shortage of CSS-in-JS tools out there, but this one checks all of the boxes for me. + + # https://www.propelauth.com/post/nextjs-challenges + - key: picks.carl_vitullo.name + t: It’s not just you, Next.js is getting harder to use + - key: picks.carl_vitullo.bio + t: Solopreneur currently hosting [This Month in React](https://podcasts.apple.com/us/podcast/this-month-in-react/id1661733526), and community lead at [Reactiflux](https://www.reactiflux.com/) + - key: picks.carl_vitullo.description + t: | + This was a great blog post! I think it captures the current zeitgeist in React, clearly articulates a frustration that's been simmering in the ecosystem through 2024. + + # https://sonner.emilkowal.ski + - key: picks.miguel_angel_duran.name + t: Sonner + - key: picks.miguel_angel_duran.bio + t: Twitch Coding Streamer & Content Creator + - key: picks.miguel_angel_duran.description + t: | + Sonner is the best toast component for React. Beautiful by default, highly configurable, and with a simple API to use in any project. Wonderful work by Emil. + + # https://docs.expo.dev/router/introduction/ + - key: picks.lydia_hallie.name + t: Expo Router + - key: picks.lydia_hallie.bio + t: Independent software engineer and technical content creator + - key: picks.lydia_hallie.description + t: | + Expo Router earns my pick for its incredible potential in both the web and native space. It's the first framework to leverage React's full power to operate across all platforms, making React a true platform-agnostic renderer. Its file-based architecture makes it simpler for web developers to adapt to native platforms, speeding up development, and reducing the time to ship across all devices. + + # + # - key: picks.xxx.name + # t: + # - key: picks.xxx.bio + # t: + # - key: picks.xxx.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.tokyodev.description + t: Find your dream developer job in Japan today. + - key: sponsors.renderatl.description + t: The tech conference focused on Front-End Engineering. + + ########################################################################### + # FAQ/About + ########################################################################### + + - key: about.content + t: | + The 2023 State of React survey ran from October 27 to November 15 2023, and collected 13,003 responses. The results were published on July 20, 2024. 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 React 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 React 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 React 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/85). + + 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 partner [Frontend Masters](https://frontendmasters.com/). + + - **Direct Funding**: this year, [Google](https://www.google.com/) funded my work on the surveys. + + 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). + + **Note: This is *not* an official React survey, and the survey team is not affiliated with Meta, Vercel, or the React team.** + + ### Special Thanks + + Special thanks for their ongoing support to Paul McMahon, Marc Grabanski, and Justin Samuels. diff --git a/surveys.yml b/surveys.yml index 3ce5c84eabb..f8b74974431 100644 --- a/surveys.yml +++ b/surveys.yml @@ -402,6 +402,16 @@ translations: Let's find out together with the first ever State of React survey! + # JS 2023 + + - key: general.js2023.survey_intro_not_used + t: | + Between Astro, Vite, and Remix, 2022 kicked off a wave of JavaScript change that kept on growing in 2023 with Bun, Svelte 5, Tauri, and many others. + + But the –relatively speaking– old guard hasn't been standing still either, with Next.js and React leading the way with innovations such as Server Components and Server Actions. + + So after yet another busy year, it's now time to take stock, and see where things stand in the JavaScript ecosystem. + ########################################################################### # Survey-Specific FAQs ########################################################################### @@ -585,3 +595,59 @@ translations: t: When will the results be released? - key: faq.results_released_react2023.description t: The survey will run from October 27 to November 15, and the survey results will be released shortly after that. + + # JS 2023 + + - key: general.js2023.survey_intro + t: > + JavaScript started its life as a browser language, and then went to on conquer the server with Node.js. + + + And it 2023, it seems like the ecosystem as a whole might finally be ready to try and bridge that gap. Between features like React Server Components, frameworks like Solid and Qwik, or meta-frameworks like Next.js and Sveltekit, providing a better way of serving code and data to clients has become JavaScript's next big goal. + + + Or should we say TypeScript? At this point it's become hard to disentangle the two, so let's not even try. + + + Instead, take the survey and help us figure out what's new, what's old, and what async/awaits us in the years to come! + + - key: faq.data_used_js2023 + t: How will this data be used? + - key: faq.data_used_js2023.description + t: > + All data collected will be released openly for anybody to consult. Developers or companies may use it to prioritize focus areas and inform their roadmaps. + + - key: faq.survey_goals_js2023 + t: What are the survey's goals? + - key: faq.survey_goals_js2023.description + t: > + The survey's goals are to measure awareness and popularity of JavaScript features and libraries in order to anticipate future trends. + + - key: faq.who_should_take_survey_js2023 + t: Who should take this survey? + - key: faq.who_should_take_survey_js2023.description + t: > + This is an open survey for anybody who uses JavaScript (or TypeScript), whether regularly or occasionally, as part of their job, as a student, or just for fun! + + - key: faq.how_long_will_survey_take_js2023 + t: How long will answering the survey take? + - key: faq.how_long_will_survey_take_js2023.description + t: > + Depending on how many questions you answer (all questions are optional), + filling out the survey should take around 15-20 minutes. + + - key: faq.learn_more_js2023 + t: Where can I learn more? + - key: faq.learn_more_js2023.description + t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-state-of-js-2023-survey-is-now-open-2hah). + + - key: faq.survey_design_js2023 + t: How was this survey designed? + - key: faq.survey_design_js2023.description + t: > + The survey was designed with input from the community through an [open feedback thread](https://github.com/Devographics/surveys/issues/224). + + - key: faq.results_released_js2023 + t: When will the results be released? + - key: faq.results_released_js2023.description + t: The survey will run from November 22 to December 12, and the survey results will be released shortly after that.