More Related Content
Similar to 最近のWeb関連技術の動向あれこれ (20)
More from dsuke Takaoka (19)
最近のWeb関連技術の動向あれこれ
- 2. Agenda
• Concept
• Architecture
• Back-end Technology
• Front-end Technology
• Development
• Programming Language/Paradigm
• Next Spec
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2
- 3. Concept
最近のWeb開発の考え方
• モバイルファースト
• 数年前から
• オフラインファースト
• 昨年くらいから
⇒ モバイル中心の考え方
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
3
- 5. MEAP
• Mobile Enterprise Application Platform
• 3つ以上のモバイルアプリをサポートしている
• 3つのモバイル用OSをサポートしている
• 少なくとも3つのバックエンドのデータソース(既存システム
とか)と連携が必要
• Product
• IBM Worklight
• SAP Mobile Platform
• Kony
• Sencha Space
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
5
- 6. MADP
• Mobile application development platform
• 2013年からガートナーがまた言い出した。
• MEAPに加え、アプリケーションの開発、配布、
保守管理までを含む。
• 参考: モバイルアプリ開発を効率化する切り札「MEAP」と「BaaS」を徹
底解説 http://businessnetwork.jp/Detail/tabid/65/artid/3372/
Default.aspx
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
6
- 7. BYOD(Bring Your Own Device)
が一つのきっかけ。
バラバラの端末でも業務システムを
使えるようにするためのアーキテクチャ。
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
7
- 11. (X)aaS
• IaaS、PaaS、SaaS と色々あります
• 次は ⇒ (m)BaaS!?
• Mobile Backend as a Service
• 主な提供プレイヤー
• Parse(facebook傘下)
• Kinvey(Google提携)
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
11
- 13. Infrastructure As Code
• インフラをコードで表す。
• Chef, Puppet, Vagrant
• Immutable Infrastructure
• 自動化、バージョン管理、複製、再現性
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
13
- 14. Docker
• Docker
• コンテナ型の仮想化ソフトウェア
• マシン仮想化ではなくプロセス仮想化。chrootに近い
• 仮想マシンと比べて軽量高速
• 続々と対応
• Google Compute Engine、Google App Engine
• Amazon EC2 Container Service
• Microsoft AzureとWindows Server も対応
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
14
- 16. フロントエンド開発のツール
• CSSプリプロセッサ
• Sass(Less)、Compass
• AltJS
• CoffeeScript, TypeScript, Hexe, Dart, ClojureScript,,,
• パッケージ管理:
• bower
• モジュールローダー
• requireJS、CommonJS, Browserify
• テスト:
• jasmine、PhantomJS、karma
• タスクランナー
• Grunt, gulp, broccoli
• ジェネレーター
• Yeoman
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
16
- 17. JSフレームワーク
• MV* フレームワーク
• Backbone
• Knockout
• AngularJS
• Ext、Ember、etc
• Angular本命かと思いきや最近disられ気味。
• ⇒ Vue.js、React
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
17
- 18. 開発環境
• LAMP から MEAN スタックへ
• MongoDB
• Express
• AngularJS
• NodeJS
まだケースバイケース。
• そもそもレイヤー合ってない。OSレイヤーどこいった
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
18
- 20. 関数型言語
• 最近、関数型が人気(Scala, Haskel、Ocaml、Erlang)
• エアバスはOcamlで飛んでいる。
• Facebook、Twitter でErlang採用(一部)
• 特徴
• ファーストクラス関数、高階関数
• Immutable(副作用なし)
• 参照透過性
• 型安全、宣言的、遅延評価
• バグが少ない(入りにくい)、保守性など
• Java8 でもエッセンスを取り込み(ストリーム+ラムダ式)
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
20
- 21. リアクティブ
• Reactive Programming
• エクセルとかの例
• 今のとこ要するにデータバインディング
• View - (View)Modelのバインド
• AngularJS、Vue.jsなど
• React
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
21
- 22. FRP
• Functional Reactive Programming
• リアクティブを関数的に
• Model自体をストリームでリアクティブに扱う。
• http://latentflip.com/bacon-talk-realtimeconfeu/
• ライブラリなど
• RxJS
• BaconJS
• Elm
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
22
- 23. Next Spec
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
23
- 24. Web Components
• 要素
• Custom Elements
• Shadow Dom
• Templates
• Imports
• Decorators
• 現状の実装
• Polymer
• (余談: Material Design)
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
24
- 25. HTML5.1
• 先日、HTML5がようやく勧告に!
• HTML5で入りきらなかったものが5.1に。入るかもしれないのを一部紹
介
• Service Workers
• ネットワーク割り込みでキャッシュ
• http://html5experts.jp/myakura/8365/
• http://html5experts.jp/iwase/7006/
• Navigation Controllerから改名
⇒ Web Workerと紛らわしいから元のでよかったのに。。。
• Canvas 2D Context Level2
• WebGL 2
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
25
- 26. ES6/ES7
• ECMA Script 6/7
• アロー記法
• ブロックスコープ
• 分割代入
• クラスとモジュール
• iterators
• generator(yield)
• Object.observe
• Promise
• WeakMap/Set
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
26
- 27. CSS
• CSS Regions/Exclusions
• 任意の形状にコンテンツを流し込み。排他。
• CSS4
• セレクタの拡張。親指定など多数
• メディアクエリの追加修正
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
27
- 28. おわりに
• やっぱりモバイル大事
• iOS8でWebGLサポート。3D、VRが本格的にWebにくる。
• 一部よりもどしが起きている。歴史は繰り返す
• BaaS ⇒ Docker
• Angular ⇒ React(E4X!?)
• OOP ⇒ Functional(Lisp!?)
• 色んなレイヤで仮想化が進む。
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
28