Skip to content

Overview

Jump to bottom Edit New page
uupaa edited this page Nov 14, 2014 · 15 revisions

WebModule はモジュールの管理とエコシステム化のためのワークフローを提供する、これまでにない新しい仕組みです。
以下の特徴を備えています。

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

    • WebModulePattern を提供しています
    • モジュールの書き方で試行錯誤をしたり、迷う時間をカットできます
    • WebModule のフォーマットで書かれたコードは、単体のライブラリとしても利用できます
    • コンパイルしなくても動作します。ソースコードが負債化しないように考えられています
    • node.js 用のコードをChromeでビジュアルにステップ実行する仕組みなども提供します。

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

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

  3. Node.js, Browser, WebWorkers, iPhoneシミュレータ の各環境で一斉にテストする仕組みを提供します

    • テストの為の環境が備わっています
    • プログラマーには、テストが可能なようにモジュールを設計することを強制します

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

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

  5. オンラインリファレンスという新しい提案をしています

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

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

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

WebModule コードパターンをベースとした、どこでも動作するコードを書く下地を提供します

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

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

Closure Compiler と連携し、実行速度とバイナリサイズを両立する仕組みを提供します

WebModule は、ClosureCompiler (Compile.js) でコンパイルを行い、
コードの短縮、難読化と、不要なコードの除去やインライン展開を行います( @keyword の除去は Minify.js の機能です )。

開発中は $ npm run build でテストを行い、
リリース時は、$ npm run build-release で依存モジュールを結合した状態でビルドします。

Node.js, Browser, WebWorkers, Travis-CI の各環境で一斉にテストする仕組みを提供します

$ npm run test を行う事で、Node.js, Browser, WebWorkers の環境で、コンパイル前のコードと、コンパイル後のコードについてテストを行います。

本来は手動で十分にテストを行ってからコミットを行うはずですが、
壊れたコードをコミットしてしまう場合や、
テストをパスしないコードをコミットしてしまうケースもありえます。
そのような場合は、Travis-CI がエラーをメールで報告してくれます。

このように、手動テスト + 自動テストの仕組みを備えることで、安心して開発を進める事ができます。

JSHint や Plato と連携し、コードの品質を改善し維持するための仕組みを提供します

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

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

ブラウザの DevTools と、GitHub/wiki(Markdown) を連携させるオンラインリファレンスを提供します

Help.js を読み込んだ状態のブラウザで DevTools を開き、ブラウザのコンソールで 関数名.help や Help("関数名") とタイプすることで、 オンラインリファレンスページへのリンクを表示します。

また同時に、関数を文字列として表示し、引数や戻り値の型情報をクイックに確認することができます。

> MyExample.help

  function MyExample(value) { // @arg Number: the value.
      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 をベースにしたモジュールは、とある理由 で JavaDoc スタイルのコメントシステムを推奨していません。
ソースコード内には詳細にコメントを書かず、残すべき情報は、GitHub/wiki に記述するようにします。

詳しくは、https://github.com/uupaa/Help.js/wiki/Help を参照してください。

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

Add a custom footer

Clone this wiki locally