フロントエンド、ハイブリッドアプリの技術メモ
フロントエンド、スマホアプリの用語や技術トレンドがさっぱりわからないので、自分メモに
目次
SPA(Single Page Application)
Webアプリケーションのアーキテクチャ
単一ページによるWebアプリケーション
ユーザがアプリケーションを使っている間、Webページ全体をロードすることがなく、レスポンスが高速でUI/UXに優れているという利点を持っています。
HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できる
従来のServer-Client形のアーキテクチャでは、画面を遷移するたびにサーバにリクエストし、返却された HTML を描画するという処理を行っていましたが、SPAアーキテクチャでは、初回通信時にHTML ファイル、CSS ファイルJavaScript ファイルといった静的ファイルを取得し、初期画面を表示します。初期画面が表示された後に、Ajax によって、非同期に API リクエストし、レスポンスが返ってき次第、結果を反映するために DOM を書き換えるという処理を行っています。また、API のレスポンス結果は、ブラウザにキャッシュとして保持しておき、変更がない場合は、できるだけ再利用しています。
ページはハッシュの変更や DOM の操作によって切り替わる
サーバとの通信は Ajax や WebSocket などで行う
DOMとはDocument Object Modelの略でHTMLを構成する要素をコンピュータプログラムで参照したり操作したりするための取り決め(API)の一つ。HTMLで記述されたWebページの構成要素(見出し、段落、領域、画像、リンクなど)と、それらの配置や見栄えなどを定めた属性情報などを参照、制御する手法を定めている。 Webブラウザなどに実装されており、ページ上にJavaScriptなどで記述されたスクリプトからページ内の各要素を読み取ったり、内容や設定の変更、要素の追加や削除などを行う標準的な手段として用いられる。HTML文書をDOMで表したデータは、文書の最上位の要素を頂点として、各要素が包含関係に従って枝分かれしていく木構造(ツリー構造)となっており、これを「DOMツリー」(DOM tree)と呼ぶ。DOMではHTMLをノードと呼ばれるものの階層的な構造として識別する。
RIA(Rich Internet Application)とは、柔軟でリッチなUIをもったWevアプリ。代表的なものでフラッシュ、Javaアプレットなど使ったWebアプリ。衰退した。
クライアントサイド用のJavaScriptのMVCフレームワーク
- model-View-controllerモデルをアプリを作るフレームワーク
- これまでは、サーバで動くMVCモデルのアプリ作成した。今はクライアントサイドで動くMVCモデルのアプリを作成するのがはやり。つまりSPA
- 代表的なMVC
- AngulraJS
- Knocout.js
- Sencha touch
AngularJS
- Google製人気MVCフレームワーク
- JavaScriptでクライアントサイドのMVCモデルを実現する。
- SPA(Single Page Application)にあう
jQuery
- DOM操作ライブラリ
- JavaScriptの(DOM周りの)拡張ライブラリ
- 基本的にjQueryはDOM要素の操作・処理に適したツールです。
jQueryとAngularJSの違い
jQuery: JavaScriptの(DOM周りの)拡張ライブラリ
AngularJS: ブラウザ用MVCフレームワーク+継承機能拡張
ライブラリは部分コンテキストにおける機能や処理に着目し、再利用を目指した部品であり、 フレームワークは全体コンテキストにおける機能や構造に着目し、再利用を目指した部品です。
node.js
- サーバーサイドのJavaScript
- 非同期(I/Oの処理結果を待たず処理を進める)
- Node.jsは、フレームワークではありません。ライブラリでもありません。
- JavaScript アプリケーションのプラットフォーム
- Node.jsでは、Webサーバとアプリケーションが同じ PHPのWebサイトで無理やり例えると、Apache + mod_php + Webアプリ です。なので、Node.js の Hello Worldのサンプルは、HTTPを受付け、200とヘッダーと内容を返す、というのが多い
- リアルタイムなアプリケーションにあう
- SPA(Single Page Application)にあう
- WebSoketを利用するアプリにあう
altJS
- altJSとはJavaScriptの代替となるJavaScript拡張言語
- CoffeeScript
- TypeScript
- Dart
JavaScriptというのはなかなか軟弱というか、良い意味で言うと自由度が高い。 言語仕様をよーく理解していないとバグを出しやすいし、使いにくかったりするワケです。 そういう部分をaltJSは賄ってくれます。
これは、JavaScriptで苦労した経験のある人しか分からない事かもしれません。 特にクラスや型のサポートという点では JavaScriptには弱さがある印象です(動的型付けに慣れてないだけかもしれないですが)。
ハイブリッドアプリ
- ハイブリッドアプリとは、ネイティブアプリの中にWebViewと呼ばれる簡易ブラウザのようなものを表示し、その中にHTMLを表示させるアプリのこと
- Cookpadのアプリがよい例
- HTML、CSS、Javascriptなどwebの技術でアプリ開発が可能。avaやObjective-CといったAndoroid、ios用の開発言語を覚えなくてもいい
- Android、iOS、Blackberry、Windows Phone、Palm WebOS、Bada、Symbianのプラットフォームに対応
- 、モバイル端末で動作するブラウザ(safari,chorme,webview)の違いは意識する必要あり
cordova
参考
SPAがネイティブアプリをぶっ壊す:HTML5/Javascriptが変えるWebの未来
【JavaScript】なんとか.jsのお話(Backbone.js、AngularJS、Node.js、altJS、Underscore.js、prototype.js....etc)