"Dart End-to-End: A productive developer experience for the web" セッション要約

More than 5 years have passed since last update.

この記事はGoogle I/O 2014で開かれた Connecting Cloud and Web: Deploying end-to-end apps with Dart というセッションの動画の内容を自分なりに解釈して要約して日本語でまとめたものです。正しい和訳ではありません。下記URLの動画を見ながら読んでもらえればよいかと思います。


http://www.youtube.com/watch?v=49BH7nxbBmY&list=PL1id3ien5Lz9_rCgx69JMtVjE7jf9IToO



"DX"とは何か

UXとは


  • 直感的で

  • 楽しく

  • 生産性が高い

ことが求められる。UXのアナロジーである "DX" (Developer eXperience)はデベロッパーについて同じことを考える。DXは


  • シンタックスがあり

  • コードには色が付いており

  • テストフレームワークがある

これらを超えた先、デベロッパーとしての生産性を高めるEnd-to-End体験こそがDXである。それはつまり


  • 言語機能

  • ツール

  • 豊富なライブラリ

である。MicrosoftのVisual Studio、AppleのXCode、AndroidのAndroid Studioは素晴らしいend-to-end体験をもたらしている。Webにおいてそれを与えることがDartのゴールである。


ターゲット

効率よくコードを書くということは、よくコンポーネント化されており、理解を簡単にし、共有しやすく、再利用しやすくするということである。それらの頂点にPolymerがある。DartとPolymerのEnd-to-Endの両端はモバイルとクラウドである。


Hello Dart

我々がコーディングに求めるものとは?


  1. 新しいプロジェクトを始めるときのデフォルトの構造(※よくわからなかった)

  2. コードを理解する賢いツール

  3. インテグレーション…すべてのものと一緒に動作すること

Web用にデザインされたHello worldはとてもシンプルで、main関数を書くだけで準備ができたときに勝手に呼び出される。ドット2つのメソッドカスケードもとても良い。使用されていないimportもツールがコードを理解して教えてくれるし、変数の型と代入される値の型が違うときはエラーを出してくれる。DartはネイティブにDartを実行することができるDartiumを用いて直接デバッグできる。他のブラウザで実行されると自動的にDartのコードはJavaScriptに変換されて同じように動作するし、Source Mapでデバッグすることもできるがそれは優れたやり方とは言えない。


  • dartanalyzer : 静的コードチェック

  • pub serve : 開発サーバーの提供とオンデマンドコンパイル

  • dart2js : DartからJavaScriptへの変換

  • Dart Editor : それらツールすべてを一つ屋根の下にまとめる

これらがDartの持つものである。


Dartium

DartiumはDartをネイティブにデバッグするためにカスタムされたChromiumである。開発者はDart EditorとDartiumでデバッグするが、デプロイ先のブラウザはなんでも良い。


Metarial Design

リッチなUIを作るために合理的なDXとは?データグリッドを作るのに<div class="data-grid">を使うと、正しく<script>を使い、正しいCSSの<style>を書くためにおそらく複数のclassを用いて目的の<div>を定義しなくてはならない。たくさんのclassを使って要素を探すことは非合理的なDXだ。C#やJava、Xcodeいずれにおいても我々はコンポーネントを定義し、オブジェクトの継承を利用してベースコンポーネントを拡張してきた。我々がこれまでに見てきた<data-grid>こそが合理的なDXである。

Material Designはデバイスを超えてリッチなUXを構築するためのモデルである。PolymerはこれをPaper Elementsとして発表した。我々がUXモデルに求めるものとは?


  • 構造化(※おそらくTemplateのことを指す)

  • コンポーネントを作りやすいこと

  • コンポーネントを使いやすいこと

  • コンポーネントを共有しやすいこと

Polymerを使うことでCustom Elementをマークアップとスクリプトに分けて書くことができる。Paper ElementはShadow DOMとして読み込まれ、CSSを持っており、すべてカプセル化されているし、イベントをハンドルすることもできる。依存関係はCustom Elementの中だけで解決し、とても使いやすい。


mobile web development

時代はモバイルファーストであり、我々も開発ツールの一つとしてAndroidのためにDart VMを内包したChromeのカスタムビルドを提供した。Androidデバイス上でDartのコードをデバッグすることができるようになり、素晴らしいDXが得られる。モバイルでのデバッグはDartium on AndroidとChrome toolsとDart Editorを使うことで今日から始めることが出来る。


Cloud

もう一つのend、クラウドについて。我々はデバッグ用のDartium以外の場所でもDart VMを使えるように研究し、簡単にDartアプリケーションが書けるようにした。そしてNode.jsがDartに対応するのを待つことなく、我々はシェルから直接Dartを実行できるDartコマンドを提供した。実はDart2jsやコンパイラ、アナライザ、pubシステム、そしてドキュメントジェネレータその全てはDartで書かれており、ブラウザーに依存することなくDartのすべての機能が使えるようにデザインされている。さらに我々はあらゆるものにアクセスするためのライブラリであるdart:ioパッケージを提供し、Compute Engineを使ってDartのサーバーアプリをGoogle Cloud Platformにデプロイすることができるようになった。つまりDockerをサポートしているあらゆる場所でDartを使うことが可能となったのである。先週からCloud PlatformはDockerのサポートをv1リリースとして始めており、とても簡単にDockerイメージをデプロイすることが出来る。サンプルは https://github.com/kevmoo/docker-dart-sample を見て欲しい。


App Engine

我々はDartのスタートから、App Engineでのサポートについての要望をヒアリングしてきた。そしてGoogle CloudチームはApp Engine カスタムランタイムを発表した。これは開発者が自分でランタイムを持ち込むことが出来る機能だ。今はまだプライベートベータ版で試すことは出来ないが、Cloudのチームはこの機能のために活発に動いている。カスタムランタイムはどんな言語やランタイムも動作させ、App EngineのAPIに同様にアクセスできるようにする。Dart開発チームはすでにこのサポートを使用しており、memcacheとcloud_datastoreのライブラリを持っている。まだ公開されないが、我々は仕事に使っている。すでに存在するアプリケーションもDartのmix-inを使うことで簡単に機能を拡張し、App Engineに対応することができる。


おかしい点や付け足したほうが良い点などあればコメントで教えてください。