くりにっき

ドリコムのプリキュアの人です

chrome-gitlab-notifier v2.0.0をリリースした

今年初のビッグバンリリースです

chrome.google.com

tl;dr

既存のコードを全て捨てて全部書き直しました

書き直した経緯

  • GitLab API v4に対応するにあたって、既存のコードベースでv3とv4両方対応するのはいろいろつらそうだったため
    • 特にjQueryでDOMをゴリゴリ操作してるところとか
  • テストを書いてないことはなかったけど、jQueryでDOM操作してるviewや定期的にGitLab APIをたたいてポーリングしてるバッググラウンド処理のテストが全然なくて、かつ今までの経験上一番不具合起こってた場所だったので手厚くテストを書きたかった

主な変更点

https://github.com/sue445/chrome-gitlab-notifier/blob/master/CHANGELOG.md#200-20170504 からの抜粋です

  • 全てのjsをES6で書き直した
    • Chromeはトランスパイル不要でES6がそのまま動かせるので、あえてBabel系のツールは使っていません
    • Chrome拡張はChrome以外のブラウザを考慮不要なのが非常によい
    • classとアロー演算子便利
  • jQueryに依存してた処理を mithril.js に移植
    • Twitter BootstrapがjQueryに依存してるためjQuery自体は捨てていませんが、プロダクトコードでのjQuery依存は全部なくしました
    • mithril v1を使ってたのですが、日本語サイト がv0系のままで苦労した記憶(mithril移植終わったくらいで日本語サイトもv1対応してた)
  • Jasmineでやってたユニットテストmocha に変更
    • 最初 ospec っていうmithril付属のテスティングフレームワーク使ってたのですが、あまりにも機能が少なすぎたので断念
    • 一番最初にテスト書いてた当時(4年前くらい)はJasmineとmochaほぼ同じくらいのシェア(主観)だったのですが、今はmochaが優勢な気がした(主観)のでmochaを採用
  • ESLint 導入
    • 仕事でrubocopをよく使ってるのでjsでも使いたいと思って探していたらESLintに行き着いた
  • yarn 導入
    • Travis CIでnpm installしたパッケージのキャッシュを効かせるにはyarnが必要っぽかったので導入
  • せっかくなので使ってるライブラリも諸々アップデート
  • その他細かいバグ修正など

差分

プルリクエストだと差分しかなくてワケワカメなので細かいdiff読むならマイルストーンがおすすめ

f:id:sue445:20170504024921p:plain

プルリクエスト上だとライブラリのアップデート内容も含まれてるので無駄に差分が大きいですが、書き直したソースの差分だけならこんな感じ

$ git diff --stat 1.4.3...2.0.0 -- src/
 src/avatar_cache.js       |  69 +++++++--------
 src/background.js         | 356 +++++++++++++++++++++++++++++++++++------------------------------------------
 src/background_init.js    |  42 ++++++++++
 src/base_cache.js         |  19 +++++
 src/config.js             | 348 ++++++++++++++++++++++++++++++++++-----------------------------------------
 src/gitlab.js             | 313 ++++++++++++++++++++++++++++++++++++++------------------------------
 src/notification.js       | 130 +++++++++++++++-------------
 src/notification_cache.js |  71 ++++++++--------
 src/options.js            | 489 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------
 src/options_init.js       |  42 ++++++++++
 src/popup.js              | 235 +++++++++++++++++++++++++++------------------------
 src/popup_init.js         |  36 ++++++++
 src/util.js               |  61 --------------
 13 files changed, 1237 insertions(+), 974 deletions(-)

$ git diff --stat 1.4.3...2.0.0 -- test/
 test/avatar_cache_test.js       |  56 +++++++++++++++++++++
 test/background_test.js         | 273 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/base_cache_test.js         |  38 ++++++++++++++
 test/notification_cache_test.js |  65 ++++++++++++++++++++++++
 test/notification_test.js       | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/options_test.js            |  31 ++++++++++++
 test/popup_test.js              |  63 +++++++++++++++++++++++
 test/stub/projects.json         | 112 +++++++++++++++++++++++++++++++++++++++++
 8 files changed, 786 insertions(+)

$ git diff --stat 1.4.3...2.0.0 -- spec/
 spec/SpecRunner.html                   |   63 ---
 spec/gitlab_spec.js                    |   98 ----
 spec/lib/jasmine-1.3.1/MIT.LICENSE     |   20 -
 spec/lib/jasmine-1.3.1/jasmine-html.js |  681 ------------------------
 spec/lib/jasmine-1.3.1/jasmine.css     |   82 ---
 spec/lib/jasmine-1.3.1/jasmine.js      | 2600 --------------------------------------------------------------------------------------------
 spec/lib/jquery.mockjax.js             |  587 ---------------------
 spec/lib/run-jasmine.js                |   86 ----
 spec/notification_spec.js              |   94 ----
 spec/spec_helper.js                    |    4 -
 spec/stub.js                           |   89 ----
 11 files changed, 4404 deletions(-)

spec/ 全消しなのはJasmineを捨ててmochaに乗り換えたためです

mithril.jsを採用した経緯

実は最初Vue.jsを使って書き直してたのですが、Vue.jsの中で使ってるevalがChrome拡張だとサンドボックスモードを有効にしないと使えなくて、サンドボックスを有効にすると今度はChromeのlocalStorageにアクセスできなくてVue.jsは断念しました。

が、後日Twitterでのやりとりで事前に全部コンパイルしているとChrome拡張でもVue.jsが使えるということが判明。

jp.vuejs.org

次にChrome拡張作る時はVue.jsワンチャンありそう

開発期間とか

前述のVue.js時代から含めるとかれこれ2ヶ月くらいかかって全部のコードを書き直しています

あとビッグバンリリースと銘打ってますが、TDDのこころ に従って1ファイルずつ地道にES6化&テスト追加しています

1ヶ月くらい自分のローカルで動かしてたので致命的なバグはないはずです。