Embed Size (px)
Citation preview
2015年 6月 10日 Slide 1深読み業界トレンド
深読み業界トレンド
中村正三郎http://iiyu.asablo.jp/
https://twitter.com/shownakamura
門司のじーも君
アンテナハウス株式会社http://www.antenna.co.jp/
2015年 6月 10日 Slide 2深読み業界トレンド
ウェブは LAMPからMEANへ
2000 年代は LAMP LAMP=Linux+Apache+MySQL+PHP 2010 年代は MEAN MEAN=MongDB+Express+AngularJS+Node.js 単一言語 JavaScript で全部書いてしまおう！
2015年 6月 10日 Slide 3深読み業界トレンド
MEAN登場の背景その１
JavaScript 全盛時代へ
JavaScript は、どこにでもある
クライアント ( ブラウザ ) にもサーバにもある
劇的に実行スピードが速くなった (Chrome V8) サーバ、クライアントでいくつものプログラミング言語を使うのは面倒
2015年 6月 10日 Slide 4深読み業界トレンド
MEAN登場の背景その２
JavaScript は 2010 年代のアセンブラ
1980 年代は、 C へコンパイル
C++, Kyoto Common Lisp 2000 年代は、 Java 仮想マシンのバイトコードへ
Scala, Clojure, JRuby, JPython 2010 年代は、 JavaScript へコンパイル
CoffeeScript, TypeScript, ClojureScript, Scala.js など多数
2015年 6月 10日 Slide 5深読み業界トレンド
MEAN登場の背景その 3
C10K 問題 ( クライアント１万台接続問題 ) 極力、ページ遷移がない UI/UX がほしい
データのリアルタイム更新が必要
株価やニュースほか、 Twitter のツイートやらSNS 系は特に
ウェブアプリ向けプログラミング言語多すぎ
クライアント ( フロントエンド ) とサーバ ( バックエンドで ) 多くの言語を使いわけるのが大変
多くの言語を書ける奴がなかないない
１つの言語で書けないのか
2015年 6月 10日 Slide 6深読み業界トレンド
MEANの目指すもの
JavaScript で、ネットと DB 対応のデスクトップアプリを作る
非同期 I/O で、 C10K 問題を解決
クライアントもサーバも JavaScript で全部書く
やり取りするデータも JSON(Java Script Object Notation)
SPA(Singple-Page Application) ページ遷移を極力しない ページのあちこちを部分的にリアルタイム更新
2015年 6月 10日 Slide 7深読み業界トレンド
MEANと従来との違い その１ 従来
ユーザがデータ入力して、サーバにページ内のデータを全部送る。
サーバは、 DB を検索したりして、 HTML のページ全体を生成
クライアント ( ブラウザ ) がそれを表示
サーバが、ほとんどやってしまう
2015年 6月 10日 Slide 8深読み業界トレンド
MEANと従来との違い その２ MEAN/SPA
ユーザがデータ入力、サーバの API に REST でアクセス・更新
サーバの API は、 DB を検索したりして、データをJSON で返す
Socket.io(WebSocket の JavaScript) でリアルタイム更新
クライアント ( ブラウザ ) は、受け取ったデータでページの一部を更新
クライアントが主導権を持つ
2015年 6月 10日 Slide 9深読み業界トレンド
MEANと従来との違い その３
昔からある、クライアントとサーバの力のバランスがいったりきたりする歴史の繰り返しの１つ
サーバは、 DB 処理、データ、計算パワーを提供する API 群 (RESTful なAPI)
クライアントで、多くのロジック処理、データ更新、レンダリング
往年のクラウアント・サーバ方式 (C/S) の復活
C/S をウェブ技術で再発明
2015年 6月 10日 Slide 10深読み業界トレンド
その他のキーワード
直接、 MEAN を特徴づけるものではないが、 MEAN/SPA 界隈で出てくるキーワード
レスポンシブル (responsible) いろんなサイズの端末 (PC, スマホ、タブレット )に１つのコードで対応
CSS3 を駆使
リアクティブ (reactive) 懐かしのデータフローアーキテクチャーを、今風に言い換えたものにみえる。並列分散メカニズムのウェブ的再発明
FRP(Functional Reactive Programming) も登場
2015年 6月 10日 Slide 11深読み業界トレンド
MEANの各要素の概要 その１
Node.js MEAN すべての基盤
ライブラリとしても、エコシステムの土台としても
非同期 IO で、C10K 問題 ( クライアント 1 万台接続問題 ) を解決
Express Node.js の上に作られたライブラリ
抽象度を上げて使いやすくしたもの
2015年 6月 10日 Slide 12深読み業界トレンド
MEANの各要素の概要 その２
AngularJS クライアントのビューと動作を記述
MVC アーキテクチャ (Model-View-Controller) 双方向データバインディグ
モデルが変化したらリアルタイムでビューをレンダリング
モデルの変化 ( データを追加 ) でビューが変わる
例 HTML 上の表が変化
ビューの変化でモデルもアップデート 例 フォームにフィールドに値を入れるとでモデルが変化
2015年 6月 10日 Slide 13深読み業界トレンド
MEANの各要素の概要 その３
MongoDB ドキュメント指向 DB いわゆるNoSQL の１つ。 RDB ではない
データは、BSON( バイナリ JSON) で格納
JSON, JavaScript と親和性高い
ドキュメントモデル 複雑なリレーションを単純化できる
データモデル ( スキーマ ) の見通しがいい
トランザクションがない
2015年 6月 10日 Slide 14深読み業界トレンド
MEANのアーキテクチャ 出展What Developers Mean When They Build a MEAN Stack
2015年 6月 10日 Slide 15深読み業界トレンド
ビューは戦国時代
軽量なものから重厚なものまで百花繚乱
AngularJS は、がっちりした作りで手軽ではない
大規模向けじゃない、お手軽なライブラリがほしい
MVC/MVVM など百花繚乱
MVC以外のやり方もあるだろう
MVVM(Model-View-ViewModel) を採用するものも
例 Vue.js 実演
将来的には、 Web Components か
ビューの部品の標準仕様
実装 Polymer.js
2015年 6月 10日 Slide 16深読み業界トレンド
MEANの欠点、短所 その１
いろんな JavaScript ライブラリの寄せ集め
ライブラリ間、バージョン間の非互換
百花繚乱 ( 特にビュー ) で、安定、成熟にはほど遠い
オールインワンのフレームワーク
Meteor, hapi, Sails.js
2015年 6月 10日 Slide 17深読み業界トレンド
MEANの欠点、短所 その２
クライアント・サーバの欠点はそのまま？
TCO(所有コスト ) 、メンテナンスコストは？
ファットサーバ、シンクライアントは単純 パワフルなサーバで好きなようにやれた ロジックもサーバに集中
MEAN は、クライアントとサーバにロジックが分散
複雑になってメンテ、拡張が困難になる
2015年 6月 10日 Slide 18深読み業界トレンド
MEAN参考文献
実践Node.js プログラミング
原書は、第２版がMEAP 。 2016 年初め完成予定 アマゾンへ
MongoDB イン・アクション
原書は、第２版電子書籍完成 (2015 年 5 月 ) アマゾンへ
シングルページ Web アプリケーション アマゾンへ
AngularJS はあまりいい日本語版がない。英語では大量に出ているが、まだ翻訳されてない。
2015年 6月 10日 Slide 19深読み業界トレンド
MEAN関連リンク
MEAN.IO MEAN.JS MEANスタックで始めるWebアプリ開発入門
MEANスタックが優れている理由
LAMPに代わる構成として注目のMEANスタック
今流行りの「MEANスタック」についてまとめ
雑把の UI アーキテクチャー史(MVCからMVVMへ)
2015年 6月 10日 Slide 20深読み業界トレンド
JavaScript忍者になるには
特に面白かったので、ピックアップ
ジョン・レシグ , ベア・ビボー著 , 吉川 邦夫訳「 JavaScript Ninja の極意」
関数を制する者は、 JavaScript を制す
攻殻機動隊など日本のアニメ好き
原書は、第２版のMEAP がはじまったばかり。 2016 年初め完成予定
アマゾンへ
原書
2015年 6月 10日 Slide 21深読み業界トレンド
JavaScript参考文献
JavaScript 第 6版 アマゾンへ
JavaScript リファレンス 第 6版 アマゾンへ
JavaScript クックブック アマゾンへ
JavaScript Ninja の極意 アマゾンへ
コア jQuery＋プラグイン /jQuery UI 開発実践技法
アマゾンへ
2015年 6月 10日 Slide 22深読み業界トレンド
JavaScript参考文献２
JavaScript デザインパターン アマゾンへ
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
アマゾンへ
メンテナブル JavaScript ― 読みやすく保守しやすい JavaScript コードのための作法
アマゾンへ
JavaScript パターン ―優れたアプリケーションのための作法
アマゾンへ
2015年 6月 10日 Slide 23深読み業界トレンド
JavaScript関連リンク
JavaScript忍者、 JavaScript ジェダイになりたいなら、これを読め！「 JavaScript Ninja の極意」
ブログへ
入門 モダン JavaScript, Node クックブック。 Node.js のこと。
ブログへ
Backbone.jsガイドブック ブログへ
メンテナブル JavaScript, JavaScript は 2010 年代のアセンブラ。 CoffeeScript, ClojureScript
ブログへ
