Декларативный UI в Android и iOS

Разберем, как Google и Apple предлагает разрабатывать интерфейсы в следующие несколько лет.

В мае 2019 года Google представила UI-фреймворк Jetpack Compose. Apple через месяц на WWDC показала SwiftUI. Подходы схожи между собой, которые со временем должны прийти на смену ConstraintLayout и AutoLayout.

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

Напрямую с XML в iOS работать не нужно — все делается через редактор. В Android исторически UI создавался напрямую в XML-формате, есть возможность просмотреть сразу предпросмотр результата. Аналог Storyboard в Android — Navigation Component.

Для того, чтобы воспользоваться новым фреймворком, придется установить Android Studio 4.0 Preview. Пока рано использовать этот подход в реальных проектах — подождать стоит как минимум год. За это время Google соберет все ошибки фреймворка и подготовит его для релиза. На официальном сайте для разработчиков есть tutorial, в котором сейчас 3 урока, и документация. В документации достаточно подробно разъясняются базовые вещи работы с UI с помощью Compose. По окончании уроков получается экран с изображением, стилизованным текстом в стиле Material.

@Composable fun NewsStory() { val image = +imageResource(R.drawable.header) MaterialTheme { Column( modifier = Spacing(16.dp) ) { Container(modifier = Height(180.dp) wraps Expanded) { Clip(shape = RoundedCornerShape(8.dp)) { DrawImage(image) } } HeightSpacer(16.dp) Text("A day in Shark Fin Cove") Text("Davenport, California") Text("December 2018") } } }

Небольшой пример экрана с изображением и тремя строчками текста.

Использование в Activity.

class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NewsStory() } } }

Compose входит в состав Jetpack, что делает возможным использование даже в старых версиях Android. Использование Kotlin позволяет писать UI в декларативном стиле прямо в коде вместо XML. В случае, если мы хотим обновить UI при действиях пользователя, обновлении данных из сети, нам нужно сделать data class с аннотацией @Model, чтобы свойства были наблюдаемыми. Затем при изменении этого класса UI-компонент автоматически обновится актуальными данными. Фреймворк не только задает правила создания экранов, он еще и говорит нам как правильно работать с данными. А работа с ними в Android — большая тема для дискуссий. Так вот Compose говорит нам, что мы должны разрабатывать UI c учетом так называемого “однонаправленного поток данных”. Compose проясняет кто отвечает за состояние и как должны обрабатываться события, подобно тому, как это обрабатывает React. Разработка ведется с тестовыми данными в режиме Preview. Этот код предназначен лишь для разработки и не вызовется при запуске приложения на устройстве или эмуляторе, определить этот код можно по аннотации @Preview.

@Preview @Composable fun DefaultPreview() { NewsStory() }

Для обратной совместимости можно использовать аннотацию @GenerateView и получить view по id.

@Composable @GenerateView fun Greeting(name: String) {/* ... */} <GreetingView android:id="@+id/greeting" app:name="@string/greeting_name" /> val greeting: GreetingView = findViewById(R.id.greeting) greeting.setName("Jim")

У Apple так же есть набор уроков, я бы даже назвал это курсом — уроков значительно больше, чем в Compose, они подробнее, содержат готовые проекты, у каждого указано ориентировочное время выполнения. В конце урока можно ответить на проверочные вопросы. Примеры хоть и тестовые, но они далеко ушли от “Hello, world”. Сайт оформлен очень удобно и красиво — анимации переходов, все на высоте. Рекомендую хотя бы взглянуть.

Простой пример уже в SwiftUI.

struct ContentView: View { var body: some View { VStack(alignment: .leading, spacing: 8) { Image("image") .cornerRadius(8) VStack(alignment: .leading, spacing: 2) { Text("A day in Shark Fin Cove") .font(.title) Text("Davenport, California") Text("December 2018") Spacer() } } .padding() } }

Предпросмотр можно включить, написав так

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

Релиз SwiftUI получился более масштабным среди разработчиков своей платформы и далее я поясню почему.

Во-первых, решение уже можно использовать в production. Да, нет обратной совместимости с версиями меньше iOS 13, но Apple редко показывает что-то с претензией на далекое будущее. Раз показали, значит, уверены, что это будет работать, пусть и не на все 100%. Здесь могу заметить, что SwiftUI хоть и полноценно доступен в текущих версиях Xcode, тем не менее, еще есть компоненты, которых не хватает для полноценной разработки, документация не идеальная, да и мало кто готов отбросить порядка 10-15% пользователей старых операционных систем.

Во-вторых, вместе со SwiftUI Apple представила фреймворк для реактивного программирования Combine (да, в Swift достаточно популярен RxSwift, как и RxKotlin в Android) и другие интересные фичи Swift (например, property wrapper), которые стоит использовать совместно со SwiftUI.

В-третьих, реализация UI с помощью SwiftUI достаточно сильно меняет архитектуру приложения — надобность контроллера в MVC отпадает. Навигация происходит сразу во view. Действия на UI обрабатываются на View, изменяя данные.

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

Так же немаловажный фактор — SwiftUI доступен не только на iOS, но и на watchOS, macOS, tvOS.

Google традиционно показывает новинки в альфа-версиях, Apple же наоборот — инструменты, которые можно использовать здесь и сейчас. У обоих подходов есть свои плюсы и минусы. Но уже понятно, что постепенно в ближайшие несколько лет разработка UI новых проектов будет только на Compose и SwiftUI. Фреймворки декларативного UI уменьшают порог входа для новичков, ускоряют процесс создания приложений. Подход не является чем-то новым в разработке — React, Flutter, так и другие open source-решения предлагали похожие решения и ранее, но Google и Apple постарались сделать все проще и лучше.

На текущий момент я бы не советовал использовать даже доступный SwiftUI в production, но с выходом новой версии iOS летом, фреймворк наверняка станет стабильнее.

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

#android #ios #ui

Jetpack Compose

SwiftUI

Выводы