UX / UI Design / SwiftUI: почему за ним будущее мобильной разработки под iOS

SwiftUI: почему за ним будущее мобильной разработки под iOS

Одним из самых важных моментов Apple Worldwide Developers Conference 2019 стал анонс релиза SwiftUI. SwiftUI — это совершенно новый фреймворк, который позволяет проектировать и разрабатывать пользовательские интерфейсы с написанием меньшего количества кода декларативным способом. Что же в нем классного? Разбираемся.

Привет! На связи Никита Ващенко, iOS-разработчик компании IceRock. В этой статье я сравнил два основных UI-фреймворка для iOS-разработки: UIKit, который мы использовали в компании, и SwiftUI, чтобы проверить, действительно ли на SwiftUI проще и быстрее создать интерфейс приложения. Приступим.

Что это за фреймворки

Фреймворк UIKit

UIKit — это фреймворк, позволяющий создавать пользовательские интерфейсы, которые могут обрабатывать события, касания и входные данные, управляя взаимодействиями между пользователем, системой и вашим приложением. UIKit разработан и выпущен на основе языка Objective-C.

Создать интерфейс на UIKit можно несколькими способами.

  1. Использовать конструктор интерфейса. Interface Builder интегрирован в Xcode и позволяет редактировать .storyboard.xib.  
  2. Использовать подход, ориентированный на код, при котором представления и ограничения компоновки определяются в Swift.

Преимущества UIKit:

  • привычен и стабилен;
  • свобода действий с UI-элементами.

И всего один недостаток — сложные UI-элементы.

Фреймворк SwiftUI

SwiftUI — фреймворк, который позволяет вам проектировать и разрабатывать пользовательские интерфейсы декларативно, с меньшим количеством кода. Был впервые выпущен в 2019 году с версией 13 iOS SDK.

Создать интерфейс на SwiftUI можно лишь одним способом: Xcode отображает визуальный редактор с любым файлом, содержащим представление SwiftUI.

Преимущества SwiftUI:

  • прост в освоении;
  • не нуждается в Interface Builder, вместо него используется Canvas — больше не нужно собирать проект, чтобы посмотреть изменения, они отслеживаются в реальном времени;
  • все объекты во фреймворке — это структуры. Они работают быстрее и избавляют от утечек памяти.

Недостатки SwiftUI:

  • фреймворк еще молодой, поэтому еще не все инструменты в нем реализованы, в отличие от UIKit;
  • поддерживает только iOS 13 и Xcode 11 и выше.

Разработка элементов на SwiftUI и UIKit: сравнение

Чтобы опробовать возможности SwiftUI, я создал небольшое приложение для отслеживания состояния криптовалют на рынке. Также оно позволяет создать тестовый профиль и попробовать себя в инвестировании, не тратя при этом реальные деньги.

На примере этого приложения мы сравним работу элементов, написанных на двух разных UI-фреймворках: SwiftUI и UIKit. В первом фреймворке элементы мы создавали сами, а реализацию тех же элементов на втором фреймворке нашли в других проектах — авторство указано в коде.

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

Пример № 1. Круговая диаграмма

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

Screenshot (2).png

Как диаграмма реализована на UIKit Как диаграмма реализована на SwiftUI
Использовались классы CAShapeLayer, CAGradientLayer. Использовалась структура Path.
На реализацию потребовалось около 6 часов. На реализацию ушло около 5 часов.
Потребовалось 95 строк кода. Посмотреть код в репозитории. Потребовалось 84 строки кода. Посмотреть код в репозитории.

Пример № 2. График

Ниже два графика криптовалют.

Screenshot (3).png

Как диаграмма реализована на UIKit Как диаграмма реализована на SwiftUI
Использовались классы UIBezierPath, CAShapeLayer. Использовалась структура Path. Она рисует точки по осям x и y и соединяет их, делая график.
На реализацию потребовалось около 10 часов. На реализацию ушло около 5 часов. В два раза меньше!
Потребовалось 259 строк кода. Посмотреть код в репозитории. Потребовалось 89 строк кода. Почти в три раза меньше! Посмотреть код в репозитории.

Почему SwiftUI такой мощный

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

Преимущество № 1. Использует декларативный стиль вместо императивного

UIKit использует императивный стиль. Это такой стиль программирования, при котором вы описываете, как добиться желаемого результата. Например, я пишу:

  1. «Поставь сковороду на огонь».
  2. «Возьми два яйца (куриных)».
  3. «Разбей каждое».
  4. «Вылей содержимое на сковородку».
  5. «Выкинь скорлупу».

SwiftUI же использует декларативный стиль. В этом стиле вы просто описываете, какой именно результат вам нужен: «Приготовь яичницу». Получатель (в данном случае SwiftUI) такого сообщения уже сам разбирается, какие шаги для этого надо предпринять.

Screenshot (4).png Пример, который показывает разницу этих подходов в коде. Слева — императивный стиль, свойственный UIKit, справа — декларативный, как в SwiftUI

Преимущество № 2. Используется для всех платформ

SwiftUI использует тот же API, что включен в iOS, iPadOS, macOS, watchOS и tvOS. А значит, на нем можно создавать приложения для всех вышеупомянутых платформ, используя одну, единую, структуру. Без SwiftUI вам придется использовать UIKit, AppKit или WatchKit для iOS, Mac и часов соответственно.

Преимущество № 3. Показывает интерактивные превью в реальном времени

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

Преимущество № 4. Использует структуры

В основе SwiftUI лежат структуры, а не классы, как в UIKit. Структуры работают быстрее. Получая описание экрана от клиента, я создаю простой экран с UIKit за два часа. А со SwiftUI это занимает около часа.

Преимущество № 5. Позволяет создавать виджеты

Если для вашего приложения требуется виджет, то его можно реализовать только на SwiftUI. WidgetKit не работает с UIKit.

Преимущество № 6. Поддерживает Always-On Retina Display

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

А почему тогда все не перешли на SwiftUI

SwiftUI стал жизнеспособным для создания целых приложений только после обновления iOS 14 и внедрения протоколов приложений. То есть использовать его на старых iOS не получится. Однако это не такая уж и проблема.

Согласно последним данным о степени распространения, операционная система iOS 14 и ее более поздние версии теперь установлены на 90% iPhone, выпущенных за последние четыре года. Лишь 8% смартфонов работают под управлением iOS 13, а 2% продолжают работать под управлением более ранних версий iOS.

Итог: какой фреймворк выбираем мы

После проведенного сравнения мы в IceRock убедились, что SwiftUI — это самый быстрый способ создания функций в приложении. Он требует намного меньше кода и может помочь достичь почти таких же результатов, как с UIKit, за гораздо меньшее время. Более того, функция предварительного просмотра в SwiftUI, как правило, увеличивает скорость разработки приложений. И основной проблемой остается лишь невозможность создавать приложения для версий iOS 13 и более ранних, а для продакшена желательно использовать версию начиная с 14-й.

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