Диплом 5. UI, FrontEnd

Published • 4 min read

#Diploma, #Education

Со всякими сложностями, возникшими в начале написания клиентской части разобрались, теперь можно и поверстать.

Январь 2018.

Разумеется, мне лень всё придумывать с нуля, поэтому я пошёл в гугл, затем перешел к посту на Hackernoon с подборкой UI-тулкитов для реакта. Сейчас что-то подберу и начну творить.


Самым популярным оказался Material-UI, его и возьмём, такой дизайн сейчас вроде модный, так что сойдёт.


Дока у них, конечно, странновата, хотя, может я где-то не там и как-то не так смотрю…


Попытался обратиться к API, и всё сломалось, оказалось, сначала не к тому эндпоинту обращался, а я уже начал паниковать.


Только сейчас узнал, что fetch не уходит в catch, если сервер отдаёт не, на что потратил где-то полчаса, отыскивая причину возникающих ошибок. Подключил axios, не понимаю, почему сразу так не сделал.


Сделал красивую регистрацию с блекджеком и проверками на всякое разное, чтобы юзеру было хорошо. Ну и навигацию доделал, теперь она работает по всему так пока 4 страницы сайту.


Хотел начать с эвентов и их страниц, но всё-таки начну с юзеров, придумал ещё всякие таймлайны, лайф апдейт и всякие фичи, но их я, скорее всего, реализовывать не буду, а просто докину потом в текст диплома и презентацию как “возможные варианты развития”.


По дизайну всё выходит ну очень не очень, но мне как-то лень что-то нормальное придумывать (да и не умею я в дизайн). От адаптива, вероятно тоже откажусь в итоговой версии, но это не точно.


Видимо, систему загрузки аватаров и подобного нужно будет как-то переписать…


Сделал редактирование профайлов, загрузку аватара - работает отлично, вот только в коде там всё ужасно, но стадия рефакторинга у меня запланирована на потом. Пока делаю PoC. Теперь бы нужно разобраться с изменением пароля… Вот это самое ужасное в данном случае. Ну, и, конечно, валидность введенных данных надо проверять так же как при регистрации и красиво подсвечивать.


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


Вчера в app.use(express.static('build')) забыл дописать /client, из-за чего у меня файл сервера торчал наружу, фейл на фейле, хорошо, в прод это не пошло emoji-wink


<off_topic>
Думаю впилить сюда какую-то систему комментариев, однозначно не Disqus, а других вариантов особо и нет. Facebook’ом из моего окружения мало кто пользуется, у Twitter нет виджета комментариев, а ВК я просто не хочу.

Самый явный вариант - накостылить комментарии на основе Issues на GitHub, только тогда для комментирования нужен будет там аккаунт, но вот как раз это есть у всего моего окружения.

Идея годная, но с одной стороны, с другой - те, кто хотят что-то обсудить и так пишут мне, например, в Telegram, а обсуждение чего-то, что не относится к репозиторию в его issues - использование не по теме, да и вообще оверинжениринг выйдет какой-то.
</off_topic>


Чуть-чуть пофиксил работу сервера и своих Middleware, только защитку от брута надо бы помягче сделать и фильтр доступных эндпоинтов выставить.


Выставил - всё поломалось. Не понимаю, почему, но всё где-то падает.


Кажется, я починил. Но почему оно сломалось, так и не понял.


Пытаюсь запилить изменение пароля, на фронте всё гуд, а вот на бэке, как оказалось, я там просто заглушку оставил…


Всё поправил, роль сыграл один злополучный await и вызов метода. #np


Зачем-то запилил комментарии в блог (сюда), которые работают на основе… GitHub Gists.
Потестировать можно на посте ”Каррирование в JS“.
А сейчас - самое время писать часть диплома для работы с сущностями типа “эвент”. Ну или подумать над идеей для хакатона.


Хватит лениться, пора запилить добавление эвента.


Отодвинул разработку на “когда-нибудь”…


Март 2018.
Первым делом сделал возможность собрать докер-контейнеры. Теперь всё цивильно: 3 контейнера (nginx, mongodb, nodejs). Контейнер с nginx проксирует запросы на ноду и балансит нагрузку, внутри ноды крутится кластер процессов ноды под pm2. В целом неплохо. На эту тему написал бы отдельный пост, но пока особо времени нет.

Смысла распределять нагрузку nginx'ом пока нет, поэтому с nodejs только один контейнер

Теперь решил отказаться от Google-Material кита для React и перешёл на Ant Design. С формами тут всё гораздо лучше, логин и регистрацию накидал довольно быстро.

Помимо этого развернул всё на сервере нормальном, здорово, когда работодатель способствует развитию и выделяет ресурсы на твои личные проекты.


Окончательно перетащил всё, что было, на новый дизайн. Параллельно несколько багов пофиксил и неплохо переделал логику редактирования профиля и загрузки аватарки.

© Igor Fedyukin 2009 - 2020