WebModule はモジュールの管理とエコシステム化のためのワークフローといった新しいフォーマットを提供します。
以下の特徴を備えています。

1. どこでも動作するコードを書くための雛形を提供します

   • WebModuleIdiom やWebModulePattern を提供しています
   • モジュールの書き方で試行錯誤したり、どうしようかと迷う時間をカットできます
   • WebModule のフォーマットに沿ったコードは単体のライブラリとしても利用できます。WebModule が時代遅れになる日が来ても、コードの大部分はそのまま利用できるでしょう
   • node.js用のコードをChromeでビジュアルにステップ実行する仕組みなども提供します
   • Node.js, Browser, WebWorker, iOS Simulator, NW.js, Electron でテストを行い、どこでも動作するコードであることを保証できます
   • git push を行うと、Travis-CI による自動テストが行われ、結果が通知されます
     • 手動 + 自動テストの仕組みを備える事で、安心して開発を進めることができます
   • Minify 前のソースコードと、Minify 後のソースコードを一度にテストすることで、Closure Compiler の ADVANCED_OPTIMIZATIONS によるリネーム事故とは無縁になります。
   • プログラマーには、テストが可能なようにモジュールを設計することを強制します

2. Google が提供するClosure Compiler を使ってコードを最適化します

   • デフォルトでは Closure Compiler の ADVANCED_OPTIMIZATIONS モードでコンパイルします
     • リネーム、不要コードの削除、インライン化が行われ、高速で小さなコードが生成されます
   • デバッグ用ビルドの他に、依存関係を解消した状態のリリース用のビルドを行えます
   • ソースコードが負債化しません
     • Closure Compiler を採用している WebModule は、
       将来に渡って新しいJavaScriptの仕様のメリットを速やかに取り込めます。
       ES6 や ES7 の仕様に左右されがちな AltJS とはこの点が大きく異なります

3. コードの品質を可視化し、維持する仕組みを提供します

   • コードの品質を検査する ESLint と連携します
   • 品質を可視化するカバレッジツールPlato と連携します
   • 品質劣化(デグレード)はグラフで Plato が生成するグラフにより可視化されます。品質の劣化に気がつくことができます

4. Code と Spec を分離することを提案しています

   • オンラインリファレンスという新しい考え方を提案をしています
     • ブラウザの DevTools と、GitHub/wiki を連携させた検索システムを提案しています
   • ドキュメントは GitHub/wiki に Markdown で書きます
   • ドキュメントは誰でも参照できます。GitHub のコントリビュート権限を持っている人は書き換えることもできます

5. ソースコードとドキュメントを分離し、ドキュメントを拡充するための仕組みを提供します

   • GitHub/wiki にドキュメントが外部化され、エコシステムが育ちやすい環境が備わっています
   • 移動中の5分, 会議前の10分といった、ちょっとした隙間時間でドキュメントを記述したりチェックすることができるようになります

以下のエントリでは、これらについて、より詳細に説明します。

WebModulePattern は新しいモジュールの設計パターンです。

WebModulePatternに沿ってコードを生成することで、
Node.js, Browser, WebWorkers, NW.js, Electron などのあらゆる環境で動作する部品を記述できます。

WebModule は、Closure Compiler でコンパイルを行い、
コードの短縮、難読化と、@lable で指定された不要なコードの除去(プリプロセス)やインライン展開を行います。

開発中は$ npm run min でデバッグ用のビルドを行い、
リリース時は、$ npm run build で依存モジュールを結合した状態でビルドができます。

$ npm run score で、コードのカバレッジ(静的解析)を行い、解析結果とこれまでの履歴をグラフで表示します。

コードの複雑度を測定し、問題のある箇所を指摘します。将来問題が起きそうな箇所も表示します。

ブラウザで WebModule のユニットテストページを開き、 DevTools のコンソールでHelp コマンドを使い関数名.help やHelp("関数名") とタイプすることで、オンラインリファレンスページへのリンクを表示します。

関数の内容をダンプし、引数や戻り値の型情報をクイックに確認することもできます。

> MyExample.help  function MyExample(value) { // @arg Any      this._value = value;  }  GitHub repository:https://github.com/uupaa/MyExample.js  GitHub wiki page:https://github.com/uupaa/MyExample.js/wiki/MyExample  Google.search( MyExample ):http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=MyExample

オンラインリファレンスにより、ソースコードの記述とドキュメントの記述タイミングを分離し、ドキュメントを拡充するための仕組みを提供します。

WebModulePattern をベースにしたモジュールは、とある理由 で JSDoc スタイルのコメントシステムを推奨していません。
ソースコード内には詳細にコメントを書かず、残すべき情報は、GitHub/wiki に記述するようにします。

このように開発に必要な環境を一式提供することで、コーディング作業がワークフロー化され、部品化が促進されます。