Как устроена разработка приложений
Прежде чем открывать FlutterFlow, полезно понимать, как вообще делаются приложения, — тогда понятнее, что именно берёт на себя визуальный конструктор.
Раньше разработка означала много написанного кода. Код — это набор инструкций для устройства, которое их выполняет.
Инструкции обычно делят на две части: фронтенд и бэкенд.
Фронтенд и бэкенд
Фронтенд — то, с чем пользователь имеет дело напрямую:
- описание видимых элементов: текста, кнопок и прочего;
- их расположение на экране;
- реакция приложения на действия пользователя и на полученные данные.
Бэкенд — это логика посложнее и хранение данных:
- база данных, которая хранит, отдаёт и принимает данные;
- готовые сервисы: провайдеры аутентификации, платёжные платформы;
- бизнес-логика — написанная кодом или собранная в low-code-инструменте.
Общаются они, как правило, через API. Бэкенд выставляет наружу endpoint’ы, фронтенд шлёт на них запросы. Бэкенд обрабатывает запрос и возвращает данные, а фронтенд по ним меняет то, что видит пользователь.
Где выполняется код
Код бэкенда выполняется на сервере — в дата-центре или в облаке вроде AWS, Google Cloud и Azure. Сервер принимает запросы, обрабатывает данные и отвечает фронтенду.
Код фронтенда выполняется на устройстве пользователя: в браузере, если это веб-приложение, или в операционной системе, если мобильное. Его дело — показать интерфейс и обработать действия пользователя.
Архитектура фронтенда
При работе над фронтендом стоит держать в голове несколько принципов:
- Компонентный подход. Интерфейс разбивается на переиспользуемые блоки, каждый отвечает за свой участок. Код становится модульным, а правки — точечными.
- Управление состоянием. Состояние — это данные, которые приложение показывает, и всё, что меняется от действий пользователя.
- Адаптивность. Приложение должно нормально выглядеть на разных размерах экрана и в обеих ориентациях; для этого используют гибкие макеты и масштабируемые ресурсы.
- Производительность. Плавность достигается за счёт экономной перерисовки, меньшего числа сетевых запросов и умеренного веса ресурсов.
Эти же понятия лежат в основе работы во FlutterFlow: слои приложения разложены по тому же принципу, а устройство проекта прямо повторяет структуру Flutter-приложения.