免責事項 本資料に掲載されている内容は技術情報の提供を目的としたものです富士通の製品 サービスにこれらの機能を搭載することを約束するものではありません 1

Polyglotフロントエンドでの

Javaリバイバル技術

２０１８年５月１７日 富士通株式会社 数村 憲治

JavaDayTokyo 2018

SN-3

免責事項

本資料に掲載されている内容は技術情報の提供を 目的としたものです

富士通の製品・サービスにこれらの機能を搭載する ことを約束するものではありません。

アジェンダ

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

スピーカー

数村 憲治

Java VM エンジニア

Eclipse Foundation ボードメンバー JCP Executive Committee 理事

Interstage Application Server 製品開発 Javaオンラインコース作成

@kkzr

https://directshop.fom.fujitsu.com/shop/commodity_param/ctc/el_middleit/shc/0/cmc/ASP03737 https://directshop.fom.fujitsu.com/shop/commodity_param/ctc/el_middleit/shc/0/cmc/ASP03738

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

Polyglotとは、複数のプログラミング言語 JavaOne → CodeOne GraalVM ・ High-performance polyglot VM ・ JavaScript, Python 3,

Ruby, Java, Scala,C/C++(LLVM) マイクロサービスアーキテクチャでよく言われる

それぞれのサービスに適したプログラミング言語を選択 クライアントサイド

Applet, Flash, .NET, HTML5, , ,

Polyglotな世界

.

++

#

プログラミング言語ランキング

※https://www.tiobe.com/tiobe-index/ 1 2 3 4 5 6 7 8 9 10 11 2015 2016 2017 2018 Java C C++ Python C#

Visual Basic .NET PHP JavaScript SQL Ruby ここ数年、大きな順位変動なし Javaがトップ、JavaScriptは変動なし Java JavaScript C C++ Python C#

Visual Basic .NET

PHP SQL Ruby

JavaでできたJavaScript

デモ

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

クライアントアプリケーションの歴史

クラサバ Web サーバ サーバ _サーバ JSP/JSF サーバ クライアント ブラウザ Applet/Flash ブラウザ ブラウザ HTML5・SPA クライアントの メンテナンス楽 セキュリティ リスク大 セキュリティ リスク小 リッチなGUI が難しい セキュリティ確保 リッチなGUI 端末の能力向上 W3C HTML5勧告 サーバ負荷減 クライアントの メンテナンス苦

HotJava ブラウザ上でJavaアプレットが実行可能に

アプレット

Java Virtual Machine

Webブラウザ プラグイン NPAPI 2013 2015 2017

アプレット技術の動向

米国土安全保障省の勧告 (プラグイン無効化) Google Chrome NPAPI無効 EdgeがNPAPI のサポート中止 FireFoxがFlash以外の NPAPI打ち切り 1995 1996 1998 2001

J2SE 1.2/Java Plugin

Netscape Navigatorに搭載 WebStart Oracle Java 9 アプレット非推奨 Oracle Java 6/7 プラグイン削除

新規作成クライアントは二極化していく

ポストアプレット

Webアプリ (ブラウザのみ) ローカル資産 アクセス不要 アプリ配布 (ストアアプリサイドロード) ローカル資産 アクセス可能 ブラウザプラグイン(アプレット/Flash/Silverlight等)

世の中のアプレット資産ってどのくらい?

アプレット資産

富士通Java使用ユーザ _{クライアント台数}アプレット使用 A 社 90,000 B 社 70,000 C 社 54,000 D 社 21,000 E 社 5,000 F 社 3,500 G 社 3,000 H 社 3,000 合計 249,500

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

1

移行案

アプレットの継続利用 2 JSP/JSFを使用 3 HTML5/JavaScript へ移行 JavaServer Faces IE11終了まで 意外に使われていない・・ 本命か!?

Jakarta EE アンケート調査 (使用API)

Java Persistence API

(JPA) Java API for Restful Web Services (JAX-RS) Servlet Enterprise JavaBeans (EJB) Java Transition API (JTA) JavaServer Pages (JSP) JavaServer Faces (JSF) ※https://jakarta.ee/news/2018/04/24/jakarta-ee-community-survey/ 76.23% 75.73% 59.39% 51.14% 47.31% 39.39% 33.63% JSP/JSFは意外に使われていない

Jakarta EE アンケート調査 (使用言語)

Javaユーザは、JavaScriptにも取り組んでいる ※https://jakarta.ee/news/2018/04/24/jakarta-ee-community-survey/ 98.73% JavaScript Java Python Other C/C++ C# GO Ruby Swift 64.93% 17.56% 17.17% 11.36% 9.92% 5.76% 3.55% 3.10%

コスト比較と対象システム

(1) アプレット 継続利用 (2) JSP/JSF HTML5/(3) JavaScript 導入コスト 高 低 低 移行コスト _ほぼなし 高 (ほぼ作りかえ) (ほぼ作りかえ)高 運用コスト 中 低 低 メンテナンス コスト 高 低 低～高 あと数年しか 使わなくてよい システム クライアント サイド技術 に振り回され たくない モダンなGUI・ モバイル向け システム

JavaScriptの動向

jQuery 一強から混戦の時代へ

移行前 移行後 ブラウザ HTML5/JavaScript サーバ HTTP/REST ブラウザ アプレット ロジック RMI/IIOP サーバ ロジック ロジック ロジック

HTML5/JavaScriptへの移行方法

ロジック ロジック ロジック ロジック

Javaを使った移行技術

DukeScript

プラグインなしでJavaアプリケーションが ブラウザで動作

※https://dukescript.com/

jpro JavaFXをブラウザで動作_{※https://www.jpro.io}

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例デモ

サマリ

アジェンダ

トランスパイラとは

あるプログラミング言語で記述されたソースを 別の言語で記述したソースに変換

コンパイラとトランスパイラの違い

COBOLソース _{トランスパイラ} Cソース マシンコード

従来言語系 • Fortran → C (f2c) • C++ → C (cfront) JavaScript系 (altJS) • TypeScript → JavaScript • CoffeeScript → JavaScript 従来言語系からJavaScript系

• Java → JavaScript (GWT, JSweet) • Haskell → JavaScript (GHCJS)

altJS (代替JavaScript)

TypeScriptが優勢

Javaを使う利点 • JavaScriptを知らなくてよい • レガシーJavaアプリの移植が簡単 • IDEのサポート 課題 • フロント技術の進化スピード • APIのミスマッチ

Java→JavaScript系トランスパイラ

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

JSweet

Java → TypeScript(JavaScript) トランスパイラ • http://jsweet.org Syntax Mapper • 構文変換のみ • Java言語でJavaScript APIを使う 従来のトランスパイラ課題を解決 アプリケーション JavaScript API(Candy) JavaScript 実装 分離 Javaソース

従来トランスパイラ手法 (API変換方式)

変換元Javaソース

Button button = new Button(); button.setLabel(“click me”);

トランスパイル

変換後JavaScript

var button = document.createElement(”button”); button.innerText = “click me”;

Javaソースはそのまま API変換

JSweetトランスパイラ手法 (Syntax Mapper)

変換元Javaソース

Button button = new Button(); button.setLabel(“click me”);

トランスパイル

変換後TypeScript let button : HTMLButtonElement=

document.createElement(”button”) button.innerText = “click me”;

Javaソースを 手動で変更

修正Javaソース HTMLButtonElement button =

document.createElement(StringTypes.button); button.innerText = “click me”;

Syntax Mapper API変換

新たな課題

トランスパイルする前にアプリケーションの修正が必要 アプリケーション JavaScript 実装 分離 Javaソース 共通ライブラリ(Candy) 修正対象 修正不要 共通ライブラリ・フレームワークを採用しているシステムに有効 Candy で解決 JavaScript API(Candy)

JSweetトランスパイラ手法(実用的)

変換元Javaソース

Button button = new Button(); button.setLabel(“click me”);

public class Button extends JButton { public void setLabel(String label) {

this.label = label; } アプリは 変更なし クラスライブラリ 部分だけ変更 (API変換)

public class Button { public Button {

button =

document.createElement(StringTypes.button); }

public void setLable(String label); button.innerText = label;

}

トランスパイル

Button button = new Button(); button.setLabel(“click me”);

JSweetの構成

公開 TSD リポジトリ

(TypeScript ソースコード) (Java・TypeScript ソースコード)JSweet(Candy)リポジトリ

ダウンロード ・変換 参照 JavaScriptアプリケーション トランスパイラ 投信 外為等 諸届投信 外為等 --- JSweetアプリケーション (Javaソースコード) APIトランスレーター 投信 外為等 外為等 _諸届投信

---変換の仕組み

変換前Javaソース

Annotationを使った記述

public class Sample implements java.io.Serializable {

@jsweet.lang.Erased

private void writeObject(java.io.ObjectOutputStream out) throws java.io.IOException { out.defaultWriteObject();

out.writeUTF("special string"); }

@jsweet.lang.Replace ("return ¥"not implemented yet¥"")

public String findFromDB(String key) { return database.askDB(key);

}

変換後TypeScript export class Sample {

public findFromDB(key : string) : string { return "not implemented yet"

} }

JavaとJavaScriptのブリッジ • リポジトリに1744個のCandyが登録(2018年5月現在) http://www.jsweet.org/candies-releases/ • 自作も可 Candyの種類 • Java Candy: JSweetで再利用可能な 共通Javaライブラリ • JavaScript Candy: 既存のJavaScript ライブラリに対するブリッジ アプリケーション JavaScript 実装 共通ライブラリ(Candy) JavaScript API(Candy)

Candy (JSweet ライブラリ)

Candyの構成

構成要素 • TypeScript(d.tsファイル)の定義: TypeScriptからJavaScript変換時に必要 • Java APIとその実装: Javaソースのコンパイルに必要 APIはd.tsから自動生成可能 • JavaScriptの実装: あれば

Candy Generator (APIトランスレータ) d.tsからJavaコードの作成

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

Ａ社様システム概要と移行要件

システム概要 移行要件 22Kstepのアプレット 10年以上前に作成 GUI部品は富士通が 提供するライブラリを使用 時間・コストをかけずに JavaScript化 見た目・操作性は 移行前と同一

富士通のクライアントアプリケーション向け製品

アプリケーション(Java) JBKGUI SpreadBean

JRE(AWT/コアAPI)

Webブラウザ

Java Virtual Machine ボタン、ラベル、フレーム およびダイアログなどの Javaアプリケーション のGUIを実現 JBKプラグイン Webブラウザ上でのアプレットの実行をサポート

※JBK: Java Business Kit セル単位に入力

マスク可能な Excelライクな表を Javaアプリケーション

変換後 変換前

アプレット移行実践例

アプレット(Java) JBKGUI SpreadBean JRE(AWT/コアAPI) アプリケーション(JavaScript) JBKGUI

(JavaScript)(JavaScript)Spread Java

ベース コア API JavaScript ﾌﾚｰﾑﾜｰｸ AWT スプレッドライブラリ Webブラウザ Webブラウザ

Java Virtual Machine

JavaScriptエンジン SlickGrid Wijmo … JBKプラグイン jQuery AngularJS …

デモ

トランスパイラでの実績

アプレット2画面の変換実績ステップ数 ステップ数 自動変換率 合計 手組 自動変換 A 画面 6,102 63 6,039 99.0% B 画面 4,764 44 4,720 99.1% 共通部分 11,789 849 10,940 92.8% 計 22,655 956 21,699 95.8% 手組ステップ数:トランスパイラ用に書き換えが必要な箇所 富士通製品部分のCandy化により 高い自動変換率

Polyglot

クライアントアプリケーションの歴史

アプレット移行

トランスパイラ

JSweet

実践事例

サマリ

アジェンダ

Javaアプレットの終焉はいよいよ現実的に • アプレットをそのまま使用できるのはあと数年 アプレット移行の選択肢はたくさん • システム要件・予算などに合わせて、適切に選択 • サーバ側とセットで考えることが大切 Polyglotの世界へようこそ • トランパイラの利用も一つの選択肢 • Java言語の再活用

サマリ