😆 🧑🏼‍🤝‍🧑🏻 🍬 TeaVM-Java、Kotlin、ScalaでWebフロントエンドを作成するためのツール 🎶 👨‍🎤 🕺🏿

かなり前に、Habré に関する記事を公開しました。そこで、自分のプロジェクトTeaVMについて話しました。それ以来、彼に多くのことが起こりました。1つ重要なことを含めて、以下で説明します。そのために、Habrでもう一度書くことにしました。しかし、最初に、プロジェクトの目的を簡単に思い出してください。

そのため、TeaVMはJavaScriptのJavaバイトコードコンパイラです。 TeaVMを作成するというアイデアは、フルスタックJava開発者として働いていて、GWTフロントエンドを使用して記述していたときに思いつきました。当時（およびこれは約5年前）、node.js、webpack、babel、TypeScriptなどのツールは広く配布されていませんでした。 Angularは最初のバージョンであり、Reactやvue.jsのような代替手段はまったくありませんでした。その後、真剣に、IE7でサイトをテストしました（そして、IE6でさえ、顧客に不運だった人もいます）。一般的に、JavaScriptエコシステムは現在よりはるかに成熟しておらず、苦労せずにJavaScriptを書くことはできませんでした。

GWTが好きだったのは、これらすべてを背景に、適切な解決策のように思えたからですが、欠点がないわけではありません。主な問題はカットの下にリストされています。

再組み立ての速度には、多くの要望がありました。 GWTも非常に遅いです。私たちは編集を開始し、クッキーでお茶を飲みに行きました。
GWTは入力としてJavaソースを受け取るため、まず動作が遅く（Javaコードの解析と解決は簡単な作業ではありません）、第二に、Java以外をサポートしていません。第三に、サポートでも遅れています。 Java自体の新しいバージョン。
GWTはUIを作成するためのひどいフレームワークです。一方では、彼はDOMから抽象化しようとしていますが、他方では、彼は常に最後まで行くわけではなく、抽象化フローがあり、DOMへの直接介入によってこれを修正するのは簡単ではありません。抽象化の厚い層を突破する必要があります。さらに、文明世界全体がマークアップの宣言的記述（.NET、JavaFX、Flex、上記の最新のJavaScriptフレームワークのWPF）のパスに沿って移動している間、GWTは古い方法でウィジェットからUIを収集することを強制しました。

JavaでWebアプリケーションを作成するという考え自体が悪いとは思えませんでした。 GWTのすべての欠点は、私には思えるが、Googleがその開発に十分なリソースを投資しなかったという事実によるものでした。 JavaScriptに切り替えるのではなく、GWTの欠点に我慢することを好みました。

そして、私は考えました-入力としてJavaバイトコードを使用しないのはなぜですか？バイトコードはソースプログラムに関する多くの情報を保存するため、逆コンパイラーはソースをほぼ正確に復元することができます。 Javacはバイトコードを生成する最も難しい作業をすべて実行するため、JavaScriptの生成には少し時間がかかります。さらに、JVMの他の言語のサポートと、Javaの新しいバージョンのほぼ無料のサポートを取得します（バイトコードはJava言語よりもはるかに保守的です）。

このプロジェクトで何がおもしろかった

私はすでにプロジェクトに多くの興味深いことが起こったと言っています。ここで私がお話ししたい最も重要なポイントは次のとおりです。

スレッドのサポートが登場しました。 JavaScriptでは、それらはまったくありません。WebWorkersはそれについてではありません。スレッドとは異なり、共有状態を持たないためです。あるワーカーでオブジェクトを作成し、コピーせずに別のワーカーに転送することはできません。代わりに、TeaVMはメソッドのコードを変換して、特定のポイントで実行を中断できるようにすることができます（babelが待機しているときとほぼ同じです）。これにより、1つのスレッドが長いIO操作（まあ、または一部のThread.sleep()

）に達したときに、一時停止して別のスレッドの実行を許可するときに、あるバージョンの協調マルチタスクを作成できました。
実験中は、WebAssemblyのサポートがあります。任意のバイトコードはサポートされていますが、JVM固有の強力なJDKメソッドの一部はサポートされていません（これは主に異なる反映です）。また、何との相互運用もまったくありません。 JavaScriptを呼び出すには、非常に長い間タンバリンと踊る必要があります。一般に、WebAssemblyをサポートするために、GCとスタックのアンワインドを記述する必要があったため、このWebAssemblyは低レベルです！時間が経つにつれて、彼らはGCと例外のサポートを追加することを約束しますが、これまでのところ、これは本当のアセンブラーです。
TeaVMでtea frv web frendendを作成するためのフレームワークがありましたが、これはまさにこのニュースなので、この記事を書きました。ただし、詳細は以下のとおりです。

Webフレームワーク

TeaVMのWebフレームワークはFlavorと呼ばれ、完全にJavaで記述されています。最近、Maven Centralに最初のバージョン（番号0.1.0）を投稿しました。イデオロギー的には、最新のAngular 2/4およびVue.jsに似ていますが、Java開発者に近いイディオムに完全に基づいています。たとえば、Flavorのすべてのコンポーネントは、アノテーションでマークされた通常のJavaクラスによって表されます。プロパティと状態、または変化するプロパティをカプセル化する必要のある特別なオブジェクトはありません。 HTMLテンプレート言語は完全に静的に型付けされており、オブジェクトのプロパティまたはイベントハンドラーの呼び出しはコンパイル時にチェックされます。たとえば、プロパティ名のタイプミスは、単にプロジェクトのコンパイルを許可しません。

サーバーとの通信のために、FlavorはJAX-RS注釈でマークされたインターフェースを使用することを提案し、データはDTOを使用して送信され、DTOはJackson注釈でマークされます。これは、プロジェクトでこれらのAPIをすでに知っており、使用しているJava開発者にとって便利なはずです。

論理的な疑問が生じます：既存のものがある場合にフレームワークを作成する理由：React、Angular、Vue.js？ JavaScript相互運用機能を使用するだけで、何も発明することはできません。もちろんそれについて考えました。しかし、いや、すべてが一見思われるよりもはるかに悪いことが判明しました。これらのフレームワークは、動的に型指定されたJavaScriptのイディオムに基づいて構築され、その中から目的の一連のプロパティを持つオブジェクトを作成し、オブジェクトの「クラス」に正しい名前の魔法のメソッドがあることを期待できます。一般に、JavaScriptの世界では、フレームワークの作成者はタイピングについて考えることに慣れていません。これは、あらゆる種類のアダプター、ラッパー、プリプロセッサー、ジェネレーターを作成することで克服できます。しかし、最終的には、元のフレームワークよりも複雑なシステムであるため、独自のフレームワークを作成することにしました。

いくつかの例

プロジェクト作成

もちろん、興味のある人は誰でもサイトのドキュメントを読むことができます。しかし、Flavorを簡単かつ迅速に味わうために、ここに小さな例を示します。

したがって、Mavenを使用してプロジェクトを作成できます。

  mvn archetype:generate \ -DarchetypeGroupId=org.teavm.flavour \ -DarchetypeArtifactId=teavm-flavour-application \ -DarchetypeVersion=0.1.0

生成されたプロジェクトは、予想どおり、 mvn package

チームによって組み立てられmvn package

。

テンプレートエンジン

ページは、その動作を説明するクラスコード（表示用のデータを提供し、イベントハンドラを含む）とHTMLテンプレートの2つのファイルで記述されます。作成されたプロジェクトには既にページの例がありますが、もう1つ例を示します。アーキタイプから生成された例を置き換えるか、既存のファイルにさらに2つのファイルを追加できます。ページクラスコードは次のとおりです。

 @BindTemplate("templates/fibonacci.html") public class Fibonacci { private List<Integer> values = new ArrayList<>(); public Fibonacci() { values.add(0); values.add(1); } public List<Integer> getValues() { return values; } public void next() { values.add(values.get(values.size() - 2) + values.get(values.size() - 1)); } }

そして、ここに彼女のテンプレートがあります：

 <ul> <!-- values -    this.getValues() --> <std:foreach var="fib" in="values"> <li> <html:text value="fib"/> </li> </std:foreach> <li> <!--   , event:click    -  ,         ,       --> <button type="button" event:click="next()">Show next</button> </li> </ul>

std:foreach

、 html:text

およびevent:click

はFlavorのコンポーネントです。ユーザーは自分のコンポーネント（ドキュメントでそれを読む方法に興味がある人）を説明できますが、ユーザーは手動でDOMを描画するか、テンプレートを介してそれを行うことができます。これらのコンポーネントには特別なものはありません;それらはコンパイラーマジックによって実装されていません。必要に応じて、独自のアナログを作成できます。例として、 html：テキストコードを読むことができます。

最後に、 main

メソッドコードは次のようになります。

 public static void main(String[] args) { Templates.bind(new Fibonacci(), "application-content"); }

すべての基本的な魔法はここから始まります。フレームワークは、ページクラスのインスタンスを作成せず、それを制御しません。代わりに、自分で好きなように自分で作成して管理すると、Flavorは単にDOMを生成し、適切な場所に挿入し、オブジェクトの状態の変更を追跡し、これらの変更に従ってDOMを再描画します。ところで、FlavorはDOM全体を再描画するのではなく、必要な部分のみを変更します。

テンプレートが静的に型付けされていることをもう一度お知らせします。間違えてevent:click="nxt()"

を記述したevent:click="nxt()"

、コンパイラーはエラーメッセージを書き込みます。このアプローチにより、より高速なコードを生成することもできます。フレーバーは、ページを読み込んでディレクティブを解析し、バインダーを初期化した後、時間を費やしません。彼はこれらすべてをコンパイル時に行います。

RESTクライアント

ここで、Flavorがフルスタック開発者にとってどのように役立つかを示したいと思います。ある種のCXFをJAX-RSと組み合わせて使用するとします。次のようなものを書いた：

 @Path("math") public interface MathService { @GET @Path("integers/sum") int sum(@QueryParam("a") int a, @QueryParam("b") int b); }

（たとえば、 MathServiceImpl

クラスで）実装し、CXFで実装を登録しました。小さなRESTサービスの準備ができました。ここで、クライアント側でリクエストを行うには、次のコードを記述できます。

 MathService math = RESTClient.factory(MathService.class).createResource("api"); System.out.println(math.sum(2, 3));

（devtoolsで、このコードがGETリクエストをaddress /api/math/integers/sum?a=2&b=3

送信することがわかります）。

一般に、目的のエンドポイントに対してRESTリクエストを正しく行う方法をWebクライアントに何らかの形で説明する必要はありません。これは、サーバーとクライアントに対してすでに1つの方法で行っています。 RESTサービスをさらに増やしてリファクタリングできます。サーバー側またはクライアント側から同期する必要はありませんMathService

インターフェースの形式で同期ポイントがあります。

GWTには同様のメカニズムGWT-RPCがありますが、追加の非同期インターフェースを生成してコールバックを使用するように強制しますが、TeaVMは同期コードを非同期に変換できます。また、GWT-RPCは独自の互換性のないプロトコルを使用するため、GWT-RPCのエンドポイントを作成すると、iOSクライアントなどで再利用できなくなります。

他に何が面白いですか？

もちろん、短いレビュー記事では、すべてについて話すことはできません。したがって、TeaVMとFlavorには非常に興味深いものがあり、高品質のWebアプリケーションを作成するのに非常に適しているとだけ言っておきます。

IntelliJ IDEAとの統合。毎回Mavenを起動することは深刻ではありません。結局、Mavenは開発中ではなく、実稼働環境でのビルドに使用されます。 TeaVMはIDEAから直接起動できます。ビルドボタンをクリックするだけです。
デバッガーそれなしでは、深刻なツールとして何かについて話すことさえ不可能です。 TeaVMは標準のソースマップを生成できます。また、IDEAプラグインで使用される独自のデバッグ情報形式もあります。
非常に高速なコンパイラ。私は最適化に努力しましたが、バイトコードは非常に原始的なものなので、処理する際に速度を落とすことはまったくありません。これはJavaではありません。たとえば、ジェネリック、バリアンス、およびキャプチャされたタイプを持つタイプを派生する必要がある場合です。さらに、IDEAからコンパイラーを開始するとき、コンパイル時間を短縮するために、デーモンからコンパイラーを開始する、後続のビルドのために情報をキャッシュするなど、いくつかの手法が使用されます。これにより、非常に快適なJavaScript再構築速度を実現できます。
JDKから非常に小さな部分を切り取ることができる優れたオプティマイザー。サイズが印象的で、アプリケーションが適切に動作し、さらには高速化するために必要です。
ルーティング。フレーバーは、リンクを解析および生成する方法を知っています。リンクは、APIの観点からは、非常に静的に型付けされたインターフェイスです。
フォームの検証。
Swingのように、ブロッキングAPIを備えたモーダルウィンドウ。
これはすでに上記で言及されています-Javaだけでなく、KotlinとScalaがサポートされています。ちなみに、TeaVMのTodoMVCバリアントはKotlinで記述されています。
Java開発の世界でよく知られているApache 2.0オープンソースライセンス。

WebでJavaを使用する理由

最近、JavaScript開発エコシステムは非常に成熟しました。開発者は、GWTのようなヘビーモンスターを使用するのではなく、事実上の標準となったツールを構成し、多くの高度な機能を備えた最新の言語、または最新の静的型付け言語（TypeScript）で記述する方法を学ぶ方が簡単です。

問題は、これらすべてを研究する必要があるということです。言語の構文だけを勉強するのではなく（経験豊富な開発者はこれに数日費やします）、ライブラリ、イディオム、開発者ツールなど、多くのことを勉強します。昨日の経験豊富なJava開発者は、これらすべてを数週間で処理し、対処することになると確信していますが、問題は彼がそれをどうやってうまく把握できるかということです。彼は本当に良いコードを書くことができますか？彼女が理解してできるとしても、まだ問題があります。最初に、開発者はJavaとJavaScriptの間でコンテキストを切り替える必要があります。第二に、この方法では、開発者はツールの調整により多くの時間を費やす必要があります。

さて、Javaコミュニティに質問があります。何らかの理由で、JavaScriptの側からバックエンドに向かってそのような永続的な動きがありますか？私は、上で引用した考慮事項からそれを疑っています。反対方向に同じ動きをしてみませんか？ここに、JavaScriptフロントエンド開発者のコミュニティがあり、node.jsを中心にバックエンドエコシステムを共同で作成しています。 Java開発者コミュニティの方が悪いのはなぜですか？おそらくJavaScriptは高速で軽量であり、Javaは大きくて重いため、フロントエンドの作成には適さないという神話があります。実際、私のプロジェクトでは、これがまさに神話であり、適切に調理されたJavaが小さく軽快であることを証明しようとしています。一例として、125kbを要するTodoMVCの実装があります（ReactまたはAngular 4でTodoMVCを作成してみてください。

結論として

フレーバーに興味がある場合は、以下の資料をご覧ください。

英語のドキュメント。
Kotlin上のTodoMVC 。
Javaの掃海艇 ;
REST、検証、ドロップダウンカレンダー、モーダルウィンドウなどを備えた、実際に近いCRUDの例。
もちろん、理解できないものがあるかどうかはいつでも私に尋ねることができます。

フィードバックをお待ちしています。私のプロジェクトに興味がありますか？小さなアプリケーションを作成するために試してみませんか？まだ記事を公開する必要がありますか？もしそうなら、正確に何を読みたいですか？ Flavorチュートリアルを公開したり、Flavorがどのように配置されているか、TeaVMがどのように機能しているかを伝えることができます。これらのうち、あなたにとってより興味深いものはどれですか？

TeaVM-Java、Kotlin、ScalaでWebフロントエンドを作成するためのツール