Surf Gear

Набор библиотек и инструментов от Surf для оптимизации разработки на Flutter

Задача

Поддержать мировое Flutter-сообщество, предоставляя открытый доступ к готовым решениям — разработкам Surf.

Решение

Мы в Surf работаем с Flutter с 2019 года. Мы активно участвуем в жизни профессионального сообщества: публикуем статьи на Хабре, записываем подкасты и ведём собственное YouTube-шоу. Мы не просто пользуемся фреймворком, но постоянно улучшаем его и помогаем развивать. Благодаря нашей инициативе, мы стали лидерами по разработке на Flutter в России. Именно команда Surf создала первый банк в Европе на этом фреймворке и является сооснователем первого в России официального сообщества Flutter-разработчиков.

Также мы много работаем над улучшением процесса разработки: пишем библиотеки и создаём открытые репозитории. В этом кейсе мы рассказали об одном из таких проектов — библиотеке Elementary.

Наиболее масштабным проектом является Surf Gear — это набор разных библиотек: от архитектурных решений до готовых UI-компонентов, общая цель которых — упрощение жизни Flutter-разработчика.

Мы стараемся быть максимально открытыми, поэтому наши стандарты разработки открыты и доступны на GitHub. Сегодня их используют не только наши коллеги, но и всё Flutter-сообщество.

Что такое Surf Gear, и как он появился

Surf Gear — это набор библиотек и инструментов, которые мы используем в разработке на Flutter. Все решения соответствуют нашему уровню качества, поддерживаются и развиваются командой. Стандарты качества мы установили для себя сами и прописали их во внутренней инструкции. Это позволило сохранить единство оформления и облегчило работу с поиском нужных материалов.

За время работы с фреймворком Flutter мы создали и протестировали много решений, которые получили широкое распространение по всему миру. Чтобы сделать их использование ещё более удобным, мы проанализировали, какими решениями участники комьюнити пользуются чаще всего, и упорядочили их в единую систему Surf Gear. Она стала своеобразной витриной качественных продуктов для Flutter. Каждый разработчик может обратиться к нашей системе и подобрать для своей задачи оптимальное решение.

Мы продолжаем за ней следить: исправляем баги, развиваем пакеты. Иногда сторонние разработчики приходят с запросами и пожеланиями, если это адекватный запрос, мы добавляем функциональность в пакет.

Структура Surf Gear

В основе Surf Gear лежит концепция Open Source — открытого программного обеспечения. Это зона роста для программиста — он может помочь профессиональному сообществу и сделать вклад в развитие технологии.

В Surf мы делаем проекты для бизнеса, а значит, сталкиваемся с самыми острыми коммерческими потребностями пользователей. Постепенно мы собрали библиотеку готовых решений, а затем появилось желание поделиться ими. Для структурирования процесса мы создали подробную внутреннюю документацию.

Мы продумали структуру идеального репозитория. Она должна включать следующие элементы:

Readme — небольшое текстовое описание. Мы создали гайд по написанию хорошего readme: какие блоки там должны быть и какую информацию необходимо включить. Цель readme — дать ответ на базовые вопросы.
Changelog — журнал изменений проекта. Мы используем систему управления версиями и конвенцию коммитов — это соглашение о том, как нужно писать сообщения о последних изменениях кода.
Простые примеры. Они позволяют программисту быстро сориентироваться: решает ли этот пакет его проблему. Важно, чтобы они были показательными, аккуратными и наглядными. По статистике, большинство разработчиков, которые сталкиваются с библиотекой или пакетом, сразу ищут примеры.
Тесты. Написание тестов — одна из приоритетных задач в формировании репозитория. Важно сделать так, чтобы при каждом следующем обновлении работа пакета не деградировала. Без тестов это сделать проблематично. Все пакеты, которые попадают на витрину Surf Gear, покрыты тестами.

Тест — это самый надёжный способ убедиться в том, что вы не сделаете хуже тем, кто вам доверяет и пользуется вашими решениями.

Михаил Зотьев

Техлид отдела Flutter-разработки в Surf

Автоматическая проверка. Для каждого инструмента, входящего в Surf Gear, мы настроили автоматическую проверку с помощью GitHub Actions. Это нужно для объективной оценки качества. Каждый раздел: документация, тестирование и сборка примеров — проходит анализ.

Одно из ключевых требований к любому решению, предложенному комьюнити, — польза.

Какие наши решения уже доступны в Surf Gear

Analytics

Это интерфейс для унификации работы с различными аналитическими сервисами. Основные компоненты:

AnalyticAction — засекает любое действие, ценное для аналитики. Как правило, это событие вроде «нажатие кнопки» или «открытие экрана». Основным критерием является возможность обработки AnalyticActionPerformer.
AnalyticActionPerformer — исполнитель определённых действий. Используется для инкапсуляции работы с определённым сервисом аналитики. Обычно реализуется путём преобразования AnalyticAction в нужный формат, а также вызова сторонней библиотеки.
AnalyticService — единая точка входа для нескольких AnalyticActionPerformers.

Bottom Sheet

Одно из самых популярных наших решений. Это небольшая выезжающая панель снизу, которую можно наблюдать почти во всех мобильных приложениях: от банковских до коммерческих. Во Flutter есть стандартный Bottom Sheet, он позволяет скроллить контент в этой панели. Но нам не хватало функциональности в стандартном решении. Мы создали вокруг него оболочку: добавили привязку к якорям и расширили возможности стандартного решения Flutter. Теперь панель может остановиться в середине экрана или в конце. С нашим решением можно, например, открыть клавиатуру внизу экрана с подкручиванием. Это даёт возможность печатать и видеть текст набора, он не закрывается клавиатурой.

Существует 2 типа BottomSheets:

BottomSheet — классическая выезжающая панель;
StickyBottomSheet — выезжающая панель с небольшим заголовком сверху: хэдером.

OTP autofill

OTP (one time password) — это одноразовый пароль. Мы создали плагин, который позволяет отслеживать SMS-сообщения, которые приходят для регистрации или авторизации. Для того чтобы этот код получать, есть ряд плагинов, которые используют в нативе. Нативная часть анализирует само SMS-сообщение, а разработчику отправляет данные по пришедшему коду, которые можно подставить в автозаполнение.

Push Notification

Библиотека для реализации push-уведомлений. С её помощью можно обработать входящие пуши, отобразить их пользователю и настроить переход по нажатию на нужную страницу. В ней уже реализованы основные настройки для работы с push-уведомлениями, такие как:

стратегия обработки входящих push-уведомлений;
спецификация под iOS и Android;
создана сущность Notificator, которая занимается запросом разрешения на показ уведомлений (только на iOS) и показом этих уведомлений;
есть возможность настроить время отправки уведомления;
предусмотрен учёт геопозиции пользователя.

Остаётся только настроить работу для своего приложения. Мы используем эту библиотеку в приложениях для ритейла и паблишера The Hole.

Surf Lint Rules

Это набор правил для статического анализатора. Такие правила — это техника безопасности в программировании на определённом языке. Мы сформировали их на основе часто совершаемых ошибок.

Есть автоматизированные механизмы, которые позволяют отлавливать проблемы в коде: анализировать его и подсвечивать предупреждения. Такие опции на уровне языка позволяют искать баги. Можно добавлять и более строгие правила: наборы действий того, что делать не надо.

У нас есть свой набор требований, который позволяет писать код более чисто, избегать часто встречающихся ошибок. Большинство мы можем отлавливать на этапе написания кода. Это позитивно сказывается на разработке: если сразу следовать строгому алгоритму, то большинства простых ошибок можно избежать.

Surf Logger

Это регистратор для предоставления информации о событиях в коде. В разработке принято логировать сущности — создавать записи. С Surf Logger можно вести записи любых событий и действий. Разработчик указывает, какую строчку кода нужно пометить и залогировать, затем изучает полученную информацию. Собранные данные можно отправить в консоль, например, для изучения ошибки.

Surf Util

Это небольшие решения, которые собраны в один пакет и фигурируют во многих наших проектах как базовые вспомогательные утилиты. Например, одна из утилит позволяет легко выключить значок оверскролла — обозначения конца страницы.

Swipe Refresh

Виджет для обновления страницы свайпом. Этот инструмент, с помощью которого можно настроить одно из самых частых действий в любом приложении. Если потянуть экран вниз, появляется значок обновления страницы и загружаются новые данные.

Этот виджет может:

обновить состояние страницы (перезагрузить);
идентифицировать обновление прокрутки;
обновить страницу в стиле Material;
обновить страницу в стиле Cupertino.

Render Metrics

Этот пакет помогает получить координаты на экране.

С помощью Render Metrics можно:

получить полный набор координат позиционирования нужного виджета в любое время;
рассчитать разницу в позиционировании между двумя виджетами.

Bottom inset observer

Это удобная утилита для отслеживания различных платформенных состояний. Есть разные механизмы отслеживания того, что появляется внизу экрана. Например, когда выезжает клавиатура, она занимает определённое место на экране — перекрывает его нижнюю часть.

Результат

В каждом проекте мы что-то используем из Surf Gear. Так он и родился: мы собрали свои самые популярные решения, проанализировали, чем чаще всего пользуемся. Мы создали строгие требования и привели каждый пакет в соответствии с ними. В процессе анализа мы смотрели на продукт с точки зрения пользы и запросов комьюнити.