Все статьи | Дневник студента

✓ Чат 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
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
30 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
30 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
30 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
30 июня 5 месяцев