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

Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI.

С проблемой выбора библиотеки рано или поздно сталкивается почти каждый разработчик, и порой решение может быть нетривиальным. Возникают вопросы: чемруководствоваться при выборе библиотеки, какие популярные решения предлагает рынок, какие у них плюсы и минусы? Обзоры и отзывы не всегда помогают найти решение.

В мире разработки не существует идеального варианта на все случаи. Поэтому встатье ярасскажу, как мы решаем эту задачу, и разберу на примерах анализа нескольких популярных решений, как выбрать библиотеку React-компонентов длясвоего проекта.

Основные критерии выбора библиотеки

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

Типы компонентов приложения. От типа приложения зависит, какие компоненты вам потребуются. Часто достаточно набора кнопок/чекбоксов, базовых полей ввода, списков/меню с готовыми стилями. Значит, можно воспользоваться простыми компонентами с минимальным количеством настроек и готовыми стилями.

Настройки, форматирование и интерактивность в дизайне. Если вам нужно значительно отформатировать и стилизовать свои компоненты, это тоже важно решить заранее.

Когда требования четко сформулированы, ответьте на вопросы:

• Хорошо ли составлена документация проекта, есть ли интерактивные примеры?

• Насколько активно поддерживается проект?

• Сколько в проекте issues и как быстро они решаются?

• Проект бесплатный или коммерчески лицензированный?

• Насколько легко настраиваются компоненты?

• Покрыт ли код библиотеки тестами?

• Какие браузеры и платформы поддерживает библиотека?

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

Я отобрала следующие библиотеки, чтобы наглядно показать процесс анализа по критериям:

• Material-UI,

• Semantic-UI-React,

• yandex-ui,

• arui-feather,

• Korus-UI.

С одной стороны, в этом списке представлены наиболее популярные проекты Material-UI и Semantic-UI-React, которые были созданы одним разработчиком и со временем обросли большим сообществом.

С другой стороны библиотеки, созданные внутри крупных компаний (Яндекс, Альфа Банк) для своих проектов, которые постепенно обрели популярность в качестве opensource решений.

Далее рассмотрим сравнение библиотек в разрезе определенных выше критериев.

Компонентный состав

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

Компоненты библиотек можно разделить на несколько групп.

Layout-компоненты

Контейнеры, карточки, таблицы, гриды и прочие. Основные характеристики:

• Отвечают только за отображение;

• Часто принимают на вход только props.children;

• Не имеют своего состояния и методов жизненного цикла;

• Примеры: h1, section, div, span, Icon, Avatar.

Готовые дизайн-системы библиотек сильно упрощают верстку, если проекту ненужна своя тема стилей. Например, Material-UI и Semantic-UI могут вполне справиться сэтой задачей. Однако в крупных коммерческих проектах своя дизайн-система икастомизация стилей библиотек будет избыточной.

Компоненты-контролы (controls)

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

Основные характеристики:

• Отвечают за отображение и не имеют внутреннего состояния;

• Принимают данные и функции обратного вызова в качестве props;

• Состояние компонентов связано в основном только с UI (disabled, required, isLoading).

Сложные модульные компоненты

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

Основные характеристики:

• Имеют состояние;

• Предоставляют данные и логику layout-компонентам (валидация, форматирование вывода, автодополнение);

• Комбинируют другие компоненты.

*Material-UI использует нативный календарь браузера в компонентах с выбором даты

**Основные компоненты библиотеки, для которых есть примеры в документации

***Korus-UI создает обертку для всех основных HTML-тегов c единым API

Почти 50% компонентного состава Material-UI и Semantic-UI-React и около 30% вбиблиотеках yandex-ui и arui-feather малофункциональные layout-компоненты. ВKorus-UI более 70% сложные модульные компоненты.

Кастомизируемость

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

Material-UI

• С помощью MuiThemeProvider. Компонент использует контекст библиотеки React для передачи объекта с темой всем дочерним компонентам.

• Через добавление классов. Все компоненты поддерживают атрибут className.

Для кастомизации дочерних компонентов необходимо воспользоваться атрибутом classes.

Библиотека заточена на применение CSS-in-Js, что может вызвать определенные трудности, если стили для приложения содержатся в CSS-файлах. Для внедрения кастомных стилей CSS-in-Js предоставляется HOC withStyles() либо хук makeStyles() для функциональных компонентов.

Semantic-UI-React

У Semantic-UI-React нет своей темы, можно использовать стили Semantic-UI.

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

Это:

• Изменение размеров контейнера страницы, шрифтов и цветов по умолчанию с помощью site.variables;

• Переопределение css-переменных ;

• Объединение нескольких отдельных тем компонентов в один файл theme.config;

• Изменение пути к assets и использование кастомного иконочного шрифта.

yandex-ui

У библиотеки Яндекса несколько пресетов с темами. Их можно подключить сразу для всего проекта или применить стили для определенных компонентов.

Возможности:

• Создание кастомной темы с помощью инструмента themekit;

• Переопределение значения (токены) в теме;

• Дизайн-токены в формате yaml или json. Их можно собрать в итоговый файл (css, json, js, ios, android) и подключить к проекту.

arui-feather (Альфа Банк)

У библиотеки Альфа Банка нет руководства по кастомизации стилей в общедоступной документации. Компоненты поддерживают атрибут className, возможно задать кастомные классы только их оберткам.

Korus-UI (СберКорус)

• Кастомизация темы с помощью компонента LedaProvider. Он использует контекст библиотеки React для передачи объекта с темой всем дочерним компонентам.

• Можно написать кастомные стили под имеющуюся вёрстку. Полный список классов вкомпонентах находится в разделе API-документации (см.атрибут theme). Их можно переопределять глобально для всех компонентов одного типа или для каждого индивидуально.

Расширяемость

В работе с библиотекой может возникнуть потребность изменить внутренний элемент компонента. Например, добавить картинку или иконку в поле ввода, заменить элемент нановый (в компонент Loader передать кастомный элемент спиннера).

Рассмотрим решения.

Material-UI

Позволяет изменять корневые элементы с помощью атрибута component.

Например, компонент List по дефолту рендерит <ul> элемент. Его можно заменить другим элементом или React компонентом:

<List component="nav">  <ListItem button><ListItemText primary="Trash" /></ListItem><ListItem button><ListItemText primary="Spam" /></ListItem></List>

Semantic-UI

Semantic-UI-React компоненты поддерживают схожий по функциональности атрибут as:

<Button as='a' />

Переданный элемент или React-компонент заменяют корневой элемент. Все неподдерживаемые пропсы передаются корневому элементу в качестве атрибутов.

yandex-ui

Предлагает использовать библиотеку render-override. В ней есть набор хуков икомпонентов для реализации переопределения элементов внутри составного компонента.

Пример:

import React from 'react'import { useRenderOverride } from '@yandex/ui/lib/render-override'const ElementOriginal = ({ children }) => <div>{children}</div>const MyComponent = ({ renderElement }) => {  const Element = useRenderOverride(ElementOriginal, renderElement) return ( <>   <Element />   </>  )}

В библиотеке yandex-ui расширяемость для существующих компонентов нереализована.

arui-feather (Альфа Банк)

Расширяемость компонентов не реализована.

Korus-UI

Расширяемость внутренних элементов библиотеки с помощью специального API. Навход компоненту можно передать атрибут из названия элемента и суффикса Render. Атрибуту присваивается функция, возвращающая элемент, которым заменяют существующий.

Простейший пример:

labelRender={() => <MyCustomLabel />}

Структура метода позволяет вносить изменения максимально гибко:

({ Element, elementProps, componentProps, componentState }) => React.Node

• Element - сам элемент

• elementProps - props элемента

• componentState, componentProps - для удобства дополнительно приходят объекты с props и state всего компонента

Если мы хотим, чтобы новый элемент принимал на вход те же пропсы, можно отредактировать пример:

<L.CheckBox  labelRender={({ elementProps }) => <MyCustomLabel {elementProps} />}>  Label</L.CheckBox>

Типизация

Для типизации React-проектов применяются 2 основных инструмента:

• Typescript

• PropTypes

В документации React для большой кодовой базы отдается предпочтение Typescript. Этоинструмент статической типизации, который позволяет отлавливать большинство ошибок еще до исполнения кода. У PropTypes проверка типизации осуществляется только после запуска кода этосущественный недостаток по сравнению с другими инструментами.

В основном рассматриваемые библиотеки для типизации используют Typescript. УSemantic-UI основная библиотека написана на ванильном JS, а Typescript используется только в Semantic-UI-React, созданной для интеграции с библиотекой React.

Покрытие тестами

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

Ради справедливости стоит отметить, что автоматические тесты не панацея. Высокий процент покрытия не гарантирует качество теста и охват основных пользовательских сценариев.

Но без покрытия тестами невозможно проверить совместную работу компонентов (интеграционное тестирование) и их работу вообще (модульное тестирование).

Сравним библиотеки на покрытие тестами.

Документация

Качественная библиотека компонентов должна предоставлять хорошо структурированный сайт с документацией, которая включает большое количество интерактивных примеров. Storybook с демонстрацией функций компонентов может существенно сэкономить время при использовании библиотеки.

Поддержка

Иногда возникает проблема, которая требует сторонней помощи. Нужно заранее определить, как ее получить.

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

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

В разделе Pulse на GitHub можно ознакомиться со статистикой репозитория по количеству Pull Request и коммитов за определенный период времени. Он находится навкладке Insights каждого репозитория. Рассмотрим статистику по выбранным библиотекам.

Material-UI

Semantic-UI

yandex-ui

arui-feather (Альфа Банк)

Korus-UI (СберКорус)

Популярность

Популярность библиотеки принято оценивать по звездам на GitHub иколичеству скачиваний npm-пакета. Показатели легко проверить и измерить, онисвидетельствуют одоверии разработчиков и наличии сообщества у библиотеки. Это упрощает ееиспользование и поиск решений для возникающих проблем.

Однако стоит помнить, что популярность это также результат хорошей маркетинговой стратегии и SEO-оптимизации, которые могут обеспечить библиотеке первые места в выдаче поисковика. Поэтому следует изучить обсуждения в блогах инафорумах, например, на Stackoverflow, Medium, DEV. Обсуждения находятся вразделе issues проекта.

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

Работа с формами и валидация данных

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

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

Валидация может быть простой, например, на непустое значение (сделать поле обязательным). Или более сложной (кросс-валидация), когда данные в одном поле формы учитываются при проверке значений в других полях.

Сравним работу с формами в различных библиотеках на конкретном примере.

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

Korus-UI

const BasicForm = () => (  <L.Div>    <L.Input      isRequired      requiredMessage="Login is required"      form="form"      name="login"      placeholder="Login"    />    <L.Input      isRequired      requiredMessage="Password is required"      form="form"      name="password"      placeholder="Password"    />    <L.Button _warning form="form">      Submit    </L.Button>  </L.Div>);

Material-UI

const BasicForm = () => {  const [login, setLogin] = React.useState("");  const [loginError, setLoginError] = React.useState(false);  const [password, setPassword] = React.useState("");  const [passwordError, setPasswordError] = React.useState(false);  return (    <div>      <form        onSubmit={(e) => {          e.preventDefault();          setLoginError(!login);          setPasswordError(!password);        }}      >        <p>          <TextField            error={loginError}            placeholder="Login"            value={login}            onChange={(e) => {              setLoginError(false);              setLogin(e.target.value);            }}            onBlur={(e) => {              setLoginError(!login);            }}            helperText={loginError && "Login is required"}          />        </p>        <p>          <TextField            error={passwordError}            placeholder="Password"            value={password}            onChange={(e) => {              setPasswordError(false);              setPassword(e.target.value);            }}            onBlur={(e) => {              setPasswordError(!password);            }}            helperText={passwordError && "Password is required"}          />        </p>        <Button type="submit" color="primary" variant="contained">          Sign Up        </Button>      </form>    </div>  );};

Semantic-UI-React

const BasicForm = () => {  const [login, setLogin] = React.useState("");  const [loginError, setLoginError] = React.useState(false);  const [password, setPassword] = React.useState("");  const [passwordError, setPasswordError] = React.useState(false);  return (    <div>      <Form        onSubmit={(e) => {          e.preventDefault();          setLoginError(!login);          setPasswordError(!password);        }}      >        <Form.Group>          <Form.Input            error={loginError && { content: "Login is required" }}            placeholder="Login"            name="login"            value={login}            onChange={(e) => {              setLoginError(false);              setLogin(e.target.value);            }}            onBlur={(e) => {              setLoginError(!login);            }}          />          <Form.Input            error={passwordError && { content: "Password is required" }}            placeholder="password"            name="password"            value={password}            onChange={(e) => {              setPasswordError(false);              setPassword(e.target.value);            }}            onBlur={(e) => {              setPasswordError(!password);            }}          />          <Form.Button content="Submit" />        </Form.Group>      </Form>    </div>  );};

arui-feather

const BasicForm = () => {  const [login, setLogin] = React.useState("");  const [loginError, setLoginError] = React.useState(false);  const [password, setPassword] = React.useState("");  const [passwordError, setPasswordError] = React.useState(false);  return (    <Form      onSubmit={(e) => {        e.preventDefault();        setLoginError(!login);        setPasswordError(!password);      }}    >      <FormField>        <Input          error={loginError && "Login is required"}          placeholder="Login"          value={login}          onChange={(value) => {            setLoginError(false);            setLogin(value);          }}          onBlur={(e) => {            setLoginError(!login);          }}        />      </FormField>      <FormField>        <Input          error={passwordError && "Password is required"}          placeholder="Password"          value={password}          onChange={(value) => {            setPasswordError(false);            setPassword(value);          }}          onBlur={(e) => {            setPasswordError(!password);          }}        />      </FormField>      <FormField>        <Button view="extra" type="submit">          Submit        </Button>      </FormField>    </Form>  );};

yandex-ui

const BasicForm = () => {  const [login, setLogin] = React.useState("");  const [loginError, setLoginError] = React.useState(false);  const [password, setPassword] = React.useState("");  const [passwordError, setPasswordError] = React.useState(false);  return (    <form      onSubmit={(e) => {        e.preventDefault();        setLoginError(!login);        setPasswordError(!password);      }}      className={cnTheme(theme)}    >      <Textinput        error={loginError}        placeholder="Login"        value={login}        onChange={(e) => {          setLoginError(false);          setLogin(e.target.value);        }}        onBlur={(e) => {          setLoginError(!login);        }}        hint={loginError && "Login is required"}      />      <Textinput        error={loginError}        placeholder="Password"        value={password}        onChange={(e) => {          setPasswordError(false);          setPassword(e.target.value);        }}        onBlur={(e) => {          setPasswordError(!login);        }}        hint={passwordError && "Password is required"}      />      <Button type="submit" view="action">        Submit      </Button>    </form>  );};

Как видно из примеров, в Korus-UI задача создания формы с валидацией решается парой дополнительных атрибутов, тогда как в остальных библиотеках требуется достаточно много кода и проверок.

В Material-UI и yandex-ui нет компонента формы, в Semantic-UI-React и arui-feather компонент формы является простой оберткой тега <form> и не предоставляет никакой дополнительной функциональности.

Встроенная валидация полей отсутствует во всех рассмотренных библиотеках, кроме Korus-UI. Для реализации более сложной логики понадобится еще одна библиотека.

Сравнительный анализ библиотек React-компонентов

Подведем итог сравнительного анализа пяти библиотек React-компонентов.

В этой таблице приведены только универсальные критерии для оценки качества инструментов. Кроме них, на выбор библиотеки значительно влияют субъективные факторы и конкретные требования проекта.

Далее я расскажу, на какие факторы ориентировались мы в СберКорусе, и как было принято решение о создании своей библиотеки.

Почему Korus-UI

Может возникнуть вопрос: зачем нужна еще одна библиотека? На рынке уже существует большое количество библиотек компонентов React на любой вкус.

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

Были и объективные причины: недостаточное покрытие тестами кодовой базы, низкая активность в репозиториях библиотек. При разработке коммерческих проектов отсутствие своевременной поддержки со стороны команды библиотеки может стать досадной причиной срывов дедлайнов.

С учетом всех факторов в компании было принято решение создать свою библиотеку React-компонентов, которая упростила бы разработку фронтенда на всех будущих проектах. Кроме того, при большом количестве крупных заказов возникает острая необходимость в едином стеке технологий и универсальных инструментах для всех проектов. Ясно, что такие инструменты должны соответствовать высоким стандартам качества, предоставлять гибкие возможности по расширяемости и кастомизируемости.

На разработку библиотеки Korus-UI ушло 1,5 года. В процессе создания мы ориентировались на лучшие практики разработки opensource-библиотек.

Какие преимущества предоставляет Korus-UI

Формы и валидация

В Korus-UI подход к построению форм принципиально иной: поля и кнопка отправки формы связываются атрибутом form, в который передается строка с названием формы. Так элементы одной формы могут находиться в разных контейнерах, подключаться динамически, никакие общие обертки им не нужны. При этом создается объект формы, ккоторому можно получить доступ в обработчиках событий или с помощью метода L.form(). Есть возможность передать кнопке массив из названий форм, чтобы валидировать и отправлять несколько форм одним кликом.

У библиотеки Korus-UI удобный обработчик onValidationFail, который позволяет получить объект формы, не прошедшей валидацию. А еще есть приятный бонус прокрутки к невалидным полям.

Валидация в Korus-UI это отдельный компонент. Его основные фичи:

• Валидация поля функцией или RegExp

• Готовые валидаторы

• Один или несколько валидаторов для каждого поля со своими сообщениями

• Настраиваемые сообщения (текст и внешний вид)

• Задание валидности поля извне через атрибут isValid

• Валидация компонентов в состоянии unmounted

• Валидация полей по потере фокуса, сабмите формы и по событию в приложении

• Прокрутка к невалидным полям при сабмите формы

• Валидация нескольких форм одной кнопкой

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

Единообразный API

Все компоненты поддерживают атрибуты, начинающиеся с нижнего подчеркивания _. Такие атрибуты будут преобразованы в имена css-классов:

<L.Div _flexBox> -> <div class="flex-box"></div>

Атрибут className также поддерживается.

В каждый компонент можно передать атрибут theme, который содержит набор css-классов для элементов компонента.

Все компоненты поддерживают атрибуты с суффиксом Render (см. раздел расширяемость).

Поведение и структура события расширены, соблюдается единый стандарт для всех компонентов:

{  Event, // оригинальное событие, сгенерированное React'ом  // событие расширено объектом component, которое содержит данные из компонента component: {  isValid?: boolean, // признак валидности компонента, есть только в onBlurname?: string, // имя формы, к которой привязан компонентvalue: any, // значение компонента // другие свойства объекта (см. API компонента)}}

Названия атрибутов с булевыми значениями начинаются с:

is: isOpen, isValid, isRequired, isDisabled

has: hasCloseButton

should: shouldCorrectValue

Все компоненты поддерживают атрибут ref.

Korus-UI расширяет механизм ref, принятый в React.

Недостатки Korus-UI

Сейчас библиотека используется в основном только в проектах СберКоруса, у нее пока не сформировалось свое сообщество. Так что вы не сможете получить информацию изблогов или на форумах, но всегда можете создать issue или обратиться кразработчикам библиотеки напрямую и быстро получить обратную связь.

Еще можно отметить отсутствие поддержки мобильных платформ iOS и Android. Сейчас библиотека гарантирует поддержку только последних версий популярных браузеров. Подробная информация приведена в сравнительной таблице выше.

Итоги

Мы подробно рассмотрели основные критерии выбора библиотеки React-компонентов и проанализировали библиотеки Material-UI, Semantic-UI-React, arui-feather (Альфа Банк), yandex-ui, Korus-UI (СберКорус), опираясь на критерии качества.

Вот коротко то, что нужно учесть при выборе библиотеки:

• Собственные нужды и требования

• Кастомизируемость

• Расширяемость

• Типизацию

• Покрытие тестами

• Наличие техподдержки

• Документацию

• Отзывы и активность сообщества библиотеки

С учетом всех требований мы разработали собственную библиотеку Korus-UI, которая имеет все шансы стать достойным конкурентом существующим на рынке инструментам. Библиотека активно развивается, количество проектов, использующих Korus-UI в компании постоянно растет.

В ближайшее время мы добавим новые компоненты. Также в планах расширение тестового покрытия, перевод на английский язык документации и актуализация Storybook.

Библиотека Korus-UI выложена в opensource и доступна на GitHub. Это первый шаг для нашей компании в opensource, и мы уверены, что не последний:)

Отдельно хочу выразить благодарность команде разработчиков СберКоруса, отцу иидейному вдохновителю библиотеки Артёму Повольских. Если вам интересно, как устроена фронтенд-разработка в СберКорусе, читайте статью Артёма.

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

Набор полезных, но не очень известных инструментов и библиотек Android.

Работая над статьями о 30 лучших библиотеках и проектах Android 2019 г. и 25 лучших библиотеках и проектах Android 2020 г., я наткнулся на множество замечательных инструментов и проектов, которые могут пригодиться в разработке приложений для Android ниже они приведены в случайном порядке. Пользуйтесь.

1. AinD Android (Anbox) в Докере

AinD запускает приложения Android, помещая контейнеры Anbox в Докер.

В отличие от аналогичных проектов на основе виртуальных машин, AinD может выполняться на экземплярах IaaS без поддержки вложенной виртуализации. Docker Hub: aind/aind.

Предназначение:

• Защита от кражи (см. часто задаваемые вопросы)

• Совместимость с Android (через облако) для планшетов на iOS и Windows

2. Booster

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

Booster это набор модулей для оценки производительности, оптимизации многопоточности, встроенного индекса ресурсов, сокращения числа избыточных ресурсов, сжатия ресурсов, исправления системных ошибок и т. д. Booster позволяет повысить стабильность приложения на 1525% и снизить размер пакета на 110 МБ.

Документация очень хорошая, лицензия Apache 2.0.

3. Shake

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

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

Устанавливается эта штука просто, в документации всё отлично описано. Кроме того, есть интерактивная демонстрация, которая показывает работу инструмента изнутри.

4. Scabbard

Scabbard помогает с визуализацией и анализом графика зависимостей Dagger 2.

Scabbard визуализирует точки входа, схемы зависимостей, взаимосвязи компонентов и области действия. Добавить этот инструмент в проект очень легко: он хорошо интегрирован с Gradle, а также с Android Studio и IntelliJ (нажав значок на левом поле в редакторе, можно просмотреть схему для @Component или @Subcomponent).

Документирован проект отлично: есть множество примеров и подсказок.

Лицензия Apache 2.0.

5. Can I Drop Jetifier?

Как известно, иногда перейти со старой библиотеки поддержки на AndroidX не так просто, особенно в крупных проектах с большим количеством устаревшего кода. Успех перехода во многом зависит от использования инструмента Jetifier (преобразует зависимости, которым для работы с классами AndroidX всё еще требуются старые артефакты), который замедляет сборку.

Всё больше и больше библиотек переходят на AndroidX, поэтому в какой-то момент необходимость включать этот инструмент отпадает. Этот плагин определяет, какие из используемых библиотек нужно перенести на AndroidX или избавиться от них, если уже вышла новая версия, Can I Drop Jetifier?

Документация понятная, проект выпущен под лицензией Apache 2.0. Очень рекомендую!

6. ADB Event Mirror

ADB Event Mirror позволяет отражать события касания экрана, нажатия клавиш и кнопок одного устройства на одно или несколько других устройств в реальном времени.

Этот сценарий не адаптирует разрешение, плотность пикселей, ориентацию и макет приложения. Поэтому лучше всего он работает с эмуляторами, созданными с одинаковой конфигурацией, ADB Event Mirror

Инструмент дает возможность протестировать приложение одновременно на эмуляторах различных типов.

7. Android Emulator Container Scripts

Android Emulator Container Scripts набор небольших сценариев для запуска эмулятора в контейнере для различных систем (например, для Докера) с целью внешнего использования. Сценарии совместимы с Python версий 2 и 3. Этот репозиторий довольно популярен и пригодится, если нужно запускать много эмуляторов на удаленных машинах.

Проект выпущен под лицензией Apache 2.0 и хорошо документирован.

8. Autoplay

Autoplay это плагин для Gradle, предназначенный для публикации артефактов Android в Google Play.

Его можно считать очень простой альтернативой Gradle Play Publisher или Fastlane. Опубликовать приложение можно как apk или набор App Bundle.

Особенности Autoplay:

• Оптимизирован для использования в CI/CD.

• Удобен для разработчиков.

• Надежен и перспективен.

У проекта хорошая документация, версия на момент написания статьи 1.3.0, лицензия Apache 2.0.

9. Плагин Gradle для статического анализа

Плагин статического анализа Gradle комплексная замена для всех значимых инструментов статического анализа кода, включает в себя следующее:

• Checkstyle

• PMD

• FindBugs [ПОДДЕРЖКА ПРЕКРАЩЕНА] [удален в Gradle 6.0]

• SpotBugs

• Detekt

• Android Lint

• KtLint

Смысл в том, что вам не нужно будет настраивать все эти инструменты самостоятельно их можно без особых усилий включить в свою кодовую базу. Плагин выпущен под лицензией Apache 2.0 и отлично документирован (есть даже пример проекта).

10. AndroidUtilCode

AndroidUtilCode функциональная и простая в использовании библиотека для Android, которая инкапсулирует функции, обычно используемые при разработке Android с демонстрационными версиями и модульными тестами. Инкапсулированные API позволяют значительно повысить эффективность разработки.

Проект состоит в основном из двух модулей: utilcode (используется в разработке часто) и subutil (используется редко, но позволяет упростить основной модуль).

Версия проекта 1.29.0, лицензия Apache 2.0.

11. Hijckr

Hijckr вмешивается в инфляцию макета Android и перенаправляет названные элементы в другие классы.

Это довольно интересный инструмент. Например, если файл макета содержит TextView, Android обычно загружает android.widget.TextView, но вместо этого можно перехватить xml-теги и загрузить com.myapp.TextView.

Описание проекта довольно подробное и позволяет быстро начать работу с инструментом (который полностью написан на Java).

12. Roomigrant

Roomigrant это вспомогательная библиотека для автоматической генерации миграций библиотеки Android Room с использованием формирования кода во время компиляции. Она использует созданные библиотекой Room файлы схемы и генерирует миграции на основе разницы между ними то есть, создание схемы Room должно быть включено в файле build.gradle, что хорошо описано в README.

Проект выпущен под лицензией MIT, версия 0.1.7.

13. RoomExplorer

После переноса базы данных на Room неплохо бы просмотреть ее: RoomExplorer позволяет просматривать все данные таблиц в табличном формате, удалять таблицы, вставлять, изменять и удалять строки и т. д.

Инструмент хорошо документирован, лицензия Apache 2.0.

14. Android Framer

Инструмент android-framer добавляет рамки и заголовки к скриншотам в Google Play. Источник вдохновения fastlane frameit.

Инструмент написан на Python и использует ImageMagick. Настроить рамки (фоны) можно, например, с помощью Facebook Design. Также можно менять шрифт, кегль, размер рамки и т. д.

Лицензия Apache 2.0.

15. Dependency Tree Diff

Dependency Tree Diff это интеллектуальный инструмент сравнения для вывода задачи dependencies Gradle, который всегда показывает путь к корневой зависимости.

Можно установить инструмент через brew или просто использовать jar-файл.

Лицензия Apache 2.0.

16. Gradle Doctor

Gradle Doctor это плагин для сканирования сборки Gradle. Функциональность: настраиваемые предупреждения о проблемах со скоростью сборки, измерение временных затрат на инструменты обработки аннотаций Dagger, установка переменной JAVA_HOME и проверка ее соответствия JAVA_HOME в IDE, простое отключение кеширования тестов, остановка сборки в случае, если найдены пустые каталоги src (поскольку это может быть причиной несовпадений в кеше), и многое другое.

У инструмента отличная документация, проект выпущен под лицензией Apache 2.0.

17. GloballyDynamic

GloballyDynamic это набор инструментов, направленных на обеспечение всеобщей доступности Dynamic Delivery, независимо от магазина приложений или платформы распространения, которые также предоставляют единый унифицированный клиентский API для Android и простой интерфейс для разработчиков.

Поддерживаются:

• Google Play (Play Feature Delivery)

• Huawei App Gallery (Dynamic Ability).

• Большинство других платформ в сочетании с сервером GloballyDynamic (например, Amazon App Store, Samsung Galaxy Store, Firebase App Distribution или локальная разработка).

Рекомендую прочитать README и подробнее ознакомиться с этим инструментом.

Лицензия Apache 2.0.

18. Dagger Browser

Dagger Browser еще один инструмент (прогрессивное веб-приложение) для удобной навигации по схеме Dagger в проекте.

Данные схемы заполняются с помощью SPI-плагина Dagger, а средство просмотра написано с помощью CRA (create-react-app) и TypeScript, Dagger Browser

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

19. Wormhole

Wormhole путешествующий во времени инструмент преобразования байт-кода, добавляющий в android.jar будущие API-интерфейсы, которые можно десахаризовать на все уровни API с помощью D8 и R8.

Wormhole обеспечивает обратную совместимость с более новыми API. Приведу пример.

В Android R есть новые методы из Java 9 например, List.of. Благодаря D8 и R8 они не являются эксклюзивными для API 30 и мгновенно превращаются в совместимые с API 1. В D8 и R8 есть набор методов десахаризации для API, которых еще нет в android.jar. И можно не ждать, пока они появятся этот проект дает возможность использовать их сразу же.

20. MNML

MNML (произносится как minimal минимальный) простое бесплатное приложение для записи экрана в Android.

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

Лицензия Apache 2.0.

Заключение

Вот и всё. Надеюсь, список вам понравился и какие-то инструменты смогли вас вдохновить. До встречи!

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.