Skip to content

Instantly share code, notes, and snippets.

@ginpei
Last active August 29, 2015 14:12
Show Gist options
  • Select an option

  • Save ginpei/15e77a2d099706b37474 to your computer and use it in GitHub Desktop.

Select an option

Save ginpei/15e77a2d099706b37474 to your computer and use it in GitHub Desktop.
[WIP] JavaScript設計の歴史の話。

ブログ記事用

WIPWIPWIPWIPWIP WIPWIPWIPWIPWIP WIPWIPWIPWIPWIP WIPWIPWIPWIPWIP WIPWIPWIPWIPWIP

JavaScript設計の歴史の話。

ちょっと題名が仰々しい気がする。

かつて設計はなかった、ではなくて一般的に行われてはいなかった(作業時間が取られていなかった)、洗練もされていなかったっていう話です。もちろん個々人では先取りしてあれやこれややってる人もいて、そういう人たちはだいたい今も第一線で頑張っているように思う。

原初

  • DHTML (Dynamic HTML)

設計なしに書いていた時代。もちろん個別のアルゴリズムとかはあったんだけど、アプリケーションというよりはウィジェットとかそういう規模のもの。

あれよあれ、マウスカーソル追っかけるやつとかそういうの。もちろんまともに考えられたものもあったけど、少数派。JavaScriptといえば「よくわからない派手で邪魔なもの(を作るやつ)」という認識。ブラウザーの設定やプラグインでスクリプトの実行を停止している閲覧者も少なくなかった時代。

第一世代

  • DOM, jQuery
  • Ajax
  • hashchange

jQueryの出現及びAjaxの発見により、画面を動的に変化させるという発想が広まった。それに従いウェブアプリケーションのクライアント側の比重が大きくなる。ここでクライアント側の設計という作業工程が発生。

Ajaxバブルの時代。(なんだそれ。) 気取って「モダン」とか言い始めた頃。ちなみにjQuery以外に、prototype.js等も流行していた。

モダンなウェブアプリのはしりはGoogle Maps。実際はAjax(XHR)ではなかったが、画面表示後にサーバーと通信して情報を更新するという実装が大流行。

またURLフラグメント識別子、いわゆる「ハッシュ」を操作して画面状態をURLに保存できるようにもなった。SEOでの課題にもなりHash Bang "#!" がGoogleにより提唱されたりとか。

とはいえ、設計としてはまだ手探り。各人で諸々設計して実装していて、それぞれ妥当性はあるんだろうけど、共通認識としての設計パターンはまだ構築されていなかった(あるいは普及していなかった)。

第二世代

  • テンプレートエンジン
  • MVx, AngularJS, Backbone.JS
  • 黒い画面

設計パターン固まってきたー

フロントエンドエンジニア

Grunt, Gulp, npm, bower, 試験

第三世代

  • Virtual DOM, React
  • カスタム要素, Polymer

来たるべき近未来

テンプレートと一体化したモジュールを組み合わせ

MVxは各モジュール内部に

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment