fatigue.dot

digraph {
  unhappy[
    shape="box",
    style=rounded,
    label="React te deixa triste."
  ]
  unhappy -> are_you_using_react_boilerplates;

  # Boilerplate Fatigue

  are_you_using_react_boilerplates[
    shape="diamond",
    label="Você está aprendendo
    React copiando de projetos
    boilerplate?"
  ]
  are_you_using_react_boilerplates -> boilerplates_dont_teach[label="sim"]
  are_you_using_react_boilerplates -> steal_from_boilerplates[label="não"]

  boilerplates_dont_teach[
    shape="box",
    label="Aprender React copiando boilerplates
    é como aprender cozinhar comendo em restaurante
    chique. Não funciona. Você precisa começar com
    o básica e ignorar o medo de não entender algo.
    É sem fundamento. Pessoas criam
    boilerplates para mostrar o que eles desenvolveram
    ou aprenderam, não para te ajudar a aprender. Eles são
    criados por e para usuários ativos e normalmente estão
    muito mais para um experimento do que eles admitem.
    Boilerplates competem por atenção o que leva à
    excesso de informação. Se você está nessa pelo React, aprenda
    na ordem em que o Pete Hunt descreve neste guia:
    https://github.com/petehunt/react-howto.
    Olhe para boilerplates apenas quando você tem capacidadade
    para entender e criar o seu próprio."
  ]
  boilerplates_dont_teach -> are_you_using_flux

  steal_from_boilerplates[
    shape="box",
    label="Enquanto boilerplates não são uma boa maneira
    de se aprender tecnologias combinadas,
    eles são úteis para ver como essas tecnologias
    podem trabalhar juntas após você estar confortável
    com cada uma delas independentemente. É uma ótima maneira
    de descobrir novas tecnologias mas você não deveria
    se sentir obrigado a usar todas elas.
    Não desista completamente dos boilerplates.
    Apenas tenha em mente que um boilerplate é um
    combinado de truques e não uma base sólida para seu app."
  ]
  steal_from_boilerplates -> are_you_using_flux

  # Flux Fatigue

  are_you_using_flux[
    shape="diamond",
    label="Você está usando
    uma biblioteca Flux
    (ou Redux)?"
  ]
  are_you_using_flux -> is_too_much_flux[label="sim"]
  are_you_using_flux -> is_not_enough_flux[label="não"]

  is_too_much_flux[
    shape="diamond",
    label="Isso poderia adicionar muitos
    boilerplates sem um
    resultado significativo?"
  ]
  is_too_much_flux -> remove_flux[label="sim"]
  is_too_much_flux -> are_you_using_bundler[label="não"]

  is_not_enough_flux[
    shape="diamond",
    label="Você tem alguns estados grandes
    em cima da sua hierarquia de componente que
    geralmente são a origem dos problemas?"
  ]
  is_not_enough_flux -> add_flux[label="sim"]
  is_not_enough_flux -> are_you_using_bundler[label="não"]

  add_flux[
    shape="box",
    label="Considere adicionar a biblioteca Flux.
    Ela pode te ajudar a exteriorizar o estado
    compartilhado entre muitos componentes
    e atualizá-los consistentemente."
  ]
  add_flux -> are_you_using_bundler

  remove_flux[
    shape="box",
    label="Remova a biblioteca Flux.
    Se sinta confortável em estruturar
    apps em React puro lendo o
    “Thinking in React” na documentação oficial."
  ]
  remove_flux -> are_you_using_bundler

  # Bundler Fatigue

  are_you_using_bundler[
    shape="diamond",
    label="Você está usando um
    empacotador JavaScript
    (ex: Webpack, Browserify)?"
  ]
  are_you_using_bundler -> are_you_working_on_production_app_with_bundler[label="sim"]
  are_you_using_bundler -> are_you_working_on_production_app_without_bundler[label="não"]

  are_you_working_on_production_app_with_bundler[
    shape="diamond",
    label="Você está trabalhando
    em um app para produção?"
  ]
  are_you_working_on_production_app_with_bundler -> do_you_know_es2015[label="sim"]
  are_you_working_on_production_app_with_bundler -> remove_bundler[label="não"]

  are_you_working_on_production_app_without_bundler[
    shape="diamond",
    label="Você está trabalhando
    em um app para produção?"
  ]
  are_you_working_on_production_app_without_bundler -> add_bundler[label="sim"]
  are_you_working_on_production_app_without_bundler -> do_you_know_es2015[label="não"]

  add_bundler[
    shape="box",
    label="Adicione um empacotador como parte do seu
    processo para manter as dependências manuseáveis
    e servir o código JavaScript eficientemente.
    Use a ferramenta Google Page Speed Insights
    para medir o quão bem você está indo.
    Lembre-se de minificar e envify
    seu código."
  ]
  add_bundler -> do_you_know_es2015

  remove_bundler[
    shape="box",
    label="Não se tem necessidade de um empacotador
    se você está apenas aprendendo React.
    Copie https://github.com/jarsbe/react-simple
    e começa a escrever seu código sem executar tarefas automatizadas.
    Use <script> tags até você estar confortável
    com React e quiser apender mais sobre sistemas
    de módulos e diferentes empacotadores."
  ]
  remove_bundler -> do_you_know_es2015

  # ES2015 Fatigue

  do_you_know_es2015[
    shape="diamond",
    label="Você se sente
    confortável usando funcionalidades do ES2015
    (ex: classes e fat arrows)?"
  ]
  do_you_know_es2015 -> use_es5[label="não"]
  do_you_know_es2015 -> are_you_using_dangerous_features[label="sim"]

  use_es5[
    shape="box",
    label="Não use ES2015 ainda.
    Você não precisa dele para aprender React.
    Bibliotecas de terceiros geralmente vão usar
    a sintáxe do ES2015 nas documentações mas
    você não precisa dessas bibliotecas quando
    você está apenas aprendendo React.
    Quando você sentir que precisa atualizar seu conhecimento
    em JavaScript, https://leanpub.com/understandinges6/read
    é um excelente guia. Use http://babeljs.io/repl
    para verificar suas suposições."
  ]
  use_es5 -> do_you_update_packages_asap

  # ESnext Fatigue

  are_you_using_dangerous_features[
    shape="diamond",
    label="Você está usando
    experimentalmente funcionalidades
    que não estão disponíveis no ES2015
    (ex: decorators)?"
  ]
  are_you_using_dangerous_features -> can_you_spend_days_on_your_tooling[label="sim"]
  are_you_using_dangerous_features -> do_you_update_packages_asap[label="não"]

  can_you_spend_days_on_your_tooling[
    shape="diamond",
    label="Você pode gastar dias arrumando
    suas ferramentas por causa
    de erros, incompatibilidades ou
    mudanças padrões?"
  ]
  can_you_spend_days_on_your_tooling -> do_you_update_packages_asap[label="sim"]
  can_you_spend_days_on_your_tooling -> stick_to_es2015[label="não"]

  stick_to_es2015[
    shape="box",
    label="Continue usando no máximo ES2015,
    JSX, e operador spread do objeto."
  ]
  stick_to_es2015 -> do_you_update_packages_asap

  # Semver Fatigue

  do_you_update_packages_asap[
    shape="diamond",
    label="Você atualiza para as principais novas versões
    de suas dependências assim que elas
    são lançadas?"
  ]
  do_you_update_packages_asap -> give_it_two_months[label="sim"]
  do_you_update_packages_asap -> consider_updating_react[label="não"]

  give_it_two_months[
    shape="box",
    label="A não ser que estejamos falando de React
    que é muito bem testado antes de cada lançamento,
    considere ir devagar em atualizações de pacotes.
    Você pode tentar novas versões de dependências mas
    é melhor mantê-los em uma branch por alguns meses
    até que a comunidade encontre e arrume os
    erros mais comuns. Não faça decisões baseadas em
    medo de perder algo! Quando olhar documentações antigas,
    não se esqueça de checar lançamentos tagged no GitHub, ex:
    https://github.com/reactjs/react-router/tree/0.13.x/doc"
  ]
  give_it_two_months -> are_you_still_sad

  consider_updating_react[
    shape="box",
    label="É uma boa opção.
    Contudo, nós encorajamos você a
    tentar (em uma branch!) novas versões do
    React assim que elas são lançadas,
    ao contrário de muitas comunidades de pacotes,
    que são testadas intensivamente pelo Facebook.
    Fique de olho na descrição do lançamento que conectam
    com os codemods que são partes automatizadas
    do processo de migração para você."
  ]
  consider_updating_react -> are_you_still_sad

  # End

  are_you_still_sad[
    shape="diamond",
    label="Você ainda está triste?"
  ]
  are_you_still_sad -> rant[label="sim"];
  are_you_still_sad -> happy[label="não"];

  rant[
    shape="box",
    label="Escreva em um blog uma postagem construtiva
    sobre os problemas que você encontrar.
    Não ligue para críticas pessoais.
    Seja educado. Ajuda a comunidade
    a encontrar soluções. Considere
    outras linguagens, frameworks e bibliotecas
    que se adapte às suas necessidades (ex: Ember)."
  ]
  rant -> happy

  happy[
    shape="box",
    label="React te faz feliz!
    Ou, pelo menos, não te deixa mais triste."
  ]
  happy -> share

  share [
    shape="box",
    style=rounded,
    label="Compartilhe esse fluxograma: https://github.com/brunogenaro/react-makes-you-sad.
    Tradução do https://github.com/gaearon/react-makes-you-sad."
  ]
}