fatigue.dot

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

  # Boilerplate Fatigue

  are_you_using_react_boilerplates[
    shape="diamond",
    label="¿Estás aprendiendo
    a usar React copiando de
    proyectos boilerplate?"
  ]
  are_you_using_react_boilerplates -> boilerplates_dont_teach[label="si"]
  are_you_using_react_boilerplates -> steal_from_boilerplates[label="no"]

  boilerplates_dont_teach[
    shape="box",
    label="Aprender React copiando de boilerplates
    es como aprender a cocinar comiendo en
    restaurantes caros. No funciona. Necesitas
    empezar por lo básico e ignorar el miedo a
    perderte cosas. Es insostenible. La gente crea
    boilerplates para mostrar lo que construyeron
    o aprendieron, no para ayudarte a aprender. Son
    creados por y para usuarios avanzados, y muy
    frecuentemente mucho más experimentales de lo que ellos
    admiten. Boilerplates compiten por popularidad lo que
    lleva a exceso de información. Si estás en esto por React,
    trata de aprenderlo en el orden que Pete Hunt describe en
    esta guía: https://github.com/petehunt/react-howto.
    No mires boilerplates antes de que puedas crear el
    tuyo propio."
  ]
  boilerplates_dont_teach -> are_you_using_flux

  steal_from_boilerplates[
    shape="box",
    label="Aunque usar boilerplates no sea un buen
    modo de aprender las tecnologías que combinan,
    son útiles para ver como esas tecnologías pueden
    ser enlazadas *después* de sentirte cómodo con
    cada una de ellas independientemente. Es una estupenda
    manera de descubrir nuevas tecnologías pero no te
    deberías sentir obligado a usarlas.
    No dejes de lado los proyectos boilerplate completamente.
    Simplemente te en cuenta que este tipo de proyectos son
    una colección de técnicas y trucos, no una base sólida
    para tu proyecto."
  ]
  steal_from_boilerplates -> are_you_using_flux

  # Flux Fatigue

  are_you_using_flux[
    shape="diamond",
    label="¿Estás usando una
    librería Flux
    (o Redux)?"
  ]
  are_you_using_flux -> is_too_much_flux[label="si"]
  are_you_using_flux -> is_not_enough_flux[label="no"]

  is_too_much_flux[
    shape="diamond",
    label="¿Añade mucho
    código boilerplate
    sin dar una ventaja obvia?"
  ]
  is_too_much_flux -> remove_flux[label="si"]
  is_too_much_flux -> are_you_using_bundler[label="no"]

  is_not_enough_flux[
    shape="diamond",
    label="¿Tienes algunos
    componentes con el estado muy cargado al
    inicio de la jerarquía de tus componentes que
    frecuentemente son fuente de bugs?"
  ]
  is_not_enough_flux -> add_flux[label="si"]
  is_not_enough_flux -> are_you_using_bundler[label="no"]

  add_flux[
    shape="box",
    label="Considera usar una librería Flux.
    Esto puede ayudarte a externalizar el estado
    compartido entre muchos componentes
    y actualizarlo de manera consistente."
  ]
  add_flux -> are_you_using_bundler

  remove_flux[
    shape="box",
    label="Elimina la librería Flux.
    Intenta entender mejor como estructurar
    aplicaciones en React puro, leyendo
    “Thinking in React” en la documentación
    oficial."
  ]
  remove_flux -> are_you_using_bundler

  # Bundler Fatigue

  are_you_using_bundler[
    shape="diamond",
    label="¿Estás usando
    algún bundler para tu JavaScript
    (por ejemplo Webpack, Browserify)?"
  ]
  are_you_using_bundler -> are_you_working_on_production_app_with_bundler[label="si"]
  are_you_using_bundler -> are_you_working_on_production_app_without_bundler[label="no"]

  are_you_working_on_production_app_with_bundler[
    shape="diamond",
    label="¿Estás trabajando
    en una aplicación que está producción?"
  ]
  are_you_working_on_production_app_with_bundler -> do_you_know_es2015[label="si"]
  are_you_working_on_production_app_with_bundler -> remove_bundler[label="no"]

  are_you_working_on_production_app_without_bundler[
    shape="diamond",
    label="¿Estás trabajando
    en una aplicación que está producción?"
  ]
  are_you_working_on_production_app_without_bundler -> add_bundler[label="si"]
  are_you_working_on_production_app_without_bundler -> do_you_know_es2015[label="no"]

  add_bundler[
    shape="box",
    label="Añade un bundler en el proceso de build
    para mantener tus dependencias manejables
    y servir tu código JavaScript eficientemente.
    Usa Google Page Speed insights tool
    para medir como lo estás haciendo.
    Recuerda usar procesos de minify y envify
    en tu código."
  ]
  add_bundler -> do_you_know_es2015

  remove_bundler[
    shape="box",
    label="No hay necesidad de usar un bundler
    si estás simplemente aprendiendo React.
    Copia https://github.com/jarsbe/react-simple
    y empieza a trastear sin usar proceso de build.
    Usa tags <script> hasta que te sientas cómodo
    con React y quieras aprender más sobre sistemas
    de módulos y diferentes bundlers."
  ]
  remove_bundler -> do_you_know_es2015

  # ES2015 Fatigue

  do_you_know_es2015[
    shape="diamond",
    label="¿Te sientes cómodo
    usando las funcionalidades de ES2015
    (por ejemplo classes y fat arrows)?"
  ]
  do_you_know_es2015 -> use_es5[label="no"]
  do_you_know_es2015 -> are_you_using_dangerous_features[label="si"]

  use_es5[
    shape="box",
    label="No uses ES2015 todavía.
    No lo necesitas para aprender React.
    Algunas librerías de terceros usan frecuentemente
    sintaxis ES2015 en su documentación pero
    no necesitas librerías de terceros cuando
    simplemente estás aprendiendo React.
    Cuando quieras actualizar tus conocimientos sobre
    JavaScript, https://leanpub.com/understandinges6/read
    es una guía excelente. Usa http://babeljs.io/repl
    para verificar tus suposiciones."
  ]
  use_es5 -> do_you_update_packages_asap

  # ESnext Fatigue

  are_you_using_dangerous_features[
    shape="diamond",
    label="¿Estás usando
    funcionalidades experimentales
    que no están disponibles en ES2015
    (por ejemplo decorators)?"
  ]
  are_you_using_dangerous_features -> can_you_spend_days_on_your_tooling[label="si"]
  are_you_using_dangerous_features -> do_you_update_packages_asap[label="no"]

  can_you_spend_days_on_your_tooling[
    shape="diamond",
    label="¿Te puedes tirar días
    arreglando tus herramientas frecuentemente
    debido a bugs, incompatibilidades,
    y cambios en el standard?"
  ]
  can_you_spend_days_on_your_tooling -> do_you_update_packages_asap[label="si"]
  can_you_spend_days_on_your_tooling -> stick_to_es2015[label="no"]

  stick_to_es2015[
    shape="box",
    label="Limítate a usar ES2015,
    JSX, y object spread operator."
  ]
  stick_to_es2015 -> do_you_update_packages_asap

  # Semver Fatigue

  do_you_update_packages_asap[
    shape="diamond",
    label="¿Actualizas tus dependencias
    a las nuevas versiones principales
    directamente cuando se publican?"
  ]
  do_you_update_packages_asap -> give_it_two_months[label="si"]
  do_you_update_packages_asap -> consider_updating_react[label="no"]

  give_it_two_months[
    shape="box",
    label="A no ser que estemos hablando de React
    que pasa unas pruebas muy estrictas en cada nueva publicación,
    considera no actualizar tus paquetes con tanta frecuencia.
    Puedes probar nuevas versiones de las dependencias
    pero es mejor mantenerlas en una rama a parte por un par
    de meses hasta que la comunidad encuentre y arregle los
    problemas más comunes. ¡No tomes decisiones con miedo a
    a perderte algo! Cuando mires en documentos antiguos,
    no olvides revisar las releases etiquetadas en GitHub, por ejemplo
    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="Buena idea.
    Sin embargo te animamos a
    probar (¡en una rama!) nuevas versiones de
    React tan pronto como sean publicadas.
    No como muchos de los paquetes de la comunidad,
    estos son fuertemente probados por Facebook.
    Fíjate bien en las notas de la release
    ya que enlazan codemods que
    automatizan partes del proceso de migración
    por ti."
  ]
  consider_updating_react -> are_you_still_sad

  # End

  are_you_still_sad[
    shape="diamond",
    label="¿Sigues estando triste?"
  ]
  are_you_still_sad -> rant[label="si"];
  are_you_still_sad -> happy[label="no"];

  rant[
    shape="box",
    label="Escribe un post constructivo en tu blog
    sobre los problemas que has encontrado.
    Abstente de ataques personales.
    Se educado. Ayuda a la comunidad a
    encontrar soluciones. Considera
    otras tecnologías que se adapten mejor
    a tus necesidades (por ejemplo Ember)."
  ]
  rant -> happy

  happy[
    shape="box",
    label="¡React te hace feliz!
    O por lo menos, ya no te pone triste."
  ]
  happy -> share

  share [
    shape="box",
    style=rounded,
    label="Comparte este diagrama: http://bit.ly/react-makes-you-sad.
    Basado e inspirado en https://github.com/petehunt/react-howto."
  ]
}