iOS 개발자의 Flutter 체험기

C H O I @ WA N B O K . C O MF B . C O M /
L I N E B I Z P L U S

D I S C L A I M E R
F L U T T E R "
.
# .

• iOS Flutter
• https://flutter.dev/docs/get-started/flutter-for/ios-devs
• https://flutter-ko.dev/docs/get-started/flutter-for/ios-devs
• ‘ Flutter ?’

• iOS / / / / /
• iOS Flutter
• iOS Flutter

📋 A U T O C L I P
, F L U T T E R ?

R O U T I N E
•
•
• , , ,
• Bloc Architecture

I O S
IDE
Declarative UI Pattern
Data flow & Architecture
Asynchrony Support Pattern matching
Annotations
Documents

I D E
:https://stackoverflow.com/questions/43635522/what-is-lldb-rpc-server-when-does-it-crash-in-xcode-why-it-crashes

I D E
• Light
• Configurable
• I know it

I D E
• Strong / Heavy
• Required for android
• Familiar for android developer

🗺 D E C L A R AT I V E U I PAT T E R N

D E C L A R AT I V E P R O G R A M M I N G
•
•
• (Impertive)
• (Declarative)

•
• (Impertive)
•
• ? (How it is to be computed)
• (Declarative)

•
• (Impertive)
• (Declarative)
• SQL, Apache Ant(partially), HTML
• ? (What is to be computed)

D E C L A R AT I V E U I
• UI ?
• UI ?
// Declarative style
return ViewB(
color: red,
child: ViewC(...),
)
// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

C O N S ( C O N C E R N )
• Overhead
• Mindset
• Performance
• Too many Elements and Properties

D ATA F L O W & A R C H I T E C T U R E

S O U R C E O F T R U T H
: https://developer.apple.com/videos/play/wwdc2019/226/

D U P L I C AT E D S O U R C E O F T R U T H

S I N G L E S O U R C E O F T R U T H

Scope Source Of Truth State
UI StatefulWidget Ephemeral State
App ? App State

D ATA F L O W
: https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Scope Source Of Truth State
UI StatefulWidget Ephemeral State
App MyApp? App State

B L O C V S R E A C T O R K I T
Bloc ReactorKit
Presentational Component View
BLoC Reactor
Event Action
States State
Backend Service

📬 A S Y N C H R O N Y S U P P O R T

D A R T
Single Items Multiple Items
Synchronous T getData() List<T> getData()
Asynchronous Future<T> getData() Stream<T> getData()

S W I F T
Synchronous T getData() Collection<T> getData()
Asynchronous None
Beta
(Publisher<T> in Combine)

S W I F T W I T H R X
Synchronous T getData() Collection<T> getData()
Asynchronous Single<T> getData() Observable<T> getData()

W H Y D O E S R X D A R T E X I S T ?
🤔

🧩 PAT T E R N M AT C H I N G

B L O C E X A M P L E : I N F I N I T Y L I S T
import 'package:equatable/equatable.dart';
abstract class PostEvent extends Equatable {}
class Fetch extends PostEvent {
@override
String toString() => 'Fetch';
}

...
class PostUninitialized extends PostState { ... }
class PostError extends PostState { ... }
class PostLoaded extends PostState {
final List<Post> posts;
final bool hasReachedMax;
PostLoaded({ this.posts, this.hasReachedMax,})
: super([posts, hasReachedMax]);
PostLoaded copyWith({ List<Post> posts, bool hasReachedMax, }) {
return PostLoaded(
posts: posts ?? this.posts,
hasReachedMax: hasReachedMax ?? this.hasReachedMax,
);
}
...
}

class PostBloc extends Bloc<PostEvent, PostState> {
...
@override
Stream<PostState> mapEventToState(PostEvent event) async* {
if (event is Fetch && !_hasReachedMax(currentState)) {
try {
if (currentState is PostUninitialized) {
final posts = await _fetchPosts(0, 20);
yield PostLoaded(posts: posts, hasReachedMax: false);
return;
}
if (currentState is PostLoaded) {
final posts =
await _fetchPosts((currentState as PostLoaded).posts.length, 20);
yield posts.isEmpty
? (currentState as PostLoaded).copyWith(hasReachedMax: true)
: PostLoaded(
posts: (currentState as PostLoaded).posts + posts,
hasReachedMax: false,
);
}
} catch (_) {
yield PostError();
}
}
}
}

R E A C T O R K I T E X A M P L E
import RxSwift
class PostListReactor {
enum Action {
...
case fetch([Post])
}
enum Mutation {
case setIsInitialized(Bool)
case setIsLoaded(Bool)
case setPosts([Post])
case setHasReachedMax(Bool)
case setError(Error?)
}
struct State {
let isInitialized: Bool = false
let isLoaded: Bool = false
let posts: [Post] = []
let hasReachedMax: Bool = false
let error: Error? = nil
}
let initialState: State = .init()
...

func mutate(action: Action) -> Observable<Mutation> {
switch action {
...
case let .fetch(posts):
let posts: Observable<Mutation> = .just(.setPosts(posts))
let hasReachedMax: Observable<Mutation> = .just(.setHasReachedMax(posts.isEmpty))
return .concat(posts, hasReachedMax)
}
}
func reduce(mutation: Mutation, state: State) -> Observable<State> {
var state = state
switch mutation {
case let .setPost(posts) where currentState.isLoaded:
state.posts += posts
case let .setPost(posts) where !currentState.isLoaded:
state.posts = posts
case let .setHasReachedMax(hasReachedMax):
state.hasReachedMax = hasReachedMax
}
return state
}
}

A N N O TAT I O N
• Property Wrapper 16 Accepted
• https://github.com/apple/swift-evolution/blob/master/proposals/0258-
property-wrappers.md

D O C U M E N TAT I O N
• Flutter
• YouTube
•
• Google I/O
• iOS
•
• WWDC

IDE
Data ﬂow & Architecture

IDE
Asynchrony Support

IDE

IDE
Annotations

IDE
Annotations
Documents

R E F E R E N C E
• Wikipedia: Declarative Programming
• https://en.wikipedia.org/wiki/Declarative_programming
• Declarative UI and Vaadin Designer
• https://www.youtube.com/watch?v=MwuIDsFizMA
• Practical advantages of declarative programming
• ftp://cliplab.org/pub/papers/PARFORCE/second_review/D.WP3.1.M2.3.ps.Z
• Algorithm = Logic + Control
• https://www.doc.ic.ac.uk/~rak/papers/algorithm%20=%20logic%20+%20control.pdf
• List of programming languages by type
• https://en.wikipedia.org/wiki/List_of_programming_languages_by_type#Declarative_languages

R E F E R E N C E
• Flutter Youtube
• https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw
• WWDC 2019 Data Flow through SwiftUI
• https://developer.apple.com/videos/play/wwdc2019/226/
• Flux
• https://facebook.github.io/flux/docs/in-depth-overview
• ReactorKit
• https://github.com/ReactorKit/ReactorKit

iOS 개발자의 Flutter 체험기

iOS 개발자의 Flutter 체험기

More Related Content

Similar to iOS 개발자의 Flutter 체험기

More from Wanbok Choi

Recently uploaded

iOS 개발자의 Flutter 체험기