2.7 — Ecossistema e Mercado de Trabalho

Uma análise honesta de quando escolher cada framework.

Objetivos da Aula

• Comparar ecossistemas de bibliotecas
• Analisar mercado de trabalho
• Entender quando escolher Svelte vs React

Tamanho dos Ecossistemas

Mas Quantidade ≠ Qualidade

O ecossistema Svelte é menor, porém:

• Mais curado — menos bibliotecas abandonadas
• Svelte geralmente não precisa de muitas bibliotecas
• Bibliotecas JS vanilla funcionam facilmente

Bibliotecas Essenciais: Equivalências

UI Components

Forms

Estado

Tabelas

Animação

Ícones

O Que Svelte Tem Nativamente

<!-- Coisas que React precisa de biblioteca, Svelte tem built-in -->

<!-- Transições e Animações -->
{#if visible}
  <div transition:fade>Aparece suavemente</div>
{/if}

<!-- Motion (spring/tweened) -->
<script>
  import { spring } from 'svelte/motion'
  const coords = spring({ x: 0, y: 0 })
</script>

<!-- Stores (estado global) -->
<script>
  import { writable, derived } from 'svelte/store'
</script>

<!-- CSS com escopo -->
<style>
  /* Escopo automático */
</style>

<!-- Two-way binding -->
<input bind:value={name} />

<!-- Tratamento de promessas -->
{#await fetchData()}
  <Spinner />
{:then data}
  <Data {data} />
{:catch error}
  <Error {error} />
{/await}

Mercado de Trabalho

Vagas (dados aproximados 2024)

Realidade do Mercado Svelte

Menos vagas, mas:

• Menos concorrência por vaga
• Empresas que usam Svelte são mais modernas
• Salários competitivos (às vezes maiores)
• Projetos geralmente mais interessantes

Empresas usando Svelte:

• The New York Times
• Apple (algumas ferramentas)
• Spotify (alguns projetos)
• IKEA
• Rakuten
• Square
• IBM
• GoDaddy
• Philips Hue
• 1Password

Satisfação dos Desenvolvedores

State of JS Survey 2023

Interesse em Aprender

Quando Escolher React

✅ Escolha React quando:

1. Ecossistema é crítico

   • Precisa de componentes muito específicos
   • Integração com ferramentas enterprise (Salesforce, etc)

2. Time grande com rotatividade

   • Mais fácil encontrar devs
   • Mais recursos de aprendizado

3. Requisitos corporativos

   • Empresa exige “frameworks estabelecidos”
   • Compliance/auditoria prefere maior adoção

4. Projeto existente em React

   • Migração raramente vale a pena

5. React Native necessário

   • Svelte Native existe mas é menos maduro

Quando Escolher Svelte

✅ Escolha Svelte quando:

1. Performance importa

   • Landing pages (conversão!)
   • E-commerce
   • Mobile web
   • Mercados emergentes (conexões lentas)

2. Bundle size importa

   • Widgets embeddable
   • Micro-frontends
   • Progressive Web Apps

3. DX é prioridade

   • Projeto greenfield
   • Time pequeno/médio
   • Prototipação rápida

4. Menos boilerplate desejado

   • Startups movendo rápido
   • MVPs
   • Projetos pessoais

5. Projeto fullstack

   • SvelteKit é excelente para SSR
   • Mais simples que Next.js

Migração: É Possível?

React → Svelte

Curva de Aprendizado

Investimento de Carreira

Se você só conhece React:

Aprender Svelte vai:

• ✅ Expandir sua visão de frameworks
• ✅ Tornar você melhor dev React (entende alternativas)
• ✅ Abrir portas para projetos interessantes
• ✅ Ser relativamente rápido (~2 semanas)

Se você está começando:

Recomendação:

1. Aprenda Svelte primeiro — conceitos mais fáceis
2. Depois aprenda React — mais vagas, mais recursos
3. Resultado — você entende ambas abordagens

✅ Desafio da Aula

Reflexão

Responda mentalmente (ou escreva):

1. Seu contexto atual:

   • Trabalha com qual framework?
   • Está buscando emprego ou mantendo projeto?
   • Time pequeno ou grande?

2. Seu próximo projeto:

   • Requisitos de performance?
   • Precisa de biblioteca específica?
   • Prazo apertado?

3. Sua decisão:

   • Svelte, React, ou ambos fazem sentido?
   • O que você precisa aprender?

Para Pesquisar

• Verifique vagas de Svelte na sua região
• Veja se as bibliotecas que você usa têm versão Svelte
• Experimente converter um componente React pequeno para Svelte

📚 Recursos

• State of JS Survey
• Svelte Society
• Made with Svelte
• Svelte Jobs

Próxima aula: 2.8 — SvelteKit vs Next.js