6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

弱点克服 Angularjs クライアントに処理させるということ

Last updated at Posted at 2016-03-10

AngularJS はご存知有名jsフレームワークである。

最近 jsフレームワークが流行っているのは
【クライアント端末が一般的に高速に成ったから】
とされているわけだけど、、

あれだよね。
当たり前だけどいろんなアプリケーションを開いてると重くなっちゃうよねw

そんな弱点を克服するために
http://qiita.com/itoufo/items/52c4df4576675a7d4a76
を書いてみたんだけども、もう少し考察してみた。

クライアント環境はピンキリ

最近のWEBサービス技術者で "マルチデバイス" を考えたことがない人はいないはず。

でもなにか違うの?って聞かれた時、模範的な解答は

  • OS
  • ブラウザ
  • 画面サイズ

あたりだと思う。

これらを解決するのが結構な負担だったために、レスポンシブデザインやそれに対応するLibraryが充実してきたわけである。

ここで一つ思い出してみる、

  • クライアント環境の処理速度

は重要でなかったのか?

...ぶっちゃけWEB界隈では重要ではなかったのだ。

なんでもできるjsさん

従来からWEB技術者の仕事は表示用のデータを端末に配信するまで、後はブラウザさんにお任せしますね〜ってスタンス。

「処理が重い端末で心地よく動作させるには?」の解は「js処理を減らすかlightにしよう」ってだけの話。

ところがところが、新しい時代になった今js世界に革命機が訪れ、js on ブラウザでもなんか色々できるようになった。

  • 通信
  • ストレージ
  • URLルーティング
  • 本格的オブジェクト指向
  • パッケージ管理
  • 細かなビルド設定

さて、これらができるようになって、

  • 従来ボトルネックとなっていた通信処理が非同期化できる!
  • 割りとセキュアにデータを扱える!
  • 開発環境が充実してきた!
  • jsだけでも覚えれば色々できるぜ!
  • ブラウザ依存減ってきた〜〜

って声がちらほらと。
js で何でもできる時代が来てしまったのだ〜

クライアントで動作するということ

ここからが本題である。

上記のように、jsで色々やることには大きなメリットが有る。
でもこれだけは意識しておきたい。

クライアント端末のCPUを使うことは WEB技術者にとってリスクが大きい
ってこと

だって、
ユーザがブラウザをどう使ってるかわかんないんだもの
ネイティブアプリと違ってCPUとかメモリの面倒見れないんだもの
っていうかWEB技術者としてその辺の知見薄いんだもの

ざっくり言うと、特定の処理に特化しておいてあるサーバと何に使ってるかわからんクライアント端末のどっちに面倒な処理を任せるべきかって話。

じゃあどうすればいいのよ?

とりあえず Loading icon

とりあえず、下記のタイミングではloading iconを表示させておこう。
できればclickやscroll等のイベントも無効にしちゃおう。

  • URL変更に伴うページ遷移時
  • 通信時
  • Directive が変化した時
  • Direcvive を追加した時

二重処理のリスクは非同期処理につきもの。
細かくはこっち更新します
http://qiita.com/itoufo/items/52c4df4576675a7d4a76

実ユーザでベンチマーク

環境ごとにベンチマークをとっておきたいけど、めんどくさい。
ユーザ毎に待ち時間とかとる
※いつか書くさ、きっと書くさ

結論

jsフレームワークが流行っているからって、
jsが書き放題!とかjs万能!ってわけじゃない。

css文法だけでどうにかできるならその方がいいし、
サーバに任せられるとこは任せたほうがいい。

開発機では動いているからといって、
一般ユーザの端末で動くとは限らない。

ベンチマーク方法とか面倒だよね、、
考えとこ、、

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?