最近のWeb関連技術の動向あれこれ

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

最近のWeb関連技術の動向あれこれ

2014/11/21 CC研究部会高岡大介

1


Agenda

• Concept • Architecture • Back-end Technology • Front-end Technology • Development • Programming Language/Paradigm • Next Spec

2


Concept

最近のWeb開発の考え方 • モバイルファースト

• 数年前から

• オフラインファースト • 昨年くらいから

⇒ モバイル中心の考え方

3


(Mobile) Architecture

4


MEAP• Mobile Enterprise Application Platform

• ３つ以上のモバイルアプリをサポートしている • ３つのモバイル用OSをサポートしている • 少なくとも３つのバックエンドのデータソース（既存システムとか）と連携が必要

• Product • IBM Worklight • SAP Mobile Platform • Kony • Sencha Space

5


MADP

• Mobile application development platform • 2013年からガートナーがまた言い出した。 • MEAPに加え、アプリケーションの開発、配布、保守管理までを含む。

• 参考: モバイルアプリ開発を効率化する切り札「MEAP」と「BaaS」を徹底解説 http://businessnetwork.jp/Detail/tabid/65/artid/3372/Default.aspx

6

http://businessnetwork.jp/Detail/tabid/65/artid/3372/Default.aspx


BYOD（Bring Your Own Device）が一つのきっかけ。

バラバラの端末でも業務システムを使えるようにするためのアーキテクチャ。

7


ところが、 BYODは終わったという話しも

8


• アップルとＩＢＭが提携「BYOD」市場は終焉へ http://diamond.jp/articles/-/56772

• さようならBYOD、企業が気付いた「会社がスマホを支給した方が何かと便利」http://techtarget.itmedia.co.jp/tt/news/1408/15/news03.html

デバイスやOSが統一されると、MEAPとか不要？ ⇒ まぁケースバイケースですね

9

http://diamond.jp/articles/-/56772

http://techtarget.itmedia.co.jp/tt/news/1408/15/news03.html


Back-end Technology

10


(X)aaS

• IaaS、PaaS、SaaS と色々あります • 次は ⇒ (m)BaaS！？

• Mobile Backend as a Service • 主な提供プレイヤー

• Parse（facebook傘下） • Kinvey（Google提携）

11


抽象的なサービス/APIで疎結合がBackendの主流になるか？と、思いきやそうでもない。

やっぱり自前でインフラ用意したい

12


Infrastructure As Code

• インフラをコードで表す。 • Chef, Puppet, Vagrant

• Immutable Infrastructure • 自動化、バージョン管理、複製、再現性

13


Docker

• Docker • コンテナ型の仮想化ソフトウェア • マシン仮想化ではなくプロセス仮想化。chrootに近い • 仮想マシンと比べて軽量高速

• 続々と対応 • Google Compute Engine、Google App Engine • Amazon EC2 Container Service • Microsoft AzureとWindows Server も対応

14


Front-end Technology

15


フロントエンド開発のツール

• CSSプリプロセッサ • Sass（Less）、Compass

• AltJS • CoffeeScript, TypeScript, Hexe, Dart, ClojureScript,,,

• パッケージ管理: • bower

• モジュールローダー • requireJS、CommonJS, Browserify

• テスト: • jasmine、PhantomJS、karma

• タスクランナー • Grunt, gulp, broccoli

• ジェネレーター • Yeoman

16


JSフレームワーク

• MV* フレームワーク • Backbone • Knockout • AngularJS • Ext、Ember、etc

• Angular本命かと思いきや最近disられ気味。 • ⇒ Vue.js、React

17


開発環境

• LAMP から MEAN スタックへ • MongoDB • Express • AngularJS • NodeJS

まだケースバイケース。 • そもそもレイヤー合ってない。OSレイヤーどこいった

18


Programming Language/ Paradigm

19


関数型言語

• 最近、関数型が人気（Scala, Haskel、Ocaml、Erlang） • エアバスはOcamlで飛んでいる。 • Facebook、Twitter でErlang採用（一部）

• 特徴 • ファーストクラス関数、高階関数 • Immutable（副作用なし） • 参照透過性 • 型安全、宣言的、遅延評価

• バグが少ない（入りにくい）、保守性など • Java8 でもエッセンスを取り込み（ストリーム＋ラムダ式）

20


リアクティブ

• Reactive Programming • エクセルとかの例 • 今のとこ要するにデータバインディング

• View - (View)Modelのバインド • AngularJS、Vue.jsなど • React

21


FRP

• Functional Reactive Programming • リアクティブを関数的に • Model自体をストリームでリアクティブに扱う。 • http://latentflip.com/bacon-talk-realtimeconfeu/

• ライブラリなど • RxJS • BaconJS • Elm

22

http://latentflip.com/bacon-talk-realtimeconfeu/


Next Spec

23


Web Components

• 要素 • Custom Elements • Shadow Dom • Templates • Imports • Decorators

• 現状の実装 • Polymer • （余談: Material Design）

24


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

25

http://html5experts.jp/myakura/8365/

http://html5experts.jp/iwase/7006/


ES6/ES7• ECMA Script 6/7

• アロー記法 • ブロックスコープ • 分割代入 • クラスとモジュール • iterators • generator（yield） • Object.observe • Promise • WeakMap/Set

26


CSS

• CSS Regions/Exclusions • 任意の形状にコンテンツを流し込み。排他。

• CSS4 • セレクタの拡張。親指定など多数 • メディアクエリの追加修正

27


おわりに

• やっぱりモバイル大事 • iOS8でWebGLサポート。3D、VRが本格的にWebにくる。

• 一部よりもどしが起きている。歴史は繰り返す • BaaS ⇒ Docker • Angular ⇒ React（E4X!?） • OOP ⇒ Functional（Lisp!?）

• 色んなレイヤで仮想化が進む。

28


http://aitc.jphttps://www.facebook.com/aitc.jp

ハルミンAITC非公式イメージキャラクター

29

http://aitc.jp/

http://aitc.jp/

http://aitc.jp/

https://www.facebook.com/aitc.jp