Introduce
Falcor는 효율적인 데이터 가져 오기를위한 JavaScript 라이브러리.
GraphQL과 같이 One Fetch에 필요한 데이타만를 받고자 하는 것은 비슷하다.
또한 Facebook의 GraphQL Cache Framework 인 relay(+GraphQL)와 많이 비교된다.
Overfetch를 방지를 해주는 것도 비슷하다.
서론
falcor를 이야기 하자면 JSON Graph 를 이야기 하지 않을 수 없지만 우선 왜 이런 아키텍처가 나왔는지 생각해보자.
우선 NETFLIX 서비스를 생각해 보자.
앞선 이미지에서 3개 카테고리가 있을 때 one fetch에 중복을 제거하고 데이타를 받기 위해서는 어떻게 해야할까?
GraphQL을 사용한다면 아마도 One Fetch로 데이타를 받을 경우 중복 데이타(복제본)가 발생한다.
기본적으로 JSON은 근본적으로 Tree 구조이므로 원하는 데이타를 원하는 모양으로 받는데 문제는 없지만 중복은 어쩔수 없다.
그래서 Falcor가 JSON Graph를 통해 어떻게 이 문제를 풀어가는지 생각해보자.
Model
View와 DataSource(또는 HTTPDataSource)간에 중개자 역활을 수행한다.
데이타 검색 기능(단일 값, JSON 데이타)
이전 데이타에 대해서 캐싱
DataSource를 통해 검색된 JSON Graph 를 조회시 JSON으로 변환한다.
여러개의 동시요청을 일괄 요청으로 변경하여 효율적인 네트워크 액세서 패턴을 제공한다.
비동기 처리 및 개발 용이성(mock data)을 위해 데이타 조회시 Promise 반환 지원.
캐싱 데이타와 아닌 데이타를 구분해서 아닌 데이타만 서버에 요청한다.(Realy와 같다.)
기본적으로 GET방식 호출이므로 호출 API는 브라우저에서 캐싱된다.
Data Sources
DataSource : JSON Graph 통데이타를 구성해서 데이타로 사용할때.
HttpDataSource : 원격지(서버)의 데이타를 Model의 데이타로 사용할 때. 이때 모델 내에 캐싱데이타가 전부/일부라도 없으면 서버에 요청해서 받아와 캐싱한다.
get : DataSource를 통해 JSON 또는 단일값을 가져온다.
set : DataSource 데이타 변경
call : DataSource의 해당 path의 call에 해당되는 작업을 한다. Mutation 작업에 어울린다.
Router
Falcor 라우터는 DataSource 인터페이스 의 구현체로서 호출자의 PathSet 에 따라서 falcor 미들웨어에서 해당 데이타를 조회하고 구조에 맞게 리턴한다.
express의 app.get 또는 spring의 RequestMapping와 비슷한 개념이다.차이점에 한번의 fetch에 여러 pathSet이 있는 경우 여러개의 method와 match될 수 있다.
따라서 라우터 특정 Method에 매칭 기준을 PathSet값으로 되어 있다.
PathSet은 model"productList"seller" 와 같이 키 또는 인덱스의 조합이다.
JSON Graph
Falcor는 중복 데이타가 fetch되어 발생하는 낭비를 제거하기 위해 JSON Graph를 사용하고 있다.
기본적인 JSON Type
우선 JSON의 경우 데이타가 단순한 Tree 구조를 가지고 표현이 되며 중복데이타가 있으면 동일하게 표현된다.
그러나 실제 우리가 서비스를 할때는 이 단순한 JSON 객체로 서비스를 하게 된다.
Falcor를 사용하기 위해서는 JSON Graph와 JSON을 Type을 잘 이해하여 사용하여야 한다.
JSON 구조 및 접근 구조.
var model = {
productList : [{
id : 100,
name : "생수",
seller : {
id : 10000,
name : "물장수",
like : false
}
},{
id : 200,
name : "맥스 커피",
seller : {
id : 10000,
name : "물장수",
like : false
}}]
}
/* 참조 방법 */
model["productList][0]["seller"]["name"] // 물장수
model["productList][0]["seller"]["like"] = true
//JSON은 단순 트리 구조로 위의 seller가 같더라도 하나의 값만 바뀐다..
productList : [{
id : 100,
name : "생수",
seller : {
id : 10000,
name : "물장수",
like : false
}
},{
id : 200,
name : "맥스 커피",
seller : {
id : 10000,
name : "물장수",
like : false
}}]
}
/* 참조 방법 */
model["productList][0]["seller"]["name"] // 물장수
model["productList][0]["seller"]["like"] = true
//JSON은 단순 트리 구조로 위의 seller가 같더라도 하나의 값만 바뀐다..
JSON Graph
기본적으로 일반적으로 사용되는 JSON DataType에 레퍼런스을 추가하였다고 생각하면 된다.
Falcor Model에 의해 들어온 값들은 모두 Sentinels 이라는 JSON 객체로 변환된다.
Sentinels JSON 객체는 ref, atom, error 3가지 type으로 분류한다..
- Reference
가장 중요한 Type으로 이를 통해 중복 데이타 제거가 가능하다.
레퍼런스가 가능함에 따라서 Graph 구조의 데이타를 가질 수 있다.
linux의 Symbolic link와 같은 개념이다.
{
$type: "ref", value: ["sellerById", 10000]
}
/*
["sellerById", 10000]은 주소 값으로 데이타를 추출저장 할때는
해당 위치에 데이타를 사용하게 된다.
*/- Atom(원자)
Atom은 $type값이 atom인 Sentinels 객체이다.
데이타를 boxing하고, model에서 데이타를 추출할 때는 unboxing 된다. atom 으로 boxing되지 않는 array는 map으로 내부적으로 바뀌어 저장되게 되므로 데이타 종류에 따라서 사용하여야 한다.
내부적으로 아래와 같이 저장된다. 쪼개고 싶지 않은 데이타를 atom으로 사용하면 된다.
subtitles: ['en', 'fr'] // 실제 데이타
subtitles : { // JSON Graph 구조로 변환
"0" : { $type: "atom", value : "en" },
"1" : { $type: "atom", value : "fr"}
}
subtitlesAtom: $atom(['en', 'fr']) // $atom으로 실제 데이타
//JSON Graph
subtitlesAtom : { $type: "atom", value : ["en", "fr"] } Atom 샘플
var falcor = require('falcor');
var model = new falcor.Model({cache: {
titlesById: {
"44": {
name: "Die Hard",
subtitles: ['en', 'fr']
subtitlesAtom: { $type: "atom", value: ['en', 'fr'] },
}
}
}});
// 데이타를 항상 Promise 객체를 반환.(그래서 async,await 썼으니 참고)
await model.getValue(['titlesById', 44, 'subtitlesAtom']);
// ['en', 'fr']
await model.getValue(['titlesById', 44, 'subtitles']);
// undefined
await model.getValue(['titlesById', 44, 'subtitles', 0]);
//'en'
var model = new falcor.Model({cache: {
titlesById: {
"44": {
name: "Die Hard",
subtitles: ['en', 'fr']
subtitlesAtom: { $type: "atom", value: ['en', 'fr'] },
}
}
}});
// 데이타를 항상 Promise 객체를 반환.(그래서 async,await 썼으니 참고)
await model.getValue(['titlesById', 44, 'subtitlesAtom']);
// ['en', 'fr']
await model.getValue(['titlesById', 44, 'subtitles']);
// undefined
await model.getValue(['titlesById', 44, 'subtitles', 0]);
//'en'
- Error
error 정보를 담고 있는 Sentinels 객체
라우터에서 데이타를 내려줄때 특정 Path에서 에러가 발생한 경우아래와 같이 error Type을 내려주게 된다. 다시한번 말하지만 Response의 전체가 Error가 되는 것이 아닌 특정 Path에 대해서만 Error가 내려간다.
{ $type: "error", value: "request time out" }JSON Graph Data 샘플
var $ref = falcor.Model.ref;
var $atom = falcor.Model.atom;
var model = new falcor.Model({
cache: {
productList: [{
id: 100,
name: "생수",
lang: ["en", "ko"],
seller: $ref("sellerById[10000]")
},{
id: 200,
name: "맥스 커피",
seller: $ref("sellerById[10000]"),
lang :
}],
sellerById: {
"10000": {
id: 10000,
name: "물장수",
like: false
}}}});
var $atom = falcor.Model.atom;
var model = new falcor.Model({
cache: {
productList: [{
id: 100,
name: "생수",
lang: ["en", "ko"],
seller: $ref("sellerById[10000]")
},{
id: 200,
name: "맥스 커피",
seller: $ref("sellerById[10000]"),
lang :
}],
sellerById: {
"10000": {
id: 10000,
name: "물장수",
like: false
}}}});
데이타 접근방식
데이타에 접근하기 위해서는 키배열방식과 pathSet방식 모두를 지원한다.
- 키 배열 방식의 데이타 접근.
await model.getValue('productList[0]["seller"]["like"]');
await model.getValue('sellerById["10000"]["like"]');
// 둘다 false
// 수정
await model.setValue('productList[0]["seller"]["like"]', true);
await model.getValue('productList[0]["seller"]["like"]');
// true
await model.getValue('sellerById["10000"]["like"]');
// 둘다 false
// 수정
await model.setValue('productList[0]["seller"]["like"]', true);
await model.getValue('productList[0]["seller"]["like"]');
// true
- PathSet 방식의 데이타 접근
/*
PathSet 배열 방식
["productList",{length:2},["name","id","seller"],["name","like"]]
["productList",{from:0,length:2},["name","id","seller"],["name","like"]]
["productList",{length:2},["name","id","seller"],["name","like"]]
PathSet 구문 문자열
'productList[0..1]["name", "id", "seller"]["name", "like"]
*/
//array index 가 0 부터 1까지.
await model.get(
'productList[0..1]["name", "id", "seller"]["name", "like"]'
);
PathSet 배열 방식
["productList",{length:2},["name","id","seller"],["name","like"]]
["productList",{from:0,length:2},["name","id","seller"],["name","like"]]
["productList",{length:2},["name","id","seller"],["name","like"]]
PathSet 구문 문자열
'productList[0..1]["name", "id", "seller"]["name", "like"]
*/
//array index 가 0 부터 1까지.
await model.get(
'productList[0..1]["name", "id", "seller"]["name", "like"]'
);
조회된 값은 모두 같다.
/*
{
"json": {
"productList": {
"0": {
"name": "생수",
"id": 100,
"seller": {
"name": "물장수",
"like": true
}
},
"1": {
"name": "맥스 커피",
"id": 200,
"seller": {
"name": "물장수",
"like": true
}}}}}
*/
{
"json": {
"productList": {
"0": {
"name": "생수",
"id": 100,
"seller": {
"name": "물장수",
"like": true
}
},
"1": {
"name": "맥스 커피",
"id": 200,
"seller": {
"name": "물장수",
"like": true
}}}}}
*/
Falcor 어디다가 써야 할까?
모던 웹플리케이션인 SPA(Single Page Application)에 사용하면 캐시데이타를 품은 Model객체를 지속적으로 가져갈수 있으므로 효율이 좋습니다.
SPA가 아닌 웹서비스에서는 캐싱의 효과가 떨어지지만 브라우저 캐싱의 효과가 있다.
그 이유는 falcor Model을 통하여 HttpDataSource를 호출하는 경우 GET 데이타로 호출하게 되고 중복 호출의 경우에는 304 Not Modified로 브라우저 캐싱를 사용하게 된다.
GraphQL + relay와 비교를 많이 하는 만큼 비슷한 경우에 쓰면 되겠죠?
요약하면
Falcor는 정말 효율적 데이터 가져 오기를위한 JavaScript 라이브러리
JSON Graph를 통한 중복 데이타 제거 및 Overfetch 제거.
데이타 캐싱, 이전 호출 데이타 브라우저 캐싱.
GraphQL의 장점에 Relay의 장점을 가지고 있다.
Falcor는 정말 효율적 데이터 가져 오기를위한 JavaScript 라이브러리
JSON Graph를 통한 중복 데이타 제거 및 Overfetch 제거.
데이타 캐싱, 이전 호출 데이타 브라우저 캐싱.
GraphQL의 장점에 Relay의 장점을 가지고 있다.
조사하면서 느낀점.
샘플이 GraphQL에 비해 많지 않다.
쓰는 사람이 많이 없다.
아는 사람도 많이 없다.(Falcor를 처음 듣는 사람이 대부분이다.)
Falcor가 GraphQL + relay 조합보다 쉽다고 하는데 Falcor가 의외로 쉽지만은 않은 것 같다.
Router 작성이 의외로 어려운것 같다.
GraphQL처럼 Document(GraphiQL)를 볼 수 없는 것이 아쉽다.
샘플이 GraphQL에 비해 많지 않다.
쓰는 사람이 많이 없다.
아는 사람도 많이 없다.(Falcor를 처음 듣는 사람이 대부분이다.)
Falcor가 GraphQL + relay 조합보다 쉽다고 하는데 Falcor가 의외로 쉽지만은 않은 것 같다.
Router 작성이 의외로 어려운것 같다.
GraphQL처럼 Document(GraphiQL)를 볼 수 없는 것이 아쉽다.
URLS
공식 홈페이지-> https://netflix.github.io/falcor/
조사하면서 만든 샘플코드-> https://github.com/gidong-lee/falcor-exam
공식 홈페이지-> https://netflix.github.io/falcor/
조사하면서 만든 샘플코드-> https://github.com/gidong-lee/falcor-exam
'Javascript/node.js Coding' 카테고리의 다른 글
| GraphQL Overview (graphql.js server code) (0) | 2018.01.05 |
|---|---|
| ES6+(EcmaScript2015+) 정리(ing) (0) | 2017.12.27 |
| Mobx with angular 정리. (0) | 2017.12.05 |
