Завершение курса + всякие полезности

Ну вот наш курс и подошёл к завершению.

Надеюсь, вам было интересно поработать с Vesp и вы узнали для себя что-то новое и даже интересное.

В этой заключительной заметке я хочу сделать краткий обзор PHP и JS библиотек, которые я использую в своих проектах. Возможно, они сэкономят вам время при разработке.

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

PHP

Начнём с box/spout - это очень шустрая библиотека для работы с XLSX, ODS и CSV. Я наткнулся на неё, когда искал экономичное решение для экспорта больших объёмов информации, и она с ними отлично справилась.

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

ramsey/uuid я использую для удобной генерации uuid моделей, когда мне не нужно, чтобы пользователи могли перебирать данные из контроллеров по id. например, на bezumkin.ru все картинки выводятся именно по uuid, подбором ничего не открыть.

Обратите внимание, что uuid бывает нескольких видов, если вам нужен именно случайный uuid - то это 4я версия.

peppeocchi/php-cron-scheduler уже используется в Vesp по умолчанию, но я про него ничего не рассказывал. Там всё просто - прописываете в crontab сервера файл core/cli/cron.php и добавляете скрипты для выполнения, рядом лежит пример для удаления старых сессий.

phpmailer/phpmailer для отправки почты, вместе с pelago/emogrifier, который разбирает стили письма из шапки и вставляет в теги, чтобы все почтовые клиенты их нормально понимали.

А для шаблонов писем я использую, понятное дело fenom/fenom.

Если будет интерес, могу написать подробнее про подключение подобных библиотек к проекту.

Еще вам может понадобиться установить doctrine/dbal, если вы будете писать миграции, которые меняют тип колонок в таблицах методом ->change(), например со string на text. У меня такое иногда случается.

Этого набора библиотек мне хватает для реализации 90% проектов. В остальных случаях нужно подключить какой-нибудь сервис для оплаты или что-то подобное. Но всё это делается по одной схеме - ищем подходящую библиотеку, читаем документацию, подключаем.

Javascript

При выборе JS решения для Vesp я советую руководствоваться следующими правилами:

• в первую очередь проверяем официальные модули для Nuxt
• если ничего нет, ищем нужное на npmjs
• предпочтение отдаём модулям Nuxt, а затем интеграциям с Vue
• если совсем ничего нет - берём решения написанные на чистом JS, по возможности без зависимостей
• И никакого jQuery!

vue-meta уже интегрирован в Nuxt и доступен на всех страницах для выставления title и прочей работы с мета-тегами. Именно этот модуль мы используем в админке для указания названий страниц.

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

@nuxtjs/sitemap - генерация карты сайта. Отлично работает как со статическими сайтами, так и с динамическими маршрутами на тысячи страниц. Просто пишете функцию с запросом в API для получения этих страниц, и модуль генерирует по ним карту.

Пример с bezumkin.ru:

Config.sitemap = {
  hostname: env.SITE_URL,
  gzip: true,
  exclude: ['/admin/**', '/user/**', '/service/**'],
  routes: async () => {
    const routes = []
    const [{data: sections}, {data: topics}] = await Promise.all([
      axios.get(env.API_URL + 'web/sections', {params: {sort: 'views_count', dir: 'desc'}}),
      axios.get(env.API_URL + 'web/topics', {params: {sort: 'id', dir: 'desc'}}),
    ])

    sections.rows.forEach((section) => {
      routes.push({
        url: '/sections/' + section.alias,
        lastmod: section.updated_at || section.created_at,
      })
    })
    topics.rows.forEach((topic) => {
      routes.push({
        url: (topic.section.lessons ? '/lessons/' : '/sections/') + topic.section.alias + '/' + topic.id,
        lastmod: topic.updated_at || topic.created_at,
      })
    })

    return routes
  },
}

@nuxtjs/pwa поможет вам превратить ваш сайт в PWA, который можно устанавливать на телефон. Всё работает хорошо по умолчанию, нужно только указать свою иконку. Этот модуль уже подключен по умолчанию в Vesp.

@nuxtjs/svg позволяет легко импортировать SVG файлы в любом виде, хоть голым текстом, хоть компонентом для вставки в шаблон. Просто посмотрите примеры в документации, это крайне полезный модуль для вёрстки.

@nuxtjs/markdownit позволит вам удобно загружать на страницы какие-то статичные документы, вроде пользовательского соглашения в формате Markdown. Понятное дело, работать можно не только с файлами, а рендерить вообще любой markdown в html через функцию $md.render().

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

glightbox я использую для вывода увеличенных картинок при клике, например прямо здесь - на bezumkin.ru.

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

bootstrap-vue/nuxt - лучшая интеграция Bootstrap 4 с 85+ компонентами на все случаи жизни. Лично я очень ценю возможность самостоятельного подключения и модификации Bootstrap в стили проекта, с импортом только нужного, что облегчает размер собранного проекта.

Там есть и ленивая загрузка картинок, и прогресс-бары и еще много чего еще - просто внимательно посмотрите документацию, она очень подробная.

К сожалению, на Vue 3 и Bootstrap 5 они переходить не торопятся, поэтому я уже присматриваю другие решения на будущее.

@fortawesome/vue-fontawesome - мои любимые иконки, которые постоянно развиваются и обновляются. В последнее время, наверное, даже слишком бурно, что иногда приводит к небольшим проблемам. В любом случае, богаче набора иконок так удобно интегрированных в Nuxt найти не получится.

Заключение

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

Лично я уже не могу представить себе работу с MODX или другими системами, которые рендерят HTML на сервере, без прогрессивных фронтенд фреймворков.

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

Завершение курса означает только окончание написания новых заметок, но я продолжаю отвечать на ваши вопросы в комментариях!

Проект VespShop скорее всего будет понемногу развиваться и после курса, если мне будут заказывать создание интернет-магазинов и при этом процессе получится разрабатывать какие-то универсальные штуки для общего пользования.

Буду очень рад вашим отзывам о курсе в комментариях. Что понравилось, что не очень, о чём еще нужно написать в будущем за рамками курса.