-
Notifications
You must be signed in to change notification settings - Fork 11
/
js2021.yml
429 lines (314 loc) · 22.4 KB
/
js2021.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
locale: pt-BR
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: A edição de 2021 da pesquisa anual sobre as últimas tendências do ecossistema do JavaScript.
###########################################################################
# Introduction
###########################################################################
- key: introduction.js2021
t: |
<span class="first-letter">M</span> uito aconteceu em 2021. Tantos acontecimentos levaram ao adiamento da pesquisa para 2022!
Entre uma série de ferramentas de construção mais rápidas e uma nova safra de estruturas de back-end, o mundo do JavaScript continuou evoluindo. E fizemos o nosso melhor para acompanhar, dando a esta pesquisa alguns novos power-ups ([leia mais sobre o que há de novo](https://dev.to/sachagreif/whats-new-in-the-2021-state-of-javascript-survey-4eej)), como por exemplo, novos tipos de perguntas, a capacidade de fazer referência cruzada de dois pontos de dados (como salários anuais por nível de experiência) e até mesmo uma maneira de personalizar os gráficos para exibir seus próprios insights! Leia mais sobre [o que há de novo este ano](https://dev.to/sachagreif/whats-new-in-the-2021-state-of-javascript-survey-4eej) (em Inglês).
Mas nem tudo foi tranquilo. Tivemos que lidar com um [vazamento de dados](https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1) que felizmente não teve nenhuma consequência ruim. E estamos constantemente nos esforçando para tornar a pesquisa mais inclusiva, mais acessíva e mais justa.
Ainda assim, mesmo que a pesquisa possa representar apenas uma pequena parte do ecossistema JavaScript, esperamos que você ache os resultados interessantes!
<span class="conclusion__byline">– Sacha Greif</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Camiseta
- key: sections.tshirt.description
t: |
## Apoie essa pesquisa com uma camiseta do Estado do Javascript
Entre a má qualidade do vídeo, os cassetes volumosos e a necessidade de rebobinar, não há muito para se ter saudades da era do VHS. Mas uma coisa que nós *sentimos* falta são os incríveis visuais dos anos 90 que costumavam adornar fitas VHS em branco.
Mas agora, graças ao talentoso Christopher Kirk-Nielsen, você pode aproveitar toda essa modernidade retrô enquanto celebra seu amor pelo JavaScript ao mesmo tempo!
- key: tshirt.about
t: Sobre a camiseta
- key: tshirt.description
t: |
Usamos uma camisa tri-blend super macia e de alta qualidade com um ajuste fino impresso por nossos parceiros do Cotton Bureau.
- key: tshirt.getit
t: Compre agora!
- key: tshirt.price
t: USD $29 + frete
- key: tshirt.designer.heading
t: Sobre o designer
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
Originalmente da França, mas agora morando nos Estados Unidos, Chris não é apenas um incrível desenvolvedor front-end, mas também um talentoso ilustrador especializado em visuais retrô. Na verdade, recomendamos que você também confira os seus [outros designs de camisetas](https://chriskirknielsen.com/designs)!
###########################################################################
# Sections
###########################################################################
- key: sections.user_info.description
t: |
Este ano, **16.085** entrevistados participaram da pesquisa. E para ajudar a destacar vozes diferentes e trazer insights mais profundos, fizemos um esforço especial para fornecer novas maneiras de detalhar nossos dados.
- key: sections.features.description
t: |
O JavaScript pode se mover rapidamente, mas parece que os desenvolvedores de JavaScript se movem ainda mais rápido, já que muitos recursos relativamente novos já mostram altos níveis de adoção.
- key: sections.technologies.description
t: |
Os resultados deste ano apontam para um alto grau de fragmentação no mundo do JavaScript. Embora isso às vezes possa causar dores de cabeça, toda essa competição contribui para um ecossistema muito dinâmico.
- key: sections.tools_others.description
t: |
A escolha de uma tecnologia muitas vezes pode se resumir a uma série de escolhas difíceis entre prioridades concorrentes,
e este ano tentamos capturar esse processo usando um novo formato de perguntas no estilo de colchetes.
- key: sections.environments.description
t: |
A acessibilidade tem sido uma reflexão tardia quando se trata de desenvolvimento web, mas muitos desenvolvedores
agora estão percebendo que ela deveria, de fato, ser a base sobre a qual tudo mais repousa.
- key: sections.resources.description
t: |
Destacar blogs, podcasts e sites foi um bom começo, mas este ano decidimos dar um passo adiante
e realmente apresentar as pessoas que compõem a comunidade JavaScript!
- key: sections.opinions.description
t: |
Sejam pontos problemáticos que o impedem hoje ou recursos ausentes que você espera usar
amanhã, esta foi sua chance de desabafar e compartilhar suas queixas com JavaScript!
###########################################################################
# Charts
###########################################################################
- key: options.features_categories.language
aliasFor: sections.language.title
- key: options.features_categories.browser_apis
aliasFor: sections.browser_apis.title
- key: options.features_categories.other_features
aliasFor: sections.other_features.title
- key: blocks.tools_quadrant.description
t: |
Este gráfico mostra a **taxa de satisfação** (ou **taxa de interesse**) de cada tecnologia em relação à sua **contagem total de usuários**.
Pode ser dividido em quatro quadrantes:
- **1**: Baixo uso, alta satisfação. Tecnologias que valem a pena ficar de olho.
- **2**: Alto uso, alta satisfação. Tecnologias seguras para adotar.
- **3**: Baixo uso, baixa satisfação. Tecnologias que são mais difíceis de se recomendar atualmente.
- **4**: Alto uso, baixa satisfação. Reavalie essas tecnologias se você as estiver usando no momento.
###########################################################################
# Notes
###########################################################################
- key: blocks.gender.note
t: |
Se você estiver interessado em saber mais, [escrevemos uma postagem no blog](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) que aborda a dinâmica de gênero da pesquisa.
- key: blocks.css_missing_features.note
t: |
Você pode explorar todos os dados das respostas a esta pergunta [neste projeto paralelo](https://whatsmissingfromcss.com/).
- key: blocks.source.note
t: >
Este gráfico agrega uma combinação de referenciadores, parâmetros de URL e respostas de forma livre.
- State of JS: a lista de emails do [State of JS](https://stateofjs.com).
- State of CSS: a lista de email do State of CSS; também corresponde a `email`, `por email`, etc.
- Work: corresponde a `trabalho`, `colegas`, `colaboradores`, etc.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: Com uma progressão de **{value}** em 2021, o operador de coalescência nulo (??) tornou-se rapidamente parte integrante do JavaScript.
- key: award.tool_usage_delta_award.comment
t: esbuild tem apenas dois anos, mas com uma progressão de **{value}** ao longo do último ano já está ganhando terreno.
- key: award.tool_satisfaction_award.comment
t: Vite ocupa o primeiro lugar com um índice de satisfação altíssimo! De **{value}**.
- key: award.tool_interest_award.comment
t: Com uma taxa de interesse de **{value}**, Vite mais uma vez ganha o ouro!
- key: award.most_write_ins_award.comment
t: Muitas perguntas também aceitaram respostas por escrito, e com **{value}** menções, Elm foi o item mais popular em geral.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.js2021
t: |
<span class="first-line">O JavaScript está em um estado tremendamente melhor hoje em comparação com 2016.</span>
Quando a primeira pesquisa do State of JS ocorreu, apenas 21% de vocês usavam TypeScript em comparação com 69% hoje. Enquanto costumávamos brincar sobre uma nova estrutura de front-end sendo lançada todos os dias, **React** e **Vue** agora são dominantes há 6 anos consecutivos. E a porcentagem de pessoas relatando que "JS está se movendo muito rápido" caiu de 59% para 38%.
Isso não quer dizer que a linguagem tenha parado. As APIs **Encadeamento opcional** e **Operador de coalescência nula** dispararam para serem as novas APIs mais usadas em nossa pesquisa, apesar de terem apenas 2 anos de idade. E mais coisas boas estão a caminho do TC39: você relatou que o gerenciamento de datas é um dos principais recursos ausentes e a API Temporal atingiu recentemente o [Estágio 3](https://github.com/tc39/proposal-temporal).
O ecossistema de ferramentas também está vendo sua própria evolução rápida, e é justo dizer que 2021 foi o ano do **Vite**. O Vite não apenas estreou com 98% de satisfação, mas o uso já está em 30% em seu primeiro ano em nossa pesquisa, superando até mesmo o esbuild. O Vite não está sozinho na tentativa de melhorar o estado das ferramentas de construção JavaScript - 8 das 12 ferramentas que acompanhamos hoje têm menos de dois anos! E enquanto **pnpm**, **Turborepo** e **Nx** ocuparam os primeiros lugares em nosso primeiro ano de rastreamento de ferramentas de monorepo, apenas 25% relatam estar satisfeitos com o estado dessa categoria, mostrando que muito trabalho ainda precisa ser feito.
Também notável: muitos novos participantes como **Deno**, **Rome**, **Astro**, **Remix** e outros agora são apoiados por empresas de capital de risco, talvez traçando uma alternativa viável para o frágil ambiente de financiamento de código aberto.
À medida que a [Terceira Era do JavaScript](https://www.swyx.io/js-third-age/) entra em seu terceiro ano, as oportunidades para aspirantes a desenvolvedores de código aberto e empreendedores continuam a se desdobrar, e estou animado para ver o que os próximos anos trazem!
- key: conclusion.js2021.bio
t: Head de DX na Temporal
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: "Minha escolha de 2021: "
- key: picks.intro
t: Pedimos aos membros da comunidade JavaScript para que compartilhassem sua “escolha do ano”
- key: picks.lee_robinson.name
t: SvelteKit
- key: picks.lee_robinson.bio
t: Diretor de Relações com Desenvolvedores na Vercel
- key: picks.lee_robinson.description
t: |
O SvelteKit é uma nova visão da construção para a web e tem uma
incrivelmente apaixonada e crescente comunidade de apoiadores.
- key: picks.vadim_makeev.name
t: Server-Side Rendering
- key: picks.vadim_makeev.bio
t: DevRel, Podcaster e Defensor de padrões da Web
- key: picks.vadim_makeev.description
t: |
Chegou a hora de acertar nossas prioridades.
UX > DX, e sempre foi assim. Desempenho FTW (For The Win - Para a Vitória)!
- key: picks.ben_ilegbodu.name
t: Lee Robinson
- key: picks.ben_ilegbodu.bio
t: Ben Ilegbodu, Engenheiro Frontend Principal @ Stitch Fix
- key: picks.ben_ilegbodu.description
t: |
Lee tem sido ótimo em pastorear e defender o Next.js.
Ele me ajudou muito com o Next e continua a criar entusiasmo
para onde está indo.
- key: picks.shawn_wang.name
t: Supabase
- key: picks.shawn_wang.bio
t: Head de DX na Temporal
- key: picks.shawn_wang.description
t: |
Supabase está tornando o Postgres acessível a mais desenvolvedores e mostrando
a todos como uma pequena equipe focada pode superar concorrentes com 10x seu tamanho.
- key: picks.sarah_drasner.name
t: Pawel Kozlowski
- key: picks.sarah_drasner.bio
t: Diretor de Engenharia, Core Developer Web no Google
- key: picks.sarah_drasner.description
t: |
Pawel Kozlowski é o tipo de desenvolvedor que pode ter a mente aberta para diferentes
abordagens com humildade e curiosidade, com o interesse de melhorar as coisas.
- key: picks.sara_vieira.name
t: Paul Henschel
- key: picks.sara_vieira.bio
t: Agente Internacional da JS Bullshit
- key: picks.sara_vieira.description
t: |
O trabalho de Paul em animações e ReactThreeFiber
tornaram o trabalho com 3D na web muito mais fácil.
- key: picks.mark_erikson.name
t: Ryan Carniato
- key: picks.mark_erikson.bio
t: Mantenedor do Redux
- key: picks.mark_erikson.description
t: |
O framework JS reativo SolidJS do Ryan atingiu a versão 1.0,
e ele escreveu vários artigos analisando
conceitos avançados de implementação do framework JS.
- key: picks.miguel_angel_duran.name
t: Vite
- key: picks.miguel_angel_duran.bio
t: Dev Frontend e Streamer de codificação na Twitch
- key: picks.miguel_angel_duran.description
t: |
Além de esbuild e swc, ferramentas fantásticas que impulsionam o ecossistema,
estou gostando do Vite. Tem um DX encantador e é rico em recursos.
- key: picks.alyssa_nicoll.name
t: BroccoDev's Twitch Stream
- key: picks.alyssa_nicoll.bio
t: Evangelista Desenvolvedor Sênior na Progress.
- key: picks.alyssa_nicoll.description
t: |
Mike Brocchi recentemente começou a transmitir para a Twitch. Ele é um programador brilhante,
desenvolvedor e, mais importante, professor.
Eu sempre me divirto assistindo suas transmissões e aprendendo com ele.
- key: picks.michael_jackson.name
t: esbuild
- key: picks.michael_jackson.bio
t: Cofundador da Remix
- key: picks.michael_jackson.description
t: |
Estamos construindo o compilador Remix em cima do esbuild e ele
definitivamente elevou a fasquia no que diz respeito aos bundlers de JS.
É incrivelmente rápido e a API do plugin nos permite fazer praticamente tudo o que queremos.
- key: picks.david_khourshid.name
t: Remix
- key: picks.david_khourshid.bio
t: Pianista e fundador do Stately
- key: picks.david_khourshid.description
t: |
O Remix é um framework web full-stack que parece antiquado, mas de um jeito bom,
colocando você no caminho para criar aplicativos Web modernos, rápidos, complexos e acessíveis.
- key: picks.kent_c_dodds.name
t: Fly.io
- key: picks.kent_c_dodds.bio
t: Diretor de Desenvolvimento de experiência, Remix
- key: picks.kent_c_dodds.description
t: |
Fly me habilitou (um engenheiro de front-end com desinteresse por DevOps)
para implantar com confiança um aplicativo no mundo real, distribuído globalmente, de
nível de produção.
- key: picks.tejas_kumar.name
t: Joe Haddad
- key: picks.tejas_kumar.bio
t: Desenvolvedor Web, Conferencista e Diretor de DevRel na Xata
- key: picks.tejas_kumar.description
t: |
Joe trabalha no Next.js na Vercel e está constantemente procurando demonstrar
orgulhosamente seu poder enquanto escuta ativamente
ao feedback da comunidade para apoiá-los melhor.
- key: picks.wes_bos.name
t: TC39 Proposals
- key: picks.wes_bos.bio
t: Professor de JavaScript e Host de Podcast
- key: picks.wes_bos.description
t: |
Um repositório Git cheio de todas as coisas que foram propostas para serem adicionadas ao JavaScript. É muito divertido ler todas as ideias que as pessoas têm para a linguagem e vê-las passar pelos estágios.
- key: picks.scott_tolinkski.name
t: SvelteKit
- key: picks.scott_tolinkski.bio
t: Criador do Level-Up Tuts, co-apresentador do Syntax
- key: picks.scott_tolinkski.description
t: |
O Svelte Kit fornece a incrível experiência de desenvolvedor do Svelte com todos os
recursos modernos esperados de uma plataforma web.
- key: picks.xxxx.name
t:
- key: picks.xxxx.bio
t:
- key: picks.xxxx.description
t: |
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: Aprimore suas habilidades com cursos avançados e modernos de engenharia de front-end.
- key: sponsors.polypane.description
t: O navegador para desenvolvedores ambiciosos. Crie sites responsivos, acessíveis e rápidos com facilidade.
- key: sponsors.google_chrome.description
t: Agradecemos à equipe do Google Chrome por apoiar nosso trabalho.
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
A pesquisa State of JS de 2021 foi realizada de 13 de janeiro a 2 de fevereiro **2022** e coletou 16.085 respostas. A pesquisa é conduzida por mim, [Sacha Greif](https://sachagreif.com/), com a ajuda de uma equipe de colaboradores e consultores de código aberto.
O logotipo e a camiseta deste ano foram desenhados por [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
### Objetivos da pesquisa
Esta pesquisa, juntamente com a pesquisa [State of CSS](https://stateofcss.com/), foi criada para identificar tendências futuras no ecossistema de desenvolvimento da Web para ajudar os desenvolvedores a fazer escolhas tecnológicas.
Como tal, essas pesquisas estão focadas em antecipar o que está por vir nos próximos anos, em vez de analisar o que é popular agora, e é por isso que os recursos ou tecnologias mais difundidos atualmente nem sempre são incluídos.
Eles também devem ser considerados um **vislumbre de um subconjunto específico de desenvolvedores** e não devem falar por todo o ecossistema.
### Projeto de Pesquisa
A pesquisa foi projetada em parte com base na pesquisa do ano passado, com um período de feedback aberto em que o esboço da pesquisa foi discutido [no GitHub](https://github.com/StateOfJS/Monorepo/issues/56).
Todas as perguntas da pesquisa eram opcionais.
### Público-alvo da pesquisa
A pesquisa foi abertamente acessível on-line e os entrevistados não foram filtrados ou selecionados de forma alguma. Os entrevistados eram principalmente uma mistura de entrevistados de pesquisas anteriores (alertados por meio de uma lista de emails dedicada) e tráfego de mídia social.
Observe que frameworks, bibliotecas, etc. eram livres para encorajar seu público a participar da pesquisa e alguns deles tiraram vantagem disso por meio de banners, tweets, etc. Um detalhamento das fontes de tráfego está incluído no gráfico "Fontes".
### Representatividade e Inclusão
Embora acreditemos que seja importante dar voz a todas as comunidades, a realidade é que uma pesquisa aberta como esta sempre terá dificuldades para representar todos adequadamente, especialmente ao operar em sistemas que já carregam seus próprios pré-conceitos inerentes.
Para contrabalançar isso, estamos implementando três estratégias distintas:
- **Extensão**: sempre tentamos alcançar diferentes organizações (como organizações focadas em BIPOC ou LGBTQ, ou plataformas de ensino online) para tentar diversificar nosso próprio público.
- **Análise de dados**: por meio de recursos como facetas e variantes, estamos sempre tentando facilitar a exibição das vozes de qualquer segmento demográfico, por menor que seja em nossos dados.
- **Redução de barreira**: tornar a pesquisa muito longa, inacessível, lenta para carregar, somente em inglês etc. pode contribuir para a imposição de uma "taxa de esforço" que corta as partes da comunidade que não podem pagar por isto. Corrigir esses problemas pode diminuir a barreira de entrada e, no processo, tornar nosso público mais diversificado.
### Financiamento do projeto
O financiamento deste projeto vem de uma variedade de fontes:
- **Venda de camisetas**.
- **Patrocínios do gráfico**: os membros da comunidade podem doar para a pesquisa em troca de terem seu nome em destaque no relatório.
- **Links patrocinados**: os links para recursos recomendados na parte inferior de cada página são fornecidos pelo nosso parceiro [Frontend Masters](https://frontendmasters.com/).
- **Outros financiamentos**: este ano, a equipe do [Google Chrome](https://www.google.com/chrome/) reservou um pequeno orçamento para ajudar a contratar um [consultor de acessibilidade](https://fossheim.io/) para trabalhar nas pesquisas de CSS e JS.
Apesar dessas fontes de financiamento, as pesquisas continuam sendo principalmente um projeto autofinanciado em geral e qualquer contribuição ou patrocínio seria muito apreciado. Gostaria especialmente de estreitar a colaboração com mais fornecedores de navegadores, por desempenharem um papel tão central no ecossistema da web.
### Visão geral técnica
Você pode encontrar uma visão geral técnica mais detalhada de como as pesquisas são executadas [aqui](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
- **Coleta de dados**: aplicativo personalizado [Vulcan.js](http://vulcanjs.org/).
- **Armazenamento/processamento de dados**: MongoDB e agregações.
- **API de dados**: API GraphQL do Node.js.
- **Site de resultados**: [Gatsby](https://www.gatsbyjs.com/) aplicativo React.
- **Visualizações de dados**: [Nivo](https://nivo.rocks/) React dataviz library.
- **Fonte**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) e [Bebas Neue](https://fonts.google.com/specimen/Bebas+ Neue).