「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI...
Transcript of 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI...
「モダン Web」とは
http, https(get, post)
クライアントサーバー• Web サーバー • Web ブラウザー
ページ(HTML)
ページ(HTML)
クライアントサーバー• Web サーバー• アプリケーションサーバー
http, https(get, post)
Query string, form
ページ(HTML)
クライアントサーバー• Web サーバー• アプリケーションサーバー
• Web ブラウザー
ページ(cHTML/HDML/WML)
http, https(get, post)
Query string, form
クライアントサーバー• Web サーバー• アプリケーションサーバー
• Web ブラウザー
レスポンシブ
ページ(HTML)
http, https(get, post)
Query string, form
http, https(get, post)
クライアント• Web サーバー• アプリケーションサーバー
• アプリケーション
{ }JSON
< >XML
データ
http, https(get, post)
クライアントサーバー• Web サーバー• アプリケーションサーバー
• アプリケーション• SPA(Single page application)
{ }JSON
< >XML
データ
{ }JSON
< >XML
データ
73533 Altea 4|
Ajax
WebSocket
WebRTC
REST
• 画面遷移は DOM 操作• ページのリフレッシュは不要• リッチなエクスペリエンス
Web 電話 タブレット/PC
ゲーム機 IoT車載
コンテンツ アプリ
クライアントロジック
サーバーロジック
クライアントロジック
サーバーロジック
• サーバーサイド、クライアントサイドサイド、それぞれで開発/メンテナンスが可能
{ }JSON
Ajax
Webブラウザー(SPA)
ネイティブアプリ
API
iOS
認証
ストレージ
キャッシュ
WebSocket
WebRTC
< >XML
REST {リクエスト
レスポンス
サービスを中心としたインターネットシステム
サーバー クライアント
モダン Web アプリケーションについて
<logon-form caption=“アカウント情報” label=“cancel:キャンセル;ok:ログオン” />
HTML templates 〇 〇 〇 〇Custom Elements × 〇 × ×Shadow DOM × 〇 × ×HTML Imports × 〇 × ×
13 4550 9.1
caniuse.com より
Medium
Low
High
Service Worker
Service Worker
Web Notifications
Web Application Manifest
CSS3 アニメーション
https://www.youtube.com/watch?v=MxTaDhwJDLg
Service Workers × 〇 〇 ×Fetch API △ 〇 〇 ×Web Notifications △ 〇 〇 ×Web Application
Manifest× 〇 〇 ×
13 4550 9.1
caniuse.com より
開発中
High
開発中
Web Assembly Internal
Build
Canary
51.0.2677.0
Nightly -
AngryBots
〇 〇 〇 〇
WebVR
〇 〇 〇 × - △ △ -
Web フロントエンドの開発リソース
jQuery,
Prototype.js,
Dojo,
KendoUI,
Underscore.js
YUI(※開発終了)
ライブラリ フレームワーク
Angular.js,
React.js,
Fulx,
Vue.js,
Backbone.js,
Knockout.js,
WinJS,
Sencha,
Ember.js
テンプレート
エンジン
Handlebars,
EJS,
Mustache,
Hogan,
Underscore,
jQuery.EJS,
PURE
altJS
TypeScript
Babel
CoffeeScript
Dart
Bootstrap,
Foundation,
Pure,
Gumby,
INK,
Cardinal,
Skeleton
フレームワーク
LESS
SCSS(Sass)
Stylus
TASS
プリプロセッサ
軽量マークアップ
Markdown
Haml
Jade
Slimパッケージ
マネージャーnpm,
bower
Gulp,
Grunt、
Broccoli
タスクランナーモジュール管理
Browserify
(CommonJS),
AMD(RequireJS),
webpack
Rich/Chaos
CSS
JS
学習コスト
運用コスト
ロックイン
機能の範囲
開発生産性
ブラウザサポート
ベンダサポート
情報
ドキュメント
書籍類
• 標準技術は不変
• Web ブラウザーで動作するのは、HTML, CSS, JavaScript
技術はあくまでも「手段」
では「目的」は?
• コンポーネント化: Web のために生まれ変わった従来の設計プラクティス
• Microsoft Edge と Web コンポーネント
• 2016 年の展望: Microsoft Edge の開発者向け情報
参考
マイクロソフト最大規模の技術コンファレンス~すべてのエンジニアが活躍できるオープンな世界を目指して~
• 開催日時:2016年5月24日(火)~ 2016年5月25日(水)• 開催場所:ザ・プリンスパークタワー東京• 参加費用: 早期割引価格 68,000円(税抜) -4/28まで 通常価格 80,000円(税抜) -4/29より MCP取得者割引 56,000円(税抜)
• 合計セッション数:134セッション
詳細・お申込・・・ http://aka.ms/decode16