OutSystems - Reactive Webの現状（2021年 最新版）

（2021年12月25日 更新）

「ローコードでReactアプリが開発できる」 OutSystemsの「Reactive Web」ですが、すでにリリースから~~9か月（2020年7月初稿時の記述）~~2年以上経過しました。Reactive Webに関しては、2019年末、日本において以下のような発表を行いました。

**OutSystems 新機能紹介： Reactive Web**
https://www.slideshare.net/TsuyoshiKawarasaki/outsystems-reactive-web-207036748

上記資料の19・20スライド目で「Reactive Webの制約（当時）」を説明しましたが、**リリースからすでに2年経過し、OutSystems側も新規開発ではReactive Webの利用を推奨している現状があります。**そのような背景も踏まえて、ここであらためて最新情報をアップデートいたします。
以下、項目毎に記載しますが、記載順序はスライドの順番とは異なっています。特に昨年（2020年）の当記事アップデート以降に変更した項目は先頭に配置しています。

***
#### 1. 多言語対応　

- <strong>(2019)</strong><br> Forgeコンポーネントが必要
- <strong>(2020)</strong><br> Technical Previewがリリースされました。（2020年10月）<br>
※元々Forgeコンポーネントを利用されていた場合、移行手段が提供されます。詳細は以下のページに記載されています。<br><strong>OutSystems Forge - 「Multilingual Component」</strong><br>
https://www.outsystems.com/forge/component-overview/1784/multilingual-component<br><br>
- <strong>(2021)</strong><br> OutSystemsの最新版（Platform Server 11.12.0 以降）にて、標準対応しました。（日本語版ドキュメントは、現在翻訳対応中です）<br>
<strong>Multilingual Reactive Web and Mobile Apps</strong><br>
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Multilingual_Reactive_Web_and_Mobile_Apps

***
#### 2. Emailデザイン

- <strong>(2019)</strong><br> 現状、電子メール定義は未対応。Traditional Webもしくはその他の手段を検討する。
- <strong>(2020)</strong><br> 現在でもEmailデザインには未対応です。しかし、近い将来、Reactive Webモジュールでも電子メール定義が可能となる予定です。
- <strong>(2021)</strong><br> OutSystemsの最新版（Platform Server 11.14.0 以降）にて、標準対応しました。（日本語版ドキュメントは、現在翻訳対応中です）<br>
<strong>Emails in Mobile and Reactive Web Apps</strong><br>
https://success.outsystems.com/Documentation/11/Developing_an_Application/Implement_Application_Logic/Technical_Preview_-_Emails_in_Mobile_and_Reactive_Web_Apps

***
#### 3. SEO

- <strong>(2019)</strong><br> 現状、アプリケーションのURL変更は不可。B2Cアプリなど、SEO対策が必要な場合、ScreenやInput Parameterの名称に気を付ける
- <strong>(2020)</strong><br> Traditional Webと同等のSEO Rule対応は2020年末を予定しています。
現状では、スライドに記載のようにScreen・Input Parameterの名称を意識することに加えて、一部のSEO URL設定、およびTraditional Web側定義へのリダイレクトを行うことで、一部の要件に対しては対応可能です。
- <strong>(2021)</strong><br> OutSystemsの最新版（Platform Server 11.14.0 以降）にて、標準対応しました。（日本語版ドキュメントは、現在翻訳対応中です）<br>
<strong>SEO in Reactive Web Apps</strong><br>
https://success.outsystems.com/Documentation/11/Developing_an_Application/Technical_Preview_-_SEO_in_Reactive_Web_Apps

***
#### 4. 対応ブラウザ

- <strong>(2019)</strong><br> IE11はサポート対象外（Edge, Chrome, Firefox and Safariをサポート）
- <strong>(2020)</strong><br> Reactive Webは、HTML5, CSS3のフルサポートを念頭においているため、Edge以上が必要という点は変わりません。ただし、現状では、以下ブログ（英文）に記載のForgeコンポーネントが提供されていて、必要に応じてある程度対応は可能と考えられます。<br>
<strong>Medium - 「OutSystems Reactive IE Compatibility」</strong><br>
https://medium.com/noesis-low-code-solutions/outsystems-reactive-and-ie-compatability-7ed5717170b2<br><br>
- <strong>(2021)</strong><br> 上記ブログに記載のForgeコンポーネント（以下のリンク）が完全な解決策というわけではないのですが、Reactive Webを利用し、かつIE11対応がどうしても必要なケースでは、やはり何らかの回避策を検討する必要があります。<br>
<strong>OutSystems Forge - 「Reactive for IE」</strong><br>
https://www.outsystems.com/forge/component-overview/8324/reactive-for-ie

***
#### 5. Forgeコンポーネント

- <strong>(2019)</strong><br> Forgeコンポーネントに関しては、「Reactive Web」に未対応なものがまだ存在する。
- <strong>(2020)</strong><br> Reactive対応のコンポーネントも着実に増えていますが、Traditionalに比べると登録数は少ない状況です（Traditionalの「2094」に対して、Reactiveは「287」）。私は以下のようなサンプルを登録しました。
<strong>OutSystems Forge - 「Editable Table Reactive Sample」</strong>
https://www.outsystems.com/forge/component-overview/8659/editable-table-reactive-sample

- <strong>(2021)</strong><br> Traditionalに比べるとまだ登録数は少ない状況ですが（現時点では、Traditionalの「1836」に対して、Reactiveは「975」）、OutSystems側も**「新規開発ではReactive Webの利用を推奨」**しており、標準サポートのForgeコンポーネント（Data Grid Reactive など）はReactive対応が確実に進んでいます。2021年、私は以下のようなサンプルを登録しました。
<strong>OutSystems Forge - 「Highcharts Sample Reactive」</strong>
https://www.outsystems.com/forge/component-overview/11479/highcharts-sample-reactive

***
#### 6. ローカルストレージ

- <strong>(2019)</strong><br> 現状、ローカルストレージは未対応。オフライン処理が必要なモバイルアプリに関しては、従来のモバイルアプリとして開発。
- <strong>(2020)</strong><br> 現状でも同様です。但し、Reactive Webの「Client Variable」を利用することで、一部の基本データ型はクライアント側で値を保持できます。また、EAP (Early Access Program)として提供中の「PWA」アプリでは、ローカルストレージの利用が可能です。しかし、PWAに関しては、当面はモバイルアプリのみの対応となります。<br>
- <strong>(2021)</strong><br> PWAはすでに標準機能としてリリースされています。PWAはMobile向けの機能という点も同様です。但し、実際のところはPWAで開発したアプリは、デスクトップ用OS（Webブラウザ）から利用することも可能であり、その場合、ローカルストレージの利用も可能です。<br>
<strong>プログレッシブWebアプリ（PWA）として配布</strong><br>
https://success.outsystems.com/ja-jp/Documentation/11/Delivering_Mobile_Apps/Distribute_as_a_progressive_web_app

***
#### 7. ワークフロー（BPT）

- <strong>(2019)</strong><br> 現状、標準のワークフロー連携機能無し。連携するためには、APIを利用した定義が必要。
- <strong>(2020)</strong><br> OutSystems Platform Version 11.8.0 以降、Reactive Webで開発した画面をワークフロー（BPT）のHuman Activityで利用可能となりました。Reactive Webで開発したワークフローのサンプルをForgeに登録しましたので、興味のある方はご参照ください（以下のサンプルを動かすためには、OutSystems Platformのバージョン 11.8.0 以上が必要です）。<br>
<strong>OutSystems Forge - 「Workflow Sample Reactive」</strong><br>
https://www.outsystems.com/forge/component-overview/8857/workflow-sample-reactive

***
#### 8. アプリケーション間のSSO

- <strong>(2019)</strong><br> 現状、Traditional WebとReactive Webの間のSSOは未対応。また、SAML認証にも未対応
- <strong>(2020)</strong><br> OutSystems Platform Version 11.8.0 にて、Traditional WebとReactive Webの間のSSO、SAML認証に対応しました。<br>
<strong>OutSystems - 「Release Notes」</strong><br>
https://success.outsystems.com/Support/Release_Notes/11/Platform_Server#Platform_Server_11.8.0

***
#### 9. SSL（HTTPS） 通信が必須

- <strong>(2019)</strong><br> HTTP/2プロトコルに対応し、より高速な通信が可能となった。結果として、HTTPS経由の通信が必須となり、HTTP経由の通信はサポートされない。
- <strong>(2020)</strong><br> こちらはReactive Webの仕様上、その通りとなります。

***
#### 10. JavaScriptを使用したDOMの操作は行わない
- <strong>(2019)</strong><br> Reactの処理と干渉して、パフォーマンス上の問題となりうる。その意味で、jQueryは使用しないこと。
- <strong>(2020)</strong><br> こちらも、その通りとなります。

***
#### その他・まとめ
- 上記、Reactive Webの対応状況を更新しました。現状では、Traditional Webで実現していた機能はReactive Webでもほとんど同レベルで実現可能となっています。ただし、以下の機能についてはReactive Webには対応せず、「Traditional Webのみ対応」をうたっていますので、これらの機能が必要な場合には、別の手段やカスタマイズによる対応が必要となります。<br><br>
<strong>内部ネットワークへのアクセスを制限する</strong><br>
https://success.outsystems.com/ja-jp/Documentation/11/Developing_an_Application/Secure_the_Application/Restrict_Access_to_an_Internal_Network<br><br>
<strong>環境のアナリティクスを有効にする</strong><br>
https://success.outsystems.com/ja-jp/Documentation/11/Managing_the_Applications_Lifecycle/Monitor_and_Troubleshoot/Enable_Analytics_for_an_Environment

***
    注意事項：
    上記文章に記載のリリース予定時期や機能内容は、2022年12月25日時点の情報に基づいています。
    記載内容は、将来予告なく変更される可能性もございます。その点につきましては予めご了承ください。