コンセプト
"In-browser" to "in-app": イン・ブラウザー・デザインから、イン・アプリ・デザインへ。デザイナーも、エンジニアと同じローカル実行環境を使って、動作しているアプリをいじってデザインする。
Autonomous modeless components are building blocks: 自律的でモードレスな部品によってアプリケーションを構成する。画面単位のデザインや、画面単位のコントローラー(MVC)ではない。自律的に作動する部品(component)が協調動作するシステム。
Ubiquitous language: ユビキタス言語。プログラミング上のクラス名と、それに対応するHTMLカスタム・タグ名と、それに対応するCSSの要素名を一致させる。それによりソースコードの自動生成を推進する。
Branch to category: 分岐せず、分類する。“if”（条件分岐）のコードを書く代わりに、既存概念の精緻化（classをsubclassに分けること）によって「条件」を表現する。
メモ
Tic-Tac-Toe ゲームのモデリング作業を通じて、
- メンタル・モデル（ユーザーの心のなかにある）
- インターフェイス・モデル（モノとして存在する）
- ソフトウェア・モデル（プログラミングのモデル）
という3つのモデルの違いを理解しました。また、
- メンタル・モデルとソフトウェア・モデルを近づけることが、ソフトウェア開発上大事であること（オブジェクト指向やMVCは本来そういうものとして考案された）
- 主流のワークフローはインターフェイス・モデルに引きずられ過ぎていること（HTMLやDOMでUIを設計し、jQueryでインタラクションを実装するといった手法は、UI実装モデルに依存しすぎている）
- 我々が模索するワークフローは、インターフェイス・モデルをいったん保留し（考えず）、メンタル・モデルからソフトウェア・モデルをつくる。そのあとでインターフェイス・モデルを実装していくというワークフローであること
を確認しました。
だからHTMLではなくCustom ElementsでUIを記述するというわけです。HTMLはUI実装言語であり、Custom Elementsは（XML的な意味で）抽象的UI記述言語であります。UIそのものを記述できるのは後者。
HTML5 Custom ElementsによるUI記述というのは、ある意味で、 XUL に似てるかもしれません。
で、自律的UIコンポーネントをライブラリ化し、再利用していけば、ウェブ・アプリケーション開発の生産性は大幅に向上するだろう、と考えられます。（GWT/Vaadinのアプローチです）
環境構築
Mercurialのインストール
Node.js開発環境の構築手順
- node.js v0.10.21 node.js →[Node.jsの設定]
- 例えば
npm install mocha→ package.json
Bowerのインストール
- BOWER: A package manager for the web
npm install -g bower- 例えば
bower install bootstrap→ component.json
新規プロジェクト作成の基本手順
-
hg initもしくは空リポジトリのクローンhg clone ssh://hg@bitbucket.org/zerobaseinc/meteor-npm-bower-mercurial npm init- 必要なモジュールを
npm install bower init- 必要なコンポーネントを
bower install hg add component.json package.json .hgignorehg commit
既存プロジェクトのクローン手順
hg clone ssh://hg@bitbucket.org/zerobaseinc/meteor-npm-bower-mercurialnpm installbower install
次回
実際に Tic-Tac-Toe を作ってみる。