idea of stack structure

Concat

結合は単に結合にとどまらず、

モジュール化による依存関係の

解消と明示を提供する。


方法は;


  • 一極集中か、
  • 依存関係にあるコード上で管理。

Centerized


一極集中


  • 1 つのファイルで管理
  • 一箇所にまとめて依存関係を記述
  • 特定ファイルを見れば依存関係が把握できる

Decenterized


依存関係にあるファイル上に関係を記述


  • コード上にそのコードが依存する関係を明示
  • 各コード上にコンテキストを全て明示できる
  • コードを追う事で依存関係が把握できる

Modularize

モジュール化には一貫性が必要。


モジュール化されるべきは;


  • HTML
  • CSS
  • JavaScript



Centerized modularize


一極集中モジュール管理

HTML/CSS/JavaScript の依存関係を
一箇所で管理できるか...?

  • Grunt: ごりごりカスタマイズすれば... でも煩雑。
  • Component: CSS/JavaScript は完璧だけど HTML...
  • Brunch: HTML 以外良い感じだけど柔軟さは低い

方法がない...

Decenterized Modularize


コード上に依存関係を記述

  • HTML: プリプロセッサの extends
  • CSS: プリプロセッサの @import
  • JavaScript: RequireJS


同じ粒度の方法がそれぞれにある!

Build Tools are...


Grunt/Yeoman/Brunch 等のビルドツールは
高度な結合、すなわち
モジュール化による依存関係の管理には

向かない

Modularize should be...


モジュール化はコード上で行われるべき

HTML/CSS/JavaScript 用に一貫した方法がある

Grunt


例えば;

  • grunt-contrib-jade で HTML モジュール化
  • grunt-contrib-stylus で CSS モジュール化
  • grunt-contrib-requirejs で JavaScript モジュール化


Grunt はタスク自動化のみを担当。

Just

forget about CommonJS or something!


AMD For The Win.

idea of stack structure

By Yu I.

Made with Slides.com

idea of stack structure

  • 521

More from Yu I.

  • trend of javascript architecture
    Yu I.
    675