Skip to content

Home

Jump to bottom
uupaa edited this page Sep 8, 2017 · 108 revisions

WebApp/2 は Docker, HTTP/2, ES6+ESModules を使いやすくパッケージ化した WebApplication の開発環境です。 WebApp/2 を採用することでWebフロントエンドのプログラミングは劇的にシンプルになります。

WebApp/2 の目標は 標準化 と 省力化 にあります。

  • 標準化
    • 標準技術を使用することで流行り廃りや個人の趣向が入る余地を減らしたい。余計な心配を減らしたい。
  • 省力化
    • 誰がやっても同じ結果になる環境構築のような定形作業を減らし、よりコアな開発に専念するための時間を作りたい。

これまでのWebフロントエンド開発手法

JavaScript には、部品を import するという重要な仕様が欠落していました。

JavaScirpt コードを一つに纏めたり、 ES5 しか動作しない古いブラウザに合わせてコードを変換する作業はプログラマー側の責務となっており、 多くのツールを組み合わせてパイプラインを構築する必要がありました。

import 仕様の欠落は、コンテンツ作りに集中できない(開発環境の構築や維持に手間がかかりすぎる) という形で、 プログラマーの作業時間を削り続けています。

ESModules実装までの流れ

ESModules は ES6 の仕様の一部で、部品化のためのSyntax( import / export )を標準化したものです。

ブラウザに ESModules の実装が入るまでの歴史をたどると、このような流れになります。

  • 1998年頃からブラウザの利用者が増え、ブラウザ上でアプリケーションを実装する仕事が生まれました
  • 2009年に Node.js と npm が生まれ「JavaScript で部品を作ろう」「様々な環境で動くようにしよう」という流れが発生しました
  • ユーザベースの増加により変化が生まれました
    • JavaScript の使いづらさを解決しようと AltJS と呼ばれる類似言語が沢山生まれました
    • 部品を作りたいというニーズを満たすため AMD, CommonJS, UMD, Babel, Browserify, webpack といった発明や実装が多数行われ、これらを組み合わせることで動く物をビルドするという ワークアラウンド が流行しました
    • これらの変化をうけ 「あれが良い」「いやこっちが良い」「この組み合わせでは動かない」「どれを使えばいいのか」「変化が速くて追いつけない」「WebFrontEndはなぜこんなに面倒なのか」 という声が増加します
  • 2011年にES6(Harmony)の策定がスタートしました
  • 2017/05 に主要なブラウザで ESModules が動作する状態になりました

ESModules はこれまでの問題を抜本的に解決する標準化された仕様です。 これまでのようなワークアラウンドに頼る必要も無くなって行くでしょう。

HTTPS と HTTP/2 化の流れ

2014年頃から「これからは HTTP は使わず HTTPS を使いましょう」という流れが発生します。

HTTPS の利用はほぼ義務化されています。そして HTTP/2 も現場で活用できる段階に突入しています。

Migrate to WebApp/2

HTTP/2 と ESModule の準備が整った事で、それらを組み合わせた WebApp/2 も実用可能な段階に突入しました。 ただ、これまでの開発(before)とESModulesを使った開発(after)には大きな隔たりがあるため、移行(migration)する方法も必要です。

before migration after
Protocol HTTP, HTTPS HTTP, HTTPS, HTTP/2 HTTPS, HTTP/2
Debug proxy Charles 3/4 Charles 4 →
Browser Chrome, Safari,
Firefox, Edge, IE11		 Chrome, Safari,
Firefox, Edge, IE11 		Chrome, Safari,
Firefox, Edge
Transpiler Babel, Browserify Babel, Browserify,
rollup.js + plugin		 rollup.js + plugin
Bundler gulp, webpack,
Browserify		 gulp, webpack,
Browserify,
rollup.js + plugin		 rollup.js + plugin
CSS Transpiler Sass, PostCSS, etc... → →
Code Syntax ES5, ES6, FlowType,
TypeScript		 → ES6
(混在も可能)
Module System CommonJS, UMD,
AMD		 CommonJS, UMD,
AMD, ESModules		 ESModules
Linter ESLint, TSLint → ESLint

rollup.js を使うと、ES6+ESModules で書かれたコードと ES5, ES6, TypeScript, ES6+FlowType なコードを混在することもできます。

Pros/Cons

WebApp/2 は HTTP/2 と ES6/ESModules を採用することで、開発者が抱えていた復数の問題を同時に解決します。

  • ESModules は ECMAScript で標準化された仕様です。流行り廃りとは一定の距離をおけるようになります
  • とりあえず開発を始められます。WebApp/2にはrollup.jsが同梱されているため bundler や transpiler で悩む必要はありません
  • コンテナを使うことで、考えなければならない事を減らせます

これまでのような多数の部品で組まれた(異様に作り込まれた)パイプラインやビルド周りはあっという間に負債化します。 作り込みを最小限に留める事で結果的にシステムは長持ちし、開発の立ち上がりも速くなります。

WebApp/2 にはまだ弱点もあり、クリアになっていない点もあります。 パフォーマンスを詳細に測定してみると、従来の transpile + bundler による事前結合を採用したほうが良い結果となる事もあると思います。

さぁ始めましょう

ここまで読み進める事ができた方や、使ってみたいと思われた方は インストールと設定 を行い、 WebApp/2 を下敷きとした WebAppの開発を開始してください。

ルートとなる js に import を1つ書くだけで、必要なモジュールが五月雨でロードされ実行される様を見ると、 「今までの苦労は一体なんだったんだ…」 とため息が出てしまう事でしょう。

Overview

Clone this wiki locally