[dev] Frontend разработка - profcomff/.github GitHub Wiki
Общая информация
На сегодняшний день существуют десятки платформ и операционных систем, сотни и даже тысячи способов разработки под эти платформы. Чтобы не мучиться с разработкой различных приложений на все популярные платформы мы приняли решение использовать современные веб технологии.
Для разработки приложений мы используем Node.JS. Большинство приложений написаны с использованием фраемворка Vue.JS, который рекомендуется использовать и для новых сервисов. Это позволит унифицировать все сервисы, чтобы их было проще передавать будущему поколению студентов.
Чтобы упростить жизнь разработчикам новых сервисов, мы не требуем разбираться с существующим исходным кодом, т.к. используем технологию single-spa для приложений на основе микрофронтендов. Для добавления функциональности, которая не затрагивает структуру приложения, нужно разобраться с кодом одного сервиса или разработать его с нуля.
Чтобы приложение удобно работало с любого устройства, могло работать оффлайн и поддерживало множество других крутых функций, мы используем технологию PWA. PWA (Progressive Web App) – это веб-технология, которая трансформирует сайт в приложение. Прямо из браузера его можно поставить на главный экран телефона, и оно будет отправлять push-уведомления и получит доступ к аппаратным средствам гаджета. И все это даже при нестабильном подключении или офлайн.
Разработка
Среды выполнения
У нас есть 2 среды:
- Production https://app.profcomff.com/. Среда для конечных пользователей. В этой среде запрещены devtools и в нее не выкатываем непроверенных изменений.
- Testing http://app.test.profcomff.com/. Среда для тестирования и разработки. В ней можно проводить эксперименты не боясь что-то сломать конечным пользователям.
Включение devtools
В тестовой среде и при разработке можно включить devtools, которые нужны, в первую очередь, для разработки отдельных компонентов и проверки их совместимости с последними стабильными компонентами.
Для включения встроенных в фраемворк средств разработки нужно:
- Перейти на http://app.test.profcomff.com/
- Открыть панель разработчика, в большинстве браузеров сработает нажатие на клавишу F12
- Ввести в JS консоль команду
localStorage.setItem('devtools', true);
- Перезагрузить страницу
Локальная разработка
Чтобы быстро влиться в разработку, рекомендуется проделать инструкции из репозитория https://github.com/profcomff/webapp-workplace