「東京Node学園祭2017」に参加してきました

勉強会メモ

Source to Binary - journey of V8 javascript engine

V8

  • JSの実行エンジン
  • byteコードで実行

parse

  • ソースをパースしASTを作る
  • 抽象構文木をつくる
  • 全てパースすると実行されないものまで含んでしまう
    • フェーズを2段階にする
  • LazyParsing
    • 最初は外側だけ
    • 呼び出されてからパース
  • AST(Abstract Syntacs Tree)
    • いろいろ変換したりとか

Ignition

  • 1~4byteのbytecodeにする

Builtins & Runtime

HiddenClass

  • 型を推論する
  • 宣言の順番とか違うだけで別の型(Map)扱いになる
  • MapTransition
    • 既存のMapを有効活用できる

InlineCaching

  • プロパティアクセスを高速化するためのキャッシュの仕組み
  • 特定のMapを記録しておいて2回目以降検索しに行かない
  • CacheMissが起きたら記録し直し
    • 配列で新しいのを追加(4つまで)
    • 4つこえたらMap記録するのを諦める(全部破棄)

Optimization

  • 最適化の仕組み
  • TurboFun
    • V8を最適化するスタック
    • コードを生成する予定のグラフを最適化
  • CodeGenerater

Deoptimization

  • 脱最適化
  • 最適化されたものは柔軟性に乏しい
  • WrongMap
  • Bailout

Make you a React: How to build your own JavaScript framework.

NoteAboutJsx

VirtualDOM

  • 動的にHTMLを書きたい
  • VirtualDOMは「スピードのため」ではなく「デベロッパーのため」

Node.js x Chrome headless で、お手軽WebRTC MCU

WebRTC

  • P2P
    • 中央集権的じゃない
    • CPU負荷高い
  • SFU
    • サーバに送るだけ
    • そのサーバがみんなに配る
    • 負荷低い
  • MCU
    • サーバで映像と音声を合成する
    • もっと負荷低い
    • モバイルに優しい
    • サーバがとても重くなる

ReactNativeアプリでE2Eテストを回してみた

RNでアプリ作ってる

プロダクト間のデグレ

  • 勘と経験だった
  • 動作確認面倒
  • E2Eテスト作る

アプリのE2E

  • PCに比べて画面小さい
  • でもWeb以上に複雑
    • バリエーション
    • 再インストールしたときとか
  • ios
    • XCUITest
  • Android
    • AndroidEspresso,UIAutomator
  • テストもJSで書きたい
    • appium
      • ビルド後のapkとかが対象
    • wix/detox
      • ビルドフェーズから面倒みるやつ
    • pixielabs/cavy

Appium

  • selenium的なもの
  • 操作対象のコンポーネントにtestIDを付与する
    • htmlでいうid属性はRNではtestID
  • Appium(GUIアプリ)
    • ブラウザの開発者ツールみたいなもの
    • DOM構造が見える

シナリオとは

  • E2Eのシナリオとは何なんだ
    • 画面で起こりうること全て？
    • 全てにしたらやりきれない
  • コンバージョンシナリオ
    • 結局全部コンバージョンじゃんと
  • 正常仕様のみ
    • 想定されうる王道のシナリオがちゃんと動くことをテスト
    • 異常系はユニットで

やってみて

  • ブラウザよりもモックしにくい
  • テスト対象はapkとか
    • JSの世界が消えたあとのもの
    • JSを動的に書き換えられない

まとめ

  • 目的範囲方針を整理すること
  • まずはミニマムで
    • E2E作る所で時間かけない
  • E2E作るだけで品質が上がるわけじゃない

今さら聞けないSPAのCORS対策の話

  • 杉浦颯太(メルカリ)

CORS

  • CrossOriginResourceSharing

origin

  • originとは
  • http://localhost:8080/
  • same origin policy
    • 異なるorigin間での通信を制御する
    • ブラウザが制御しようと動く
    • コンテンツを守るため
  • ブロックするのはブラウザ
    • サーバ側には正常に届いててもブラウザでブロックされる

制限を解除する仕組み

  • CORS
  • httpヘッダーで制御
  • サーバ側でヘッダーセットしてあげることでブロックを解除
    • 特定のHTTPメソッドだけ許可とかできる

SPAでどう考えるべきか

  • CORS
  • preflight
  • ajax with credentials
  • user sessionを作りたい
    • AccessToken
    • cookieに入れるのがベター
    • https前提
    • Set-Cookie: HttpOnly; Secure;
  • ajaxとかでcookieを送る時は明示的に書かないといけない
    • client -> credentials: 'include'
    • server -> Access-Control-Allow-Credentialsをtrue
    • Access-Control-Allow-Originが*はダメ
  • PreflightRequest
    • ブラウザが勝手にやる
      • OPTIONSで送られるあれ
    • レイテンシが2バイトなるということ
    • PUT,DELETE,PATCH,OPTIONSの時はこれが必ず起きる
    • 特定のヘッダー以外のものがついてても起きる
    • Content-Typeによっても起きる
  • PreflightRequestをしない場合はCSRfトークンをつけておく必要がある
  • PreflightRequestをキャッシュ
    • Access-Control-Max-Ageの秒数の間はpreflightしない
    • ブラウザによって設定できる上限値が違う

Native ES Module - something almost, but not quite entirely unlike CommonJS

ES Modules

  • ESのモジュールはcommonjsに似てる
  • mjsという拡張子で使う
  • 今はnode --experimental-modules main.mjs で実行すると使える
  • 非同期で動くとこがcommonjsと違う
  • default exportとnamed exportがある
    • この辺はES2015で使ってるやつ
  • index.jsは省略できる
    • 省略できるファイル名を指定することもできる
    • package.jsonで{"main": "xxx.mjs"}
  • dynamic import
    • importをコードに埋め込む場合は非同期だからawait必要
  • __dirnameでディレクトリがとれなくなる?
    • path.dirname(new uri.URK(import.meta.url).pathname)
  • ESModules(mjs)とcommonjs(js)は別の世界だけど特定条件でブリッジがある 
      - mjsからjsはdefault importだけできる
  - jsからmjsをdynamic importだけできる
      - requireでなくimportを使ってawaitつける
  • cjsのmigrate
    • babelやめる
    • 全てmjsにする
    • requireをimportに変える
    • dynamic importにawaitをつける
  • 拡張子なしの呼び出しは辞めた方がいい
    • requireは拡張子なしだと.jsのみ
    • importは拡張子なしだと.mjsと.js両方
    • package.jsonに何やら書いておくといい？

Turbo Boost Next Node.js

No REST for the weary... Introducing GraphQL

サーバサイドエンジニアがJavaScriptを書いてTradingViewを導入した話

  • 谷口 英

LT

LINE Bot Handson

JSON Schema Centralized Design

Node.js × AWS Lambda アプリケーション開発Tips