TechDays Korea 2015

1. Rx(Reactive Extensions) 기반
반응형 응용프로그램 아키텍처
이규원(Yi Gyuwon)
Microsoft MVP
Chief Technology Officer
envicase
gyuwon@live.com
www.facebook.com/gyuwon.yi

2. 세션 개요
효율적인 뷰 상태 동기화 구현법을 고민합니다.
Rx와 MVVM 패턴을 사용하여 관심사를 분리하는 방법을 이해합니다.
 Rx(Reactive Extensions)는 반응형 프로그래밍 도구입니다.
 MVVM(Model-View-ViewModel) 패턴은 수평적 분리를 도와주는 아키텍처 패턴입니다.
반응형 모델 스트림 오픈소스 프레임워크 Flip을 소개합니다.

3. 상태 동기화
State Synchronization
상태 동기화
(문제)

4. 마스터-상세 인터페이스(Master-Detail Interface)

5. 탭 응용프로그램(Tabbed Application)

6. 수직적 관심사 분리(Vertical Separation of Concerns)
 관심사 분리(separation of concerns)
 기능(feature)을 모듈로 분리
 분리된 팀에 의한 기능의 개발과 관리
 테스트 용이성(testability) 및
유지보수성(maintainability) 증대
모듈2
모듈1
모듈3
모듈4
팀 1 팀 2 팀 3 팀 4

7. 그래픽 사용자 인터페이스 응용프로그램
사용자 인터페이스
논리2
논리1
논리3
논리4
뷰 2뷰 1 뷰 3 뷰 4
*수평적분리
사용자

8. 뷰 상태 동기화(View State Synchronization)
논리2
논리1
논리3
논리4
뷰 2뷰 1 뷰 3 뷰 4

10. 단방향 데이터 흐름
One-way Data Flow
상태 동기화
(문제)
단방향 흐름
(아이디어)

11. 발행-구독 패턴(Publish-Subscribe Pattern)
 메시징(messaging) 패턴
 전송자는 수신자에게 직접 메시지를 보내지 않는다
 구독자에 대해 알지 못한 채 메시지를 전송
 발행자에 대해 알지 못한 채 메시지를 수신
 약한 결함(loose coupling)
 테스트 용이성(testability)
 규모 확장성(scalability)

12. 발생/구독 기반 상태 흐름(Pub/Sub based State Flow)
논리 1
논리 2
논리 3
뷰 1
뷰 2
뷰 3
메시지 중개자

13. 테스트 용이성(Testability)
논리 1

14. 규모확장성(Scalability)
논리 1
논리 2
논리 3
뷰 1
뷰 2
뷰 3
논리 4 뷰 4
메시지 중개자

15. 상태 동기화 복잡도(Complexity of State Synchronization)
x1 x2 x3 x4
응용프로그램 규모
복잡도

16. 반응형 모델 스트림
Reactive Model Stream
상태 동기화
(문제)
단방향 흐름
(아이디어)
반응형
스트림
(해결책)

18. 모델 개정의 반응형 스트림
(Reactive Stream of Model Revisions)
… 개정
n + 2
개정
n + 1
개정
n …
Flipbook

19. 반응형 모델 흐름(Reactive Model Flow)
논리 1
논리 2
논리 3
뷰 1
뷰 2
뷰 3

20. Rx(Reactive Extensions)
 Observables + LINQ + Schedulers
 비동기 이벤트 기반 프로그래밍 도구
 관측 대상(observables)으로 비동기 데이터 스트림(asynchronous data
streams)을 표현
 Java, JavaScript, C#, Unity, Scala, Clojure, C++, Ruby, Python,
Groovy, JRuby, Kotlin, Swift
 RxNetty, RxAndroid, RxCocoa
 http://reactivex.io

21. 관측 대상(Observables)
Pull/ Synchronous/ Interactive Push/ Asynchronous/ Reactive
Single value
T
f(x);
Task<T>
f(await x);
Multiple values
IEnumerable<T>
foreach (var x in xs)
{
f(x);
}
IObservable<T>
xs.Subscribe(x =>
{
f(x);
});

22. 관측 대상과 관측자(Observables and Observers)
IObservable<T>
public interface IObservable<out T>
{
IDisposable Subscribe(
IObserver<T> observer);
}
IObserver<T>
public interface IObserver<in T>
{
void OnNext(T value);
void OnError(Exception error);
void OnCompleted();
}

23. 데모
Reactive Extensions

24. 모듈
Rx를 사용한 반응형 모델 흐름
(Reactive Model Flow with Rx)
발행(방출) 구독
논리 뷰(관측자)
명령
모델 스트림(관측 대상)

25. RMVVM
ReactiveModel-View-ViewModel
상태 동기화
(문제)
단방향 흐름
(아이디어)
반응형
스트림
(해결책)
+ MVVM

26. 모델-뷰-뷰모델(Model-View-ViewModel, MVVM) 아키텍처 패턴
2005년, John Gossman(Microsoft)에 의해 소개
프리젠테이션(presentation)과 프리젠테이션 논리(presentation
logic) 분리
양방향 바인딩(two-way binding)
속성과 명령(properties and commands)
테스트 용이성(testability)
 WPF, Silverlight, Xamarin Forms, AngularJS, EmberJS, KnockoutJS,
RoboBinding

27. MVVM 응용프로그램
뷰모델
프리젠테이션
논리
뷰
사용자
인터페이스
모델
비즈니스 논리
및 데이터
양방향 바인딩
테스트하기 쉬움 테스트하기 어려움

28. 반응형모델-뷰-뷰모델(ReactiveModel-View-ViewModel)
 반응형 모델 스트림 + MVVM 패턴
 envicase
 단방향 모델 바인딩
 규모확장성(scalability)

29. RMVVM 응용프로그램
뷰 상태
<< 양방향 >>
뷰뷰모델
모델
<< 단방향 >>
명령
모델 스트림
방출
구독

30. Flip
반응형 모델 스트림 프레임워크
상태 동기화
(문제)
단방향 흐름
(아이디어)
반응형
스트림
(해결책)
+ MVVM Flip
(프레임워크)

31. Flip
 반응형 모델 스트림 프레임워크
 오픈소스 프로젝트
 유일한 의존성은 Rx(Rx는 거의 모든 곳에 있습니다!)
 envicase iOS 응용프로그램 개발 경험 사례 반영
 https://github.com/envicase/flip

32. 스트림과 연결(Streams and Connections)
스트림
연결
IObservable
IDisposable
논리 뷰 IObserver
스트림 생명주기 관리
동질성검사기
비동기스위치
상태유착기
약한구독

33. 프로젝트 로드맵
 Flip(.NET/ Xamarin)
 Flip.Mvvm
 …
 Flip.js
 Flip.js.knockout
 Flip.js.react
 …
 Flip.Android
 Flip.Android.Mvp
 Flip.Android.Mvvm
 …

34. 데모
Flip.Mvvm

35. 서버측 프로젝트 로드맵
App
Flip
View View
App
Flip
View View
App
Flip
View View
Flip.Scale
on CLR/ JVM/
Node.js
SignalR/ Vert.x/ Socket.io

36. 프로젝트에 참여하세요!

37. 관련 컨텐트
 http://reactivex.io
 https://github.com/Reactive-Extensions
 https://github.com/ReactiveX/RxJava
 Introduction to Model/View/ViewModel pattern for building WPF apps
http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx
 WPF Apps With The Model-View-ViewModel Design Pattern
https://msdn.microsoft.com/en-us/magazine/dd419663.aspx
 https://github.com/envicase/flip
 https://github.com/gyuwon/tdk2015

38. ASP.NET Korea User Group
한국 ASP.NET 개발자 모임입니다.
ASP.NET에 관심이 있다면 누구나
참여하실 수 있는 공개 그룹입니다.
https://www.facebook.com/groups/AspxKorea

39. www.envicase.com/company/recruit
recruit@envicase.com

41. http://aka.ms/td2015_again
TechDays Korea 2015에서 놓치신 세션은
Microsoft 기술 동영상 커뮤니티 Channel 9에서
추후에 다시 보실 수 있습니다.