Skip to content

Overview

Jump to bottom Edit New page
uupaa edited this page Oct 24, 2015 · 15 revisions

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. ソースコードとドキュメントを分離し、ドキュメントを拡充するための仕組みを提供します

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

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

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

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

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

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

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

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

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

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

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

ブラウザで 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

Code と Spec を分離し、Spec や API Spec を拡充するための仕組みを提供します

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

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

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

Add a custom footer
Clone this wiki locally