latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

WebApp/2 作ってます。HTTP/2 + ESModules は安くて速くて美味しいよ!

最近 WebApp/2 というのを作ってます。

WebApp/2 は2012年頃から温めていた「ES6 + ESModules を使い、開発初期〜中期は Bundler や Transpiler を使用せずに開発を進められるようにしたい」というアイデアを具現化したものです(細かい仕様は wiki にあります)。

作り始めて20日ほどですが、昨日までの WebApp/2 には、以下の課題や疑問が存在しました。

  1. WebApp/2 は一般的なトレンド [要出典] から大きくJUMPしている。世の中には webpack, babel, browserify を前提に書かれた ES5/ES6 なコードが大量にあるが、それらを ES6+ESModulesに変換するための シンプルで将来取り外しが効くマイグレーションパスが見つかっていない
  2. ファイルを事前結合しない場合の パフォーマンスのトレードオフがどれ位あるのか? そして、それは 許容できる範囲に収まっているのか?
  3. アセットパイプラインの煩わしさから開放されるというプラスの側面パフォーマンスのトレードオフというマイナスの側面 の存在を他の人に説明した時に、どのように受け取られるのか?

最初の課題については、rollup.js で解決できる事が分かりました。

そして、多くの方々が気になるであろう、

  1. 事前に結合された bundle.js を読み込む場合と
  2. HTTP/2 + ESModules を使って js をバラバラに読み込む場合の

パフォーマンスのトレードオフについても許容出来る範囲に収まっており、アセットパイプラインが不要という説明に対しても予想よりもポジティブな反応がありました。


ESModules に乗っかると、bundeler も transpiler も sourceMap も minify もコンパイラも、開発初期〜中期まで必要ありません(そのまま本番にデプロイも可能です)。

従来の魔窟化したビルド環境を今後も使っていくか、HTTP/2 + ESModules のパワーを信じるかどうかはアナタ次第です。

"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある

デバッグしてください” “パフォーマンスチューニングしてもらってもいいですか?”JavaScriptが難読化された状態のページのURLを渡された場合に、依頼された側は(恐らく)以下の方法で解決を試みます。

  • Minify をほどいた状態の JavaScript をローカルに保存し、難読化されたコードの意味的な解読とコードの流れを何となく読み取る
  • コードの実際の動作を確認するために、 Charles などの LocalProxy を使い、Minifyされたコードと解読したコードを差し替え、DevTools上で動かしてみる
  • DevTools が謎の理由で死亡する場合や、コードを表示するだけでUIの応答性が極端に悪くなるほど巨大な JavaScript の塊(10万行を超えるコード)対しては、まずはコードをDevToolsが耐えられるサイズに分割する
  • minify + eval されているコードの一部を差し替える場合は、DevToolsによってはevalの内部に対しブレークポイントが張れない場合があるため、さらにほどき、動く状態にしてからブレークポイントを張ったり、printfデバッグ用のコードを追加する

はい、聡明な諸氏であればお分かりのように、Minify前のコードを提示してくれたら、このような無駄な苦労はそもそも発生しない のです。

時間は有効に活用したいですね。


webpackを使ってて極端にデバッグしづらいサイトが大キライ のとこは、webpackを使ってCSSや画像がBase64化された状態でjsと一緒に埋め込まれている事が多々あり、DevToolsがそれによって悲鳴を上げるから。ですね。

webpack を使って全部一つに混ぜる → 生成された bundle.js が死ぬほどデカくなる → DevToolsで開けない/DevToolsの反応が死ぬ → オマエを殺して俺も死ぬ。 の構図です。

JavaScript で記号プログラミング

息抜きに、JavaScript で記号プログラミング を Qiita に投稿してみました。

JavaScript で記号プログラミングは、(僕の中で)JavaScript がまだ盛り上がっていた頃(2005〜2013年頃)の話題です。とても懐かしい感じがします。

200x年ごろのJavaScript界隈といえば、集団で力をあわせて一つの大きな目標を達成する感じではなく

という、ルール無用で、一寸先は闇のような主張が闊歩する魔界だったように記憶しています。昨今のJavaScriptとはだいぶ趣が違いますね。

“どんなに汚いコードでも動けばいい” と主張するスピードスターやバーサーカープログラマーも最近は老化やLinterツールの普及によりめっきり減ってきましたが、まだかなり多くの個体の存在が確認されています。

そのような方へのアンチテーゼとして記号プログラミングというジャンルが存在するとかしないとか(要出典)。

このような動作環境や言語仕様の重箱を過度につつくようなトリッキーなコードに頼らず、誰にでも読みやすいコードを書くように心がけたいですね(自戒)。

GitHub pages の公開ディレクトリを master /docs に設定し Symlink を作ったら色々捗るかと思ったらダメでした

先ごろ、github-pages として公開するディレクトリを masterブランチの docs に設定することが可能になりました。

(これまでは gh-pages と呼ばれる別ブランチを用意し、そちらに必要なファイルを都度 publish する必要がありました)

そこで

(〜・◇・)〜 github シンボリックリンクをある程度理解してくれるから、もしかしてリンク作れば、master や develop ブランチに追加したファイルを docs から参照可能できたりしないかなぁ?

と考えた (ε・◇・)з ← コイツがおったそうな。

具体的なエラーはこちら

リンクだと無理そうなので、

https://github.com/uupaa/WebGLDetector.js/tree/master/docs

のように必要なファイルをコピーして設置することに。

https://github.com/uupaa/WebGLDetector.js/tree/master/docs を公開したページはこちら。

http://uupaa.github.io/WebGLDetector.js/

gyazo.com

他人の書いたコードは難しい(純ポエム

iOS 10 Safari から video の inline 再生が可能になります

iOS 10 Safari から video のインライン再生が可能になります。

  • iOS 9 までは <video webkit-playsinline> を指定することでインライン再生が可能でした(WebView のみ)
  • iOS 10 からは <video playsinline> を指定することでMobile Safari でもインライン再生が可能になります

ご注意

注意すべき点が1つあり、webkit-playsinline ではなく playsinline を指定してください。 webkit-playsinlineだけを指定するとフルスクリーン再生になってしまいます。

  • webkit-playsinline と playsinline を指定しない → フルスクリーン再生になる
  • webkit-playsinline を指定する → フルスクリーン再生になる
    • iOS 10β3頃まではインライン再生になっていたが、βの途中で仕様変更になった
  • playsinline を指定する → インライン再生になる
  • webkit-playsinline と playsinline を指定する → インライン再生になる

Example

<!DOCTYPE html>
<html><head><title>🍖の日</title>
<meta name="viewport"
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
</head><body>

<video
  src="http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8",
  controls
  playsinline
  style="position:absolute;top:0;left:0;outline:1px solid red;width:320px">
</video>

<p style="position:absolute;top:100px;left:10px;color:lime">
Hello inline player 😀
</p>

</body></html>

WebKit Internals API

WebKitデバッグビルドすると、UnitTest用と思われる隠しAPIが利用可能になります。

window.internals.xxx() を実行することで…

  • 一時停止できないはずのKeyFrameアニメーションを一時停止したり
  • 各種ハードウェア/ソフトウェアの状態を取得したり
  • メモリキャッシュ/ページキャッシュをクリアしたり
  • スタイルを強制的に再計算したり(リフロー)
  • GC 発生を知ることができたり(GC observe)

などが可能になるようです。

隠しAPIは250個以上あるようなので、寝れない夜に眺めると良いかもしれません。