「モダン web」とは - infragistics...jquery, prototype.js, dojo, kendoui, underscore.js yui...
TRANSCRIPT
![Page 1: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/1.jpg)
![Page 2: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/2.jpg)
![Page 3: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/3.jpg)
「モダン Web」とは
![Page 4: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/4.jpg)
![Page 5: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/5.jpg)
![Page 6: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/6.jpg)
http, https(get, post)
クライアントサーバー• Web サーバー • Web ブラウザー
ページ(HTML)
![Page 7: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/7.jpg)
ページ(HTML)
クライアントサーバー• Web サーバー• アプリケーションサーバー
http, https(get, post)
Query string, form
![Page 8: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/8.jpg)
ページ(HTML)
クライアントサーバー• Web サーバー• アプリケーションサーバー
• Web ブラウザー
ページ(cHTML/HDML/WML)
http, https(get, post)
Query string, form
![Page 9: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/9.jpg)
クライアントサーバー• Web サーバー• アプリケーションサーバー
• Web ブラウザー
レスポンシブ
ページ(HTML)
http, https(get, post)
Query string, form
![Page 10: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/10.jpg)
http, https(get, post)
クライアント• Web サーバー• アプリケーションサーバー
• アプリケーション
{ }JSON
< >XML
データ
![Page 11: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/11.jpg)
http, https(get, post)
クライアントサーバー• Web サーバー• アプリケーションサーバー
• アプリケーション• SPA(Single page application)
{ }JSON
< >XML
データ
![Page 12: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/12.jpg)
{ }JSON
< >XML
データ
73533 Altea 4|
Ajax
WebSocket
WebRTC
REST
• 画面遷移は DOM 操作• ページのリフレッシュは不要• リッチなエクスペリエンス
![Page 13: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/13.jpg)
Web 電話 タブレット/PC
ゲーム機 IoT車載
コンテンツ アプリ
![Page 14: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/14.jpg)
クライアントロジック
サーバーロジック
クライアントロジック
サーバーロジック
• サーバーサイド、クライアントサイドサイド、それぞれで開発/メンテナンスが可能
![Page 15: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/15.jpg)
{ }JSON
Ajax
Webブラウザー(SPA)
ネイティブアプリ
API
iOS
認証
ストレージ
キャッシュ
WebSocket
WebRTC
< >XML
REST {リクエスト
レスポンス
サービスを中心としたインターネットシステム
サーバー クライアント
![Page 16: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/16.jpg)
モダン Web アプリケーションについて
![Page 17: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/17.jpg)
![Page 18: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/18.jpg)
![Page 19: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/19.jpg)
![Page 20: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/20.jpg)
<logon-form caption=“アカウント情報” label=“cancel:キャンセル;ok:ログオン” />
![Page 21: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/21.jpg)
HTML templates 〇 〇 〇 〇Custom Elements × 〇 × ×Shadow DOM × 〇 × ×HTML Imports × 〇 × ×
13 4550 9.1
caniuse.com より
Medium
Low
High
![Page 22: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/22.jpg)
![Page 23: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/23.jpg)
Service Worker
Service Worker
Web Notifications
Web Application Manifest
CSS3 アニメーション
![Page 24: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/24.jpg)
![Page 25: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/25.jpg)
https://www.youtube.com/watch?v=MxTaDhwJDLg
![Page 26: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/26.jpg)
![Page 27: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/27.jpg)
Service Workers × 〇 〇 ×Fetch API △ 〇 〇 ×Web Notifications △ 〇 〇 ×Web Application
Manifest× 〇 〇 ×
13 4550 9.1
caniuse.com より
開発中
High
開発中
![Page 28: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/28.jpg)
![Page 29: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/29.jpg)
Web Assembly Internal
Build
Canary
51.0.2677.0
Nightly -
AngryBots
![Page 30: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/30.jpg)
〇 〇 〇 〇
WebVR
〇 〇 〇 × - △ △ -
![Page 31: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/31.jpg)
![Page 32: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/32.jpg)
Web フロントエンドの開発リソース
![Page 33: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/33.jpg)
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
![Page 34: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/34.jpg)
CSS
JS
学習コスト
運用コスト
ロックイン
機能の範囲
開発生産性
ブラウザサポート
ベンダサポート
情報
ドキュメント
書籍類
![Page 35: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/35.jpg)
• 標準技術は不変
• Web ブラウザーで動作するのは、HTML, CSS, JavaScript
![Page 36: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/36.jpg)
技術はあくまでも「手段」
では「目的」は?
![Page 37: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/37.jpg)
![Page 38: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/38.jpg)
• コンポーネント化: Web のために生まれ変わった従来の設計プラクティス
• Microsoft Edge と Web コンポーネント
• 2016 年の展望: Microsoft Edge の開発者向け情報
参考
![Page 39: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/39.jpg)
マイクロソフト最大規模の技術コンファレンス~すべてのエンジニアが活躍できるオープンな世界を目指して~
• 開催日時:2016年5月24日(火)~ 2016年5月25日(水)• 開催場所:ザ・プリンスパークタワー東京• 参加費用: 早期割引価格 68,000円(税抜) -4/28まで 通常価格 80,000円(税抜) -4/29より MCP取得者割引 56,000円(税抜)
• 合計セッション数:134セッション
詳細・お申込・・・ http://aka.ms/decode16
![Page 40: 「モダン Web」とは - Infragistics...jQuery, Prototype.js, Dojo, KendoUI, Underscore.js YUI (※開発終了) ライブラリ フレームワーク Angular.js, React.js, Fulx,](https://reader034.vdocuments.us/reader034/viewer/2022051920/600d1ac1618cdd1de71d4f95/html5/thumbnails/40.jpg)