レガシー Web からの脱却 ～ 開発者が次に目指すべき Web アプリの姿とは？
4 likes•1,605 views
2019/12/10 グレープシティ ECHO Tokyo 2019 セッション資料です。 https://grapecity-dev-tools.connpass.com/event/155759/
レガシー Web からの脱却 ～ 開発者が次に目指すべき Web アプリの姿とは？
- 1. ～ レガシー Web からの脱却 ～ 井上 章 (いのうえ あきら) @chack411 マイクロソフト コーポレーション グローバル ブラックベルト Azure Cloud Native テクニカル スペシャリスト
- 2. 井上 章 (いのうえ あきら) http://aka.ms/chack 2008 年マイクロソフト入社。 主に .NET や Visual Studio, Microsoft Azure などの開発技術を専門とするエバンジェリスト として、技術書籍やオンライン記事などの執筆、 さまざまな技術イベントでの講演などを行う。 2018 年より Global Black Belt (GBB) という 技術専門組織に異動し、モバイルとクラウドを 中心としたアプリ開発技術の訴求活動に従事。
- 4. モノリシック アプリケーション モノリシック App Large, all-inclusive app UI 機能 A 機能 B App Data
- 5. • Model データとビジネス ロジック を表現 • View Model から取得したデータを プレゼンテーション (UI) へ出力する • Controller ユーザーからの 入力 を受付け View と Model を 制御 する MVC パターン V C M App Data
- 6. シングル ページ アプリケーション (SPA) フロントエンド バックエンド JSON XML View Model View Async HTML
- 7. JavaScript is the Assembly Language of the Web. by Scott Hanselman.
- 8. jQuery 高速・軽量な JavaScript ライブラリ ◼ AJAX (Asynchronous JavaScript + XML) がより容易に 参考: https://en.wikipedia.org/wiki/Timeline_of_web_browsers
- 9. Large scale JavaScript development is hard.
- 10. JavaScript (ECMAScript 3) の課題
- 11. TypeScript Any browser. Any host. Any OS. Open Source. JavaScript のスーパーセット ES 3 以上の環境をサポート 静的型付けとオブジェクト指向 多くの開発ツールのサポート 最新 ES 言語仕様を先取り JS 開発生産性を向上
- 12. TypeScript のコンパイルの流れ TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc) JavaScript ファイル (*.js) TypeScript 型定義ファイル (*.d.ts) JavaScript 実行エンジン Node.js または WSH (WScript.Shell) で実行 ECMAScript 3 (ES3) ECMAScript 5 (ES5) ECMAScript 2015+ (ES2015, ES2016, ES2017, ES2018, ES2019, ESNEXT) Web ブラウザーや Node.js など
- 13. JavaScript の 3 大フレームワークの選択 Facebook が開発 Google とコミュニティが開発 コミュニティ中心の開発
- 14. フロントエンド フレームワークの利点 • サイト/アプリの応答性を高める、より高速で効率的な DOM のリロードと更新 パフォーマンスの高速化 • プロジェクト、コンポーネント、テストなどを適切に定義するためのデザインパターン メンテナンス性 • コンポーネントベースの設計: 自己完結型コンポーネントを使用してサイト コンテンツを設計構成可能 コンポーネントの再利用 • アプリケーションの状態をフレームワークのデータ モデル内で一元管理 (DOM 全体に分散しない) データ管理 • Web フロントエンド開発に関するコミュニティ、開発ツールとオープンソースライブラリの巨大なエコシステム エコシステム
- 15. ASP.NET Core の SPA プロジェクト テンプレート .NET
- 16. But, DON’T want to write JavaScript …
- 17. ASP.NET Web フォームと ASP.NET MVC Web フォーム ✓ 豊富なサーバー コントロール ✓ イベント駆動型プログラミング ASP.NET MVC ✓ HTML ベースの UI 開発 ✓ Model-View-Controller パターン D & D 配置 容易な UI 開発 Web 標準志向 テスト駆動開発
- 18. https://... JS
- 19. ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ◼ ASP.NET Core 3.0 Blazor https://blazor.net Razor Components .NET WebAssembly
- 20. https://... DOM Razor Components .NET WebAssembly https... DOM ASP.NET Core SignalR Razor Components .NET
- 21. https://... DOM Razor Components .NET WebAssembly https... DOM ASP.NET Core SignalR Razor Components .NET
- 22. Web アプリケーション アーキテクチャの選択 SPA + API MVC Hybrid Blazor フロントエンド バックエンド View View Data Data Data
- 23. クラウド ネイティブとは？ CNCF Cloud Native Definition v1.0 (CNCF による定義) Cloud native technologies empower organizations to build and run scalable applications in modern, dynamic environments such as public, private, and hybrid clouds. Containers, service meshes, microservices, immutable infrastructure, and declarative APIs exemplify this approach. These techniques enable loosely coupled systems that are resilient, manageable, and observable. Combined with robust automation, they allow engineers to make high-impact changes frequently and predictably with minimal toil. The Cloud Native Computing Foundation seeks to drive adoption of this paradigm by fostering and sustaining an ecosystem of open source, vendor- neutral projects. We democratize state-of-the-art patterns to make these innovations accessible for everyone. https://github.com/cncf/toc/blob/master/DEFINITION.md
- 24. 能力 エクスペリエンス 技術 アーキテクチャ クラウド ネイティブ アプリケーション クラウド ネイティブを支える技術とアーキテクチャ Cloud Native Definition v1.0
- 27. コンテナーとは？ コンテナー • ハードウェア仮想化 • スケール単位は 仮想マシン (VM) • OS の仮想化 • スケール単位は アプリ (コンテナー) 仮想マシンApp Container App On-premises Cloud どこでも Monolith Microservice どんな構成でも .Net Java Python Node どんな言語でも Linux Windows Linux でも Windows でも クラウドからオンプレミスまで どこでも実行可能な高速で軽量な コンテナー エンジン
- 29. Kubernetes ～ コンテナー オーケストレーター • マイクロサービス アーキテクチャでは、アプリが比較的小規模の独立したサービスで構成され複数コンテナーを連携させる必要がある • 複数コンテナーを管理する オーケストレーション機能 が重要な役割を担う https://kubernetes.io/
- 30. マイクロサービスへのダイレクト コミュニケーション ダイレクト コミュニケーションの課題 • バックエンドへのリクエストの最小化 • 認証、データ変換、動的な要求の ディスパッチ • 非インターネット対応プロトコルを使 用するサービスとの通信 • モバイル アプリ向けの通信の最適化
- 31. API ゲートウェイ パターン / BFF (Backend for Frontend)
- 32. .NET マイクロサービス アーキテクチャ リファレンス
- 34. 2014 Many .NETs .NET FRAMEWORK .NET CORE XAMARIN / MONO
- 35. 2014 2016 Many .NETs .NET Standard .NET FRAMEWORK .NET CORE XAMARIN / MONO
- 36. XAMARIN / MONO.NET FRAMEWORK .NET 2014 Next2016 Many .NETs .NET standard .NET .NET CORE .NET STANDARD
- 37. • 代替は Open source core workflow for Windows workflow (WF): https://github.com/UiPath/corewf Introducing .NET 5 .NET .NET STANDARD
- 38. .NET スケジュール July 2019 .NET Core 3.0 Preview Sept 2019 .NET Core 3.0 Dec 2019 .NET Core 3.1 LTS Nov 2020 .NET 5.0 Nov 2021 .NET 6.0 LTS Nov 2022 .NET 7.0 Nov 2023 .NET 8.0 LTS
- 39. Containers & PaaS Minimal code changes Microservices Architecture & Serverless Architected for the cloud modernized/rewrite IaaS “Lift & shift” No code changes On-Premises Infrastructure Platform 移行 モダナイズ 既存 アプリ＆サービス on-premises Rehost クラウド インフラ対応 apps クラウド ネイティブ apps Rearchitect / Rebuild クラウド 最適化 apps PaaS & コンテナー利用 CI/CD 自動化
- 41. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。 © 2019 Microsoft Corporation. All rights reserved. 本情報の内容 (添付文書、リンク先などを含む) は、本資料作成時点のものであり、予告なく変更される場合があります。 本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。