От автора: полгода назад я начал работу над своим первым «настоящим» Sass приложением Checkly. Этот пост – обзор 5 уроков, которые я выучил за последние полгода. Надеюсь, он поможет другим самоучкам-разработчикам, которые создают с Vue Sass приложения.
Чтобы вы поняли, опишу, что делает Checkly. Checkly – это инструмент для IT Ops и разработчиков. Он делает 2 вещи.
Активно проверяет корректность и время отклика конечных точек API.
Активно проверяет корректность критического потока кликов браузера.
Хватит нахваливать приложение, вот эти 5 уроков, которые я выучил.
1. Создать хорошую авторизацию сложно
Пользователи будут работать с вашей страницей авторизации намного больше, чем с лендингом, страницей с ценами и другими частями приложения, которые, как ВЫ думаете, очень крутые. Вот почему авторизация должна быть хорошей.
В типичном нетривиальном сценарии много точек входа:
Регистрация
Авторизация через социальные сети
Имя пользователя/пароль логин
Сброс пароля
Колбек обработчик авторизации через соц. Сети
Обработчик регистрации
Это уже достаточно сложно, очень много чего должно сойтись, прежде чем пользователь сможет приступить к работе. Тестировать эти компоненты сложно – очень много back end’а и взаимодействия со сторонними сервисами. Со всем этим сложно работать. В своем решении я упростил подход и принял 2 определенных архитектурных решения:
Я буду использовать Auth0 для реальной аутентификации на back end. С помощью social login, username / password login и их сервиса JWT буду проводить аутентификацию пользователя в Checkly API. Дисклеймер: я никак не связан с Auth0, но их сервис очень хорош и дружит со стартапами, благодаря своему либеральному свободному плану.
Взаимодействие Abstract Auth0 в компонент сервиса в приложении Vue. Ваши компоненты Vue не знают о Auth0, токенах JWT. Они просто импортируют сервис auth и вызывают пару методов. В будущем легко заменить.
Необходимо отделить все «шаги» в свой роут и компонент. Так вы себе и другим упростите жизнь. Теперь с легкостью можно бросаться ссылками /login и /signup в маркетинге, не думая о состоянии компонента. Состояние определяется роутом, как на любой «нормальной» веб-странице.
Ниже – визуальное представление всей настройки. Танцующий хомячок значит, что вы полностью прошли регистрацию и/или авторизацию.
Бонус: обработка несанкционированных состояний
Когда JWT токен пользователя устаревает, back end API даст вам знать, вернув заголовок 401 Unauthorised. Вы захотите перенаправить пользователя на страницу авторизации или показать дружелюбное сообщение. С помощью Axios http-клиента и Vue это можно сделать в 5 строк кода.
Добавьте перехватчик в Axios в центральный сервис http.js. Пусть Axios пропускает ошибку на шину сообщений Vue.js.
Ждите сообщение в верхнем компоненте и обрабатывайте его. В моем случае я буду делать редирект на /login.
2. Повторное использование компонента необходимо планировать
Что такое компонент? Компонентом может быть кнопка. Но компонентом может быть и весь экран. Все приложение – это компонент! Получается, что нет четкой границы между «компонентами» и «не компонентами».
Конечно, я не один задавался этим вопросом. Dan Abramov в своей статье в контексте ReactJS подводит итог: разделяйте компоненты на контейнеры и то, на что смотрите (компоненты представления в статье Dan, представления в моей). Единственное отличие моего решения – представления всегда ссылаются над подроуты.
В примере ниже показан стандартный экран редактирования. В нашем случае это экран редактирования проверки API. Это контейнер, ведущий на /checks/>id</edit/api. Экран на вкладке locations & scheduling, который ведет на свой подроут /scheduling
Вкладка содержит выбор страны и компоненты планирования времени (красные). Эти компоненты также живут на трех других экранах: 2 в мастере создания и 1 на экране редактирования проверок браузера.
Все эти экраны отличаются и предоставляют разный контекст данных и визуальный контекст для всех компонентов (находимся мы в режиме edit или create). Другими словами, не только данные, вставленные в изменения компонента (через свойства), но и визуальное расположение на экране. Здесь поможет разделение на containers / views.
Containers – роуты верхнего уровня и почти всегда читаются из Vuex
Views – явные подроуты контейнера, не хранят состояние.
Both – может хранить голые компоненты.
3. Развертывание на CDN также необходимо планировать
Теперь нечто совершенно другое!
Back end Checkly лежит на Heroku, поэтому я хотел обслуживать приложение на Heroku. Чем меньше движущихся частей, тем лучше! Но все сложнее, чем думаете.
Необходимо синхронизировать деплой приложения и деплой API. Не практично.
Скомпилированные файлы нужно упаковать в развертываемом API. В большинстве случаев это отдельные (git) проекты. Теперь необходимо добавить stage, в котором артефакты из одного проекта вставлены в другой.
Я искал сторонние deployment/CI/CD сервисы и наткнулся на Netlify. В конце концов, я использовал скрипт NPM и знания, полученные из AWS.
Поднимите S3 bucket и установите пакет s3-deploy NPM. Добавьте 3 строки в секцию скриптов package.json.
Разверните все файлы на S3 bucket и установите заголовки кэширования и etags.
Разверните index.html без заголовков кэширования – эффективный способ устаревания кэша, когда выходит новая версия.
Свяжите предыдущие 2 пункта. Готово.
Этот набор скриптов толкает приложение Vue.js, запущенное с помощью Vue-CLI, в AWS S3 bucket. В моем случае я также выходил на S3 bucket с AWS Cloudfront в виде CDN. При начальной установке необходимо задать пару начальных настроек:
Добавьте robots.txt в конфиг веб-пакета. Нужно приручить этих ботов.
Уже говорил, но все же: позаботьтесь о правильных заголовках кэширования. Вам нужно, чтобы все обновления кода и файлов были сразу видны. То есть файл index.html нужно загружать БЕЗ кэша. Это основная хорошая практика.
Настройте AWS S3 и AWS Cloudfront на обработку одностраничного приложения. Об этом почти ничего не сказано в документации AWS.
Настройте bucket на хостинг
Настройте страницу ошибки на index.html
Создайте свои сообщения об ошибках на Cloudfront для сообщений 404 и 403.
4. Используйте сторонние плагины, но только когда…
Я в IT уже примерно 20 лет. У меня есть более страшные истории о первом пузыре в интернете. Но по мере изменения технологий рынка и мира одна вещь не меняется.
Разработать хорошее и полезное приложение очень сложно и долго
Все ДО СИХ ПОР недооценивают это: менеджеры, инженеры, заказчики, я. Поэтому моя причина, почему я использую сторонние решения, open source фреймворки, плагины и т.д. – это возможность меньше работать. Не интегрироваться с чем-то прикольным, не последним использовать Х или У. Не потому, что это использует facebook. Вроде бы очевидно, но много кто забывает это.
Меньше слов. Ниже представлены 3 Vue.js плагина, которые я могу порекомендовать. Я часто их использую. Что они делают, наверное, и так понятно. Они не идеальны, но помогут разгрузить вас.
Bootstrap Vue
Vue-i18n
vee-validate
5. Инструменты разработчика Vue.js сильно экономят время
Расширение для Chrome с инструментами разработчика Vue.js удивительно. Я использую его каждый день. Для меня это составная часть экосистемы Vue.jsm как Vuex и Vue Router. Почему же он так хорош:
Я обращаю внимание на UI и UX. Я могу провести много времени, чтобы:
Получить нужный цвет
Получить переход, который сглаживает анимацию
Получить микро анимацию, добавляющую контекст
Получить выделяющийся шрифт
То есть в случае ошибок или чего-то еще я хочу получить что-то красивое. Заставить все работать на front end довольно сложно.
Переключение состояний в true/false путем быстрого редактирования действительно, ДЕЙСТВИТЕЛЬНО помогает, когда переходы и т.д. зависят от сложных back end состояний и XHR сообщений.
В примере выше back end API должно находиться в определенном состоянии, чтобы открылся нужный экран на front end. Но это состояние не статично: оно зависит от времени и других постоянно меняющихся переменных.
Если не добавить свои кнопки отладки для переключения этих состояний, вы мало что сделаете. Инструменты разработчика Vue.js решают эту проблему. Спасибо, инструменты разработчика Vue.js.
Автор: Tim Nolet
Источник: https://hackernoon.com/
Редакция: Команда webformyself.
