[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, которые нужны, в первую очередь, для разработки отдельных компонентов и проверки их совместимости с последними стабильными компонентами.

Для включения встроенных в фраемворк средств разработки нужно:

  1. Перейти на http://app.test.profcomff.com/
  2. Открыть панель разработчика, в большинстве браузеров сработает нажатие на клавишу F12
  3. Ввести в JS консоль команду localStorage.setItem('devtools', true);
  4. Перезагрузить страницу

Локальная разработка

Чтобы быстро влиться в разработку, рекомендуется проделать инструкции из репозитория https://github.com/profcomff/webapp-workplace