Избавляемся от старья и переходим на SwiftUI

https://www.youtube.com/watch?v=hkTO-W6xc_s

Transcript

3. Не про SwiftUI, а про наш опыт с ним
6. Просто хотелось нового
7. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
8. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
9. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
10. SwiftUI Как работает Layout Как работает Data Flow Как работает механизм Preference Как работает механизм Environment Чем отличаются Property Wrappers По желанию: как работают анимации * Полезные ссылки будут в конце
11. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы 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. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы SwiftUI на упражнениях Посмотрели что есть в нашем приложении и как мы будем решать это на SwiftUI Разделили между собой задачи на изучение Засинкались и составили базу знаний
14. Обсудили идею внутри команды Посоветовались с бизнесом и подготовили к рискам Изучили базовые основы 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
17. https://mixpanel.com/trends/#report/ios_15
18. Список поддерживаемых устройств у iOS 13 и iOS 14 одинаковый, каждый может обновиться при желании #available(iOS 14, *)
19. Image loading https://github.com/kean/NukeUI https://github.com/cmtrounce/SwURL https://github.com/geekaurora/SwiftWebImage https://github.com/dmytro-anokhin/url-image https://github.com/SDWebImage/SDWebImageSwiftUI
20. Выбрали Nuke + Уже используется в проекте + Проверен временем + Общий кэш с UIKit (потому что там тоже Nuke) – Нет стабильной версии Написали враппер, чтобы можно было легко заменить на другой компонент Image loading
21. iOS 15 AsyncImage
22. iOS 15 AsyncImage
23. Pull-to-refresh Взяли основу из статьи https://swiftui-lab.com/scrollview- pull-to-refresh Выглядит не нативно и иногда дёргается В iOS 15 появился Refreshable модификатор, но только для List !
24. RxSwift + Combine
25. RxSwift + Combine https://github.com/CombineCommunity
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
29. Keyboard handling
30. Dark mode И у картинок тоже так можно Можно сгенерировать, можно написать
31. Dark mode
34. "
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
56. Screen View Model @Published model Actions tap() follow() buy() select() etc
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
73. SPM sucks
74. SPM sucks
75. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect
76. Fixed frame to fix screen layout
77. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect
78. Не работал canvas preview: все библиотеки должны поддерживать arm64, внедрили SPM Иногда лэйаут на экране просто ломается: помогает установка фиксированного фрейма Не работал pull-to-refresh: заменили (Lazy)VStack на LazyVGrid Не доступны все опции привычной кастомизации: https:// github.com/siteline/SwiftUI-Introspect
79. https://github.com/siteline/SwiftUI-Introspect
80. GeometryReader - самое крайнее средство для решения проблемы Мозг переключается не сразу, ему нужно время Не боятся создавать разные View для похожих элементов Лучше использовать 2 пробела вместо 4-х и не писать self На чипах apple silicon работает лучше
83. Custom formatting rules for SwiftUI files 2 self
84. Не всегда плавный скроллинг Некоторый функционал не доступен на iOS 14 Какие-то вещи сделать просто невозможно
85. Не всегда плавный скроллинг Некоторые 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:)
89. available(iOS 15, *) https://www.fivestars.blog/articles/safe-area-insets/ safeAreaInset()
90. LazyVGrid(pinnedViews: .sectionHeaders) available(iOS 15, *)
91. Не всегда плавный скроллинг Некоторый функционал не доступен на iOS 14 Какие-то вещи сделать просто невозможно https://github.com/siteline/SwiftUI-Introspect
92. 31 экран за 9 месяцев
93. Радость Скорость Простота
94. 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. Для меня SwiftUI стал глотĸом свежого воздуха и разнообразия в работе, первое время реально тяжело, но голова быстро перестраивается. Иногда я сĸучаю по UIKit и его гибĸости, ĸоторая поĸа превосходит SwiftUI, но ĸажется это будет недолго.
96. 21 июня, вт 10:00 – 11:00 Егор Петров SwiftUI vs UIKit: to be or not to be?
97. App SwiftUI Чистый билд ~20 сек Hot reload $ Чистый билд ~2 мин Screens Views Models View Models Services Network Analytics Navigation View Controllers Views + 3rd party SDKs
99. Перевести сервисы на Combine async/await Перевести все экраны на SwiftUI Перевести навигацию на SwiftUI
100. iOS 16
101. https://developer.apple.com/videos/all-videos/?q=swiftui
102. https://developer.apple.com/tutorials/swiftui - туториалы от эпл https://swiftui-lab.com - глубокие статьи про сложные штуки https://www.fivestars.blog/swiftui - очень хорошо https://swiftwithmajid.com - не только SwiftUI, кратко и по делу
103. Тоже что-то есть: https://sarunw.com/tags/swiftui https://www.swiftbysundell.com/tags/swiftui https://serialcoder.dev/category/text-tutorials/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
105. Objective-С UIKit Interface Builder
106. Вопросы, предложения, комментарии @pycuk →