Pull to refresh
7
0
Вячеслав Ворожейкин @c5fr7q

Mobile developer

Send message

Кодогенерация токенов дизайн-системы для Android по Figma API

Level of difficultyMedium
Reading time11 min
Views2.5K

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

Рассказываю про наш тернистый путь к собственному генератору токенов дизайн-системы.

Читать далее
Total votes 11: ↑11 and ↓0+11
Comments6

SwiftUI по полочкам

Reading time24 min
Views85K
Каждый раз, когда в языке программирования появляется новый Фреймворк, рано или поздно, появляются люди, которые изучают язык именно с него. Вероятно так было и в IOS разработке во времена появления Swift: поначалу он рассматривался как дополнение к Objective-C — но я этого уже не застал. Сейчас, если начинаешь с нуля, выбор языка уже не стоит. Swift вне конкуренции.

То же самое, но в меньшем масштабе, происходит и с фреймворками. Появление SwiftUI — не исключение. Вероятно, я — представитель первого поколения разработчиков, кто стартовал с изучения SwiftUI, проигнорировав UIKit. У этого есть своя цена — обучающих материалов и примеров работающего кода пока очень мало. Да, в сети уже есть некоторое количество статей, рассказывающих о той или иной особенности, том или ином инструменте. На том же www.hackingwithswift.com уже довольно много примеров кода с объяснениями. Однако, они слабо помогают тем, кто решил изучать SwiftUI с нуля, как я. Большинство материалов в сети — это ответы на конкретные, сформулированные вопросы. Опытный разработчик легко разберется, как все устроено, почему именно так, и зачем это нужно применять. Новичку же, сначала нужно понять, какой вопрос задать, и только тогда он сможет добраться до этих статей.



Под катом я попробую систематизировать и разложить по полочкам то, что сам успел усвоить на текущий момент. Формат статьи — почти гайд, хотя скорее, шпаргалка, составленная мной в том виде, в котором я сам бы хотел ее прочитать в начале своего пути. Для опытных разработчиков, еще не вникавшим глубоко в SwiftUI, тоже найдется пара интересных примеров кода, а текстовые пояснения можно читать по-диагонали.

Надеюсь статья поможет вам сэкономить некоторое время, когда вы тоже захотите ощутить немного магии.
Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments30

Стилизация компонентов в SwiftUI

Reading time18 min
Views3.4K

SwiftUI имеет отличный API для стилизации view независимо от их реализации. В этом посте мы рассмотрим, как мы можем стилизовать пользовательские view таким же образом.

В прошлом году в ходе нескольких эпизодов на Swift Talk мы продемонстрировали, как создать собственный степпер для увеличения и уменьшения значения. Он был похож на Stepper в SwiftUI, но с API, который делает его стильным.

Этот пост является кратким изложением того, что мы рассмотрели тогда, а также несколькими приёмами, которым мы научились с тех пор, чтобы наши пользовательские стили view (представление, вью, вьюшка) работали ещё лучше, как built‑in (встроенные) в SwiftUI. В последующем посте мы рассмотрим несколько более продвинутых вариантов использования.

Читать далее
Total votes 2: ↑2 and ↓0+2
Comments1

Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI

Reading time14 min
Views18K

Термином «дизайн-система» в IT давно никого не удивишь. Компании систематизируют дизайн продуктов, придумывая свои или используя чужие инструменты для управления стилями, паттернами и компонентами. 


Badoo не является исключением: с помощью нашей дизайн-системы Cosmos мы поддерживаем общие принципы дизайна для четырёх приложений, работающих на четырёх платформах. 


image


Одна из первых и основных вещей, с которой начинается работа по созданию дизайн-системы, — это токены (или переменные), которые определяют значения разных сущностей системы. 


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


Несмотря на потенциал дизайн-токенов, во многих компаниях их структура остаётся довольно простой, что сильно ограничивает возможности их применения. 


Я хочу поделиться адаптированным переводом статьи моего коллеги Кристиано Растелли (Cristiano Rastelli), который несколько лет развивает дизайн-систему Cosmos. На примере своего опыта он показывает, как работать с токенами более эффективно: добавлять метаданные и использовать их для описания свойств компонентов. 


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

Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments10

Как мы запускали демоприложения

Reading time16 min
Views5.2K

Те, кто работал над крупным Android-проектом с множеством модулей, не понаслышке знают, что такие проекты могут долго собираться. Неважно, что мы делаем — исправляем баг или разрабатываем фичу, нам нужно собрать проект, чтобы увидеть, как изменения повлияли на приложение. Мы тратим время на ожидание сборки проекта, и это влияет на продуктивность. 

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

Меня зовут Олег Шелякин, я ведущий Android-разработчик в мобильном банке Тинькофф. Статья будет интересна тем, кто работает над многомодульным проектом, где количество модулей перевалило за сотню, время синхронизации измеряется в минутах, а время сборки — в десятках минут.

Читать далее
Total votes 19: ↑19 and ↓0+19
Comments16

Обзор библиотек для скриншот-тестирования Android проектов. Часть 1

Level of difficultyMedium
Reading time10 min
Views3.3K

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

Меня зовут Олег Осипенко и эта статья является развитием моего доклада, посвященного опыту внедрения скриншот-тестирования, который я презентовал на прошедшей недавно в Екатеринбурге конференции DUMP. Отдельную часть доклада я посвятил разбору имеющихся библиотек, но, будучи ограничен временными рамками доклада, я не мог подробно остановиться на их особенностях. И сейчас я хотел бы восполнить это упущение.

Читать далее
Total votes 8: ↑8 and ↓0+8
Comments7

Осознанная оптимизация Compose

Level of difficultyMedium
Reading time29 min
Views34K

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

Наша команда Ozon Seller также столкнулась с этой проблемой. Мы решили собрать воедино все советы и наработки по написанию оптимизированного Compose-кода. Активное применение этих советов при оптимизации существующих экранов и написании новых существенно улучшило наши метрики: длительность лага по отношению к длительности скролла (hitch rate; чем меньше, тем лучше) экранов со списками упала в среднем с 15-19 % до 5-7 % (на 90-м перцентиле). Все эти советы и наработки мы описали в этой статье. Она будет полезна и начинающим, и опытным разработчикам, в ней подробно описаны оптимизации и механизмы Compose, а также рассказано про слабо задокументированных особенности и исправления ошибок, которые есть в других статьях. Давайте же начнём.

Читать далее
Total votes 37: ↑37 and ↓0+37
Comments15

Как оседлать радугу: история создания тёмной темы

Reading time10 min
Views40K


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


Меня зовут Михаил Лихачёв, я ведущий дизайнер VK. Расскажу, как небольшой командой адаптировали 300 экранов и систематизировали все существующие в мобильных приложениях цвета — для этого мы синхронизировали их между платформами и вынесли работу с ними в единую дизайн-систему с токенами. Поделюсь впечатлениями о том, как нам теперь с этим живётся и усложнился ли процесс дизайна.

Читать дальше →
Total votes 45: ↑41 and ↓4+37
Comments34

Как мы на 20% повысили скорость запуска приложения с помощью Baseline Profiles

Level of difficultyMedium
Reading time12 min
Views5K

На конференции Google I/O 2022 показали инструмент Baseline Profiles, с помощью которого можно ускорить запуск приложений после установки. Мы попробовали его у себя и получили прирост до 20% при холодном запуске приложения!

В этой статье расскажу, как внедрить инструмент, оценить его работу на production приложении, немного погружу в историю компиляторов в целом и рассмотрю более продвинутые сценарии для генерации Profile.

Демонстрировать это я буду на нашем приложении Дринкит.

Поехали!
Total votes 22: ↑21 and ↓1+20
Comments14

Как создавать анимации в Jetpack Compose

Reading time25 min
Views20K

Анимации в Jetpack Compose довольно легко понять, применить и кастомизировать под требования дизайна. Но я ещё не видел ни одного туториала по анимациям в Compose на русском языке, поэтому подготовил на эту тему доклад для майского Mobius. А для тех, кто больше любит читать, чем слушать, подготовил статью. В материале мы обсудим  виды анимаций, а также пройдём все шаги по способам их создания и кастомизации.

Читать далее
Total votes 17: ↑17 and ↓0+17
Comments1

Четыре платформы — один код. Что такое Compose Multiplatform?

Level of difficultyMedium
Reading time11 min
Views15K
image

Разработчики давно грезили о возможности писать кроссплатформенный код — такой, который запускался и работал бы одинаково в любой операционной системе любой архитектуры. Сегодня принципом «Write once, run anywhere», когда-то прогремевшим в связи с появлением языка Java, трудно кого-либо удивить. И все же есть ниша, в которой не так много кроссплатформенных технологий: это UI-разработка.

Не будет преувеличением сказать, что на сегодняшний день есть только два UI-фреймворка, которые позволяют запускать один и тот же UI на разных платформах и широко представлены на рынке: React Native и Flutter. Казалось бы, чего еще желать? Сразу две технологии предоставляют возможность шарить UI-фичи между платформами и прекрасно с этим справляются. Но эта статья — не о них, а об их младшем собрате, удобном и мощном инструменте мобильной и десктопной разработки — Compose Multiplatform.
Читать дальше →
Total votes 32: ↑31 and ↓1+30
Comments16

Готовим Window Inset под соусом Jetpack Compose и щепоткой View

Reading time19 min
Views13K

Обожаю запах свежей мобильной разработки по утрам, дням и вечерам 🍕📱

Все примеры из статьи можно посмотреть в этом репозитории.

Вот только почему, почему ещё не все используют режим edge2edge? Разве для того я покупал огромный безрамочный телефон, чтобы смотреть на траурные черные полоски с кнопками?!

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

Сегодня я надену специальный мобильный фартук и расскажу, что такое режим edge-to-edge в мобильных приложениях и как работать с insets в Android. А ещё мы разберём примеры обработки insets не только во view, но и в compose. Если статьи о работе с insets в view еще можно найти на просторах интернета, то информацию про работу с ними в compose можно найти только в официальной документации.

Читать далее
Total votes 19: ↑19 and ↓0+19
Comments0

Material You: раскладываем по полочкам обновление дизайн-системы Material

Reading time7 min
Views25K

Персонализация смартфона, свежая палитра цветов Material, обновлённые компоненты — от кнопок до диалогов.

Всё это — про Material You, новую дизайн-систему от Google для мобильных и веб-приложений! Разбираем новую систему цветов и все нововведения Material.

Читать далее
Total votes 11: ↑9 and ↓2+7
Comments10

Compose End to End тестирование. Основы

Reading time10 min
Views5.6K

Автотестирование View системы развивается уже достаточно давно. У нас есть множество инструментов, зарекомендовавших себя очень хорошо.  Напротив, Compose только начинает обрастать различными решениями и фреймворками, например, у kaspresso на момент написания статьи Compose находиться в раннем доступе.

Сегодня разберём в чём же особенности нативного тестирования на compose, наступим на пару граблей и напишем свои первые тесты. А в следующей статье уже будем копать вглубь и посмотрим как это всё работает под капотом.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments2

Расширяем Android Lint

Level of difficultyMedium
Reading time6 min
Views1.9K

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

Читать далее
Total votes 11: ↑10 and ↓1+9
Comments1

Автоматизируем сборку iOS приложений с помощью Fastlane

Reading time6 min
Views43K

Как часто нам, iOS разработчикам, приходится собирать приложение для загрузки в iTunes Connect App Store Connect? В процессе этапа активного бета-тестирования приложения нужно оперативно фиксить баги и поставлять обновленную сборку для тестирования. А также необходимо скачивать сертификаты, Provision profiles, прокликивать много разных галочек и кнопочек при каждой выкладке нового билда.


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


В этом посте я расскажу: что такое fastlane и как быстро начать его использовать в своих iOS проектах.

Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments10

Gradle Plugin: Что, зачем и как?

Reading time15 min
Views27K

Доброго времени, читатель! В предыдущей статье мы рассмотрели, как эффективно использовать стандартные инструменты Gradle в проектах для решения повседневных задач и немного коснулись подкапотного пространства.

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

В первой части статьи проведём небольшой теоретический экскурс и рассмотрим способы реализации плагинов, а во второй части двинемся к практической задаче и проникнемся разработкой плагина для Kotlin-кодогенерации. Заваривайте ваш любимый напиток и поехали.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments3

Готовьсь, цельсь, пли! Как не обжечься при сборке Gradle-приложения, и настолько ли всё серьезно?

Reading time14 min
Views30K

Доброго дня, читатель! Меня зовут Стручков Михаил и я Android-разработчик в команде мобильного оператора Yota. 

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

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

Читать далее
Total votes 23: ↑22 and ↓1+21
Comments9

Всем выйти из сумрака: как добавить тень на Android

Reading time10 min
Views8.2K

Когда заходит речь про тени на Android, возникает сразу несколько вопросов. Первый: зачем они нужны? Второй: почему нельзя использовать системные тени и жить счастливо? Третий: если нельзя использовать системные тени, как реализовать кастомные?

Это Сергей Петров, Android-разработчик в команде Design System inDrive, и вместе мы поговорим о тенях на Android.

Читать далее
Total votes 12: ↑12 and ↓0+12
Comments4

Information

Rating
Does not participate
Location
Томск, Томская обл., Россия
Date of birth
Registered
Activity