» » » Реализуем UI в iOS: улучшаем, ускоряем, масштабируем

 

Реализуем UI в iOS: улучшаем, ускоряем, масштабируем

Автор: admin от 19-02-2019, 14:25, посмотрело: 52

Реализуем UI в iOS: улучшаем, ускоряем, масштабируем


[i]Привет! Меня зовут Азат Зулькарняев, я занимаюсь разработкой iOS-приложений в компании Badoo. При создании мобильных приложений большая часть времени уходит на разработку UI, и оптимизация этого процесса всегда является актуальной темой в среде разработчиков. Мой коллега Алексис Сантос написал статью о том, с какими проблемами мы столкнулись и как двигались в сторону их разрешения при работе над этой задачей. Я решил поделиться с вами переводом. Также рекомендую посмотреть запись недавнего доклада Игоря Савельева на Mobius 2018.[/i]



Несколько месяцев назад я наткнулся на очень интересный документальный сериал от Netflix — «Абстракция: Искусство дизайна». В нём подробно рассматривается работа дизайнеров из разных сфер: архитектура, графический дизайн, мода и т. д. Нетрудно заметить определённое сходство их работы с деятельностью iOS-разработчиков, занимающихся реализацией пользовательских интерфейсов. В частности, ведя работу над крупным проектом, дизайнеры стараются разбить её на множество мелких задач по принципу «разделяй и властвуй» и получают возможность собрать все элементы воедино на более позднем этапе.

классную статью[/i] [i]моего коллеги Валерия Чевтаева myltik[/i].



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



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем


Мы можем импортировать данные из Platform_UIKit в BadooUIKit, но не наоборот: Platform_UIKit должен сохранять независимость.



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем


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



Плюсы использования UIKit:




  • хранение всех UI-компонентов в одном месте облегчает их поиск; соответственно, работа становится более организованной;


  • освобождение классов от зависимостей помогает сократить время компиляции;


  • устранение зависимостей способствует повторному использованию компонентов и тоже ускоряет компиляцию;


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


  • изолированные компоненты гораздо легче тестировать;


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




Создание Badoo Gallery



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем

BadooUIKit помог нам решить значительную часть проблем, но мы понимали, что нет предела совершенству.



Как увидеть все UI-компоненты по отдельности? Можно ли настроить поиск компонентов и увидеть каждый из них в различных цветовых гаммах? Можно ли облегчить их тестирование? Можно ли создать для дизайнеров каталог всех существующих и реализованных UI-компонентов?



Запустив BadooUIKit, мы решили создать простенькое отдельное приложение-каталог для использования внутри компании. Так появился Badoo Gallery.



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



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




  • поиск компонентов;


  • сортировка компонентов по названию;


  • добавление элементов в избранное;


  • переключение между стилями — чтобы можно было посмотреть, как компонент будет выглядеть в том или ином оформлении;


  • FLEX;


  • счётчик FPS.



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем
Каждый компонент может находиться в разных состояниях в зависимости от действий пользователя и внутренней логики приложения. Например, UIButton имеет пять состояний: 1) по умолчанию, 2) выделенное, 3) при наведении, 4) при нажатии и 5) заблокированное.



Интересно? Подробнее читайте [i]здесь[/i].



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



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем


Основные преимущества Badoo Gallery:




  • возможность создания перечня реализованных UI-компонентов;


  • лёгкий поиск UI-компонентов: каждый из нас может увидеть все возможные варианты внешнего вида UI-компонента и найти им применение;


  • облегчённый поиск уже существующих компонентов помогает убеждать дизайнеров использовать их повторно;


  • время компиляции такого маленького приложения очень мало, это помогает значительно сократить период разработки;


  • функция избранного помогает найти компоненты, реализованные в данный момент;


  • добавление внешних инструментов вроде FPS, FLEX и MultiBrand позволяет измерять качество UI-компонентов и совершенствовать их;


  • все компоненты помещены в отдельный фреймворк и представлены в изолированной среде — тестирование стало гораздо проще.




Немного о тестировании



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



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем Реализуем UI в iOS: улучшаем, ускоряем, масштабируем Реализуем UI в iOS: улучшаем, ускоряем, масштабируем



Можем ли мы быть уверены в том, что после внесения изменений UI будет выглядеть так, как мы задумали? Как защитить компоненты и другие части приложения от неблагоприятного воздействия новых параметров подкомпонентов?



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



Мы решили проводить snapshot-тестирование, внедрив одну из самых популярных в то время open-source-утилит iOSSnapshotTestCase (ранее известную как FBSnapshotTestCase, поскольку создана она была компанией Facebook).



Узнать больше о тестировании с использованием скриншотов и об этом фреймворке вы можете по одной из этих ссылок:





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



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



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



Вот ответы на самые распространённые вопросы о тестировании со снимками.



[i]Где хранятся снепшоты?[/i]



Мы храним их прямо в Git-репозитории. Мы опасались, что это может привести к его раздуванию, но на деле всё оказалось не так плохо. Как правило, мы тестируем небольшие компоненты, а потому скриншоты весят очень мало. На данный момент папка со скриншотами занимает около 11 Мб, что, как нам кажется, терпимо.



[i]Вы тестируете все возможные разрешения во всех возможных окружениях?[/i]



Нет, пользы от такого подхода мало. А вот проблем может быть достаточно: тесты станут ненадёжными, папка со снимками — более объёмной, а тестовый набор будет сложнее поддерживать. Мы прагматично проводим тесты только для самых популярных устройств. Кроме того, наша система CI настроена на использование того же симулятора, который использовался для создания снепшота.



[i]Способны ли snapshot-тесты охватить весь интерфейс?[/i]



Думаю, что нет. Мы в Badoo проводим различные тесты для различных уровней приложения. Например, функциональные (при помощи фреймворков Calabash и KIF) и интеграционные.



Выводы



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



Вот некоторые из уроков, которые мы усвоили в ходе работы:




  • перенос всех действующих компонентов — нелёгкая задача, но, реализовав систему проектирования и предложив команде её использовать, вы увидите, как быстро вырастет число компонентов: перенос используемых разработчиками компонентов не только автоматически увеличивает количество переиспользуемых UI-элементов вашей системы, но и помогает существующим элементам освободиться от зависимостей; в будущем это позволит переносить больше компонентов;


  • дизайнерам нравится повторно использовать компоненты (убедить их делать это становится проще, когда есть возможность показать полностью рабочий компонент, отвечающий их требованиям);


  • экономить время необходимо; все мы знаем, что длительность компиляции проектов на Swift и Objective-C оставляет желать лучшего, при этом приложение Badoo Gallery легковесно и очень быстро компилируется; мы поняли, что гораздо удобнее реализовывать UI-компоненты непосредственно с помощью галереи, а затем пользоваться ими через основное приложение, где компиляция идёт не так быстро;


  • объединив все компоненты в UIKit и запустив приложение-галерею, в котором их можно тестировать, мы сделали весь процесс тестирования гораздо эффективнее и проще.




Дальше — Cosmos



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



Реализуем UI в iOS: улучшаем, ускоряем, масштабируем


Кристиано Растелли написал несколько увлекательных статей о том, как появилась система Cosmos. Не пропустите!



Благодарности



Работу над проектом вёл не один человек — в той или иной степени в ней участвовала вся iOS-команда Badoo, включая менеджеров, разработчиков и тестировщиков. Я благодарю их всех, ведь каждый из них был на борту с самого начала пути.



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



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



Также благодарю Алиссу Ордильяно за прекрасные иллюстрации, сделавшие эту статью доступнее.


Источник: Хабр / Интересные публикации

Категория: Веб-разработка, Game Development, iOS

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *