Хтмл-шаблоны на сервере

Начинал я как бекенд-разраб, писал апишки и админки для мобильного приложения по доставке еды, типа деливери клаб, только не одно приложение с 100 ресторанами, а 100 приложений, каждое из которых про 1 заведение. И, как бы, админки были на хтмл-шаблонах - jinja / django-templates - то есть хтмл, с расширениями, типа ифов, циклов; рендерится на сервере.

Потом была отдельная админка для учета юрлиц и документооборота. То есть по-началу тоже простые формочки с данными о юл и формочки для генерации документов. Под документами имеются в виду отчеты, счета, акты. И в какой-то момент заведующему финансами захотелось, чтобы данные в отчетах можно было редактировать из веб-интерфейса. Такое делать на хтмл-шаблонах делать не очень кайфово, тк много реактивности, и я как раз в то время изучал Vue.

---

Реакт замороченный

Это был 2019 год, то есть я уже 3 года работал в компании, то есть ко Vue я пришел не сразу. Году в 2017 были задачи на поддержку приложения-баристы на Реакте (о нем позже), а, тк я был серверным разрабом, я не очень понимал, что там происходит и делал задачи на фронтенд наощупь. Потом, в качестве интереса, я засел и начал изучать Реакт основательно — узнал что такое реактивность, Redux стейт-менеджмент, инъекция зависимостей и тд. В то время в 2018, Реакт показался мне замороченным, много бойлерплейта, много библиотек, и я решил, что фронтенд это не очень круто.

Потом мое руководство решило, что нам надо сделать сайт по доставке еды, и фронтендеров у нас тогда в команде не было, и наняли человека, который Vue знал. Ну и как бы это значило, что надо Vue изучать, потому что наверняка будут задачи на поддержку сайта, если фронтендер уволится / будет недоступен.

---

Вью любимый

И вот в период с 2018 по 2019 я начал изучать Vue, и он показался мне гораздо легче Реакта (хотя возможно, если бы у меня не было опыта с Реактом, то было бы так же сложно). Родные html-шаблоны, стейт-менеджмент, роутинг - vuex, vue-router - о них из документации узнаешь - и как бы этото джентльменского набора достаточно.

Параллельно в то время популяризировалась типизация в Python. И захотелось типизации в JS. Тогда 2 игрока популярных было: Flow - типизация на комментариях и TypeScript - надстройка над JS с типами. Я решил попробовать TS, и не прогадал. Для Vue есть библиотеки, которые позволяют писать Vue-компоненты в виде классов: vue-class-component, vue-property-decorator - очень удобно и типизировано.

Ну и как бы все, думаешь, чего еще желать, а оказывается есть Nuxt - Vue-фреймворк, там из коробки все настроено и стейт, и роутинг, и доп плюшки, типа плагинов, лейаутов, и структура папок есть хорошая — вообще кайф.

Но все же осталась еще одна вещь, которая мне не нравилась во Vue-инфраструктуре - это то стейт-менеджмент. Стандартный синтаксис объектов и функции типа mapState попахивали динамикой, и хотелось построже типизацию. И нашлось решение - vuex-simple. Эта библиотека позволяет писать vuex-модули в виде классов на манер vue-компонентов, а доступ к стору — вызов методов, обращение к полям объекта стора - и теперь я полностью удовлетворен Vue.

---

Админка

В 2020 решили переписывать сервер и админку. Целый диз нарисовали, и мне предстояло делать его целиком:

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

Одной из частей админки была бариста — приложение для приема и обработки заказов. Его мы решили реализовать отдельно и интегрировать с легаси сервером.

Баристу я писал, используя все свои любимые штуки:

• Основа - Nuxt + nuxt-property-decorator
• UI - Vuetify
• Запросики к серверу через axios
• TSиком описывал интерфейсы данных с серва и вью-модели страничек
• Стейт-менеджмент - иммутабельный на vuex-simple + vue-typedi
• Работа с датами через dayjs

Функционал там был примерно такой:

• отображение актуальных заказов: группировка по статусам, отображение деталей заказа: на какой адрес везти, что за клиент, состав заказа
• действия с заказом: выдача, отмена, перенос на другое время / в другое заведение
• периодическое обновление статусов заказов + вывод уведомлений о новых заказах (звук + пуш)
• стоп-листы: установка доступности продукта в определенном заведении
• история заказов: вывод табличных данных с различными фильтрами

---

Пару слов о CSS

Писать CSS я не большой любитель, я любитель использовать UI-фреймворки, типа Vuetify.

Если с этим беда, то TailwindCSS упрощает жизнь — эта библиотека предоставляет набор css-классов на все случаи жизни, таким образом можно сделать кастомную верстку по-минимуму используя CSS.

Если и Tailwind использовать нельзя, а CSS надо писать много, то хотя бы препроцессор хотелось бы — тоже вкусные фичи он предоставляет, типа переменных, наследования — хотя современный css уже и переменные предоставляет, так что и с просто cssом можно жить.