2017년 2월 21일 화요일

Grinder를 사용한 Meteor load testing

https://www.youtube.com/watch?v=tCPBGVI3PdA
Adrian Lanning의 영상을 전에 본적이 있는데 기회가 있어 해보기로 함.

https://raw.githubusercontent.com/technomancy/leiningen/stable/bin/lein 설치는
curl https://raw.githubusercontent.com/technomancy/leiningen/stable/bin/lein > /usr/local/bin/lein
chmod 755 /usr/local/bin/lein
대략 이런 식으로 하면 된다.
lein 을 한번 실행하고 https://github.com/alanning/meteor-load-test 를 받았다.
lein deps 를 실행해서 의존성 라이브러리들을 받아놓자.

https://github.com/alanning/meteor-load-test 에서 시키는 대로 해보자.

로컬 Meteor Application을 띄우고
bin/grinder agent start
로 에이전트 먼저 시작 start 뒤에 URL을 적어도 된다고 한다.
tail -f log/agent_1.log
로그 파일도 모니터 하고
bin/grinder console start
grinder 콘솔을 실행하자.
clojure로 만든 되게 불편해 보이는 툴이 뜬다.
그냥 의전용 스샷이 아니니 잘 봐둬야...

script탭을 선택하고 grinder 경로 아래에 working.properties 를 열어보자. OS X 유저들은 cmd 키가 안먹는다고 당황하지 말자. ctrl+c, ctrl+v, ctrl+a 등등 ctrl키를 이용.
grinder.script = meteor.clj
grinder.targetUrl = http://localhost:3000/
가 보인다.
실제 grinder가 구동하는 스크립트는 clj파일이다.
;;
;; Load-testing Meteor apps with The Grinder
;;
(ns meteor-load-test.http
  (:import [net.grinder.script Grinder Test]
           [net.grinder.plugin.http HTTPRequest]
           )
  (:use [meteor-load-test core util subscriptions method_calls])
  )
(let [grinder Grinder/grinder
      test1 (Test. 1 "Retrieve initial payload")
      test2 (Test. 2 "DDP subscriptions")
      test3 (Test. 3 "DDP calls")
      properties (.getProperties grinder)
      ]
  (defn instrumented-get [url]
    (log "Requesting url: " url)
    (.. (HTTPRequest.) (GET url)))
  ;; record calls to the instrumented function
  (.. test1 (record instrumented-get))
  (.. test2 (record subscribe))
  (.. test3 (record call-method))
  (defn get-client-id []
    (str (.getAgentNumber grinder) "-"
         (.getProcessName grinder) "-"
         (.getThreadNumber grinder)))
  (defn get-run-id []
    (.getRunNumber grinder))
  (defn stop-fn []
    (#(.stopThisWorkerThread grinder)))
  (defn sleep-fn [ms]
    (.sleep grinder ms))
  ;; return function that is executed once per thread by each worker process
  (worker-thread-factory
    stop-fn
    sleep-fn
    properties
    get-client-id
    get-run-id
    instrumented-get
    ))
내용을 보니 이렇다. 대략보니 DDP Subscription과 DDP call을 테스트할 수 있어 보인다.
툴바 왼쪽에서 첫번째인 Start the worker processes를 눌러서 테스트를 돌려보자.
여기!
tail로 열어보자.
[thread 0] INFO worker.jhAir.local-1 - starting, will do 1000 runs
[main] INFO worker.jhAir.local-1 - start time is 1487643542814 ms since Epoch
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-0", "type" "client"}]
[thread 0] INFO data - 0, 0, 3, 1487643542835, 9, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-1", "type" "client"}]
[thread 0] INFO data - 0, 1, 3, 1487643542855, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-2", "type" "client"}]
[thread 0] INFO data - 0, 2, 3, 1487643542868, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-3", "type" "client"}]
[thread 0] INFO data - 0, 3, 3, 1487643542881, 2, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-4", "type" "client"}]
[thread 0] INFO data - 0, 4, 3, 1487643542895, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-5", "type" "client"}]
[thread 0] INFO data - 0, 5, 3, 1487643542907, 2, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-6", "type" "client"}]
[thread 0] INFO data - 0, 6, 3, 1487643542920, 6, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-7", "type" "client"}]
[thread 0] INFO data - 0, 7, 3, 1487643542941, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-8", "type" "client"}]
[thread 0] INFO data - 0, 8, 3, 1487643542953, 2, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-9", "type" "client"}]
[thread 0] INFO data - 0, 9, 3, 1487643542966, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-10", "type" "client"}]
[thread 0] INFO data - 0, 10, 3, 1487643542978, 3, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-11", "type" "client"}]
[thread 0] INFO data - 0, 11, 3, 1487643542990, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-12", "type" "client"}]
[thread 0] INFO data - 0, 12, 3, 1487643542992, 0, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-13", "type" "client"}]
[thread 0] INFO data - 0, 13, 3, 1487643542993, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-14", "type" "client"}]
[thread 0] INFO data - 0, 14, 3, 1487643542996, 0, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-15", "type" "client"}]
[thread 0] INFO data - 0, 15, 3, 1487643543000, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-16", "type" "client"}]
[thread 0] INFO data - 0, 16, 3, 1487643543012, 1, 0, 0, 0, 0, 0, 0, 0, 0
calling: addEntry with args: [{"ownerId" "0-jhAir.local-1-0", "name" "load-17", "type" "client"}]
뭔가 마구 갈려나가고 있다.
꽤 괜찮아 보인다.
grinder.subscriptions = ["entry-count", {"latest-entries":[60]}]
grinder.calls = [{"addEntry":[{"ownerId":"CLIENTID","name":"load-RUNID","type":"client"}]}]
실제 subscription 하고 call을 어떻게 하나 했더니 JSON으로 말아놓는다. array 타입이니 여러개 지정할 수 있는데
["entry-count", {"latest-entries":[60]}]
먼저, subscription을 보자
서버쪽을 확인해보면 entry-count와 latest-entries 라는 publish를 발견할 수 있다.
[
  "entry-count",
  {
    "latest-entries": [60]
  }
]
이렇게 보면 좀 편할 것 같다.
인자가 없는 경우는 "entry-count" 식으로 publish 이름만 적고 인자가 있는 경우 publish명을 key로 적고 인자는 배열 형태로 넘겨준다.
grinder.calls = [{"addEntry":[{"ownerId":"CLIENTID","name":"load-RUNID","type":"client"}]}]
call도 크게 다르지 않은데
[
  {
    "addEntry": [
      {
        "ownerId": "CLIENTID",
        "name": "load-RUNID",
        "type": "client"
      }
    ]
  }
]
단순 call .. 인 경우는 없겠지만 있다면 마찬가지로 call 이름만 갈것 같고 인자가 있는 경우는 call 이름이 키, 인자가 배열형으로 넘어간다고 보면 되겠다.
여기서 주목할 부분이 있는데 CLIENTID와 RUNID처럼 대문자로 쓴 부분은 위 log 처럼 CLIENTID와 RUNID는 grinder가 지정해준다.
# These keywords will be replaced automatically:
#   CLIENTID - id unique to executing thread
#   RUNID - number corresponding to current test run
CLIENTID는 thread를 실행하는 ID. RUNID는 현제 테스트를 수행하고 있는 숫자와 같다.

그 다음으로 processes, threads, runs 을 살펴보자.
grinder.processes = 1
grinder.threads = 1
grinder.runs = 1000
총 실행 횟수는 processes*threads*runs 라고 보면 된다.
# Collection updates from server will always be logged
grinder.debug = true
# for some reason, the log directory required restating
grinder.logDirectory = log
한번 돌리고 잘 재연이 안되는데 log에 쌓이는 결과물들을 잘 관찰해보면 된다.
clojure는 잘 모르는데 clojure로 DDP 구현 해놓은 소스를 보니 재미있다. 

2017년 2월 20일 월요일

Meteor cordova app에서 splash 시간을 지연하고자 할때

최근 framework7(https://framework7.io/)을 비롯해 UI Framework들이 기존의 하이브리드 웹앱의 한계를 극복하고자 하는 움직임도 있고 cordova 버전도 올라갔고(WKWebview + Crosswalk 지원) 하이브리드 앱 환경이 상당히 개선이 되었다는 반가운 소식을 들어 다시 Meteor를 가지고 하이브리드 앱을 만지고 있다.

Cordova로 앱을 만들다 보면 가장 처음에 직면하는 것은 아무래도 어색한 Splash Screen인데.
https://atmospherejs.com/meteor/launch-screen 를 발견하고 미시적이지만 꽤 프로페셔널한 개선이
어서 소개하고자 한다.

모바일 앱에서 최초 splashScreen은 무의미하고 느린 UI의 일종이라고 생각하지만 subscription등이 오래걸리거나 화면 이미지 로딩등으로 준비가 아직 되지않은 상태를 보여주기 싫다면 의미가 있다고 본다.

가령, 별도로 손을 쓰지 않으면
Splash 노출 -> Splash 소멸 -> 첫화면 (빈목록) -> subscription 끝 -> 첫화면 - 목록 노출
과 같은 단계를 실행할 것이고 빈목록이 보이는 지루한 시간은 사용자에게 완성도가 떨어지는 앱이라는 느낌을 줄 수 있다.
Splash 노출 -> subscription 완료 -> Splash 소멸 -> 첫화면 - 목록 노출
처럼 작동한다면 splash화면을 봐줄만한 이유가 있고 제 역할을 하는 좋은 UI라고 생각한다.
먼저 package를 추가해보자.
meteor add launch-screen
namespace 가 없다! 그렇다. 서드파티가 아니고 공식지원이다!

일단 사용은 무척이나 간편한데
var handle = LaunchScreen.hold();
를 글로벌 scope 에 넣기만 하면 끝.
subscribe를 받아서 subs.ready() 같은 reactive data source를 감시한 뒤 handle.release(); 로 풀어볼까 했는데 그러지 않아도 되더라.

https://github.com/meteor/meteor/tree/devel/packages/launch-screen
구현은 꽤 간단하다. hold를 몇개를 넣어도 release 한방에 Splash를 제거해 주니 간편하다.
cordova-plugin-splashscreen 를 사용한 간단한 구현이니 소스도 한번 보자.

오늘도 이렇게 날로 먹는구나. 헛헛.