Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Как обычно и бывает, долго мы не думали, появилось желание написать свою доску объявлений (классифайд или маркетплейс) каждый называет как хочет. Думали напишем за 1-2 месяца и выпустим, но все оказалось намного сложнее чем мы думали.
Стек выбрали тот, с которым нам было комфортно работать на тот момент.
Стек у нас получился следующий: Vue.js (Nuxt.js), TypeScript, Sass, TailwindCSS, Node.js(с кластерами), Socket.io, Redis, MongoDB(Mongoose), Docker, Nginx. Ну и конечно куча разных библиотек, все перечислять нет смысла.
После нескольких попыток начинаний и переписываний, все таки стартанули. Решили что Nuxt.js будет билдится на сервере при запуске контейнера через Koa.js. Не знаю почему мы решили использовать коа, а не тот же экспресс или другие, просто так получилось, в принципе все что нужно он может, правда убили несколько дней только на то, чтобы коа корректно билдила накст, оказывается билд ведет себя по разному, если вы разрабатываете на js и совершенно не так как нужно если вы хотите делать это на typescript. Что бы все собиралось как нужно, пришлось установить кучу разных пакетов: ts-node, tsconfig-paths (оказалось что пути которые указываем для упрощения в tsconfig в path, работаю только на сервере, а фронту все равно…обидно), ts-loader, type почти на каждую стороннюю библиотеку, а для тех библиотек у которых не было типов, приходилось писать свои d.ts файлы (такие пришлось создавать для nuxt, element ui, imagekit, vue).
После того как мы радостные научились билдить накс через докер и коа, было здорово, вплоть до того момента пока мы не решили что мы же крутые программисты, а все крутые используют линтеры, пришло время eslint, а вместе с ним пару пакетов eslint для накста, eslint для ts, eslint-loader, eslint vue и т.д. и т.п. (да конечно мы их засунули в devDependencies, хоть и не сразу =)). И после того как все запустилось, оказалось что (как бы это странно не звучало, мы же крутые разработчики), в коде были разного рода нюансы и честно оказалось что eslint в целом оч крутая штука, какой бы программист опытный не был, за всем уследить не возможно, спасибо тем кто придумал его.
И так проект билдится, компоненты пишутся (я думаю нет смысла дословно рассказывать как писать компоненты на vue.js, об этом есть куча статей на хабре), линтер ищет ошибки, фронт общается с бэковым api через axios, но что то не удобно постоянно делать ребилд после правок на серверной стороне. Тут нас спасает конечно nodemon. У накста из коробки идет hotreload, так что на фронте все удобно, а теперь и на бэке все удобно, не разработка а красота какая то.
С монго проблем не было, опять же не могу сказать почему конкретно выбрали Монго, а не Mysql (да их суть разная, просто захотелось, почему нет?)
Наивность
И все таки мы не уложились в 1-2 месяца, на деле у нас получилось примерно 6-7 месяцев, были написаны десятки компонентов, постоянно оказывалось что для MVP нужно еще вот это и вот это, потому что ну как без этого (наверное это все в голове и нет человека который бы стукнул и сказал тормози друг, ты перебарщиваешь).
На главной странице где идет выборка 100+ категорий с подкатегориями, а так же в категориях где выбираются десятки офферов с пользователями, отзывами и тд., решили что без redis просто никак, получилось примерно 2 секунды рендер страницы с редисом против 6-8 секунд без него. Ребилд редиса делается через джобы. Джобы запускаются через agenda.
Для отправки писем выбрали mailgun.js, тут и говорить нечего, просто шикарный сервис.
Картинки пользователей было лень хранить у себя на сервере, выбрали imagekit.
Думал все, но нет...
Ах чуть не забыл, нам же нужны чаты, как будут общаться покупатели с продавцами. Для чатов выбрали socket.io, проблем с ним не было, чат получился хорошим, не телеграм конечно, но сообщения отправляются и принимаются, что еще нужно.
А нужно было кое что. Нужны были кластеры и тут начались интересные особенности.
Нельзя просто так взять, ничего не менять и надеяться что сокеты будут работать с на кластерах, если пользователи были на разных нодах, то они не видели друг друга, сообщения не доставлялись, статус онлайна не показывался. Но разработчики socket.io знали уже что так будет и все придумали (привет еще пакетам, больше пакетов) socket.io/sticky и socket.io/cluster-adapter помогли исправить ситуацию и все стало хорошо. Ну почти, ну через раз, почему то события все уходили по 2 раза...
Домен висит на Cloudflare, на котором в настройках было включено минифицировать html, js, css (ну почему бы нет? что может быть плохого). И после почти двух дней ломания головы, каким то чудом выяснилось, что если убрать эти галочки и не минифицировать код, то все работает так как и задумано! Радости было не передать словами (может вы в комментариях расскажете почему так могло быть?).
В целом, большое каких то трудностей не было, если не считать кучу кода =)
P.S.
А ну и если не заморачиваться над дизайном, потому что оказалось, если ты программист, то ты вообще не дизайнер и можешь сделать (как ты считаешь красиво) но на деле получается не особо то и красиво, так что решили что простой минималистичный интерфейс для mvp самое оно)
MVP у нас получилось следующее:
создание объявлений (покупка, продажа, редактирование, удаление, поднятие)
чат (общие в категориях, личные, удаление сообщений, проверка по стоп словам)
система отзывов
система споров (для покупателей и для продавцов)
мини админку (добавление категорий, бан, просмотр активных споров)
пользовательский журнал (где пишется каждое действие пользователя)
заказы в работе с возможностью отменить, открыть спор, оставить отзыв и т.д.
фильтр в категориях с параметризацией и поиском по названиям
Если будет интересно, могу в последующих постах рассказать более детально про те или иные пункты.
Домен и название
Ах да, название и домен не думали в принципе, был один домен, он лежал у меня в корзине года 2, мне было жалко денег, он стоил $100, но решил все таки почему нет. От домена и название сайта (гениально?).
И перед НГ в декабре 21 запустили сайт для всех. Хотя для кого для всех, никто не знает о нем.
Сайт - http://kt.tc
