Все статьи | Блог студента

✓ Чат Slack (frontend): пройдено

✓ Чат Slack (frontend): пройдено главное изображение

Вот я и завершила последний проект по Фронтэнду. Крайне этому рада!

Нелегко мне дался и этот проект. Начала я его 23 августа, сдала на первую проверку 18 сентября. 11 октября спустя 6 проверок проект наконец-то приняли.

Проблемы начались с первого шага: ни в какую не хотел работать хот-лоадер. Что я только не делала, и девсервер подключала с прокси, и какой-то вебпак-хот-клайинт для коа, и реакт-хот-лоадер... Всё тщетно. Когда мне всё это надоело, снесла все файлы проекта и скопировала сервер заново. После установки, сборки и запуска хот-лоадер заработал. Даже подключение реакт-хот-лоадера прошло гладко.

Второй шаг вызвал у меня ужас и панику. Напомнил известную картинку про рисование совы. Сразу столько всего нового!

Моему продвижению по проекту мешало тяжелое ухудшение самочувствия в связи с сезонной аллергией и невыносимой жарой. Продуктивность была крайне низкой. Пока не применила испытанный и незаменимый прием с разбиением сложной задачи на несколько малых продвинуться вперёд не удавалось.

Пара дней у меня ушло на понимание сокетов. Они чем-то похожи на пинг-понг: вызов события на сервере обрабатывается листенером на клиенте, а вызов события на клиенте обрабатывается листенером на сервере. Вроде просто и логично, но почему-то нигде об этом прямо не написано. Больше всего помог разбор работающего примера из документации.

Как говорится, у страха глаза велики, и все остальные новые инструменты — js-cookie, faker, декораторы — оказались гораздо проще в освоении. Не считая, конечно, ридакса, с которым у меня уже был опыт.

Немного заморочилась с построением модалок, взяв за основу рекомендации от Дэна Абрамова. Здесь было важно понять, что каждая модалка должна быть отдельным компонентом. А я сперва пыталась все существующие модалки разместить в одном компоненте.

Так вышло, что я сама себе существенно усложнила задачу, реализовав вместо требуемого инпута текстовое поле и добавив перевод строки на shift + enter / ctrl + enter. Сначала я реализовала всё это жутким кастомом, но после замечаний Кирилла переделала всё с использованием готовых библиотек (react-autosize-textarea, react-keyboard-event-handler). Понравилось. Теперь на работе тоже при каждом удобном случае ищу готовые компоненты. Код выглядит чище, и меньше вероятности наткнуться на странный баг.

Много пришлось повозиться с Redux Form. Дело в том, что я решила реализовать отправку сообщения не по нажатию на кнопку, а по нажатию на enter. Из-за этого валидация не работала нужным образом. Пришлось переносить валидацию в функцию сабмита, как в примере из документации для работы с удаленной кнопкой. А саму функцию сабмита передавать в пропсах.

Сначала я использовала много рефов — так казалось проще. Но ментор запретил их использовать без крайней на то необходимости, поэтому пришлось долго искать более правильные пути.

Узнала как правильно строить ридакс: экшнов должно быть минимум, а вся обработка должна происходить в редьюсерах. Не нужно на каждом изменение стора отправлять экшн. Один экшн может обрабатываться в разных редьюсерах. Почему-то во время прохождения курсов этот момент от меня ускользнул. Как и то, что данные правильно нормализовать в mapStateToProps, а рендерить чистый jsx.

И, последний момент: благодаря замечаниям и комментариям Кирилла разобралась, как должны работать скрипты и модули. До этого даже после прочтения соответвующей статьи в голове и в коде оставалась каша.

Последний проект очень сильно держал в напряжении. Даже, кажется, основная работа отошла на второй план. Часто не могла уснуть, если знала, что нужно исправить какой-то баг...

Очень рада, что удалось пройти всю профессию целиком. Очень благодарна Кириллу за менторство.

Дальше продолжу штурмовать Node.js.

Аватар пользователя Irina Nikolaidi
Irina Nikolaidi 14 октября 2019

Бесплатные курсы на Хекслете

Учитесь в удобном для вас ритме