Tweet
Tweet

Slide 1

Slide 1 text

Copyright 2018 FUJITSU LIMITED Polyglotフロントエンドでの Javaリバイバル技術 ２０１８年５月１７日 富士通株式会社 数村 憲治 0 JavaDayTokyo 2018 SN-3

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Copyright 2018 FUJITSU LIMITED アジェンダ Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ 2

Slide 4

Slide 4 text

スピーカー Copyright 2018 FUJITSU LIMITED 数村 憲治 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 3

Slide 5

Slide 5 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 4

Slide 6

Slide 6 text

Polyglotとは、複数のプログラミング言語 JavaOne → CodeOne GraalVM ・ High-performance polyglot VM ・ JavaScript, Python 3, Ruby, Java, Scala,C/C++(LLVM) マイクロサービスアーキテクチャでよく言われる それぞれのサービスに適したプログラミング言語を選択 クライアントサイド Applet, Flash, .NET, HTML5, , , Polyglotな世界 Copyright 2018 FUJITSU LIMITED . ++ # # 5

Slide 7

Slide 7 text

プログラミング言語ランキング Copyright 2018 FUJITSU LIMITED ※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 6

Slide 8

Slide 8 text

JavaでできたJavaScript デモ Copyright 2018 FUJITSU LIMITED 7

Slide 9

Slide 9 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 8

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

HotJava ブラウザ上でJavaアプレットが実行可能に ※NPAPI:Netscape Plugin Application Programming Interface アプレット Java Virtual Machine Webブラウザ プラグイン NPAPI 2013 2015 2017 アプレット技術の動向 Copyright 2018 FUJITSU LIMITED 米国土安全保障省の勧告 (プラグイン無効化) 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 プラグイン削除 10

Slide 12

Slide 12 text

新規作成クライアントは二極化していく ポストアプレット Copyright 2018 FUJITSU LIMITED Webアプリ (ブラウザのみ) ローカル資産 アクセス不要 アプリ配布 (ストアアプリサイドロード) ローカル資産 アクセス可能 ブラウザプラグイン(アプレット/Flash/Silverlight等) 11

Slide 13

Slide 13 text

世の中のアプレット資産ってどのくらい? アプレット資産 Copyright 2018 FUJITSU LIMITED 富士通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 12

Slide 14

Slide 14 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 13

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Jakarta EE アンケート調査 (使用API) Copyright 2018 FUJITSU LIMITED 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は意外に使われていない 15

Slide 17

Slide 17 text

Jakarta EE アンケート調査 (使用言語) Copyright 2018 FUJITSU LIMITED 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% 16

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

JavaScriptの動向 Copyright 2018 FUJITSU LIMITED jQuery 一強から混戦の時代へ Google Trend 18

Slide 20

Slide 20 text

移行前 移行後 ブラウザ HTML5/JavaScript サーバ HTTP/REST ブラウザ アプレット ロジック RMI/IIOP サーバ ロジック ロジック ロジック HTML5/JavaScriptへの移行方法 Copyright 2018 FUJITSU LIMITED ロジック ロジック ロジック ロジック 19

Slide 21

Slide 21 text

Javaを使った移行技術 Copyright 2018 FUJITSU LIMITED DukeScript プラグインなしでJavaアプリケーションが ブラウザで動作 ※https://dukescript.com/ jpro JavaFXをブラウザで動作 ※https://www.jpro.io JSweet JavaからJavaScriptへのトランスパイラ ※http://www.jsweet.org/ 20

Slide 22

Slide 22 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例デモ サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 21

Slide 23

Slide 23 text

トランスパイラとは Copyright 2018 FUJITSU LIMITED あるプログラミング言語で記述されたソースを 別の言語で記述したソースに変換 コンパイラとトランスパイラの違い COBOLソース Cソース トランスパイラ マシンコード 22

Slide 24

Slide 24 text

従来言語系 • Fortran → C (f2c) • C++ → C (cfront) JavaScript系 (altJS) • TypeScript → JavaScript • CoffeeScript → JavaScript 従来言語系からJavaScript系 • Java → JavaScript (GWT, JSweet) • Haskell → JavaScript (GHCJS) トランスパイラの例 Copyright 2018 FUJITSU LIMITED 23

Slide 25

Slide 25 text

altJS (代替JavaScript) Copyright 2018 FUJITSU LIMITED TypeScriptが優勢 Google Trend 24

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 26

Slide 28

Slide 28 text

デモ Hello World Copyright 2018 FUJITSU LIMITED 27

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

従来トランスパイラ手法 (API変換方式) Copyright 2018 FUJITSU LIMITED 変換元Javaソース Button button = new Button(); button.setLabel(“click me”); トランスパイル 変換後JavaScript var button = document.createElement(”button”); button.innerText = “click me”; Javaソースはそのまま API変換 29

Slide 31

Slide 31 text

JSweetトランスパイラ手法 (Syntax Mapper) Copyright 2018 FUJITSU LIMITED 変換元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変換 30

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

JSweetトランスパイラ手法(実用的) Copyright 2018 FUJITSU LIMITED 変換元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”); Syntax Mapper 32

Slide 34

Slide 34 text

デモ アプレットからJavaScript Copyright 2018 FUJITSU LIMITED 33

Slide 35

Slide 35 text

JSweetの構成 Copyright 2018 FUJITSU LIMITED 公開 TSD リポジトリ (TypeScript ソースコード) JSweet(Candy)リポジトリ (Java・TypeScript ソースコード) ダウンロード ・変換 参照 JavaScriptアプリケーション トランスパイラ 投信 外為 等 諸届投信 外為 等 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- JSweetアプリケーション (Javaソースコード) APIトランスレーター 投信 外為 等 諸届投信 外為 等 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 34

Slide 36

Slide 36 text

変換の仕組み Copyright 2018 FUJITSU LIMITED http://public.jsweet.org/apidocs/org/jsweet/jsweet-transpiler-2.0.0/org/jsweet/transpiler/Java2TypeScriptTranslator.html javac(com.sun.tools.javac)を利用 35

Slide 37

Slide 37 text

変換前Javaソース Annotationを使った記述 Copyright 2018 FUJITSU LIMITED 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" } } 36

Slide 38

Slide 38 text

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 ライブラリ) Copyright 2018 FUJITSU LIMITED 37

Slide 39

Slide 39 text

Candyの構成 Copyright 2018 FUJITSU LIMITED 構成要素 • TypeScript(d.tsファイル)の定義: TypeScriptからJavaScript変換時に必要 • Java APIとその実装: Javaソースのコンパイルに必要 APIはd.tsから自動生成可能 • JavaScriptの実装: あれば Candy Generator (APIトランスレータ) d.tsからJavaコードの作成 ※https://github.com/cincheo/jsweet/tree/master/candy-generator 38

Slide 40

Slide 40 text

デモ Candy Generator Copyright 2018 FUJITSU LIMITED 39

Slide 41

Slide 41 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 40

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

富士通のクライアントアプリケーション向け製品 Copyright 2018 FUJITSU LIMITED アプリケーション(Java) JBKGUI SpreadBean JRE(AWT/コアAPI) Webブラウザ Java Virtual Machine ボタン、ラベル、フレーム およびダイアログなどの Javaアプリケーション のGUIを実現 JBKプラグイン Webブラウザ上でのアプレットの実行をサポート ※JBK: Java Business Kit セル単位に入力 マスク可能な Excelライクな表を Javaアプリケーション で実現 42

Slide 44

Slide 44 text

変換後 変換前 アプレット移行実践例 Copyright 2018 FUJITSU LIMITED アプレット(Java) JBKGUI SpreadBean JRE(AWT/コアAPI) アプリケーション(JavaScript) JBKGUI (JavaScript) Spread (JavaScript) Java ベース コア API JavaScript ﾌﾚｰﾑﾜｰｸ スプレッド ライブラリ AWT Webブラウザ Webブラウザ Java Virtual Machine JavaScriptエンジン SlickGrid Wijmo … JBKプラグイン 43 jQuery AngularJS …

Slide 45

Slide 45 text

デモ 実践例 Copyright 2018 FUJITSU LIMITED 44

Slide 46

Slide 46 text

トランスパイラでの実績 Copyright 2018 FUJITSU LIMITED アプレット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化により 高い自動変換率 45

Slide 47

Slide 47 text

Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 46

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Copyright 2017 FUJITSU LIMITED 48

Slide 50

Slide 50 text

No content