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

✓ Чат 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 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
20 апреля 4 месяца
Иконка программы Аналитик данных
Профессия
Новый с нуля
Сбор, анализ и интерпретация данных
20 апреля 9 месяцев
Иконка программы Python-разработчик
Профессия
с нуля
Разработка веб-приложений на Django
30 марта 10 месяцев
Иконка программы Java-разработчик
Профессия
с нуля
Разработка приложений на языке Java
30 марта 10 месяцев
Иконка программы PHP-разработчик
Профессия
с нуля
Разработка веб-приложений на Laravel
30 марта 10 месяцев
Иконка программы Инженер по тестированию
Профессия
с нуля
Ручное тестирование веб-приложений
30 марта 4 месяца
Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
30 марта 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
30 марта 16 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
c опытом
Создание веб-приложений со скоростью света
30 марта 5 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Инженер по автоматизированному тестированию на JavaScript
Профессия
Новый В разработке с нуля
Автоматизированное тестирование веб-приложений на JavaScript
дата определяется 10 месяцев