App Architecture & Platforms
Преимущества Electron vs нативное мобильное приложение vs WebView
Electron (десктоп)
Плюсы:
- Один кодовой базой покрывает Windows, macOS, Linux
- Используешь знакомые веб-технологии (HTML/CSS/JS)
- Полный доступ к файловой системе и системным API через Node.js
- Быстрая разработка для десктопа
Минусы:
- Большой размер дистрибутива (Chromium внутри, ~150 МБ)
- Высокое потребление RAM
- Нет нативного UI
Нативное мобильное приложение vs WebView
| Нативное (Swift/Kotlin) | WebView (Cordova, Capacitor) | |
|---|---|---|
| Производительность | Максимальная | Ограничена рендером веб-движка |
| UI | Нативные компоненты ОС | HTML/CSS, не выглядит нативно |
| Доступ к API | Полный (камера, Bluetooth, NFC) | Через плагины, ограниченно |
| Разработка | Нужен Swift или Kotlin | Можно веб-стек |
| Анимации | 60+ fps без усилий | Могут быть лаги |
Что такое PWA?
PWA (Progressive Web App) — это веб-приложение, которое ведёт себя как нативное: устанавливается на устройство прямо из браузера, работает офлайн, отправляет push-уведомления и не имеет адресной строки при запуске.
Три кита PWA:
- Service Worker — JS-файл, работающий в фоне отдельно от страницы. Перехватывает сетевые запросы, управляет кешем, позволяет работать офлайн
- Web App Manifest — JSON-файл с метаданными приложения (иконка, название, цвет темы, режим отображения
standalone) - HTTPS — обязательное требование, без него Service Worker не работает
{
"name": "My App",
"start_url": "/",
"display": "standalone",
"icons": [{ "src": "/icon.png", "sizes": "192x192" }]
}Что умеет PWA:
- Работать офлайн (через кеш в Service Worker)
- Устанавливаться на главный экран без App Store / Google Play
- Получать push-уведомления
- Обновляться автоматически при каждом запуске
- Получать доступ к камере, микрофону, геолокации, Bluetooth, NFC
Ограничения:
- На iOS push-уведомления работают только для PWA, добавленных на домашний экран, начиная с iOS 16.4 (2023); часть ограничений (лимиты кеша, фоновая активность) сохраняется
- Нет доступа к некоторым системным API (как у нативного приложения)
- Нельзя публиковать в App Store напрямую (хотя Google Play — можно через TWA)
Кто использует: Telegram Web, Starbucks, AliExpress, Uber, Spotify.
Типы приложений — общая карта
| Тип | Где работает | Технологии | Когда подходит |
|---|---|---|---|
| MPA (Multi Page Application) | Браузер | HTML + серверный рендеринг (PHP, Rails) | Контент-сайты, блоги, интернет-магазины |
| SPA (Single Page Application) | Браузер | React, Vue, Angular | Дашборды, админки, web-apps |
| PWA (Progressive Web App) | Браузер + “установка” | SPA/MPA + Service Worker + Manifest | Замена мобильного приложения без магазина |
| SSR (Server-Side Rendering) | Браузер | Next.js, Nuxt | Когда нужен SEO + скорость первой загрузки |
| SSG (Static Site Generation) | Браузер | Next.js, Gatsby, Astro | Блоги, документация, лендинги — контент редко меняется |
| Нативное мобильное | iOS / Android | Swift, Kotlin | Максимальная производительность, доступ к системным API |
| Кроссплатформенное мобильное | iOS + Android | React Native, Flutter | Одна кодовая база, близко к нативному |
| WebView-приложение | iOS / Android | Cordova, Capacitor | Быстрая мобильная обёртка над веб-стеком |
| Десктопное (Electron) | Windows / macOS / Linux | HTML/CSS/JS + Node.js | Десктоп-приложение на веб-стеке |
| Десктопное нативное | Windows / macOS / Linux | C++, C#, Swift | Максимальный контроль, системные приложения |
SSR и SSG — коротко
SSR (Server-Side Rendering): страница рендерится на сервере при каждом запросе и отдаётся как готовый HTML. Хорош для SEO и быстрого первого рендера, но нагружает сервер.
SSG (Static Site Generation): страницы генерируются один раз во время сборки и отдаются как статические файлы. Максимально быстро, легко деплоить (хоть на GitHub Pages), но не подходит для динамического контента.
Современные фреймворки (Next.js, Nuxt) позволяют комбинировать подходы: одни страницы через SSG, другие через SSR, третьи как SPA — в зависимости от задачи.
Картографические библиотеки и API
| Библиотека / API | Особенность |
|---|---|
| Leaflet.js | Лёгкая, open-source, хорошо для OSM-тайлов |
| Google Maps API | Мощный, платный сверх лимита |
| Mapbox GL JS | Векторные тайлы, WebGL, красивые карты |
| Yandex Maps API | Актуально для RU/СНГ проектов |
| OpenLayers | GIS-ориентирован, сложнее Leaflet |