スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ

ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→

[Kwappa]

一家に一人、 h13i32maru がほしい＞＜

[patorash]

AndroidっぽくJSで作るっていう発想かー、なるほど。

[glat_design]

クックパッドによるSPAの事例 /

[cachico]

スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ

[nemoba]

SPAで画面のライフサイクルにふれてて素晴らしい。SPAで大規模システム作るときも必須だったよ

[sagaraya]

SPAにすると最初のロードが重くなるけど、この規模だからそんなに問題にならなかったのかな。あとclickイベント遅い件はfastclickというライブラリで解決できる。高速回線の割合はどうやって調べたんだろ

[naga_sawa]

こういう事例ポイント話があると助かる/WebViewは5.0からまともになるようだけどどうだろう

[bitgleams]

[[***]

[luccafort]

Androidっぽい仕組みをJSで再現かー、すごいな。

[efcl]

モバイル向けの一部ページをシングルページアプリケーションとして作るのに適した条件やメリットについて書かれている。 クライアントサイドでの画像リサイズとアップロードやTouchイベント対応などについて

[o_hiroyuki]

frontend

[murokaco]

“最大で30倍高速化することができユーザの使い勝手が向上しました。”

[HHR]

SPA(Sigle Page Application)とは「1つのURLに複数の画面を紐付けて、ユーザ操作に応答して画面を動的に書き換えながらサーバとの通信を必要最低限にしたWebアプリケーション」

[mitsugi-bb]

SPAに関してandroidのアーキテクチャを参考にcafescriptで実装、タップ速度の問題、画像アップロード時のクライアント側での縮小実装。mobilewebアプリの解決方法が非常によくまとまってる気がする。

[nilab]

スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ

[potato777]

SPAで高速化。

[secondlife]

SPA! SPA!

[q_____p]

XMLからViewを作るInflate機能 画面の生成、活性、停止、破棄を扱うライフサイクル機能 Intentによる画面間呼び出し機能 画面の遷移スタックを管理する機能

[shino-sun]

スマートフォンWebのフロントエンドを高速化する取り組み 先日「撮るレシピ」というサービスを cookpad. Tags: from Pocket October 23, 2014 at 04:58PM via IFTTT

[stealth_adress]

難しいけど役に立つね。

[kamayan1980]

おお、click判定遅いと思ったらそんなことやってたのかー。参考になる。

[at_yasu]

あとでよむ

[sionsou]

クックパッドさんマジすごい。SPAって面倒なイメージしかないけど高速化にはいいんだなぁ。

[saisaisousou7]

便利になります！ありがたい！！ スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ

[BOOOOOOOON]

はー、すげえ。

[Funyapu]

どうでもいいけど過去の職場のエロイ人に泥のwebViewはHTMLをキャッシュするって教えてもらったけど本当かな？

[Nkzn]

知見である