One Page Appsの作り方 (How to Build One Page Apps)
状態 | 受理 |
Slide URL | http://slide.7kai.org/yapc2011/ |
会場 | ディジタル多目的ホール (14日) |
開始時間 | 2011-10-14 16:00:00 |
発表者 | Shinichiro Aska (su_aska) |
発表時間 | 20分 |
発表言語 | 日本語 |
概要 | How to Build One Page Apps 実例を元にOne Page Appsの作り方を紹介します。 One Page Apps(Single Page Application)とは1枚のHTMLで構成されたWebアプリケーションでTweetDech等が有名です。 一日中開いたままでもバックグラウンドで同期が走り、必要に応じて通知やDOMの再構成が行われ、オフライン中の操作はスタックされ、通信回復後に再同期が行われる様なクライアントアプリケーションに非常に近い実装が必要になります。 実用的なアプリケーションにする為には標準のUIだけでは力不足ですし、開発効率を保つ為には肥大化しがちなJsコードをうまく整頓するコツも必要です。 お話しする内容は多岐に渡りますが、内容の殆どは別途ドキュメントとして公開しますので気になった所は後で御確認下さい。 しかし、習得に時間を要する複雑なテクノロジーや聞いた事も無い様なライブラリは登場しません、皆さんが日頃慣れ親しんでいるPerlとJsとHTMLとCSS、それもそんなに深くないレベルの内容で実現されています。 PlackとjQueryについて知っていれば十分だと思います、このお話ではその技術をどう使ったらサクっとOne Page Appsが作れるのか、私が体験から学んだことを共有しようと思います。 # first step 1. モック(HTML/CSS)を準備 2. WebAPIを準備 3. DOMとアプリ(Js)とWebAPIを接続 4. 手軽な国際化 5. 汎用的なカスタムパーツ達 6. スロットルやデバウンスで使い心地を向上 # second step 1. Chrome Extensions 2. データ不整合の検出と再同期 3. オフラインモードの検出と再同期 4. プラグイン機構の組み込み 5. WebSocketやAjaxリクエスト結束によるパフォーマンス向上 |
対象オーディエンス | 指定無し |
ジャンル | アプリケーション開発 |
Sociales