Rx(Reactive Extensions) 기반반응형응용프로그램아키텍처이규원(Yi Gyuwon)

Microsoft MVP

Chief Technology Officer

envicase

gyuwon@live.com

www.facebook.com/gyuwon.yi

세션개요

효율적인뷰상태동기화구현법을고민합니다.

Rx와 MVVM 패턴을사용하여관심사를분리하는방법을이해합니다.

Rx(Reactive Extensions)는 반응형프로그래밍 도구입니다.

MVVM(Model-View-ViewModel) 패턴은수평적분리를도와주는아키텍처패턴입니다.

반응형모델스트림오픈소스프레임워크 Flip을소개합니다.

상태동기화State Synchronization

상태동기화(문제)

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

탭응용프로그램(Tabbed Application)

수직적관심사분리(Vertical Separation of Concerns)

관심사분리(separation of concerns)

기능(feature)을모듈로분리

분리된팀에의한기능의개발과관리

테스트용이성(testability) 및유지보수성(maintainability) 증대

모듈

2

모듈

1

모듈

3

모듈

4

팀 1 팀 2 팀 3 팀 4

그래픽사용자인터페이스응용프로그램

사용자인터페이스

논리

2

논리

1

논리

3

논리

4

뷰 2뷰 1 뷰 3 뷰 4

*수평적분리

사용자

뷰상태동기화(View State Synchronization)

논리

2

논리

1

논리

3

논리

4

뷰 2뷰 1 뷰 3 뷰 4

단방향데이터흐름One-way Data Flow

상태동기화(문제)

단방향흐름(아이디어)

발행-구독패턴(Publish-Subscribe Pattern)

메시징(messaging) 패턴

전송자는수신자에게직접메시지를보내지않는다

구독자에대해알지못한채메시지를전송

발행자에대해알지못한채메시지를수신

약한결함(loose coupling)

테스트용이성(testability)

규모확장성(scalability)

발생/구독기반상태흐름(Pub/Sub based State Flow)

논리 1

논리 2

논리 3

뷰 1

뷰 2

뷰 3

메시지중개자

테스트용이성(Testability)

논리 1

규모확장성(Scalability)

논리 1

논리 2

논리 3

뷰 1

뷰 2

뷰 3

논리 4 뷰 4

메시지중개자

상태동기화복잡도(Complexity of State Synchronization)

x1 x2 x3 x4

응용프로그램규모

복잡도

반응형모델스트림Reactive Model Stream

상태동기화(문제)

단방향흐름(아이디어)

반응형스트림(해결책)

모델개정의반응형스트림(Reactive Stream of Model Revisions)

… 개정n + 2

개정n + 1

개정n …

Flipbook

반응형모델흐름(Reactive Model Flow)

논리 1

논리 2

논리 3

뷰 1

뷰 2

뷰 3

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

관측대상(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);});

관측대상과관측자(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();

}

데모Reactive Extensions

모듈

Rx를사용한반응형모델흐름(Reactive Model Flow with Rx)

발행(방출) 구독

논리 뷰(관측자)명령

모델스트림(관측 대상)

RMVVMReactiveModel-View-ViewModel

상태동기화(문제)

단방향흐름(아이디어)

반응형스트림(해결책)

+ MVVM

모델-뷰-뷰모델(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

MVVM 응용프로그램

뷰모델

프리젠테이션논리

뷰

사용자인터페이스

모델

비즈니스논리및데이터

양방향바인딩

테스트하기쉬움 테스트하기어려움

반응형모델-뷰-뷰모델(ReactiveModel-View-ViewModel)

반응형모델스트림 + MVVM 패턴

envicase

단방향모델바인딩

규모확장성(scalability)

RMVVM 응용프로그램

뷰상태<< 양방향 >>

뷰뷰모델

모델<< 단방향 >>

명령

모델스트림

방출

구독

Flip반응형모델스트림프레임워크

상태동기화(문제)

단방향흐름(아이디어)

반응형스트림(해결책)

+ MVVM Flip(프레임워크)

Flip

반응형모델스트림프레임워크

오픈소스프로젝트

유일한의존성은 Rx(Rx는거의모든곳에있습니다!)

envicase iOS 응용프로그램개발경험사례반영

https://github.com/envicase/flip

스트림과연결(Streams and Connections)

스트림

연결IObservable

IDisposable

논리 뷰 IObserver

스트림생명주기관리

동질성검사기

비동기스위치

상태유착기

약한구독

프로젝트로드맵

Flip(.NET/ Xamarin) Flip.Mvvm …

Flip.js Flip.js.knockout Flip.js.react …

Flip.Android Flip.Android.Mvp Flip.Android.Mvvm …

데모Flip.Mvvm

서버측프로젝트로드맵

AppFlip

View View

AppFlip

View View

AppFlip

View View

Flip.Scaleon CLR/ JVM/

Node.js

SignalR/ Vert.x/ Socket.io

프로젝트에참여하세요!

관련컨텐트

http://reactivex.io

https://github.com/Reactive-Extensions

https://github.com/ReactiveX/RxJava

Introduction to Model/View/ViewModel pattern for building WPF appshttp://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx

WPF Apps With The Model-View-ViewModel Design Patternhttps://msdn.microsoft.com/en-us/magazine/dd419663.aspx

https://github.com/envicase/flip

https://github.com/gyuwon/tdk2015

ASP.NET Korea User Group

한국 ASP.NET 개발자모임입니다.

ASP.NET에관심이있다면누구나참여하실수있는공개그룹입니다.

https://www.facebook.com/groups/AspxKorea

www.envicase.com/company/recruit

recruit@envicase.com

http://aka.ms/td2015_again

TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서

추후에 다시 보실 수 있습니다.