about.md

"Мои задачи AI+" - это винтажное PWA приложение, заботливо организующее ваш день, написанное на чистом вдохновении и представленное с помощью любовно разработанного интерфейса и мощью Искусственного Интеллекта! 💯.

Одно приложение для работы на любом устройстве с любым размером экрана!

• Язык и библиотеки

  • Язык программирования: приложение разработано на Typescript.
  • React.js выбрана в качестве главной библиотеки для работы с интерфейсом.
  • Zustand.js для простого и удобного управления состоянием приложения.
  • React-toastify.js используется для душевного оповещения пользователя о событиях в приложении.
  • Pino.js для логгирования во время разработки и в продакшене.

• Архитектура и Организация Кода

  • Прагматичная архитектура: применена "слоёная" архитектура для организации кода и улучшения его поддерживаемости в реальных проектах с использованием модулей и функционального программирования - самая большая и самая значимая фича проекта.
  • State manager: для хранения и обработки данных уровня приложения.
  • Домен как пакет: попытка реального разделения приложения на слои - выделение домена в отдельный пакет.
  • Context: для проброса данных глубоко в дерево компонент без props drilling.
  • API как прокси + типизация позволяет один раз реализовав его больше никогда его не изменять - никакого бесполезного кода при реализации API - только прокси объект + описание методов API на typescript.
  • Использование шаблона ResultOrError исключает необходимость постоянной обработки исключений.

• Инфраструктура

  • Настоящий "serveless": Github Pages как хранилище ресурсов и сервис-воркер в качестве бэкэнда и для обеспечения оффлайн работы приложения.
  • Прокси-сервер для ИИ API: Вынужденный инфраструктурный элемент в системе по причине того, что провайдеры ИИ опасаются использования доступа к их сервисам из браузера. Реализован как публичный сервер API с белым списком доменов для доступа (github.io)

• Технологии

  • ИИ: нейронные сети для для извлечения данных о сущности "Задача" из текста на естественном языке.
  • Web Speech API: голос - самый удобный способ получения информации человеком. В приложении можно выбрать голос и громкость с которой он будет озвучивать информацию.
  • WakeLock API: "умный" Wake Lock для улучшения пользовательского UX при работе с задачей - даем пользователю завершить работу с задачей без блокировки экрана на мобильных устройствах но не садим батарею вечным локом.
  • Буфер обмена для улучшения пользовательского UX при обмене данными.
  • Звук и вибрации для улучшения нотификации для взаимодействия с приложением.
  • Управление данными: удобные функции импорта, экспорта и очистки данных для управления и переноса их между устройствами, а так же для их архивирования.
  • Синхронизация данных во вкладках для обеспечения согласованности состояния при обновлении данных в бэкэнде предусмотрена синхронизация данных во всех вкладках приложения.

• Стилизация и Верстка

  • БЭМ (Блок, Элемент, Модификатор) для организации стилей классов и улучшения читаемости и поддерживаемости кода.
  • Использование элементов дизайн-системы для стандартизации компонентов и обеспечения единого стиля.

• Навигация и Роутинг

  • Реализация роутера для управления навигацией внутри приложения и обеспечения переходов между различными страницами.

• UI/UX

  • Реально адаптивный дизайн: приложение сверстано так чтобы отлично выглядеть на любых размерах экранов.
  • Поддержка светлой и темной тем: возможность настройки внешнего вида приложения с использованием светлой и темной темы.
  • Поддержка жестов: использование свайпа для управления навигацией и улучшения взаимодействия с тач-устройствами.
  • Учет особенностей пользователей с ограничениями зрения: поддержка изменение при помощи жестов масштаба интерфейса для улучшения доступности пользователей с ограничениями зрения. В настольном браузере просто увеличьте масштаб и приложение подстроится под него.
  • ViewTransitions для плавного изменения переходов между представлениями приложения.

• Безопасность и конфиденциальность

  • Strict CSP для защиты от XSS и других атак на безопасность.
  • Trusted Types для защиты от DOM XSS атак и обеспечения безопасной работы с динамическим контентом.
  • Хранение данных на устройстве пользователя: данные не передаются по сети ни в какой форме и хранятся исключительно на устройстве пользователя в конкретном браузере!

• Оптимизации и Производительность

  • ESM modules: поддержка ESM модулей как в приложении так и в инструментах позволяет улучшить производительность так и уменьшить объем используемого кода приложения.

  • Code splitting: разделение кода на чанки для улучшения производительности приложения и уменьшения размера загружаемых файлов.

  • Оптимизация кода при помощи Terser уменьшает размер и улучшает эффективность работы кода.

  • Минификация кода позволяет сократить время загрузки и ожидание пользователем.

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

  • Хеширование всех ресурсов позволяет сервисворкеру вечно хранить и обновлять ресурсы избегая конфликта версий ресурсов, что улучшает общую производительность.

  • SVG symbols: svg иконки используются в разметке как ссылки на символы - это сильно сокращает количество используемых нод в разметке при использовании иконок в списках.

• Инструменты разработки и сборки

  • Webpack для тонкой настройки управления сборкой проекта.
  • Webpack devServer не только как сервер для статики проекта во время разработки, но и как альтернативный дополнительный сервер API для проксирования запроса к провайдерам ИИ
  • Esbuild loader для быстрой сборки проекта во время разработки.
  • Babel плагины для транспиляции фич для разных версий браузеров, а также транспиляции кода проета для удаления специфичных атрибутов и отладочного кода в продакшен сборке для уменьшения размера и повышения производительности кода.
  • Eslint-plugin-boundaries для управления границами доступности кода между слоями приложения.
  • Statoscope webpack plugin для анализа качества сборки, обнаружения дубликатов ресурсов, попадающих в сборку, а так же для анализа эффективности их использования и распределения в чанках.

• Конфигурация и настройка

  • Внешний пакет с конфигурациями: Использование внешнего пакета конфигурации для простой конфигурации приложения и синхронизации конфигураций различных приложений из одного источника.
  • Алиасы и шорткаты для улучшения читаемости и управляемости кода при импорте модулей.

• Надежность

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

• Обновление и управление версиями

  • Старт приложения с обновлением сервис-воркера; обновление сервис-воркера при старте приложения без необходимости диалогов с пользователем, как в приличных публичных приложениях.