More than 5 years have passed since last update.

ゼロベース社内勉強会「ウェブ・アプリケーションのプロトタイピング・ワークショップ」第1回

Last updated at 2013-11-07Posted at 2013-11-07

コンセプト

"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のアプローチです）

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 .hgignore
hg commit

実際に Tic-Tac-Toe を作ってみる。