PolyglotフロントエンドでのJavaリバイバル技術

JavaDayTokyo 2018

Transcript

1. Copyright 2018 FUJITSU LIMITED Polyglotフロントエンドでの Javaリバイバル技術 ２０１８年５月１７日 富士通株式会社 数村 憲治 0 JavaDayTokyo 2018 SN-3
2. 免責事項 Copyright 2018 FUJITSU LIMITED 本資料に掲載されている内容は技術情報の提供を 目的としたものです 富士通の製品・サービスにこれらの機能を搭載する ことを約束するものではありません。 1
3. Copyright 2018 FUJITSU LIMITED アジェンダ Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ 2
4. スピーカー 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
5. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 4
6. 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
7. プログラミング言語ランキング 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
8. JavaでできたJavaScript デモ Copyright 2018 FUJITSU LIMITED 7
9. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 8
10. クライアントアプリケーションの歴史 Copyright 2018 FUJITSU LIMITED クラサバ Web サーバ サーバ サーバ JSP/JSF サーバ クライアント ブラウザ Applet/Flash ブラウザ ブラウザ HTML5・SPA クライアントの メンテナンス楽 セキュリティ リスク大 セキュリティ リスク小 リッチなGUI が難しい セキュリティ確保 リッチなGUI 端末の能力向上 W3C HTML5勧告 サーバ負荷減 クライアントの メンテナンス苦 9
11. 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
12. 新規作成クライアントは二極化していく ポストアプレット Copyright 2018 FUJITSU LIMITED Webアプリ (ブラウザのみ) ローカル資産 アクセス不要 アプリ配布 (ストアアプリサイドロード) ローカル資産 アクセス可能 ブラウザプラグイン(アプレット/Flash/Silverlight等) 11
13. 世の中のアプレット資産ってどのくらい? アプレット資産 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
14. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 13
15. 1 移行案 Copyright 2018 FUJITSU LIMITED アプレットの継続利用 2 JSP/JSFを使用 3 HTML5/JavaScript へ移行 JavaServer Faces IE11終了まで 意外に使われていない・・ 本命か!? 14
16. 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
17. 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
18. コスト比較と対象システム Copyright 2018 FUJITSU LIMITED (1) アプレット 継続利用 (2) JSP/JSF (3) HTML5/ JavaScript 導入コスト 高 低 低 移行コスト ほぼなし 高 (ほぼ作りかえ) 高 (ほぼ作りかえ) 運用コスト 中 低 低 メンテナンス コスト 高 低 低～高 あと数年しか 使わなくてよい システム クライアント サイド技術 に振り回され たくない モダンなGUI・ モバイル向け システム 17
19. JavaScriptの動向 Copyright 2018 FUJITSU LIMITED jQuery 一強から混戦の時代へ Google Trend 18
20. 移行前 移行後 ブラウザ HTML5/JavaScript サーバ HTTP/REST ブラウザ アプレット ロジック RMI/IIOP サーバ ロジック ロジック ロジック HTML5/JavaScriptへの移行方法 Copyright 2018 FUJITSU LIMITED ロジック ロジック ロジック ロジック 19
21. Javaを使った移行技術 Copyright 2018 FUJITSU LIMITED DukeScript プラグインなしでJavaアプリケーションが ブラウザで動作 ※https://dukescript.com/ jpro JavaFXをブラウザで動作 ※https://www.jpro.io JSweet JavaからJavaScriptへのトランスパイラ ※http://www.jsweet.org/ 20
22. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例デモ サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 21
23. トランスパイラとは Copyright 2018 FUJITSU LIMITED あるプログラミング言語で記述されたソースを 別の言語で記述したソースに変換 コンパイラとトランスパイラの違い COBOLソース Cソース トランスパイラ マシンコード 22
24. 従来言語系 • 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
25. altJS (代替JavaScript) Copyright 2018 FUJITSU LIMITED TypeScriptが優勢 Google Trend 24
26. Javaを使う利点 • JavaScriptを知らなくてよい • レガシーJavaアプリの移植が簡単 • IDEのサポート 課題 • フロント技術の進化スピード • APIのミスマッチ Java→JavaScript系トランスパイラ Copyright 2018 FUJITSU LIMITED 25
27. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 26
28. デモ Hello World Copyright 2018 FUJITSU LIMITED 27
29. JSweet Copyright 2018 FUJITSU LIMITED Java → TypeScript(JavaScript) トランスパイラ • http://jsweet.org Syntax Mapper • 構文変換のみ • Java言語でJavaScript APIを使う 従来のトランスパイラ課題を解決 アプリケーション JavaScript API(Candy) JavaScript 実装 分離 Javaソース 28
30. 従来トランスパイラ手法 (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
31. 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
32. 新たな課題 Copyright 2018 FUJITSU LIMITED トランスパイルする前にアプリケーションの修正が必要 アプリケーション JavaScript 実装 分離 Javaソース 共通ライブラリ(Candy) 修正対象 修正不要 共通ライブラリ・フレームワークを採用しているシステムに有効 Candy で解決 JavaScript API(Candy) 31
33. 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
34. デモ アプレットからJavaScript Copyright 2018 FUJITSU LIMITED 33
35. JSweetの構成 Copyright 2018 FUJITSU LIMITED 公開 TSD リポジトリ (TypeScript ソースコード) JSweet(Candy)リポジトリ (Java・TypeScript ソースコード) ダウンロード ・変換 参照 JavaScriptアプリケーション トランスパイラ 投信 外為 等 諸届投信 外為 等 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- JSweetアプリケーション (Javaソースコード) APIトランスレーター 投信 外為 等 諸届投信 外為 等 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 34
36. 変換の仕組み 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
37. 変換前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
38. 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
39. 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
40. デモ Candy Generator Copyright 2018 FUJITSU LIMITED 39
41. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 40
42. Ａ社様システム概要と移行要件 Copyright 2018 FUJITSU LIMITED システム概要 移行要件 22Kstepのアプレット 10年以上前に作成 GUI部品は富士通が 提供するライブラリを使用 時間・コストをかけずに JavaScript化 見た目・操作性は 移行前と同一 41
43. 富士通のクライアントアプリケーション向け製品 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
44. 変換後 変換前 アプレット移行実践例 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 …
45. デモ 実践例 Copyright 2018 FUJITSU LIMITED 44
46. トランスパイラでの実績 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
47. Polyglot クライアントアプリケーションの歴史 アプレット移行 トランスパイラ JSweet 実践事例 サマリ Copyright 2018 FUJITSU LIMITED アジェンダ 46
48. Javaアプレットの終焉はいよいよ現実的に • アプレットをそのまま使用できるのはあと数年 アプレット移行の選択肢はたくさん • システム要件・予算などに合わせて、適切に選択 • サーバ側とセットで考えることが大切 Polyglotの世界へようこそ • トランパイラの利用も一つの選択肢 • Java言語の再活用 サマリ Copyright 2018 FUJITSU LIMITED 47
49. Copyright 2017 FUJITSU LIMITED 48