Kirill Profile picture
16 Apr, 19 tweets, 5 min read
Вторая часть про Автоматное Программирование. Сегодня поговорим со стороны фронтенда, а следующим тредом про бекенд. Не забываем лайкнуть и пошарить, дабы добро дошло до всех уголков твиттера. Поехали! #fsm
Напомню что конечный автомат это удобная модель, с помощью которой естественным образом описываются процессы с дискретным состоянием. Простой пример – модальное окно. Оно может быть закрыто или открыто и его можно закрыть или открыть. 2 состояния, 2 перехода.
Состояния влияют на то что можно делать с объектом о котором идет речь, а переходы это собственно то что мы программируем. Кстати иногда возможны переходы в самого себя. Про это поговорим отдельно в бекенд истории.
С точки зрения кода, состояния могут описываться как флаги. У модального окна это opened = true/false. А переходы меняют эту переменную нужным способом, попутно выполняя нужные действия: скрывая модалку из дома или добавляя ее туда. И в этом месте начинается самое интересное
Если состояний больше чем два, то флаги резко увеличивают сложность системы. Представьте что мы выполняем ajax-запрос и используем флаг isLoading. Как часто вы так делаю?
isLoading подразумевает два состояния, но два ли их на самом деле? Этот флаг не позволяет узнать, а был ли вообще сделан запрос. И если был, то завершился ли он с ошибкой или нет? То есть состояний больше, а флаг может только два. К чему это приводит? К появлению зависимостей!
Например чтобы узнать делался ли вообще запрос или нет, мы можем ввести performed = true/false. А для определения успеха вводим массив errors. performed && errors.length == 0 – запрос выполнился без ошибок. performed && errors.length > 0 запрос выполнился с ошибками
Теперь представьте форму, которую нужно грамотно оформить. Обрабатывать ошибки, показывать валидацию, очищать/заполнять поля, позволять ретраи и выводить мессаджи. Весь код этой формы будет представлять из себя месиво из флагов в перемешку с проверкой переменных состояния
Что здесь важно. Автомат есть независимо от того, что мы думаем об этом коде, но автоматного программирования тут нет. Здесь есть флаговое программирование, серьезный антипаттерн возникающий там, где не знакомы с автоматами. Подробнее в курсе полиморфизма: ru.hexlet.io/courses/js-pol…
О флаговом программирование можно найти много статей на английском, плюс почитать об этом в книге "автоматное программирование" habr.com/ru/company/spb… (крайне рекомендую книгу!)
Автоматное же программирование несмотря на весь пафос названия, по сути, является *программированием с явно выделенным состоянием*. И все! Ну ладно, почти все), но главное именно это. Вместо флагов мы вводим ровно одну переменную состояния, которая определяет текущее состояние
То есть вместо набора флагов isLoading и других, мы делаем поле dataProcessingState (не важно в каком фреймворке) и записываем туда одно из возможных состояний процесса загрузки. В нашем случае это idle, loading, successed, failed + отдельно переменная для хранения ошибок errors
В итоге все проверки в коде сведутся к примитивной проверке if state === 'idle'. Ясно и понятно. Но не забывайте про опасность строк: ru.hexlet.io/blog/posts/izb…
Работа с ошибками будет выглядеть примерно так if state === 'failed' и где-то ниже по коду обработка errors
Вы не поверите, но в своих курсах я рассказывал об этом еще лет 7 назад, но глобально об этом мало кто задумывался. И вот относительно недавно эта тема пошла и теперь когда мы открываем документацию reduxjs/toolkit то видим следующее: Image
Казалось бы очень маленькое изменение, а какое влияние на код. Легко читать и понимать, легко расширять, сразу видно процесс и возможные состояния. Меньше шансов сделать ошибку забыв обновить какой-то флаг или не добавив его в сложный if.
Эту тему я очень подробно размусоливаю с примерами и практиками в этом курсе: ru.hexlet.io/courses/js-fro… крайне рекомендую всем, кто хочет понимать как грамотно организовывать состояние. Там в том числе описываются зависимые автоматы, например связь валидации с процессингом данных
Как ни странно, по большому счету это все. Нужно уметь видеть автоматы, правильно выделять состояния и строить переходы. В особо сложных случаях, когда переходы связаны с мощной логикой, включаются спец либы типа github.com/davidkpiano/xs… Обратите внимание
Оу подсказали еще одну клевую статью где прямо наглядно можно увидеть к чему приводят флаги и как поменять их на переменную состояния: kentcdodds.com/blog/stop-usin…
А между тем мы перевели эту статью ru.hexlet.io/blog/posts/no-…

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Kirill

Kirill Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @mokevnin

19 Jul
Заждались тредов? Их есть у меня. Cегодня поговорим про такую мегаважную штуку как "идемпотентность", про то как она позволяет проектировать более надежные системы. Ретвитим, не стесняемся! Небольшой опрос. Насколько вы в курсе про идемпотентность?
Идемпотентность – это свойство какой-либо операции, например, вызова функции или выполнения HTTP-запроса. Операция считается идемпотентной, если повторные выполнения приводят к тому же результату что и первое выполнение. Рассмотрим кучку примеров из самых разных направлений
Возьмем команду mkdir в линуксе. Она создает директорию: mkdir jopa. Что будет если выполнить эту команду два раза? Во второй раз мы получим ошибку. То есть операция не идемпотентная. Тоже самое справедливо и для многих других команд работающих с файловой системой. Что дальше? Image
Read 17 tweets
7 Jul
На собеседовании я всегда начинаю разговор с вопроса "где вы сейчас работаете и чем там занимаетесь?". Вопрос простой, но при большой выборке скапливается довольно много интересных, смешных и грустных ответов. Ниже я расскажу о всяких забавных ситуациях и об идеальном ответе =>
Самое страшное когда говорят "начну с самого начала". Началом может оказаться школьные годы и долгий тернистый путь к себе настоящему. Однажды чувак мне сказал "щас я коротко про себя расскажу". Через 30 минут пришлось его останавливать
В любом случае, многие рассказывают про весь свой путь чуть ли не с самого первого дня работы программистом. Как собеседующий я бы хотел пропустить эту часть и говорить про текущую работу, так как это съедает кучу времени. Если понадобиться уйти в прошлое, то я задам вопрос.
Read 13 tweets
24 May
Через час-два тред про функции. Многим кажется, что функции это просто, но нет. Хорошие функции выглядят просто, но реализовать их тяжело. Какими руководствоваться правилами? Об этом и поговорим. #functions
Поехали! Обычно, от функций ожидают сокращения дублирования кода. Да, функции устраняют дублирование, но лишь в дополнение к тому, зачем они нужны. Настоящий смысл функции – повышение уровня абстракции. Звучит немного абстрактно, поэтому раскроем подробнее =>
Мир сложная штука, но эта сложность спрятана за простыми и понятными вещами. Например, работать с клавиатурой может даже ребенок, но лишь потому что она хорошо спроектирована и прячет от нас детали реализации. Нам не нужно знать физических законов для ее использования
Read 25 tweets
11 May
Метатред по серии "Автоматное программирование". Рассказываю тут про флаговое программирование, явно выделенное состояние, автоматы на бекенде, автоматы на фронтенде и кидаюсь кучей полезнях #FSM
1. Автоматы как способ моделировать процессы вокруг нас
2. Автоматы во фронтенде
Read 4 tweets
20 Apr
Третий тред по автоматному программированию. Поговорим про бекенд на разных языках. Ситуации, связь с базой, готовые либы и применимость. Ретвиты приветствуются! Вопрос: Используется ли в вашем проекте либа для автоматов?
Краткий пересказ прошлых частей. Автоматы есть всегда, главное их увидеть и заменить флаги на явно выделенное состояние. А в бекенде еще и автоматизировать работу с ними. Как?
Независимо от выбранного стека, состояние практического любого проекта отражается на базу данных. Заводятся либо флаги, либо поле state/status куда записывается название текущего состояния. В отличии от фронтенда, с автоматами в беке надо быть гораздо более аккуратными
Read 20 tweets
13 Apr
И так поехали тред про конечные автоматы (fsm, state machines). Одной из ключевых тем в разработке софта касающуюся всех программистов без исключения. Будет много примеров для разных языков. После этого треда вы, вероятно, увидите мир другими глазами. Лайк, шер, алишер, погнали!
Существует заблуждение что автоматы это что-то, из математики, не имеющее отношение к реальной жизни. Их используют в лексическом анализе для написания парсеров. Многие помнят лабы на си, где нужно было разбирать строчку. Да это тоже автоматы, но совсем другие.
Мы же поговорим об автоматах с точки зрения моделирования бизнес-процессов, которые мы программисты по большей части и программируем. Сразу предупрежу, что тема автоматов ну очень глубокая, они бывают совсем разные и к ним нужен разный подход. Поэтому что-то останется за кадром
Read 18 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(