俺、サービス売って家買うんだ

Swift, Kotlin, Vue.js, 統計, GCP / このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃなかろうか

東京Node学園祭2016に行ってきたよ

Node.js イベントレポート

今年もNode学園祭に行ってきました！
この春辺りからサーバーサイドをNodeで書くことが増えてきたので、新しい知識を手に入れつつ詳しくない分野の洗い出しができると思い今回もとても楽しみでした。

セッションを聞きながらメモったことを箇条書き。

nodefest.jp

今年のステッカー。夜っぽくてかっこい。

f:id:ie-kau:20161114003518j:plain

オープニングトーク

@yosuke_furukawa

  • 今年はリリースラッシュだった
    • Node.js v7.0
    • npm v4
  • 東京Node学園祭2016のコンセプト
    • Be More Global
    • Be More Interactive

参加したセッション

  • Demystifying JavaScript Engines
  • Debugging Node.js Performace Issue in Production
  • サイボウズの開発を支えるKAIZEN文化
  • Keynote
  • Node.js and Web Standards
  • Vue.js 2.0 サーバサイドレンダリング
  • React + Reduxを使った大規模商用サービスの開発
  • Introducing Now and Next.js
  • PostCSS: Build your own CSS processor

Demystifying JavaScript Engines

@a0viedo

  • ここに全部まとまってる
  • 2006 JS Engineはどうなっていたか
    • parse phase
      • sourse treeに変換
      • ast
      • bytecodeにする
    • execution phase
      • cpuアーキテクチャと関係無
      • machine codeはcpuアーキテクチャによってかわる
      • 内部的にmallocとかfreeされてる
    • GC
    • このストラクチャはインタプリタ
    • 今
    • 早くなった理由
      1. Object Allocation
      2. property-access
        • inline cache (access cahce)
    • コンパイラが2つあるらしい
      • inoptimizing compiler
      • optimizing compiler
  • spider monkey
    • lon monkey
  • chakra Core
    • インタプリタが2つのjitを持っている
      • simple jit
      • full jit
  • V8 -V8 ignition
    • full codegen
    • AST typeinfのやり取り
      • Crank Shaft
      • TurbonFan
        • いつかはdeprecate予定
  • JavaScript Core
  • optimizeの例
var sum = 0;
for (var i = 0; i < 1000; i++) {
  sum += 1000 * 100* 3;
}

↓

var sum = 0;
var constant = 100* 3;
for (var i = 0; i < 1000; i++) {
  sum += 1000 * constant;
}
  • for文のarray.lengthに気を使う必要がなくなった
  • contextスイッチをなくす
  • 関数のインライン展開もやってくれるのね・・・
for (var i = 0; i < 1000; i++) {
  1 + 2;
}
↓
for (var i = 0; i < 1000; i++) {
}
  • 意味のないコードは消される

所感

基礎知識がポンコツだったため出てきた単語をメモするだけになってしまいました。GC周りの話とかきちんと勉強したほうが良さそう。

Debugging Node.js Performace Issue in Production

@wa7son

  • なぜプロダクションのアプリケーションをデバッグするか
    • premature optimization
      • 早すぎる最適化は良くない
  • baseline performance
    • グラフとか解析して見る
      • いつ変更があったとか
      • なにをデプロイしたときか
  • どうやって計測するの？
console.time('parse');
JSON.parse(req.body);
console.timeEnd('parse');
  • なぜ遅いの？
    • Single-threaded
    • CPU intensive code
      • CPUに負荷をかけるコード
    • Slow I/O
      • DB
      • ファイル
      • 外部API
    • Event Loop saturation
      • callback いっぱい
    • Runnnig of of memory
    • GC
      • stop the workd
  • CPU intensiv code
    • Synchoronous I/O
    • JSON.parse
    • 正規表現
    • Crypto
    • tmeplating
  • perf_base_prof_only_functions

所感

vmstat動かして頑張って重そうなリクエスト発行して調べるみたいなデバッグ疲れちゃうので、perf_base_prof_only_functionsというオプションがとても便利そうですね。

サイボウズの開発を支えるKAIZEN文化

@teppeis

www.slideshare.net

  • 技術的負債との戦い
    1. 時間なるときやろう
      • 時間があるときはこないｗ
    2. KAIZEN DAY
      • 「技術的負債」を「KAIZEN」に変更
        • テクニカルな話によったニュアンスがつくので、プロセス全般に扱う対象を広げたかった
    3. KAIZEN 合宿
      • 1日で終わらないKAIZEN
        • 合宿
      • PM、QAの共感が得られない
        • 発表回
    4. KAIZEN会議
  • 新技術の導入
    • メインプロダクトで遊びづらい
      • めっちゃ共感する
    • サイドプロジェクトで新しい技術を導入してみる
    • リモートワーク
      • 一般的な理由
        • 採用戦略の理由
          • やらないといい人が取れない
        • 東京 - 松山 - 自宅
        • リモート飲み会
      • Cybozuの理由
        • 離職率とか
        • チームワーク
          • 多様性な個性
          • 「100人100通りの働き方」
      • 問題
        • つながらない
          • Ciscoのテレビ会議システム
          • mtgは全部リモートで参加できる
        • 口頭で話したことが伝わらない
        • テレビ会議にjoinしづらい
          • マインド
            • マジョリティ、マイノリティの構図を作らない
          • 全員でリモートワークを試す
            • 何が辛いかわかる
        • 何やってるかわからない
          • 分報
      • KAIZENを支える
        • ドッグフーディング
          • 自社製品を使う
        • 振り返りKPT
        • 理想への共感
          • チーム全員で勉強会
          • 職能を超える
          • オープンに議論する

所感

リモートワークについては必要性を感じつつも、自分は「どうしても伝わりづらいし、空気が読めなくて嫌い」ぐらいのところで思考を止めていた気がする。もすこし他社事例を見たり、フィードバックループを回しながら最適な方法を探りたい。

Keynote

Douglas Crockford

  • Secure JSON over TCP
    • パスワードがいらない
  • Seif Apps
  • Seif Helper App
  • Webは安全に関係をシェアするには良くない
  • Webをセキュアに作り変えようって話だった
  • GitHub - paypal/seif-protocol: Node.js Implementation of the Seif protocol
  • (Q) Seif Appはどのようにユーザーに届くのか？ Qt App?
    • (A) スタートはすごく汚いURLでブラウザ
  • (Q) Seif project の中でTLSつかうの？
    • (A) Seif project の中ではTLSつかわない
  • (Q) 認証だけをSeifにしないの？
    • (A) システムの中ではWebテクノロージ使ってもいいQtだけ気になる
    • 安全なシステムのためならWebよりもQtの方がいいと思っている
    • Nodeのなかでcanvasを使おうと思ったけどチームメンバーはかれにQtを使ったほうがいいと言う話になんった

所感

最初の方、分からなくてついていけてなかったけど、Webはドキュメントを送り合う仕組みだし、そもそもセキュアじゃないから作り変えちゃえっていう壮大な話だった。ViewはQt。

Node.js and Web Standards

@jasnell

  • Node.jsの前はhttp, httpsとのstandardに関わっていた
  • http1.1のSecrity issue
    • Response/Request Splitting
      • Header injection
  • url.parse()
  • standar complianseのための300ぐらい問題がある
  • Node v.7から　require('url') がある
  • httpsはバイナリフレーム
  • http2 は新しい機能おおい
    • server push
    • stream prioritization
    • flow controlle
    • stateful header compression
  • node coreにhttps2を実装する場合
  • 新しいAPIのコードコピペれないか
    • server push
      • アイディアないｗ　
  • clientの実装は先になる
  • GitHub - nodejs/http2: Working on an HTTP/2 implementation for Node.js Core

所感

Web Standardsの話ってなんだろうと思ったけど、Web Standardを実装に取り入れる話だったのね。

Vue.js 2.0 サーバサイドレンダリング

@kazu_pon speakerdeck.com

  • 2.0
    • プログレッシブフレームワーク
    • Virtual DOM
    • レンダリング高速化
    • クロスプラットフォーム向けのツールもある
  • レンダリングシステム
    • テンプレートパーサーはjohn resingをフォークして利用
    • AST
      • 静的なNodeの検出してAST内部ではstaticとしてマーキングする
    • レンダリング関数の生成
      • render関数
        • 仮想のNodeツリー
      • staticRendar関数
  • レンダリング
    • staticRenderFnsは実行結果で得られる静的なNodeをキャッシュ
    • V DOMのdiffとpatch は snapdom ?
    • Componentの再レンダリングは、対象のコンポーネントのみ
    • v-modelだと親子とも再レンダリング
    • 最適化
    • functional componentとかある
  • SSR
    • 従来のVueだとdocument.fragmentを使ってて難しかった　
    • v.2.0
    • SSRの4要素
      1. レンダラ
        • nodeのstreamもサポート
        • cache機能もある
          • slotで間違った遣ったをするとバグる
      2. ハイドレーション
        • 水分補給
          • サーバー再度でクライアント
        • DOMにJSONを食わせてあるべき姿にさせること
      3. コンテキスト
        • リクエストごとにコンテキストを作成する
      4. バンドリング
        • webpackでやってた

所感

愛用のVue.js、SSRとかいよいよ大規模なことができるようになってきている様子。
一方で2.0になってプロダクト開発で使ってないので、1.x系のようにちょっとしたことにも使えたりする気楽な感じはのこってるのか気になる。

React + Reduxを使った大規模商用サービスの開発

yoshida さん speakerdeck.com

  • Universal / Isomorphic JavaScript
    1. transition
      • onEnterはreplacetStateをつかう
        • ログインとログイン画面に飛ばす画面で無限にリダイレクトが起こる
      • onMountでログを投げる
      • componentDidUpdateでscroll位置の調整
        • popstateとpushsateでハンドリング
      • 全date fetchが終わるまでRouterContextRenderを待たせる
      • iPhoneで画面スワイプすると前の画面がちらつく
        • 画面がunmountされていないため
      • global stateの残りに気をつける
    2. code splitting
      • minify後に2mぐらい -long term chasing
        • 分け方例
          • 3rd party
          • app common
          • app1.js, app.2
          • webpackjsonp
      • webpack
        • require.ensure
        • エラーが有るのに画面開きっぱなしにされて、数分後につかわれたら問題
        • require.ensure.errorhandler
          • エラ時のコールバックを入れられう
            • window.reloadするとか
        • CommonsChunkPlugin
        • webpack のモジュールIDが変わる
    3. SSR
      • Partial Rendering
        • ファーストビューだけレンダリング
        • Lazy LoadじゃなくてLazy Render
        • Fetch as Google で確認したらいける　
      • SSR cache
        • reactdomSErver.render.toString or キャッシュから取得
          • ユーザー情報以外ね
  • リクルートテクノロジーズのテックブログにセキュリティ周りの話がのる載る予定
  • React + Reduxを使った大規模商用サービスの開発 #nodefest #nodefestB - Togetterまとめ
    • 盛りだくさんだったのですぐにまとめられてた

所感

いやー、全力でSSRやってみたい。

Introducing Now and Next.js

@nkzawa speakerdeck.com

PostCSS: Build your own CSS processor

@morishitter_ speakerdeck.com

所感

前職のCSSマスターからも勧めらたので、これからCSSのプリプロセッサを入れるときはこれを利用してみようと思う事案だった。

JavaScript による並列処理：共有メモリとロック

@chikoski speakerdeck.com

所感

昔はフレーム毎に描画に関係ない重い処理を間引いたりしてなんとかしようとど、今ならworkerをガリガリ使ってみたい。

スポンサードトーク & Lightning Talks

面白かったり後で調べようと思ったこと。

  • Yahoo! JapanのプロキシサーバはPHP → Nodeつかってる
    • ヤフーはPHP → Node移行の事案が多いっぽい
  • Rakuten React kit
  • WebAssembly
    • WebAssenbliy向き
      • ゲーム
      • ダイアグラムエディタ
    • 一緒にやけどしてくれる人募集w
  • From Library to Tool - power-assert as a General Purpose Assertion Enhancement Tool
    • @t_wada
    • speakerdeck.com
    • プロダクトのライフサイクルより環境のライフサイクルのほうが早い
    • Testing framewor should evolve slowly
      • テストコードを書いてもそれが無駄にならないという安心感をあたえること　
      • The power-assert Leaves From Moratorium | CodeLunch.fm
        • あとで聞く
      • require('assert')
        • power assert への依存がなくなった
          • assertさえ使えばそのままつかえる
          • テストコードが無駄にならな

まとめとか

イメージなんですがNodeをサーバーサイドで使う会社って年々増えてきてる気がします。 （実際どうなんだろ。）
それもあって、今回のパフォーマンスの話もそうなのですが、長期運用で色々問題を踏み抜いてきてるプロダクトも多そうなので可用性をどうやって担保してるとかsoket.ioを使ったリアルタイム部分のCIどうしてるとか、そういったノウハウが体系化された話が今後も次々上がってくると、新しくNodeを入れてみようと思っているタイミングや運用経験は薄いけどNodeを使っている身からするととても参考になります。

VueやReactでのSSRの話も熱があったし、今年もとても学び多い学園祭でした。運営の方が有難うございます！！また来年も！