Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フロントエンド初学者がSPAに手を出してみた

シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました

  • Login to see the comments

フロントエンド初学者がSPAに手を出してみた

  1. 1. フロントエンド初学者が SPAに手を出してみた 2014/ 9/ 8
  2. 2. 自己紹介 八木 啓太 (やぎ けいた) ! SI企業に勤務、Webへの関心から 2011年デジタルハリウッドスクールに入学。 現在は株式会社Art&Strategyの ディレクターとして従事。 ! twitter: @shafflife https://twitter.com/shafflife
  3. 3. シングルページWebアプリケーション(SPA)とは? ・単一Webページで構成 ! ・サーバーが行う処理の大半をクライアント側に移行 ! ・ページ遷移、画面全体の更新を行わず、  部分的な更新が行える
  4. 4. SPA = 最近の技術? 古くはJava, Flashを使ったアプリケーションがあった →現在はJavascript(JS)を使った開発が注目 http://games.whomwah.com/spacelander.html
  5. 5. SPA = シングルページデザイン? 1枚ページで完結するWebページと仕組みがちょっと違う http://bohemiancoding.com/sketch/
  6. 6. 従来のWebページ html css HTTP Request (初回) HTTP Response クライアントサーバー js 各種ファイル HTTP Request (2回目以降) … HTTPプロトコルで指定のファイルを取得、リフレッシュ
  7. 7. SPAの仕組み HTTP Request (初回) html クライアントサーバー css js HTTP Response HTTP Request (2回目以降) … Ajax HTTPで初回に読み込んだファイルをDOM操作、 必要な部分をAjaxで取得
  8. 8. SPAの実装例(1/4) http://engineer.typemag.jp/article/spa-dev http://www.hulu.jp
  9. 9. SPAの実装例(2/4) http://qz.com/
  10. 10. SPAの実装例(3/4) https://www.getcloudapp.com/
  11. 11. SPAの実装例(4/4) https://trello.com/
  12. 12. SPAを構築するには https://angularjs.org/ http://knockoutjs.com/ http://backbonejs.org/ http://www.sencha.com/ http://emberjs.com/ 主にJavascriptフレームワークを使って開発
  13. 13. DEMO http://emberjs.com/
  14. 14. SPAまとめ メリット ・単一Webページで構成  → ページのメンテナンスをJSでコントロール ! ・サーバーが行う処理の大半をクライアント側に移行  → サーバー側にかかる処理・負荷を減らせる ! ・ページ遷移、画面全体の更新を行わず、部分的な更新が行える  → 画面遷移が早い ! ⇒動的コンテンツのあるWebサービス構築に強い  デスクトップアプリケーションのような軽快さ、UX
  15. 15. SPAまとめ デメリット ・単一Webページで構成  → JSの書き方次第でパフォーマンスに影響、敷居が高い   (逆にJSをレベルアップするチャンス?) ! ・サーバーが行う処理の大半をクライアント側に移行  → サーバー自体の性能は変わらず、そちらは別対策が必要(Node.js等) ! ・ページ遷移、画面全体の更新を行わず、部分的な更新が行える  → SEO対策が苦手 ! ⇒静的コンテンツの多いサイト制作に不向き
  16. 16. ご清聴ありがとうございました

×