Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rx(Reactive Extensions) 기반
반응형 응용프로그램 아키텍처
이규원(Yi Gyuwon)
Microsoft MVP
Chief Technology Officer
envicase
gyuwon@live.com
...
세션 개요
효율적인 뷰 상태 동기화 구현법을 고민합니다.
Rx와 MVVM 패턴을 사용하여 관심사를 분리하는 방법을 이해합니다.
 Rx(Reactive Extensions)는 반응형 프로그래밍 도구입니다.
 MVVM(...
상태 동기화
State Synchronization
상태 동기화
(문제)
마스터-상세 인터페이스(Master-Detail Interface)
탭 응용프로그램(Tabbed Application)
수직적 관심사 분리(Vertical Separation of Concerns)
 관심사 분리(separation of concerns)
 기능(feature)을 모듈로 분리
 분리된 팀에 의한 기능의 개발과 관리
...
그래픽 사용자 인터페이스 응용프로그램
사용자 인터페이스
논리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) 패턴
 전송자는 수신자에게 직접 메시지를 보내지 않는다
 구독자에 대해 알지 못한 채 메시지를 전송
 발행자에 대해 알...
발생/구독 기반 상태 흐름(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)으로 비동기 데이터 스트림(asynchr...
관측 대상(Observables)
Pull/ Synchronous/ Interactive Push/ Asynchronous/ Reactive
Single value
T
f(x);
Task<T>
f(await x);
Mu...
관측 대상과 관측자(Observables and Observers)
IObservable<T>
public interface IObservable<out T>
{
IDisposable Subscribe(
IObserve...
데모
Reactive Extensions
모듈
Rx를 사용한 반응형 모델 흐름
(Reactive Model Flow with Rx)
발행(방출) 구독
논리 뷰(관측자)
명령
모델 스트림(관측 대상)
RMVVM
ReactiveModel-View-ViewModel
상태 동기화
(문제)
단방향 흐름
(아이디어)
반응형
스트림
(해결책)
+ MVVM
모델-뷰-뷰모델(Model-View-ViewModel, MVVM) 아키텍처 패턴
2005년, John Gossman(Microsoft)에 의해 소개
프리젠테이션(presentation)과 프리젠테이션 논리(prese...
MVVM 응용프로그램
뷰모델
프리젠테이션
논리
뷰
사용자
인터페이스
모델
비즈니스 논리
및 데이터
양방향 바인딩
테스트하기 쉬움 테스트하기 어려움
반응형모델-뷰-뷰모델(ReactiveModel-View-ViewModel)
 반응형 모델 스트림 + MVVM 패턴
 envicase
 단방향 모델 바인딩
 규모확장성(scalability)
RMVVM 응용프로그램
뷰 상태
<< 양방향 >>
뷰뷰모델
모델
<< 단방향 >>
명령
모델 스트림
방출
구독
Flip
반응형 모델 스트림 프레임워크
상태 동기화
(문제)
단방향 흐름
(아이디어)
반응형
스트림
(해결책)
+ MVVM Flip
(프레임워크)
Flip
 반응형 모델 스트림 프레임워크
 오픈소스 프로젝트
 유일한 의존성은 Rx(Rx는 거의 모든 곳에 있습니다!)
 envicase iOS 응용프로그램 개발 경험 사례 반영
 https://github.c...
스트림과 연결(Streams and Connections)
스트림
연결
IObservable
IDisposable
논리 뷰 IObserver
스트림 생명주기 관리
동질성검사기
비동기스위치
상태유착기
약한구독
프로젝트 로드맵
 Flip(.NET/ Xamarin)
 Flip.Mvvm
 …
 Flip.js
 Flip.js.knockout
 Flip.js.react
 …
 Flip.Android
 Flip.Andr...
데모
Flip.Mvvm
서버측 프로젝트 로드맵
App
Flip
View View
App
Flip
View View
App
Flip
View View
Flip.Scale
on CLR/ JVM/
Node.js
SignalR/ Vert.x/ Soc...
프로젝트에 참여하세요!
관련 컨텐트
 http://reactivex.io
 https://github.com/Reactive-Extensions
 https://github.com/ReactiveX/RxJava
 Introduction...
ASP.NET Korea User Group
한국 ASP.NET 개발자 모임입니다.
ASP.NET에 관심이 있다면 누구나
참여하실 수 있는 공개 그룹입니다.
https://www.facebook.com/groups/As...
www.envicase.com/company/recruit
recruit@envicase.com
http://aka.ms/td2015_again
TechDays Korea 2015에서 놓치신 세션은
Microsoft 기술 동영상 커뮤니티 Channel 9에서
추후에 다시 보실 수 있습니다.
[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)
[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)
[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
Next
Upcoming SlideShare
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기
Next
Download to read offline and view in fullscreen.

15

Share

[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)

Download to read offline

TechDays Korea 2015

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)

  1. 1. Rx(Reactive Extensions) 기반 반응형 응용프로그램 아키텍처 이규원(Yi Gyuwon) Microsoft MVP Chief Technology Officer envicase gyuwon@live.com www.facebook.com/gyuwon.yi
  2. 2. 세션 개요 효율적인 뷰 상태 동기화 구현법을 고민합니다. Rx와 MVVM 패턴을 사용하여 관심사를 분리하는 방법을 이해합니다.  Rx(Reactive Extensions)는 반응형 프로그래밍 도구입니다.  MVVM(Model-View-ViewModel) 패턴은 수평적 분리를 도와주는 아키텍처 패턴입니다. 반응형 모델 스트림 오픈소스 프레임워크 Flip을 소개합니다.
  3. 3. 상태 동기화 State Synchronization 상태 동기화 (문제)
  4. 4. 마스터-상세 인터페이스(Master-Detail Interface)
  5. 5. 탭 응용프로그램(Tabbed Application)
  6. 6. 수직적 관심사 분리(Vertical Separation of Concerns)  관심사 분리(separation of concerns)  기능(feature)을 모듈로 분리  분리된 팀에 의한 기능의 개발과 관리  테스트 용이성(testability) 및 유지보수성(maintainability) 증대 모듈2 모듈1 모듈3 모듈4 팀 1 팀 2 팀 3 팀 4
  7. 7. 그래픽 사용자 인터페이스 응용프로그램 사용자 인터페이스 논리2 논리1 논리3 논리4 뷰 2뷰 1 뷰 3 뷰 4 *수평적분리 사용자
  8. 8. 뷰 상태 동기화(View State Synchronization) 논리2 논리1 논리3 논리4 뷰 2뷰 1 뷰 3 뷰 4
  9. 9. 단방향 데이터 흐름 One-way Data Flow 상태 동기화 (문제) 단방향 흐름 (아이디어)
  10. 10. 발행-구독 패턴(Publish-Subscribe Pattern)  메시징(messaging) 패턴  전송자는 수신자에게 직접 메시지를 보내지 않는다  구독자에 대해 알지 못한 채 메시지를 전송  발행자에 대해 알지 못한 채 메시지를 수신  약한 결함(loose coupling)  테스트 용이성(testability)  규모 확장성(scalability)
  11. 11. 발생/구독 기반 상태 흐름(Pub/Sub based State Flow) 논리 1 논리 2 논리 3 뷰 1 뷰 2 뷰 3 메시지 중개자
  12. 12. 테스트 용이성(Testability) 논리 1
  13. 13. 규모확장성(Scalability) 논리 1 논리 2 논리 3 뷰 1 뷰 2 뷰 3 논리 4 뷰 4 메시지 중개자
  14. 14. 상태 동기화 복잡도(Complexity of State Synchronization) x1 x2 x3 x4 응용프로그램 규모 복잡도
  15. 15. 반응형 모델 스트림 Reactive Model Stream 상태 동기화 (문제) 단방향 흐름 (아이디어) 반응형 스트림 (해결책)
  16. 16. 모델 개정의 반응형 스트림 (Reactive Stream of Model Revisions) … 개정 n + 2 개정 n + 1 개정 n … Flipbook
  17. 17. 반응형 모델 흐름(Reactive Model Flow) 논리 1 논리 2 논리 3 뷰 1 뷰 2 뷰 3
  18. 18. 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
  19. 19. 관측 대상(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); });
  20. 20. 관측 대상과 관측자(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(); }
  21. 21. 데모 Reactive Extensions
  22. 22. 모듈 Rx를 사용한 반응형 모델 흐름 (Reactive Model Flow with Rx) 발행(방출) 구독 논리 뷰(관측자) 명령 모델 스트림(관측 대상)
  23. 23. RMVVM ReactiveModel-View-ViewModel 상태 동기화 (문제) 단방향 흐름 (아이디어) 반응형 스트림 (해결책) + MVVM
  24. 24. 모델-뷰-뷰모델(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
  25. 25. MVVM 응용프로그램 뷰모델 프리젠테이션 논리 뷰 사용자 인터페이스 모델 비즈니스 논리 및 데이터 양방향 바인딩 테스트하기 쉬움 테스트하기 어려움
  26. 26. 반응형모델-뷰-뷰모델(ReactiveModel-View-ViewModel)  반응형 모델 스트림 + MVVM 패턴  envicase  단방향 모델 바인딩  규모확장성(scalability)
  27. 27. RMVVM 응용프로그램 뷰 상태 << 양방향 >> 뷰뷰모델 모델 << 단방향 >> 명령 모델 스트림 방출 구독
  28. 28. Flip 반응형 모델 스트림 프레임워크 상태 동기화 (문제) 단방향 흐름 (아이디어) 반응형 스트림 (해결책) + MVVM Flip (프레임워크)
  29. 29. Flip  반응형 모델 스트림 프레임워크  오픈소스 프로젝트  유일한 의존성은 Rx(Rx는 거의 모든 곳에 있습니다!)  envicase iOS 응용프로그램 개발 경험 사례 반영  https://github.com/envicase/flip
  30. 30. 스트림과 연결(Streams and Connections) 스트림 연결 IObservable IDisposable 논리 뷰 IObserver 스트림 생명주기 관리 동질성검사기 비동기스위치 상태유착기 약한구독
  31. 31. 프로젝트 로드맵  Flip(.NET/ Xamarin)  Flip.Mvvm  …  Flip.js  Flip.js.knockout  Flip.js.react  …  Flip.Android  Flip.Android.Mvp  Flip.Android.Mvvm  …
  32. 32. 데모 Flip.Mvvm
  33. 33. 서버측 프로젝트 로드맵 App Flip View View App Flip View View App Flip View View Flip.Scale on CLR/ JVM/ Node.js SignalR/ Vert.x/ Socket.io
  34. 34. 프로젝트에 참여하세요!
  35. 35. 관련 컨텐트  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
  36. 36. ASP.NET Korea User Group 한국 ASP.NET 개발자 모임입니다. ASP.NET에 관심이 있다면 누구나 참여하실 수 있는 공개 그룹입니다. https://www.facebook.com/groups/AspxKorea
  37. 37. www.envicase.com/company/recruit recruit@envicase.com
  38. 38. http://aka.ms/td2015_again TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서 추후에 다시 보실 수 있습니다.
  • imyostarr

    Aug. 15, 2019
  • ssuserc33d3d

    Aug. 3, 2019
  • KimJiHo1

    May. 6, 2019
  • erunc0

    Aug. 31, 2018
  • ChiwonSong

    Feb. 24, 2017
  • ssuser8d5b54

    Feb. 22, 2017
  • ssuserb9eea4

    Jan. 1, 2017
  • kitaere

    Jan. 1, 2017
  • yangbuk84

    Sep. 26, 2016
  • seokjoonyun9

    Sep. 19, 2016
  • joobn

    Feb. 9, 2016
  • kabjinkwon

    Jan. 31, 2016
  • ssuser23fae3

    Jan. 31, 2016
  • GiwonJang

    Jan. 30, 2016
  • youngjaekim58

    Jan. 30, 2016

TechDays Korea 2015

Views

Total views

2,675

On Slideshare

0

From embeds

0

Number of embeds

16

Actions

Downloads

69

Shares

0

Comments

0

Likes

15

×