Movatterモバイル変換

本セッションはかなりヘビーです！最終セッションですが、頑張りましょう！

• 必要に応じてサーバと連携するが...• ページ全体がリロードされることはない

Web ブラウザ Web サーバ DB サーバコントローラビューEFDACUI※ 細かいコードは理解しなくて OK です（本日のサンプルコードは後日配布します）

[Table("authors")]public class Author {[Column("au_id"), Required, MaxLength(11), Key]public string AuthorId { get; set; }[Column("au_fname"), Required, MaxLength(20)]public string AuthorFirstName { get; set; }[Column("au_lname"), Required, MaxLength(40)]public string AuthorLastName { get; set; }...}public class PubsEntities : DbContext {protected override void OnConfiguring(DbContextOptionsBuilder options) {options.UseSqlServer("...(接続文字列)...");}public DbSet<Author> Authors { get; set; }...}DACEF

public class Sample01Controller : Controller{[HttpGet]public ActionResult ShowAllAuthors(){using (PubsEntities pubs = new PubsEntities()){ViewData["Authors"] = pubs.Authors.ToList();}return View();}}コントローラUI

<table class="..."><thead>...</thead><tbody>@foreach (Author a in (ViewData["Authors"] as List<Author>)){<tr><td>@a.AuthorId</td><td>@a.AuthorFirstName @a.AuthorLastName</td><td>@a.Phone</td><td>@a.State</td>...</tr>}</tbody></table>ビューUIサーバで描画処理

Web サーバ DB サーバWeb API EFDACSIJavaScriptHTMLWeb ブラウザ※ 細かいコードは理解しなくて OK です（本日のサンプルコードは後日配布します）UI

public class Sample02Controller : Controller{[HttpGet]public List<Author> GetAllAuthors(){using (PubsEntities pubs = new PubsEntities()){return pubs.Authors.ToList();}}}Web APISIサーバはデータ返信のみ

<table id="tblAuthors" class="table ..."><thead> ... </thead><tbody data-bind="foreach: Authors"><tr><td data-bind="text: AuthorId"></td><td data-bind="text: AuthorFirstName + ' ' + AuthorLastName"></td><td data-bind="text: Phone"></td><td data-bind="text: State"></td>...</tr></tbody></table>UIHTML描画はブラウザ側で

HTML ファイルDB サーバWeb サーバWeb ブラウザBC DACSIUIASP.NETWeb APIEFUISPA 型jQueryなどデータ返信のみUI 処理

1. クライアント側のライブラリ選択3. Web API 接続2. サーバ側のページ構築

HTML ファイルDB サーバWeb サーバWeb ブラウザBC DACSIUIASP.NETWeb APIEFUISPA 型1. クライアント側のライブラリ選択3. Web API 接続2. サーバ側のページ構築

jQuery,Bootstrapknockout.jsAngularJS,jQueryReact,jQueryjQuery,Kendo UIProfessionalユーザアプリユーザアプリユーザアプリHTML5, CSS3,JavaScriptHTML5, CSS3,JavaScriptユーザアプリHTML5, CSS3,JavaScriptHTML5, CSS3,JavaScriptランタイムフロントエンドライブラリユーザアプリ互換性なし異なるスキル

<div class="table-responsive"><table id="tblAuthors" class="table ..."><thead> ... </thead><tbody data-bind="foreach: Authors"><tr><td data-bind="text: AuthorId"></td><td data-bind="text: AuthorName"></td><td data-bind="text: Phone"></td><td data-bind="text: State"></td>...</tr></tbody></table></div>テーブルとテンプレートを用意しておく

$(function() {var viewModel = {Authors: ko.observableArray()};ko.applyBindings(viewModel);$("#btnShowAuthors").click(function () {$.getJSON("/Sample03/GetAuthorsByState",{ state: $("#ddlStates").val() },function (result) {viewModel.Authors(result);});});ViewModel を介してデータバインド

<div id="grdAuthors" class="k-grid"></div><script id="rowTemplate" type="text/x-kendo-tmpl"><tr><td>#= AuthorId #</td><td>#= AuthorName #</td><td>#= Phone #</td><td>#= State #</td><td>... </td></tr></script>

$(function() {$("#btnShowAuthors").click(function () {$.getJSON("/Sample04/GetAuthorsByState",{ state: $("#ddlStates").val() },function (result) {$("#grdAuthors").kendoGrid({rowTemplate: kendo.template($("#rowTemplate").html()),columns: [{ field: "AuthorId", title: "著者ID" },{ field: "AuthorName", title: "著者名" },{ field: "Phone", title: "電話番号" },{ field: "State", title: "州" }, ...],dataSource: { data: result, pageSize: 10 },});});});});書き方が大きく違う！.kendoGrid() 命令で<div> をテーブルに変化

jQueryAngularJSjQuery UIModernizrprototype.jsReactjQueryMobileErrorceptionSASSOOCSSKendo UICoreQUnitLESSSMACSKendo UIProfessionalMochaTypeScriptknockout.jsBootstrapJasmineCoffeeScriptjQueryValidationSemanticUIJSLintStylusBEMYUILibraryKarmaDojotoolkitNPMResetCSSWijmoIgnite UIZino UIHighchartsSlickGridhammer.jsGulpGrantYo 多すぎ！選ぶのが難しい！

古い仕様の言語を多少でも使いやすくするものアプリの設計・実装方法を大きく左右するものUI 部品を多少でも使いやすくするためのもの開発作業を容易化するための周辺ツール① 言語拡張③ 設計・実装方法論、フレームワーク② UI ライブラリ④ 各種ツール、ユーティリティ

古い仕様の言語を多少でも使いやすくするものアプリの設計・実装方法を大きく左右するものUI 部品を多少でも使いやすくするためのもの開発作業を容易化するための周辺ツール① 言語拡張③ 設計・実装方法論、フレームワーク② UI ライブラリ④ 各種ツール、ユーティリティDOM 操作、AJAX 処理• jQuery• prototype.js各種フレームワーク• AngularJS• React• knockout.js• backbone.js低水準 UI ライブラリ• jQuery UI, Mobile• Bootstrap• Kendo UI Core• Semantic UI, etc...ユーティリティライブラリ• Modernizr,etc...CSS 命名規約• OOCSS• SMACS• BEM高水準 UI ライブラリ• Kendo UI Pro• highcharts• Wijmo• Ignite UI, etc...CSS プリプロセッサ• LESS• SASS• Stylus周辺ツール• NPM• Gulp• Grunt• Bower, etc..テストツール• Jasmine• JSLint• QUnit• Mocha, etc..altJS• TypeScript• CoffeeScript

HTML DOM 操作, 通信処理CSS基本言語仕様（ECMAScript）jQueryCSS プリプロセッサLESS, SASS, Stylus などaltJSTypeScript, CoffeeScript など便利！

http://getbootstrap.com/examples/theme/Bootstraphttp://demos.telerik.com/kendo-ui/financial/stock-history http://www.highcharts.com/demoKendo UI Professional Highchartsボタン、ラベル、テキストボックスなどグリッド、チャート、地図などギャップ有償製品が多い

ベタ実装抽象化ライブラリMVx フレームワーク双方向バインドコンポーネント指向prototype.jsjQuery Backbone.jsknockout.jsAngular.js 1.0React.jsAngular.js 2.0

ユーティリティライブラリ•Modernizr•Errorception•etc...周辺ツール•NPM•Gulp, Grunt•Bower•Yo, etc..テストツール•Jasmine•JSLint•QUnit•Mocha, etc..

ユーザアプリライブラリ A ライブラリ Bライブラリ P ライブラリ Q ライブラリ Rライブラリ X1.0.0 2.0.0ver upver upver up

ユーザアプリSPA 開発フレームワークBootstrap +knockout.jsjQueryJavaScript （ECMAScript）基本言語ランタイムDOM 操作ライブラリ基盤フレームワーク Angular.jsなし（要追加）高水準 UI 部品なし（要追加）ユーザアプリユーザアプリユーザアプリ

http://demos.telerik.com/kendo-ui/grid/index http://demo.grapecity.com/wijmo/5/Angular/FlexChartIntro/FlexChartIntro/http://jp.igniteui.com/http://zinoui.com/charts http://docs.sencha.com/extjs/4.0.7/#!/examplehttp://www.highcharts.com/demoTeleric Kendo UIProfessionalGrapeCityWijmoInfragisticsIgnite UIZino UI Sencha Ext JSHighsoftHighcharts

① OSS ライブラリ組み合わせ型開発② SPA フレームワークライブラリ依存型開発高水準 UI 部品を必要とするか？jQueryTypeScriptCoffeeScriptprototype.jsjQuery UIknockoutBootstrapAngularReactKendo UIProfessionalWijmoIgnite UI Zino UISenchaExt JSHighcharts

① 言語拡張③ 設計・実装方法論、フレームワーク② UI ライブラリ④ 各種ツール、ユーティリティ① OSS ライブラリ組み合わせ型開発② SPA フレームワークライブラリ依存型開発

Web サーバWeb ブラウザ完全な SPA 型Web サーバWeb ブラウザサーバ技術の併用SPA Web APIWeb APIMVCSPA

HTML ファイルDB サーバWeb サーバWeb ブラウザBC DACSIUIASP.NETWeb APIEFUIASP.NET MVCUI 処理はこちらで

個別のページCSS （共通）JavaScript ライブラリ（共通）HTML （ヘッダー）HTML （フッター）jQueryCSS （ページ固有）JavaScript ライブラリ（ページ固有）HTML （コンテンツ）JavaScript コード（ページ固有）

個別のページCSS （ページ固有）JavaScript ライブラリ（ページ固有）HTML （コンテンツ）JavaScript コード（ページ固有）*.cshtml個別のページCSS （ページ固有）JavaScript ライブラリ（ページ固有）HTML （コンテンツ）JavaScript コード（ページ固有）*.cshtml レイアウトページCSS （共通）CSS （ページ固有）JavaScript ライブラリ（共通）JavaScript ライブラリ（ページ固有）HTML （ヘッダー）HTML （コンテンツ）HTML （フッター）JavaScript コード（ページ固有）_Layout.cshtmljQueryKnockoutjQueryValidation入力フォームスタイルセットよく使うものを部品として用意

共通レイアウトページ個々の業務ページ必要に応じて組み込むライブラリ

<!DOCTYPE html><html><head><title>@ViewBag.Title</title><link href="bootstrap.min.css" rel="stylesheet"><script src="jquery-2.1.4.min.js"></script><script src="bootstrap.min.js"></script>@RenderSection("Libraries", required: false)@RenderSection("Styles", required: false)</head><body>... (次ページ) ...</body></html>個別ページの差分

<body><nav class="navbar ... ">... (ヘッダー) ...</nav><div class="contentWrapper"><div class="container contentBody">@RenderBody()</div></div><footer class="footer">... (フッター) ...</footer>@RenderSection("Scripts", required: false)</body></html>個別ページの差分個別ページの差分

@{ ViewBag.Title = "州による著者一覧表示"; }@section Libraries {@Html.Partial("_ImportLibraryKnockout")}<h4>jQuery + Bootstrap + knockout.js による実装</h4><table id="tblAuthors" class="table ... "> ... </table>@section Scripts {<script type="text/javascript">$(function () { ... };</script>}個別ページの差分個別ページの差分個別ページの差分個別ページの差分

DB サーバWeb サーバWeb ブラウザBC DACSIUIASP.NETWeb APIEF単体入力チェック単体入力再チェック

商品発注サービスカタログ管理サービス注文伝票注文結果伝票サービス呼び出し商品口コミGETPUTDELETEGETPUTDELETECRUD 処理RESTful 設計 RPC スタイル設計業務アプリではこちらの方が設計しやすい

Web サーバクライアントjQuery ASP.NET Web APIEnumDateTimeJSON シリアル化

[HttpPost]public GetRichMessageResult GetRichMessage(string name){return new GetRichMessageResult(...);}public class GetRichMessageResult {public ResultEnum Result { get; set; }public string Message { get; set; }public DateTime CurrentDateTime { get; set; }}

コンテンツ application/json（JSON形式）本文 (Body){"Result": 2,"Message":"Hello World, Nobuyuki","CurrentDateTime":"2015-10-06T11:09:23.385863+09:00"}public class GetRichMessageResult {public ResultEnum Result { get; set; }public string Message { get; set; }public DateTime CurrentDateTime { get; set; }}数値型

単体入力チェック単体入力再チェックASP.NETWeb API

JSON データWeb APIAuthorFirstNameAuthorLastNamePhoneViewModelクラスカスタマイズチェックロジック

JSON データWeb APIAuthorFirstNameAuthorLastNamePhoneViewModelクラスカスタマイズチェックロジック

public class UpdateAuthorRequest{public string AuthorId { get; set; }[Required(ErrorMessage = "著者名（名）は必須入力項目です。")][RegularExpression(@"^[¥u0020-¥u007e]{1,20}$",ErrorMessage = "著者名（名）は半角 20 文字以内で指定してください。")]public string AuthorFirstName { get; set; }[Required(ErrorMessage = "著者名（姓）は必須入力項目です。")][RegularExpression(@"^[¥u0020-¥u007e]{1,40}$",ErrorMessage = "著者名（姓）は半角 40 文字以内で指定してください。")]public string AuthorLastName { get; set; }...}AuthorFirstNameAuthorLastNamePhoneViewModelクラスチェックロジック

@using (Html.BeginForm("EditAuthor", "Sample07", ...)){<dl><dt>著者名（名）</dt><dd>@Html.TextBoxFor(m => m.AuthorFirstName)@Html.ValidationMessageFor(m => m.AuthorFirstName, "*")</dd></dl><dl><dt>著者姓（姓）</dt><dd>@Html.TextBoxFor(m => m.AuthorLastName)@Html.ValidationMessageFor(m => m.AuthorLastName, "*")</dd></dl>...}

$("#btnUpdate").click(function () {if ($("#frmInput").valid() == true) {$.post("/Sample07/UpdateAuthor",{AuthorId: AuthorId,AuthorFirstName: $("#AuthorFirstName").val(),AuthorLastName: $("#AuthorLastName").val(),...},function (result) { ... });}});カスタマイズ

[HttpPost]public void UpdateAuthor(UpdateAuthorRequest request){// 送信されてきたデータを再チェックif (ModelState.IsValid == false){throw new ArgumentException()}... データ更新処理 ...}単体入力再チェックJSON データWeb API

様々な「方言」基礎を学ぶ

• 論理タグと物理タグの使い分けなどを理解する• HTML5 は後でよい• 基礎的なコードの書き方をしっかり理解する• TypeScript は後でよい• jQuery の使い方をしっかり理解する• 割とよく使うので重要• クラス設計の基本セオリーの理解が重要• Bootstrap で学習するJavaScript (DOM 操作)

• ランタイムとモデルバインディング機能を理解する• レイアウトページの使い方を理解する• LINQ to EF の書き方を理解する

• OSS の組み合わせで DB 参照アプリを作ってみる例) サーバ側 : ASP.NET Web API + Entity Frameworkクライアント側 : jQuery + Bootstrap + knockout.js• 何らかの商用 SPA フレームワークライブラリを使って上記と同じアプリを作ってみる

• AngularJS, ReactJS などを使ってみる• Canvas など HTML5 の機能の活用を検討する• TypeScript などでライブラリを開発する• NPM, Bower, Gulp などで生産性を高める

その上で活用基礎を学ぶ

1. クライアント側のライブラリ選択3. Web API 接続2. サーバ側のページ構築多彩な技術重要

皆さま、本当にお疲れ様でした！またどこかでお会いしましょう！

アンケートにご協力ください。●アンケートに上記の Session ID のブレイクアウトセッションにチェックを入れて下さい。●アンケートはお帰りの際に、受付でご提出ください。マイクロソフトスペシャルグッズと引換えさせていただきます。

ROOM BAsk the Speaker のご案内●本セッションの詳細は、EXPO 会場内『Ask the Speaker』コーナーRoom B カウンタにてご説明させていただきます。是非、お立ち寄りください。Ask the SpeakerEXPO会場MAP

DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法

Movatterモバイル変換

Change Language

DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法

Embed presentation

Recommended

More Related Content

What's hot

Similar to DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法

More from decode2016

DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法