Webアプリケーション

HTML5を使った実際の開発の進め方

http://itpro.nikkeibp.co.jp/atcl/column/14/121100125/021800005/

業務システムの開発におけるWeb技術の変化

https://html5experts.jp/albatrosary/3191/

2015年時点でのフロントエンド周りまとめ

http://blog.mmmcorp.co.jp/blog/2015/05/21/frontrend/

ブラウザ

ブラウザの仕組み

https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

Webサーバとアプリケーションサーバ

Webサーバ

webサーバーはユーザーから送られてきた自サイトへのリクエストを受け取り、なんらかの処理を加えるプログラムです。そして、場合によってはあなたのRailsアプリケーションにリクエストを投げます。 NginxとApacheは最も有名なwebサーバーです。

CSSやJavaScript、画像など、頻繁に変化しないファイルへのリクエストであれば、Railsアプリケーションはそのリクエストを処理する必要がないかもしれません。 webサーバーはRailsアプリケーションに処理を移譲することなく、そのリクエストを自分で処理できます。また、そうした方が通常は速く完了します。

webサーバーはSSLリクエストや静的なファイルやアセット、圧縮されたリクエスト等を処理したり、その他大半のwebサイトが必要としそうな数多くの処理をこなしたりすることができます。そしてもし、あなたのRailsアプリケーションがリクエストを処理しなければならない場合は、webサーバーはリクエストをアプリケーションサーバーにパスします。

アプリケーションサーバ

アプリケーションサーバーはあなたのRailsアプリケーションを動かしているものです。アプリケーションサーバーはあなたのコードを読み込み、アプリケーションをメモリに保持します。アプリケーションサーバーはwebサーバーからリクエストを受け取ると、Railsアプリケーションにそのことを知らせます。アプリケーションがリクエストを処理すると、アプリケーションサーバーはそのレスポンスをwebサーバーに返します。（そのレスポンスは最終的にユーザーへ届きます。）

大半のアプリケーションサーバーはwebサーバーを使わずに単体で実行できます。これはあなたがdevelopmentモードでやっていることです！しかしproduction環境ではwebサーバーを手前に置くことが多いはずです。 webサーバーは複数のアプリケーションを一度に処理したり、アセットを素早くレンダリングしたり、リクエストごとに発生する多くの処理をさばいたりしてくれます。

webサーバーとアプリケーションサーバーはどういう関係なのか？

webリクエストはwebサーバーが受け取ります。そのリクエストがRailsで処理できるものであれば、webサーバーはリクエストに簡単な処理を加えてアプリケーションサーバーに渡します。アプリケーションサーバーはRackを使ってRailsアプリケーションに話しかけます。 Railsアプリケーションがリクエストの処理を終えると、Railsはレスポンスをアプリケーションサーバーに返します。そして、webサーバーはあなたのアプリケーションを使っているユーザーにレスポンスを返します。

もっと具体的に言えば、NginxはリクエストをUnicornに渡します。 UnicornはリクエストをRackに渡します。 RackはリクエストをRailsのrouterに渡します。 routerはリクエストを適切なcontrollerに渡します。そしてレスポンスが逆の順番で返されます。

命名規約

よく見るコンポーネントの名前（クラス名）

http://liginc.co.jp/web/html-css/css/166585

HTML5周辺のライブラリ、フレームワーク、ツール

大分類

小分類

概要

例

HTML

エディタ

Aptana Studio, Adobe Dreamweaver, Adobe Edge

HTML

エディタ

Aptana Studio, Adobe Dreamweaver, Adobe Edge

HTML

ビューア

各種ブラウザ

JavaScript

ライブラリ

underscore, JQuery, Bacon.js, etc

JavaScript

MV*フレームワーク

Backbone.js, Ember.js, Angular.js, Knockout.js, React, etc

JavaScript

UIフレームワーク

JQuery UI, jQuery Mobile, Twitter Bootstrap, etc

JavaScript

テンプレートエンジン

Handlebars, Hogan.js, Mustache, Dust, jsRender, etc

JavaScript

モジュール管理機構

RequireJS, CommonJS, etc

JavaScript

一元化、難読化

r.js, uglify, etc

CSS

LESS, SCSS, Compass, etc

開発環境

ビルドツール

grunt

開発環境

パッケージ管理

bower

開発環境

開発ツールスタック

Yeoman

開発環境

デバッグ

各種ブラウザ

テスト

単体テスト

QUnit, Jasmine, Shinon.js, etc

テスト

結合テスト

PhantomJS, SimerJS, CasperJS, Selenium,etc

AltJS

TypeScript, CoffeeScript, JSX

http://www.nri.com/~/media/PDF/jp/opinion/teiki/g_souhatsu/2013/gs201310.pdf

HTTPステータスコード

HTTPステータスコードの選択フローチャート

http://postd.cc/choosing-an-http-status-code/

サーバプッシュ

WebAssembly

PWA

WEBPUSH（HTTP/2）

ここらへんは古いやり方

Comet

XMPP

HTTPロングポーリング

Server Sent Events

https://www.slideshare.net/mawarimichi/push-37869433

RESTful Hypermedia API

Hypermedia APIは、APIのレスポンスに関連する別のリソースのリンクURIが含まれており、APIの利用者は関連するリソースを事前に知らなくてもリンクURIを辿ることで関連する情報を取得したり操作することができます。

http://dev.classmethod.jp/planning/restful-hypermedia-api-intro/

REACT.js

http://blog.masuidrive.jp/2015/03/03/react/

Meteor

http://gihyo.jp/dev/serial/01/meteor/0007

REST APIリファレンス

"GitHub Developer":https://developer.github.com/v3/

"Google Developer":https://developers.google.com/ad-exchange/buyer-rest/v1.3/?hl=ja

"Twitter":https://dev.twitter.com/rest/public

"Facebook":https://developers.facebook.com/docs/reference/

amazon aws

yahoo developer network

React

reactのサンプル集
http://react.rocks/

種類

サーバ

nginx
apache httpd
jboss

IDE

Eclipse
Subline text
atom

標準API

Java SE
Java EE