FlowingJS

FlowingJS는 WebApp을 위한 데이터 흐름 제어기입니다.

FlowingJS는 데이터 흐름을 좀 더 쉽게 제어할 수 있습니다. 앱의 규모가 커질수록 복잡해지는 아키텍처에서 FlowingJS는 데이터가 흐르는 방향을 쉽게 설정할 수 있도록 도와줄 것입니다. 또한, 가시적으로 데이터의 흐름을 보여주기도 하여 여러분이 웹 앱을 만드는데 있어 쉽게 개발하도록 도와줍니다.

영향을 받은 것들

저는 Flux를 즐겨 사용합니다. 저는 웹 앱을 개발할 때 보통 Action, Dispatcher, Store, View로 나누어 아키텍처를 설계하고 모듈들을 개발했습니다. 하지만 Flux를 사용하면서 불편한 점이 많았습니다. 단방향이라는 심플한 데이터 플로우가 앱의 규모가 커질수록 복잡해졌고, Dispatch하는 과정에서도 많은 제약이 있었습니다. 그래서 좀 더 편리하게 데이터 흐름을 제어할 수 있는 방법이 없을까 고민한 끝에 FlowingJS를 개발하게 되었습니다.

설치

FlowingJS는 npm 모듈로 설치가 가능합니다. 다음과 같이 npm 패키지를 이용해 설치합니다.

npm install --save flowing-js

사용법

FlowController

FlowController는 Flow Action을 제어합니다. FlowController는 싱글 모델 오브젝트(Single Model Object)입니다. 새로 생성하지 않고 한 개의 FlowController를 사용합니다.

• addFlow

FlowController.addFlow(flowIds)

FlowController에서 제어할 Flow를 등록합니다. FlowID들의 배열을 입력받아 고유한 ID를 가진 Flow를 생성합니다. ID는 상수여야 합니다.

var FlowController = require('flowing-js').FlowController;

FlowController.addFlow('FLOW_ID_1');

• addRegister

FlowController.addRegister(flowId, callback)

해당 Flow에서 dispatch를 받은 후 target에서 action payload를 받은 후 데이터를 처리하는 콜백을 추가합니다.

var FlowController = require('flowing-js').FlowController;

var _value = 0;

FlowController.addRegister('FLOW_ID_1', function() {
	_value++;
});

또는 Promise 객체를 넘겨줄 수도 있습니다.

var FlowController = require('flowing-js').FlowController;
var Promise = require('flowing-js').Promise;

var _value = 0;

FlowController.addRegister('FLOW_ID_1', function() {
	return new Promise(function(resolve, reject) {
    	_value++;
        resolve();
    });
});

• addSubscriber

FlowController.addSubscriber(flowId, callback)

var FlowController = require('flowing-js').FlowController;

FlowController.addSubscriber('FLOW_ID_1', function(payload, err) {
	if (err) console.log(err);
    else {
    	console.log("action detected!");
    }
});

Component

Component는

Store