Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
vanilla.jsのご紹介
vanilla.jsのご紹介
Loading in …3
×

Check these out next

1 of 38 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

Recently uploaded (20)

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

  1. 1. JavaScript の過去と現在 ガチな JS アプリケーション設計 @kiwanami Hacker Tackle 2015/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 周辺の歴史1 ● 〜 80 年代 – GUI 誕生 – 68 年マウス発表 – GOTO is considered harmful – 72 年アルト ● アルゴリズムとデータ構造 – 80 年 Smalltalk ● GUI と OOP の融合 – 86 年 OOPSLA ● OOP のシンポジウム – 87 年 HyperCard
  18. 18. GUI 周辺の歴史2 ● 90 年代 – OOP の発展 ● デザインパターン ● MVC – スタンドアロンアプリ全盛期 ● サバクラ、 2 層 – IDE 開発競争
  19. 19. GUI 周辺の歴史3 ● 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. 今後必要になると思われるもの2 ● 非同期処理の設計 – Promise, async/wait の先 – デッドロック、スレッドの闇 – 同期・非同期 ● →同期・待つ   人間が詰まる – 非同期・待たない ● push/pull どこかが詰まる → flow control / backpressure – 処理の流れではなく、データの流れを定義 ● ロックの要らない設計 ● 並行処理の設計パターン
  36. 36. 結局フレームワークはどうなのか? ● Vanilla がおすすめ ● コードの寿命、チームの寿命を考える ● フレームワークのコードを断片的にも読むぐら いは必要 ● 覚悟の問題 – フレームワークもメンテする – スクラッチから作りなおしてもいいやと思える
  37. 37. まとめ ● 最近の JS の状況と入り方の紹介 ● GUI の JS の混乱状況の整理 ● 今後の JS でのアプリケーション開発のヒント の提案

×