Подписаться на блог

Диплом 5. UI, FrontEnd

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

Январь 2018

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

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

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

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

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

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

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

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

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

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

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

Вчера в `app.use(express.static(’build’))` забыл дописать `/client`, из-за чего у меня файл сервера торчал наружу, фейл на фейле, хорошо, в прод это не пошло :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. С формами тут всё гораздо лучше, логин и регистрацию накидал довольно быстро.

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

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