JavaScript の過去と現在、ガチな JS アプリケーション設計

JavaScript の過去と現在、ガチな JS アプリケーション設計

1. 1. JavaScript の過去と現在 ガチな JS アプリケーション設計 @kiwanami Hacker Tackle 2014/09/26
2. 2. @kiwanami UI デザイン、プログラマー 医療系システム開発、研究
3. 3. 経歴と作ったものなど ● 小さい頃： MSX など ● 学生時代：未踏 ● 仕事：画像解析、業務システム ● OSS ： Emacs でいろいろ、ブラウザ拡張など 最近 ... JavaScript, Emacs Lisp, Ruby
4. 4. 5 つの世界 ● パッケージ（サービス） ● インターナル ● 組み込み ● ゲーム ● 使い捨て Joel Spolsky 2002
5. 5. 最近の JS 周辺のまとめ
6. 6. ES6 / ES.next ブラウザー技術 その他
7. 7. ES6 ● 2015/6/17 published ● class ● module ● scope ● arrow function ● default param / rest param ● 文字列テンプレート ● Promise
8. 8. ES6 ● すごく良くなっている – JS からではなくて、いきなり ES6 から入門 – 今まで書いてた人は、復習と Update ● ES.next – Object.observe – async/wait – など
9. 9. ブラウザ技術 ● HTML5 / CSS3 ● WebSocket ● WebWorker ● ServiceWorker ● WebRTC （ ORTC ） ● その他 – Touch/Pointer 、 WebAssembly ● 各プラットフォームの事情
10. 10. Node.js ● サーバーに限らず、ビルドツールなどの JS の 実行環境 ● Electron
11. 11. JavaScript スタイル ● 昔 – コピペプログラミング – 設計、構造化無し ● ちょっと前 – jQuery, prototype.js → ブラウザ依存の吸収 – altJS → JS つらさの回避 ● 現代 – ES6 スタイルならつらくない – ブラウザの JS が十分速い – →大規模化　 　設計・構造化の必要性
12. 12. JS への入り方 ● Want to learn JavaScript in 2015? — Medium – https://medium.com/@_cmdv_/i-want-to-learn-javascript-in- 2015-e96cd85ad225 ● 初心者とすごい人の記事しか無い – 中間の人向けが無い ● とにかく基本 – いい本、ビデオ、書いて試せるテキスト – 人のコード読みまくる – いろいろ試して経験する
13. 13. JS のフレームワーク問題
14. 14. フレームワーク多すぎ どれを選ぶべきかわからない
15. 15. なぜなのか？ → 絶賛進化中だから ● カンブリア紀 – 正しい現象 – 多種多様な進化 – その後淘汰 ● この先生きのこるためには？
16. 16. 歴史から学ぶ
17. 17. GUI 周辺の歴史１ ● 〜 80 年代 – GUI 誕生 – 68 年マウス発表 – GOTO is considered harmful – 72 年アルト ● アルゴリズムとデータ構造 – 80 年 Smalltalk ● GUI と OOP の融合 – 86 年 OOPSLA ● OOP のシンポジウム – 87 年 HyperCard
18. 18. GUI 周辺の歴史２ ● 90 年代 – OOP の発展 ● デザインパターン ● MVC – スタンドアロンアプリ全盛期 ● サバクラ、 2 層 – IDE 開発競争
19. 19. GUI 周辺の歴史３ ● 00 年代前半 – CGI 、 Web アプリのブレイク – 3 層、サーバー完結 – Flash ● 00 年代後半 – JS 盛り上がり – jQuery ● 10 年代 – スマートフォンアプリ – SPA
20. 20. 多様性と淘汰の歴史 ● GUI 誕生後、コンポーネント、操作方法、パタ ーンの整理 ● アルゴリズム、データ構造、デザインパターン ● IDE 開発競争 ● Web フレームワーク – ポスト Struts
21. 21. 生き残っているもの ● デザインパターン ● アルゴリズム、データ構造 ● ユーザーインタフェース設計 ● Visual Studio ● Emacs/Vim ● lisp
22. 22. 生き残っているもの ● デザインパターン →　 　抽象化した設計パターン – 言語やパラダイムによる ● アルゴリズム、データ構造 →　 　学術的に研究されている ● ユーザーインタフェース設計 →　 　人間（本質は変わらな い）との接点 – デバイスの進化により新しい提案 ● Visual Studio →　 　金と気合 ● Emacs/Vim →　 　愛 ● lisp →　 　神
23. 23. 生き残るのに大事なこと 大企業だからといってあてにならない！！
24. 24. どうすればよいか？ ● 事前にどれが生き残るかわからない – 多様性の時代と淘汰のタイミング – 淘汰ではなくて衰退の可能性 ● UI デザイン、基本設計は変わらない – 手段が変わっているだけ ● 圧倒的金や愛が感じられるもの
25. 25. 現代の JS のフレームワークについて
26. 26. そもそも「フレームワーク」とは？
27. 27. Web サーバー FW の機能 ● ルーター・ディスパッチ – URL 解析 / コントローラー選択 / 呼び出し ● パラメーターコンバート ● 入力バリデーション、自動制御 ● レスポンス制御 – リダイレクト / テンプレート呼び出し ● セッション管理 ● その他 – ORM / 認証
28. 28. クライアント側に 求められる機能とは？ ● MVC/MVVM ● テンプレート？ ● コレクション、ストア管理？ ● 全体の制御？ → フォームの制御？
29. 29. GUI 開発設計に必要なもの ● レイヤーアーキテクチャ ● 通知（ Pub/Sub, Observer, Signal ） ● 粗結合 → すなわち MVC ● コンポーネント – 境界、汎用化、共通化 ● 状態管理
30. 30. 求められているのは ソフトウエア設計 ● 抽象化 ● カプセル化 ● 情報隠蔽 ● モジュール化 ● 関心の分離 ● 結合度と凝集度 ● インタフェースと実装の分離 ● 参照の一点性 ● 分割統治
31. 31. 目的と手段、理由 ● http://steps.dodgson.org/b/2014/12/11/why-is-real-dom-slow/
32. 32. フレームワーク自作のすすめ ● いちから全部やってみる ● 他のフレームワークの実装が理解できる ● 自作した上で他のフレームワークに乗ることも ある ● MVC 自作の本 – →既に書いてた Isomorphic 、 flux 、 VirtualDOM （枝刈）
33. 33. 今のフレームワークに必要なもの ● 状態管理 ● コーディング規約、多人数ルール ● 教育、使用の判断 ● ドキュメント
34. 34. 今後必要になると思われるもの ● ルーティング・画面遷移前後での処理 – 状態の受け渡し、記憶 – アニメーションの接続 ● クライアント側の M とサーバー側の M – アプリ全体の設計で M と更新通知を考える – トランザクション、排他制御
35. 35. 今後必要になると思われるもの２ ● 非同期処理の設計 – Promise, async/wait の先 – デッドロック、スレッドの闇 – 同期・非同期 ● →同期・待つ　 　人間が詰まる – 非同期・待たない ● push/pull どこかが詰まる → flow control / backpressure – 処理の流れではなく、データの流れを定義 ● ロックの要らない設計 ● 並行処理の設計パターン
36. 36. 結局フレームワークはどうなのか？ ● Vanilla がおすすめ ● コードの寿命、チームの寿命を考える ● フレームワークのコードを断片的にも読むぐら いは必要 ● 覚悟の問題 – フレームワークもメンテする – スクラッチから作りなおしてもいいやと思える
37. 37. まとめ ● 最近の JS の状況と入り方の紹介 ● GUI の JS の混乱状況の整理 ● 今後の JS でのアプリケーション開発のヒント の提案