fatigue.dot

digraph {
  unhappy[
    shape="box",
    style=rounded,
    label="React 让你不爽"
  ]
  unhappy -> are_you_using_react_boilerplates;

  # Boilerplate Fatigue

  are_you_using_react_boilerplates[
    shape="diamond",
    label="你是通过复制示例项目
    学习 React 么？"
  ]
  are_you_using_react_boilerplates -> boilerplates_dont_teach[label="是"]
  are_you_using_react_boilerplates -> steal_from_boilerplates[label="否"]

  boilerplates_dont_teach[
    shape="box",
    label="跟着示例项目学 React 就好像在一家超棒的
    餐厅里通过点菜来学做饭一样。这压根没用。你得从基础
    学起，不要怕有所遗漏。这没有根据。人们之所以建立
    示例项目是为了展示他们所创造的、学到的，而不是为了
    帮助你学习。示例项目是为更有经验的人准备的，并且
    通常要比被承认的更具试验性。示例项目彼此竞争，为了
    获得更多的注意力往往有所夸大。如果你确实对 React
    感兴趣，你应该按照　Pete Hunt 的指南来学习:
    https://github.com/petehunt/react-howto.
    在你能自己建立示例项目前不要看网上的。"
  ]
  boilerplates_dont_teach -> are_you_using_flux

  steal_from_boilerplates[
    shape="box",
    label="虽然示例项目对于学习它综合的各种技术
    不是一个很好的方法，但是当你掌握这里的每一项
    技术后，示例项目能够帮助你了解这些技术是如何
    协同工作的。这是发现新技术的好途径，但是不要
    觉得有使用的义务。不过也不要把示例项目束之高阁，
    只要记住示例项目是各种技巧的一锅烩，并不能
    被当做应用坚实的基础。
    "
  ]
  steal_from_boilerplates -> are_you_using_flux

  # Flux Fatigue

  are_you_using_flux[
    shape="diamond",
    label="你在使用 Flux
    （或者 Redux 么）？"
  ]
  are_you_using_flux -> is_too_much_flux[label="是"]
  are_you_using_flux -> is_not_enough_flux[label="否"]

  is_too_much_flux[
    shape="diamond",
    label="它是不是增加了
    一堆无用代码？"
  ]
  is_too_much_flux -> remove_flux[label="是"]
  is_too_much_flux -> are_you_using_bundler[label="否"]

  is_not_enough_flux[
    shape="diamond",
    label="在组件依赖的顶端有没有一堆
    经常出 Bug 的状态组件?"
  ]
  is_not_enough_flux -> add_flux[label="是"]
  is_not_enough_flux -> are_you_using_bundler[label="否"]

  add_flux[
    shape="box",
    label="添加 Flux 库。它能够把组件间共享的
    状态转移到外部，并用一致的方式来更新。"
  ]
  add_flux -> are_you_using_bundler

  remove_flux[
    shape="box",
    label="去掉 Flux 库。通过阅读官方文档
     “Thinking in React”，来体会用纯生的 React
     怎么建立一个结构良好的应用。"
  ]
  remove_flux -> are_you_using_bundler

  # Bundler Fatigue

  are_you_using_bundler[
    shape="diamond",
    label="你在使用 JavaScript 打包工具么
    (例如 Webpack, Browserify)?"
  ]
  are_you_using_bundler -> are_you_working_on_production_app_with_bundler[label="是"]
  are_you_using_bundler -> are_you_working_on_production_app_without_bundler[label="否"]

  are_you_working_on_production_app_with_bundler[
    shape="diamond",
    label="正在做一个要上线的项目么?"
  ]
  are_you_working_on_production_app_with_bundler -> do_you_know_es2015[label="是"]
  are_you_working_on_production_app_with_bundler -> remove_bundler[label="否"]

  are_you_working_on_production_app_without_bundler[
    shape="diamond",
    label="正在做一个要上线的项目么?"
  ]
  are_you_working_on_production_app_without_bundler -> add_bundler[label="是"]
  are_you_working_on_production_app_without_bundler -> do_you_know_es2015[label="否"]

  add_bundler[
    shape="box",
    label="在构建步骤添加一个打包的过程
    能够很好的管理依赖并且更有效地传输
    JavaScript 代码。
    使用 Google Page Speed 来测量做得
    怎么样。别忘了压缩和环境化你的代码。"
  ]
  add_bundler -> do_you_know_es2015

  remove_bundler[
    shape="box",
    label="如果你只是学习 React 没有必要
    使用打包工具。直接克隆这个项目
    https://github.com/jarsbe/react-simple
    开始你的学习，还不用考虑打包的问题。
    你可以一直使用 <Script> 标签直到熟悉
    React，然后再了解一下模块系统和不同
    的打包工具。"
  ]
  remove_bundler -> do_you_know_es2015

  # ES2015 Fatigue

  do_you_know_es2015[
    shape="diamond",
    label="你了解并且能够接受 ES2015
    的特性吗
    (比如 类和箭头函数)?"
  ]
  do_you_know_es2015 -> use_es5[label="否"]
  do_you_know_es2015 -> are_you_using_dangerous_features[label="是"]

  use_es5[
    shape="box",
    label="先别用 ES2015。学习 React 不需要它。
    第三方库在文档里通常使用 ES2015 的语法，
    但是如果你只是学习 React 还用不到第三方库。
    当你想要更新你的 JavaScript 知识时：
    https://leanpub.com/understandinges6/read
    是超棒的指南.使用在线工具：
    http://babeljs.io/repl
    来验证你的各种假设。"
  ]
  use_es5 -> do_you_update_packages_asap

  # ESnext Fatigue

  are_you_using_dangerous_features[
    shape="diamond",
    label="你在使用一些没有加入到
    ES2015 的试验特性吗
    (例如 装饰器)?"
  ]
  are_you_using_dangerous_features -> can_you_spend_days_on_your_tooling[label="是"]
  are_you_using_dangerous_features -> do_you_update_packages_asap[label="否"]

  can_you_spend_days_on_your_tooling[
    shape="diamond",
    label="您能每隔几周就花上几天时间
    来修复工具链导致的 Bug，不兼容
    和标准的变动么？"
  ]
  can_you_spend_days_on_your_tooling -> do_you_update_packages_asap[label="能"]
  can_you_spend_days_on_your_tooling -> stick_to_es2015[label="不能"]

  stick_to_es2015[
    shape="box",
    label="坚持只用 ES2015，JSX 和属性专递操作符。"
  ]
  stick_to_es2015 -> do_you_update_packages_asap

  # Semver Fatigue

  do_you_update_packages_asap[
    shape="diamond",
    label="当依赖的库有重大版本
    更新时你会跟上么？"
  ]
  do_you_update_packages_asap -> give_it_two_months[label="会"]
  do_you_update_packages_asap -> consider_updating_react[label="不会"]

  give_it_two_months[
    shape="box",
    label="除非是 React 这种每次发布前经过严格测试的库，
    否则你应该让更新的速度慢下来。
    你可以在分支里尝试依赖库的新版本，
    直到社区发现和修复了绝大部分的问题。
    不要因为怕被落下就做决定。
    要查找旧版本的文档，别忘了查看 Github 上
    带 Tag 的发布版本，比如
    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="这是个好决定。
    不过我们还是鼓励你在 React 新版本出来的时候
    （在分支里）尝试它。与社区模块不同，React
    经过了 Facebook 的严格测试。
    要留意发布日志，因为它们通常连接到能够自动
    化一部分迁移过程的 codemods。"
  ]
  consider_updating_react -> are_you_still_sad

  # End

  are_you_still_sad[
    shape="diamond",
    label="你还不爽么？"
  ]
  are_you_still_sad -> rant[label="是"];
  are_you_still_sad -> happy[label="否"];

  rant[
    shape="box",
    label="
    把你遇到的问题写成有建设性的博客，
    避免人身攻击。
    有礼貌。
    帮助社区来寻找解决方案。
    考虑一下其它更符合你的需求的技术栈
    （比如 Ember）。
    "
  ]
  rant -> happy

  happy[
    shape="box",
    label="React 让你爽歪歪！又或者至少不再不爽。"
  ]
  happy -> share

  share [
    shape="box",
    style=rounded,
    label="分享这个流程图
    https://github.com/gaearon/react-makes-you-sad
    基于和启发
    https://github.com/petehunt/react-howto
    中文翻译
    https://github.com/wyvernnot/react-makes-you-sad
    "
  ]
}