13
9

More than 3 years have passed since last update.

(OutSystems)Reactive Web AppとTraditional Webの違い

Last updated at Posted at 2019-10-08

Reactive Web Appは、最近リリースされたOutSystemsの新機能で、内部的にはReactベースになっているそうです。

動作確認環境

Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.1)

2019/10のアップデート以降のPlatformで使用可能になった機能です。

アプリケーション・モジュール

これまでのWebアプリケーションは"Traditional Web"と改称され、New Applicationダイアログオプションの下の方に追いやられています。

New Applicationダイアログ(Traditional Webはスクロールしないと出てこない)
Reactive_Diff1.PNG

処理は主にクライアントで行われる

Traditional Webでは、処理(Action)はサーバ内で実行されていました。

Reactive Web AppではClient Actionが追加されました。これまでのActionはServer Actionと呼ばれます。

白抜きの円形のアイコンがついているのがClient Action。Server Actionはこれまでと同じようにオレンジの円形で表されます。

Reactive_Diff2.PNG

Screen ActionはClient Actionになります。サーバサイドの処理が必要な時は、Client ActionからServer Actionを呼び出すことができます。

Client Actionのみで処理が完結する場合、通信は発生しません。

データ取得

Traditional Webでは、PreparationでAggregateを呼んでおいて、Screen ActionやWidgetでそれを利用することが多かったと思います。

Reactive Web Appでは、Screenに直接Aggregateを作成します。
Reactive_Diff3.PNG

定義しておいたAggregateは、画面表示時に自動的に並列で実行され、取得が終了すると、紐づけておいたWidgetに自動で反映されます。

なお、Aggregate取得後に別の処理を挟みたい場合は、AggregateのOn After Fetchを利用してください。。

表示の更新

Traditional Webでは、一度表示した値を更新する場合、

  • SubmitやNavigateでページを再描画する
  • Ajax Submitでサーバに処理を返し、Ajax Refreshで更新したいWidgetを指定する

のどちらかでした。
Reactive Web Appでは、Widgetに紐づけておいた変数の値を更新すると自動的に表示が更新されます。

イベント

ScreenとBlockに以下のイベントがあります。

  • On Initialize:新しい画面に遷移する前に、その画面のこのイベントが発生
  • On Ready:DOMがReadyのタイミングで発生
  • On Render:変数変更などでそのUIの表示が更新されたときに発生
  • On Destroy

また、BlockにOn Parameters Changedというイベントがあります。これは配置先のScreenからBlockに渡しているInput Parameterが変更されたときに動作するイベント。

セッション変数がない

代わりに、Client Variablesというのがあります。
セッション変数と違い、クライアント側に保持されます。

同じUser Providerを共有する複数のアプリケーションで共用されるようです。

モバイルとの関係

OutSystemsでのモバイルアプリケーション開発とかなり似ています。
Web とモバイルアプリケーション開発で開発者のスキルを共有できる幅が広がったといえるのではないでしょうか。

Local Entityがないのと、プラグインがないのはモバイルアプリケーション開発との違いですね。

Client Variablesはモバイルアプリケーション開発でも使えるそうです。

13
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
9