Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

126

Transcript of Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Page 1: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 2: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
https://github.com/kciter
Page 3: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 4: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 5: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Reactive ? RxJS vue-rx

Page 6: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Reactive ? RxJS vue-rx

Page 7: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 8: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 9: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 10: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 11: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 12: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 13: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 14: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 15: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

A modern spreadsheet program is an example of reactive programming.- https://en.wikipedia.org/wiki/Reactive_programming

https://en.wikipedia.org/wiki/Reactive_programming
Page 16: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 17: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 18: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 19: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 20: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 21: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
https://ko.wikipedia.org/wiki/%EC%98%B5%EC%84%9C%EB%B2%84_%ED%8C%A8%ED%84%B4
Page 22: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
https://ko.wikipedia.org/wiki/%EC%98%B5%EC%84%9C%EB%B2%84_%ED%8C%A8%ED%84%B4
Page 23: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 24: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 25: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 26: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 27: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 28: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 29: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 30: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 31: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 32: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 33: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 34: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 35: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 36: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 37: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 38: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 39: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 40: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 41: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 42: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 43: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 44: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 45: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 46: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 47: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 48: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Reactive ? RxJS vue-rx

Page 49: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 50: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 51: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 52: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

Page 53: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

Page 54: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Page 55: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Page 56: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 57: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 58: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 59: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 60: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 61: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 62: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 63: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 64: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 65: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 66: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 67: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 68: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 69: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 70: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 71: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

Page 72: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

, UI

Page 73: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

, UI

Page 74: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

, UI

Page 75: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

https://jsfiddle.net/kciter/n0pruyfq/

Wikipedia

input ul

Wikipedia Request

Observable

, UI

Page 76: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Reactive ? RxJS vue-rx

Page 77: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 78: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 79: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 80: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 81: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 82: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 83: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Page 84: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

Page 85: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 86: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 87: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 88: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 89: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 90: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 91: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 92: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 93: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-model=“search”

Wikipedia Request

vue-rx subscriptions

results

Page 94: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 95: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

Page 96: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

Page 97: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

Page 98: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

Page 99: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

domStreams

Page 100: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

domStreams

Page 101: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

domStreams

Page 102: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Wikipedia

v-stream

domStreams

Page 103: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Reactive ? RxJS vue-rx

Page 104: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 105: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 106: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 107: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 108: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 109: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 110: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 111: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 112: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 113: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 114: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 115: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Promise, async/awaitRxJs

Page 116: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Promise, async/awaitRxJs

Cancellable Not cancellable

Page 117: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Promise, async/awaitRxJs

Cancellable Not cancellableOperator -

Page 118: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Promise, async/awaitRxJs

Cancellable Not cancellableOperator -

Page 119: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 120: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Rx ..?

Page 121: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

No! !

Page 122: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

No! !

Page 123: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

No! !

Page 124: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

ToDo

Page 125: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd
Page 126: Vue.js와 Reactive Programming 자막 :: Vuetiful Korea 2nd

Vue.js Reactive Programmin


Reactive programming with Apache Wicket

Reactive programming with Apache Wicket

REACTIVE PROGRAMMING: UN CASO DI STUDIOamslaurea.unibo.it/10451/1/Reactive_programming:_un_.pdf · Reactive Programming is a programming paradigm oriented around data ows and the

REACTIVE PROGRAMMING: UN CASO DI STUDIOamslaurea.unibo.it/10451/1/Reactive_programming:_un_.pdf · Reactive Programming is a programming paradigm oriented around data ows and the

Reactive programming для успеха вашего стартапа

Reactive programming для успеха вашего стартапа

Reactive Programming - Beuth Hochschulepublic.beuth-hochschule.de/~knabe/fach/scala/mb... · Akka, Ratpack, Reactor, RxJava, Vert.x, DB-Treiber Wie Parallelität bewältigen? Beuth-Hochschule

Reactive Programming - Beuth Hochschulepublic.beuth-hochschule.de/~knabe/fach/scala/mb... · Akka, Ratpack, Reactor, RxJava, Vert.x, DB-Treiber Wie Parallelität bewältigen? Beuth-Hochschule

JVM Reactive Programming

JVM Reactive Programming

Communicating finite state machines - TU Dortmund...Programming of Reactive Systems, ARTIST2 Summer School on Embedded Systems, Florianopolis, 2008. technische universität - 33 -

Communicating finite state machines - TU Dortmund...Programming of Reactive Systems, ARTIST2 Summer School on Embedded Systems, Florianopolis, 2008. technische universität - 33 -

Reactive Programming Patterns with RxSwift

Reactive Programming Patterns with RxSwift

Reactive Programming no Android

Reactive Programming no Android

Reactive Absorption

Reactive Absorption

Reactive Programming by UniRx for Asynchronous & Event Processing

Reactive Programming by UniRx for Asynchronous & Event Processing

CEU´ : Embedded, Safe, and Reactive Programming · CEU´: Embedded, Safe, and Reactive Programming Francisco Sant’Anna Noemi de La Rocque Rodriguez Roberto Ierusalimschy fsantanna@inf.puc-rio.br

CEU´ : Embedded, Safe, and Reactive Programming · CEU´: Embedded, Safe, and Reactive Programming Francisco Sant’Anna Noemi de La Rocque Rodriguez Roberto Ierusalimschy [email protected]

Reactive Functional Programming (or, Is That a Parenthesis in Your Pocket?)

Reactive Functional Programming (or, Is That a Parenthesis in Your Pocket?)

Object-oriented programming - Kangwoncs.kangwon.ac.kr/~parkce/course/2015_fall_OOP_rsc/2nd.pdf · 2016-06-17 · Object-oriented programming - 2nd : Java basic programming ... ci

Object-oriented programming - Kangwoncs.kangwon.ac.kr/~parkce/course/2015_fall_OOP_rsc/2nd.pdf · 2016-06-17 · Object-oriented programming - 2nd : Java basic programming ... ci

Crystallization Kinetics of Reactive Dye(Reactive Red 218) in … · 2011-01-04 · Crystallization Kinetics of Reactive Dye(Reactive Red 218) in Salting-out Crystallization System

Crystallization Kinetics of Reactive Dye(Reactive Red 218) in … · 2011-01-04 · Crystallization Kinetics of Reactive Dye(Reactive Red 218) in Salting-out Crystallization System

Monadic Programmingのススメ - Functional Reactive Programmingへのアプローチ

Monadic Programmingのススメ - Functional Reactive Programmingへのアプローチ

Elmで始めるFunctional Reactive Programming

Elmで始めるFunctional Reactive Programming

Reactive Power Controller ProCon / DynamiC€¦ · Page 2 = Key 1 = Key 2 = Key 3 Reactive Power Controller Expanded programming 25 Fix stages 25 Discharge time 26 Disconnection pause

Reactive Power Controller ProCon / DynamiC€¦ · Page 2 = Key 1 = Key 2 = Key 3 Reactive Power Controller Expanded programming 25 Fix stages 25 Discharge time 26 Disconnection pause

서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015

서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015

Functional Reactive Programming (Elm)

Functional Reactive Programming (Elm)

I have a stream - Insights in Reactive Programming @ geecon Prague 2015

I have a stream - Insights in Reactive Programming @ geecon Prague 2015