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, лучше начни по
    порядку, описанному Питом Хантом в его статье:
    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="Есть ли у тебя
    несколько раздутых компонентов,
    содержащих состояние и расположенных
    на верхушке иерархии, которые
    зачастую являются источником
    ошибок?"
  ]
  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.
    Почувствуй кайф от структурирования
    приложений на чистом React, прочитав
    “Thinking in 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="Ты работаешь над
    приложением в production?"
  ]
  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="Ты работаешь над
    приложением в production?"
  ]
  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="Добавь компоновщик как
    шаг сборки приложения, чтобы
    зависимости стали более управляемыми,
    а обслуживание JS-кода — эффективнее.
    Используй инстумент PageSpeed Insights
    от Google, чтобы оценить, насколько хорошо
    у тебя идут дела. Не забывай также про
    minify и envify для твоего кода."
  ]
  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="Можешь ли ты тратить
    целые дни на исправление выбранных
    инструментов каждые несколько недель
    из-за багов, несовместимостей и
    изменений стандарта?"
  ]
  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, к примеру,
    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.
    Следи за примечаниями к релизу, ведь они
    ссылаются на отрывки кода, которые
    автоматизируют часть миграции за тебя."
  ]
  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="Поделись этой блок-схемой: http://bit.ly/react-makes-you-sad.
    Основано и вдохновлено https://github.com/petehunt/react-howto."
  ]
}