Избавляемся от старья и переходим на SwiftUI / Руслан Кавецкий (Agora)
- 3. Не про SwiftUI, а про наш опыт с ним
- 7. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 8. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 9. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 10. .(o /a0o)o&o ,(o*( 01a(- פ3o SwiftUI Как работает Layout Как работает Data Flow Как работает механизм Preference Как работает механизм Environment Чем отличаются Property Wrappers По желанию: как работают анимации * Полезные ссылки будут в конце
- 11. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 12. SwiftUI+UIKit Image loading Pull-to-refresh RxSwift+Combine Handling keyboard Pagination Analytics Dark mode Colors Image assets Fonts Text processing Architecture Debugging Animations Actions Localization Navigation Profiling
- 13. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 14. !a# $% &o(o)*+*,- Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
- 16. #available(iOS 14, *) VIEWS Lazy Stacks, Lazy Grids, TextEditor, ProgressViews, Progress Bar, Maps, Opening links, PageTabViewStyle, DatePicker, ColorPicker, Sign In With Apple MODIFIERS redacted(), scrollTo(), onChange(), appStoreOverlay() PROPERTY WRAPPERS StateObject, ScaledMetric, AppStorage iOS 14
- 18. Список поддерживаемых устройств у iOS 13 и iOS 14 одинаковый, каждый может обновиться при желании #available(iOS 14, *)
- 20. Выбрали Nuke + Уже используется в проекте + Проверен временем + Общий кэш с UIKit (потому что там тоже Nuke) – Нет стабильной версии Написали враппер, чтобы можно было легко заменить на другой компонент Image loading
- 23. Pull-to-refresh Взяли основу из статьи https://swiftui-lab.com/scrollview- pull-to-refresh Выглядит не нативно и иногда дёргается В iOS 15 появился Refreshable модификатор, но только для List !
- 26. RxSwift + Combine RxSwift → Combine Combine → RxSwift
- 27. UIKit + SwiftUI UIKit → SwiftUI SwiftUI → UIKit
- 28. https://developer.apple.com/videos/play/wwdc2022/10072/ Use SwiftUI with UIKit NEW UIHostingConfiguration
- 30. Dark mode И у картинок тоже так можно Можно сгенерировать, можно написать
- 31. Dark mode
- 32. A1a+*(*#a
- 40. # LIVE
- 41. Каждая вьюшка это композиция других вьюх У каждой вьюшки есть модель - композиция примитивных типов и моделей других вьюшек У экрана есть View Model, которая загружает данные и реагирует на действия
- 42. ViewModel – протокол, у которого может быть множество реализаций
- 43. Плейсхолдеры для состояний загрузки это просто Placeholders ≠ Stubs Превью для разных состояний сильно помогают в процессе разработки
- 47. SwiftUI
- 48. Screen = View Controller Использовать напрямую с UIHostingController Обернуть в подкласс UIViewController
- 49. Views (SwiftUI) Models (structs) Screens (SwiftUI) View Models (protocols) View Models (classes) Network / Services (classes) Navigation (Router) View Controllers (UIKit) Views (UIKit)
- 50. SwiftUI Playground target Agora App target Views (SwiftUI) Models (structs) Screens (SwiftUI) View Models (protocols) View Models (classes) Network / Services (classes) Navigation (Router) View Controllers (UIKit) Views (UIKit)
- 51. SwiftUI files
- 52. Views (SwiftUI) Models (structs) Screens (SwiftUI) View Models (protocols) View Models (classes) Network / Services (classes) Navigation (Router) View Controllers (UIKit) Views (UIKit) Introspect PreviewDevice Firebase AWS Amplitude Branch Stripe Datadog NukeUI Nuke SnapKit RxSwift RxCombine SVProgressHUD MarkdownUI
- 53. Навигация на уровне UIKit, вьюшки на уровне SwiftUI Screen = View Controller SwiftUI живёт в отдельном таргете с минимумом зависимостей Все зависимости в основном таргете
- 54. Analytics DatadogSDK.swift extension SwiftUI.View { func trackRUMView(name: String) #$ some View {##%} func trackRUMTapAction(name: String) #$ some View {##%} }
- 55. import SwiftUI #& Do nothing for playground extension View { func datadogName(_ name: String) #$ some View { return self } func datadogActionName(_ name: String) #$ some View { return self } } import Datadog import SwiftUI extension View { func datadogName(_ name: String) #$ some View { trackRUMView(name: name) } func datadogActionName(_ name: String) #$ some View { trackRUMTapAction(name: name) } } Analytics hack View+Datadog.swift View+Datadog+Playground.swift
- 57. # LIVE
- 58. protocol CommunityScreenViewModelProtocol: ObservableObject { var model: CommunityScreen<Self>.Model? { get } func load() func tapUser(id: Int) func tapPost(id: Int) func tapPlaylist(id: Int) func followUser(id: Int) } protocol CommunityScreenViewModelProtocol: ObservableObject { var model: CommunityScreen<Self>.Model? { get } func load() func action(action: CommunityScreen<Self>.Action) } struct CommunityScreen<ViewModel: CommunityScreenViewModelProtocol#' View { @ObservedObject var viewModel: ViewModel enum Action { case tapUser(id: Int) case tapPost(id: Int) case tapPlaylist(id: Int) case followUser(id: Int) } ##% } struct Model { let playlists: PlaylistsView.Model let followers: FollowersView.Model let posts: PostsView.Model enum Action { case tapUser(id: Int) case tapPost(id: Int) case tapPlaylist(id: Int) case followUser(id: Int) } var onAction: (Action) #$ Void } struct Model: Identifiable { let id: Int let imageUrl: URL let username: String let description: String let onUserTap: (Int) #$ Void let onUserFollow: (Int) #$ Void }
- 59. Screen View Model Id Id struct UserView.Model { let id: Int let imageUrl: URL … } Json/Dto Id
- 60. Screen View Model Id Name AnalyticsId Category Id Name AnalyticsId Category struct UserView.Model { let id: Int let id: imageUrl let name: String ... let name: String let analyticsId: Int let category: String }
- 61. Screen View Model Id Name AnalyticsId Category Id Name AnalyticsId Category Placeholders? Stubs? struct UserView.Model { let id: Int let id: imageUrl let name: String ... let name: String let analyticsId: Int let category: String }
- 62. Screen View Model Id Name AnalyticsId Category Id Name AnalyticsId Category struct UserView.Model { let id: Int let id: imageUrl let name: String ... let name: String let analyticsId: Int let category: String }
- 63. Screen View Model Json/Dto Json/Dto struct UserView.Model { let id: Int let name: String ... let data: UserJson }
- 64. Screen View Model Json/Dto Json/Dto struct UserView.Model { let id: Int let name: String ... let data: UserJson } UserJson {} +1 зависимость Network/Service struct UserView.Model { let id: Int let name: String ... let data: UserJson }
- 65. Screen View Model Json/Dto Json/Dto struct UserView.Model { let id: Int let name: String ... let data: UserJson } UserJson {} +1 зависимость Network/Service struct UserView.Model { let id: Int let name: String ... let data: UserJson }
- 66. # LIVE
- 67. struct Model: Identifiable { let id: Int let imageUrl: URL let username: String let description: String let onUserTap: () #$ Void let onUserFollow: () #$ Void } struct Model: Identifiable { let id: Int let imageUrl: URL let username: String let description: String enum Action { case tap case follow } let action: (Action) #$ Void } Actions in view
- 68. Actions in view model struct UserDataTransformer { let onUserTap: (UserJson) #$ Void let onUserFollow: (UserJson) #$ Void func transform<VM>(json: CommunityScreenJson) #$ CommunityScreen<VM>.Model { return CommunityScreen.Model( playlists: ##%, followers: FollowersView.Model( header: json.followersHeader, users: json.followers.map { user in UserView.Model( id: user.id, imageUrl: user.imageUrl.url, username: user.username, description: user.description, onTap: { self.onUserTap(user) }, onFollow: { self.onUserFollow(user) } ) } ), posts: ##% )
- 69. final class CommunityScreenViewModel: CommunityScreenViewModelProtocol { let network: Network let router: Router @Published var model: CommunityScreen<CommunityScreenViewModel>.Model? = nil func load() { network.loadCommunity { json in self.model = UserDataTransformer( onUserTap: { user in self.router.openUserScreen(id: user.id) }, onUserFollow: { user in self.network.followUser(id: user.id) } ) .transform(json: json) } } } Actions in view model
- 70. Вьюшки определяет свой набор actions внутри модели Вью модель замыкает json/dto внутри action Пропадает необходимость прокидывать эти данные во вью и обратно
- 71. Не всё конечно же было гладко
- 72. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect ; #a#*$* פ3o/+6$a$* ,(o+#1u+*,- * #a# *5 36<*+*
- 73. SPM sucks
- 74. SPM sucks
- 75. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect ; #a#*$* פ3o/+6$a$* ,(o+#1u+*,- * #a# *5 36<*+*
- 76. Fixed frame to fix screen layout
- 77. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect ; #a#*$* פ3o/+6$a$* ,(o+#1u+*,- * #a# *5 36<*+*
- 78. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect ; #a#*$* פ3o/+6$a$* ,(o+#1u+*,- * #a# *5 36<*+*
- 80. GeometryReader - самое крайнее средство для решения проблемы Мозг переключается не сразу, ему нужно время Не боятся создавать разные View для похожих элементов Лучше использовать 2 пробела вместо 4-х и не писать self На чипах apple silicon работает лучше .(o u01a+*
- 81. =o0& פ636#+>?a6(,@ 16 ,3a0u
- 82. =o0& פ636#+>?a6(,@ 16 ,3a0u
- 83. Custom formatting rules for SwiftUI files 2 פ3o/6+a * /60 self
- 84. !a#*6 פ3o/+6$% o,(a+*,- Не всегда плавный скроллинг Некоторый функционал не доступен на iOS 14 Какие-то вещи сделать просто невозможно
- 85. !a#*6 פ3o/+6$% o,(a+*,- Не всегда плавный скроллинг Некоторые API доступны только с iOS 15 Какие-то вещи сделать просто невозможно
- 86. available(iOS 15, *) @FocusState AttributedString(markdown:) safeAreaInset() LazyVGrid(pinnedViews: .sectionHeaders) iOS 15
- 87. available(iOS 15, *) import Introspect content .introspectTextField { textView in textView.addTarget( textFieldTarget, action: #selector(TextFieldTarget.start), for: .editingDidBegin ) textView.addTarget( textFieldTarget, action: #selector(TextFieldTarget.finish), for: .editingDidEnd ) } @FocusState private var isFocused: Bool @FocusState // iOS 14 // iOS 15 https://github.com/siteline/SwiftUI-Introspect
- 88. available(iOS 15, *) import MarkdownUI if #available(iOS 15.0, *) { Text(AttributedString(markdown: model.description)) } else { Markdown(model.description) } AttributedString(markdown:)
- 91. !a#*6 פ3o/+6$% o,(a+*,- Не всегда плавный скроллинг Некоторый функционал не доступен на iOS 14 Какие-то вещи сделать просто невозможно https://github.com/siteline/SwiftUI-Introspect
- 92. !a#*6 360u+-(a(% פo+u?*+* 31 экран за 9 месяцев
- 94. Aa:o,(- After using UIKit for a very long time, it can be a bit confusing to start implementing UIs with SwiftUI. At first, you are not sure which element or modifier to use for certain items. However, this feeling goes away very quickly and you start to understand the simplicity and the ease with which you are able to put building blocks together to achieve the desired outcome. It’s just a different way of looking at structure of UI and understanding how certain core concepts work.
- 95. Aa:o,(- Для меня SwiftUI стал глотĸом свежого воздуха и разнообразия в работе, первое время реально тяжело, но голова быстро перестраивается. Иногда я сĸучаю по UIKit и его гибĸости, ĸоторая поĸа превосходит SwiftUI, но ĸажется это будет недолго.
- 96. 21 июня, вт 10:00 – 11:00 Егор Петров SwiftUI vs UIKit: to be or not to be?
- 97. ;#o3o,(- App SwiftUI Чистый билд ~20 сек Hot reload $ Чистый билд ~2 мин Screens Views Models View Models Services Network Analytics Navigation View Controllers Views + 3rd party SDKs
- 98. B3o,(o(a
- 99. Перевести сервисы на Combine async/await Перевести все экраны на SwiftUI Перевести навигацию на SwiftUI .(o :a+-<6
- 100. iOS 16
- 102. https://developer.apple.com/tutorials/swiftui - туториалы от эпл https://swiftui-lab.com - глубокие статьи про сложные штуки https://www.fivestars.blog/swiftui - очень хорошо https://swiftwithmajid.com - не только SwiftUI, кратко и по делу ;,%+#*
- 104. ;,%+#* Stanford SwiftUI course: https://cs193p.sites.stanford.edu FAQ: https://fuckingswiftui.com Improved SwiftUI docs: https://swiftontap.com ⭐ SwiftUI Layout System: https://kean.blog/post/swiftui-layout-system
- 106. Вопросы, предложения, комментарии @pycuk →