Falcor overview

Introduce
Falcor는효율적인데이터가져오기를위한JavaScript 라이브러리.
GraphQL과 같이One Fetch에필요한데이타만를받고자하는것은비슷하
다.
또한Facebook의GraphQL Cache Framwork 인relay(+GraphQL)와많
이비교된다.

서론
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][0]["seller"]["name"] 와같이키또는
인덱스의조합이다.

JSON Graph
Falcor는중복데이타가 fetch되어발생하는낭비를제거하기 위해JSON
Graph를사용하고 있다.

JSON
우선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가 같더라도 하나의 값만 바뀐다..

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'

Error
error 정보를담고 있는Sentinels 객체
라우터에서데이타를내려줄때특정Path에서에러가 발생한경우
아래와같이error Type을내려주게 된다.
{ $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
        }}}});

키배열방식의데이타접근.
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

PathSet 방식의데이타접근
/*
PathSet 배열 방식
["productList", { length : 2 }, ["name", "id", "seller"], [ "name"
["productList", { from : 0 , length : 2 }, ["name", "id", "seller"
["productList", { length : 2 }, ["name", "id", "seller"], [ "name"
PathSet 구문 문자열
'productList[0..1]["name", "id", "seller"]["name", "like"]
*/
//array index 가 0 부터 1까지.
await model.get('productList[0..1]["name", "id", "seller"]["name"

조회된값은모두같다.
/*
{
    "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의장점을가지고 있다.

조사하면서느낀점.
샘플이GraphQL에비해많지않다.
쓰는사람이많이없다.
아는사람도많이없다.(Falcor를처음듣는사람이대부분이다.)
Falcor가 GraphQL + relay 조합보다쉽다고 하는데Falcor가 의외로쉽
지만은않은것 같다.
Router 작성이의외로어려운것 같다.
GraphQL처럼Document(GraphiQL)를볼수없는것이아쉽다.

URLS
공식홈페이지
‑> https://netflix.github.io/falcor/
조사하면서만든샘플코드
‑> https://github.com/gidong‑lee/falcor‑exam

Falcor overview

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

Empfohlen

Empfohlen (20)

Falcor overview