Integrate your app to modern world in Niigata

Integrate your app
to modern world
Mobile Crew NIIGATA
Daiki Matsudate
@d_date
iOS Developer

View Slide

Daiki Matsudate
• Tokyo

• iOS Developer from iOS 4

• Google Developers Expert for Firebase

• Independent Developer

• Sushi

• Book: ʮiOSΞϓϦઃܭύλʔϯೖ໳ʯ

View Slide

View Slide

March, 18 - 20th, 2020
https://www.tryswift.co/

View Slide

Released iOS 13

View Slide

Released iOS 13.1

View Slide

Released iOS 13.2 Beta 2

View Slide

iPhone 11 Pro

View Slide

View Slide

https://twitter.com/ios_memes/status/1174273871983370240?s=21

View Slide

The Age of Declarative UI

View Slide

The Age of Declarative UI
• iOS: SwiftUI

• Android: Jetpack Compose

• ReactNative / Flutter

View Slide

SwiftUI
• UI Framework with declarative Syntax

• Live Preview in Xcode

• Available for iOS, iPadOS, macOS, watchOS and tvOS

• Using newest Swift features

• Property wrapper

• Function Builder

• Opaque Result Type

• Goodbye Storyboard / Xib

View Slide

import SwiftUI
struct SpeakerList: View {
var body: some View {
NavigationView {
List(speakersData, id: \.id) { speaker in
NavigationLink(destination: SpeakerDetail(speaker: speaker)) {
SpeakerRow(speaker: speaker)
}
}
.navigationBarTitle(Text("Speakers"), displayMode: .automatic)
}
}
}
#if DEBUG
struct SpeakerList_Previews : PreviewProvider {
static var previews: some View {
Group {
SpeakerList()
.environment(\.colorScheme, .light)
SpeakerList()
.environment(\.colorScheme, .dark)
}
}
}
#endif

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif
public protocol View {
associatedtype Body : View
var body: Self.Body { get }
}

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif

View Slide

import SwiftUI
var body: View {
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif

View Slide

import SwiftUI
var body: NavigationView>> {
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif
Opaque Result Type

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif
No Comma!

View Slide

import SwiftUI
NavigationView {
}
}
}
}
}
#if DEBUG
Group {
SpeakerList()
SpeakerList()
}
}
}
#endif
Function Builders

View Slide

struct ContentView: View {
@State var selectedIndex: Int = 0
ZStack {
Color(UIColor.systemBackground)
.edgesIgnoringSafeArea(.all)
TabView(selection: $selectedIndex) {
SpeakerList().tabItem { Text("Speaker").tag(0) }
ScheduleList().tabItem { Text("Schedule").tag(1) }
SponsorList().tabItem { Text("Sponsor").tag(2) }
Text("Other").tabItem { Text("Other").tag(3) }
}
}
}
}

View Slide

ZStack {
}
}
}
}
Property Wrapper
wrappedValue: Value
projectedValue: Wrapped
Without $
With $

View Slide

ZStack {
}
}
}
}
Property Wrapper
Value
Binding
Without $
With $
cf. RxSwift.BehaviorRelay

View Slide

SwiftUI
• UI Framework with declarative Syntax

• Live Preview in Xcode

• Available for iOS, iPadOS, macOS, watchOS and tvOS

• Using newest Swift features

• Property wrapper

• Function Builder

• Opaque Result Type

View Slide

Available in iOS 13

View Slide

Ready for SwiftUI

View Slide

Small components
Key Concept

View Slide

Model View Controller

View Slide

Massive View Controller

View Slide

• Business logic in View Controller

•

View Slide

• Business logic in View Controller

• Many UI Components in one View Controller

View Slide

Small Components
• Use StackView as possible

• Use Xib as possible

• Use UIViewController than UIView

View Slide

Small Components
• Use StackView as possible

• Use Xib as possible

• Use UIViewController than UIView
super.init(nibName: nil, bundle: nil)

View Slide

Ex. Compositional Layout
• Featured content

• Other sections

• The order will be A/B testing

View Slide

Horizontal CollectionView
Vertical CollectionView

View Slide

Vertical Stack view
Horizontal CollectionView
Vertical CollectionView

View Slide

VStackViewController
override open func viewDidLoad() {
super.viewDidLoad()
components.forEach { [weak self] in self?.addChild($0) }
view.addSubview(scrollView, constraints: .allEdges())
scrollView.addSubview(stackView,
constraints: .allEdges() + [equal(\.widthAnchor)])
components.forEach { [weak self] in
guard let self = self else { return }
self.stackView.addArrangedSubview($0.view)
}
$0.didMove(toParent: self)
}
}

View Slide

import UIKit
open class VStackViewController: UIViewController {
public let scrollView: UIScrollView = .init()
public let stackView: UIStackView = {
let stackView: UIStackView = .init()
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .equalSpacing
stackView.spacing = 0
return stackView
}()
var components: [UIViewController]
public init(components: [UIViewController]) {
self.components = components
}

View Slide

super.viewDidLoad()
constraints: .allEdges() + [equal(\.widthAnchor)])
}
}
}
Set Constraints all edges of
view and width anchor

View Slide

import UIKit
final class HomeViewController: VStackViewController {
private let featuredComponent = HomeFeaturedCellViewController(dependencies: .init(onTap: { index in
// transition logic
}))
private let rankingComponents = HomeRankingViewController()
init() {
super.init(components: [featuredComponent, rankingComponents])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidLoad() {
super.viewDidLoad()
title = "Home"
}

View Slide

import UIKit
final class HomeViewController: VStackViewController {
private let featuredComponent = HomeFeaturedCellViewController(dependencies: .init(onTap: { index in
// transition logic
}))
private let rankingComponents = HomeRankingViewController()
init() {
super.init(components: [featuredComponent, rankingComponents])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
super.viewDidLoad()
title = "Home"
}
Override initializer with
child components

View Slide

Ex. User Registration
• Each form need to be validate

• Enable to tap “Done” when all form has valid

• Show error below each form

View Slide

Ex. User Registration
Vertical Stack view
FormViewController
FormViewController
FormViewController
FormViewController

View Slide

FormViewController
class FormViewController: UIViewController {
struct Dependency {
let title: String
let placeholder: String
let validation: (String) -> ValidationResult
let textContentType: UITextContentType?
let keyboardType: UIKeyboardType?
let isSecureTextEntry: Bool
init(title: String, placeholder: String, validation: @escaping
(String) -> ValidationResult, textContentType: UITextContentType? = nil,
keyboardType: UIKeyboardType? = nil, isSecureTextEntry: Bool = false) {
self.title = title
self.placeholder = placeholder
self.validation = validation
self.textContentType = textContentType
self.keyboardType = keyboardType
self.isSecureTextEntry = isSecureTextEntry
}
}

View Slide

FormViewController
@IBOutlet private var titleLabel: UILabel!
@IBOutlet var textField: UITextField!
@IBOutlet private var errorLabel: UILabel!
private let dependency: Dependency
private let disposeBag = DisposeBag()
private lazy var viewModel: FormViewModel =
.init(text: self.textField.rx.text.orEmpty.asDriver(),
validation: self.dependency.validation)
var isValid: Driver {
return viewModel.validatedValue.map { $0.isValid }
}
init(dependency: Dependency) {
self.dependency = dependency
}

View Slide

FormViewController
super.viewDidLoad()
errorLabel.isHidden = true
titleLabel.text = dependency.title
textField.placeholder = dependency.placeholder
textField.textContentType = dependency.textContentType
if let keyboardType = dependency.keyboardType {
textField.keyboardType = keyboardType
}
viewModel.validatedValue
.drive(errorLabel.rx.validationResult)
.disposed(by: disposeBag)
}

View Slide

Stack in horizontal
HStack!

View Slide

HStackViewController
import UIKit
open class HStackViewController: UIViewController {
stackView.axis = .horizontal
return stackView
}()
}

View Slide

import UIKit
open class HStackViewController: UIViewController {
stackView.axis = .horizontal
return stackView
}()
}
Set to horizontal
Scroll View
Own child view controllers

View Slide

super.viewDidLoad()
constraints: .allEdges() + [equal(\.heightAnchor)])
}
}
}

View Slide

super.viewDidLoad()
constraints: .allEdges() + [equal(\.heightAnchor)])
}
}
}
Set Constraints all edges of
view and height anchor

View Slide

final class RegisterContentViewController: VStackViewController {
private let userNameComponent =
FormViewController(
dependency: .init(
title: "Nickname",
placeholder: "Nickname",
validation: FormValidationService.shared.validate(nickName:),
textContentType: .givenName
)
)
private let emailComponent =
FormViewController(
dependency: .init(
title: "Email",
placeholder: "Email",
validation: FormValidationService.shared.validate(email:),
textContentType: .emailAddress
)
)
Initialize components

View Slide

init() {
super.init(
components: [
userNameComponent,
emailComponent,
creditCardComponent,
HStackViewController(
components: [expirationComponent, securityCodeComponent]
)
]
)
}
Initialize components

View Slide

Gather validation results
How to be enabled?

View Slide

lazy var isValidateForms: Driver = Driver.combineLatest(
userNameComponent.isValid,
emailComponent.isValid,
creditCardComponent.isValid,
securityCodeComponent.isValid,
expirationComponent.isValid
) {
$0 && $1 && $2 && $3 && $4
}
.distinctUntilChanged()
Passing results
isValidateForms
.drive(onNext: { [weak self] in
self.confirmViewController.set(isValid: $0)
})
.disposed(by: disposeBag)

View Slide

Enabled

View Slide

Error
Disabled

View Slide

View Slide

private let userNameComponent =
FormViewController(
dependency: .init(
title: "Nickname",
)
)
private let emailComponent =
FormViewController(
dependency: .init(
title: "Email",
)
)
Initialize components in UIKit

View Slide

private let userNameView = UIHostingController(
rootView: FormView(
dependency: .init(
title: "Nickname",
)
))
private let emailView = UIHostingController(
rootView: FormView(
dependency: .init(
title: "Email",
)
))
Initialize components in SwiftUI

View Slide

init() {
super.init(
components: [
userNameComponent,
emailComponent,
components: [expirationComponent, securityCodeComponent]
)
]
)
}
Initialize components in UIKit

View Slide

init() {
super.init(
components: [
userNameView,
emailView,
creditCardView,
components: [expirationView, securityCodeView]
)
]
)
}
Initialize components in SwiftUI

View Slide

FormViewController.xib

View Slide

FormViewController.xib
VStack
Title
Text Field
Error Label

View Slide

ZStack {
VStack {
HStack {
Text(dependency.title)
.font(Font.system(size: 12, weight: .medium, design: .default))
.foregroundColor(Color(UIColor.label))
Spacer()
}
TextField(dependency.placeholder, text: $viewModel.value)
.font(.system(size: 14, weight: .medium, design: .default))
.textFieldStyle(RoundedBorderTextFieldStyle())
.textContentType(dependency.textContentType)
.keyboardType(dependency.keyboardType ?? .default)
if !viewModel.isValid && !viewModel.isEmpty {
HStack {
Text(viewModel.errorMessage)
.foregroundColor(.red)
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI

View Slide

ZStack {
VStack {
HStack {
Spacer()
}
HStack {
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI
For Light / Dark mode

View Slide

ZStack {
VStack {
HStack {
Spacer()
}
HStack {
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI
Stack

View Slide

ZStack {
VStack {
HStack {
Spacer()
}
HStack {
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI
Title Label

View Slide

ZStack {
VStack {
HStack {
Spacer()
}
HStack {
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI
Text Field

View Slide

ZStack {
VStack {
HStack {
Spacer()
}
HStack {
Spacer()
}
}
}
.padding()
}
}
FormView in SwiftUI
Error label

View Slide

FormView preview
struct FormView_Previews: PreviewProvider {
let form = FormView(dependency: .init(
title: "Email",
textContentType: .emailAddress))
return Group {
form.environment(\.colorScheme, .light)
form.environment(\.colorScheme, .dark)
}
.previewLayout(.fixed(width: 414, height: 129))
}
}

View Slide

FormView preview
struct FormView_Previews: PreviewProvider {
let form = FormView(dependency: .init(
title: "Email",
textContentType: .emailAddress))
return Group {
form.environment(\.colorScheme, .light)
form.environment(\.colorScheme, .dark)
}
.previewLayout(.fixed(width: 414, height: 129))
}
}
Light Mode
Dark Mode

View Slide

FormView preview

View Slide

Dataﬂow

View Slide

Combine

View Slide

Combine
• Declarative Swift API

• ඇಉظͳΠϕϯτΛܕͱͯ͠දݱ

• ଟछଟ༷ͳԋࢉࢠͰΠϕϯτΛϋϯυϦϯά

• Reactive Framework by Apple

View Slide

https://twitter.com/diegopetrucci/status/1135655480825655297

View Slide

User Interaction
SwiftUI
Action
State
Mutation
View
Updates
Render
!
"
⏰
Publisher
https://developer.apple.com/videos/play/wwdc2019/226/

View Slide

Dataﬂow in FormView
struct FormView: View {
let dependency: FormViewController.Dependency
@ObservedObject var viewModel: FormViewSwiftUIModel
init(dependency: FormViewController.Dependency) {
self.viewModel = .init(validation: dependency.validation)
}
var isValid: Bool {
viewModel.isValid && !viewModel.isEmpty
}

View Slide

struct FormView: View {
let dependency: FormViewController.Dependency
@ObservedObject var viewModel: FormViewSwiftUIModel
init(dependency: FormViewController.Dependency) {
self.viewModel = .init(validation: dependency.validation)
}
var isValid: Bool {
viewModel.isValid && !viewModel.isEmpty
}
ViewModel with ObservedObject

View Slide

import Foundation
import SwiftUI
class FormViewSwiftUIModel: ObservableObject {
let validation: (String) -> ValidationResult
var value: String = "" {
willSet {
if newValue != value {
validationResult = self.validation(newValue)
}
}
}
var validationResult: ValidationResult = .empty {
willSet {
objectWillChange.send()
}
}

View Slide

var validationResult: ValidationResult = .empty {
willSet {
switch newValue {
case .failed(let message):
errorMessage = message
case .ok:
isValid = true
isEmpty = false
case .empty:
isValid = false
isEmpty = true
default:
errorMessage = ""
}
objectWillChange.send()
}
}

View Slide

https://developer.apple.com/videos/play/wwdc2019/226/
Input text
$viewModel.value objectWillChange.send()

View Slide

UIKit in SwiftUI

View Slide

UIKit in SwiftUI
• Use UIViewControllerRepresentable / UIViewRepresentable

• Call in SwiftUI View

View Slide

UIKit in SwiftUI
extension FormViewController: UIViewControllerRepresentable {
typealias UIViewControllerType = FormViewController
func makeUIViewController(
context: UIViewControllerRepresentableContext)
-> FormViewController {
let formViewController = FormViewController(dependency: self.dependency)
return formViewController
}
func updateUIViewController(_ uiViewController: FormViewController,
context: UIViewControllerRepresentableContext) {
}
func makeCoordinator() -> () {
}
}

View Slide

UIKit in SwiftUI
ZStack {
VStack {
userNameComponent
emailComponent
creditCardComponent
HStack {
expirationComponent
securityCodeComponent
Spacer()
}
Spacer()
}
}
}

View Slide

UIKit in SwiftUI
ZStack {
VStack {
userNameComponent
emailComponent
creditCardComponent
HStack {
expirationComponent
securityCodeComponent
Spacer()
}
Spacer()
}
}
}
super.init(
components: [
userNameComponent,
emailComponent,
components: [expirationComponent,
securityCodeComponent]
)]
)

View Slide

struct RegisterContentView_Previews: PreviewProvider {
let content = RegisterContentView()
return
Group {
NavigationView {
content.environment(\.colorScheme, .light)
}
NavigationView {
content.environment(\.colorScheme, .dark)
}
}
}
}
UIKit in SwiftUI - Preview

View Slide

Automatic Preview with UIHostController

View Slide

Failed to load xib inside SwiftUI

View Slide

Time to throw away xib

View Slide

Use Stack view as possible

View Slide

let stackView = UIStackView(arrangedSubviews:
[titleLabel, textField, errorLabel])
stackView.axis = .vertical
view.addSubview(stackView, constraints: .allEdges(margin: 16))
Use stack view instead of xib

View Slide

Use stack view instead of xib

View Slide

Recap - UIKit to SwiftUI
• Use stack view as possible

• Some of SwiftUI feature still be broken

• Sometime need to use UIKit instead

• Keeping components small is key factor to migrate

View Slide

Integrate your app to modern world in Niigata

Integrate your app to modern world in Niigata

d_date

More Decks by d_date

Other Decks in Programming

Featured

Transcript