各クライアント拡張テクノロジーの詳細を掘り下げる前に、プロジェクト設定の共通手順を理解することが重要です。 私の要件は非常に単純なものでした。 前回の投稿での バックエンド開発者の視点から見てみましょう フロントエンドのビルド ステップはありません。TypeScript や縮小などはありません。 すべての依存関係はバックエンドアプリ、 Mavenから管理されます。 つまり ここで注目すべきは、私がこれから説明するテクノロジーは、Vaadin を除いて、同様のアプローチを採用しているということです。Vaadin は、そのユニークなパラダイムにより、さまざまなアプローチの中でも際立っています。 ウェブジャー WebJars は、まさにこれらの要件に対応するために テクノロジーです。 2012 年に James Ward によって設計された  WebJars は、JAR (Java Archive) ファイルにパッケージ化されたクライアント側の Web ライブラリ (jQuery や Bootstrap など) です。  JVMベースのWebアプリケーションにおけるクライアント側の依存関係を明示的かつ簡単に管理します。  JVMベースのビルドツール（Maven、Gradle、sbtなど）を使用してクライアント側の依存関係をダウンロードします。 使用しているクライアント側の依存関係を把握する 推移的な依存関係は自動的に解決され、オプションでRequireJS経由でロードされます。   にデプロイ Maven Central が寛大に提供しているパブリック CDN JSDelivr  --  Webjars ウェブサイト WebJar は、Web アセットを含む通常の JAR です。プロジェクトの依存関係に WebJar を追加することは特別なことではありません。   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> </dependencies> フレームワークの役割は、URL の下にあるアセットを公開することです。たとえば、Spring Boot は クラスでこれを実行します。 WebMvcAutoConfiguration   public void addResourceHandlers(ResourceHandlerRegistry registry) { if (!this.resourceProperties.isAddMappings()) { logger.debug("Default resource handling disabled"); return; } addResourceHandler(registry, this.mvcProperties.getWebjarsPathPattern(), //1 "classpath:/META-INF/resources/webjars/"); addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> { registration.addResourceLocations(this.resourceProperties.getStaticLocations()); if (this.servletContext != null) { ServletContextResource resource = new ServletContextResource(this.servletContext, SERVLET_LOCATION); registration.addResourceLocations(resource); } }); } デフォルトは です "/webjars/**" JAR 内では、それぞれのパスと名前でアセットにアクセスできます。合意された構造は、アセットを 内に格納することです。  の構造は次のとおりです。 resources/webjars/<library>/<version> alpinejs-3.14.1.jar   META-INF |_ MANIFEST.MF |_ maven.org.webjars.npm.alpinejs |_ resources.webjars.alpinejs.3.14.1 |_ builds |_ dist |_ cdn.js |_ cdn.min.js |_ src |_ package.json  Spring Boot 内では、  を使用して、縮小されていないバージョンにアクセスできます。 /webjars/alpinejs/3.14.1/dist/cdn.js 開発者はクライアント側のライブラリを頻繁にリリースします。POM で依存関係のバージョンを変更する場合、フロントエンド パスを複数の場所で変更する必要があります。これは退屈で、付加価値がなく、変更を見逃すリスクがあります。  WebJars Locator プロジェクトは、バージョンなしのパス   を提供することで、これらすべての問題を回避することを目指しています。これを実現するには、依存関係に  JAR を追加します。 (例: /webjars/alpinejs/dist/cdn.js webjars-locator   <dependencies> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>alpinejs</artifactId> <version>3.14.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.52</version> </dependency> </dependencies> このアプローチをすべてのフロントエンド テクノロジに使用します。また、より見栄えの良いユーザー インターフェイスを提供するために、   CSS ライブラリも追加します。 Bootstrap タイムリーフ Thymeleaf はサーバー側のレンダリング テクノロジーです。   、Web 環境とスタンドアロン環境の両方に対応した最新のサーバー側 Java テンプレート エンジンです。 Thymeleaf は  Thymeleaf の主な目標は、開発ワークフローにエレガントで自然なテンプレート (ブラウザーで正しく表示でき、静的プロトタイプとしても機能する HTML) を導入して、開発チーム内での強力なコラボレーションを可能にすることです。  Spring Framework 用のモジュール、お気に入りのツールとの多数の統合、独自の機能をプラグインする機能などにより、Thymeleaf は現代の HTML5 JVM Web 開発に最適ですが、できることは他にもたくさんあります。  -- タイムリーフ 私が初めて Thymeleaf について知ったとき、私はまだコンサルタントでした。当時、Java Server Pages は終焉を迎えようとしていました。Java Server Faces がそれを置き換えようとしていましたが、私の意見では、それは失敗でした。  Thymeleaf は素晴らしいアプローチだと思いました。設計時には静的な環境で結果を確認でき、開発時にはサーバー環境で確認することができます。さらに良いことに、同じファイルを使用して、一方から他方へシームレスに移動することができます。この機能が使用されているのを私は見たことがありません。 ただし、Spring Boot は Thymeleaf を完全にサポートしています。さらに嬉しいことに、後者はページ上の HTML 名前空間を介して利用できます。JSF に賛成していない場合 (ネタバレ: 私は賛成しませんでした)、Thymeleaf は今日の SSR テンプレート言語として最適です。 以下はウェブサイトのデモサンプルです:   <table> <thead> <tr> <th th:text="#{msgs.headers.name}">Name</th> <th th:text="#{msgs.headers.price}">Price</th> </tr> </thead> <tbody> <tr th:each="prod: ${allProducts}"> <td th:text="${prod.name}">Oranges</td> <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td> </tr> </tbody> </table> この技術について詳しく知りたい場合は、Thymeleaf 101 をご覧ください。  HTML ファイルを開くと、ブラウザにはタグ内の通常の値 、  と が表示されます。これをサーバーで使用すると、Thymeleaf が起動し、   、   、  から計算された値がレンダリングされます。 (つまり Name Price th:text #{msgs.headers.name} #{msgs.headers.price}   演算子は、モデルに渡されたのと同じ名前の Spring Bean を照会します。    と同等です。 $ ${prod.name} model.getBean("prod").getName()"   は関数を呼び出します。 #   ループを許可します。 th:each フロントエンドフレームワークとのThymeleafの統合 すべてではないにしても、ほとんどのフロントエンド フレームワークはクライアント側モデルで動作します。サーバー側モデルとクライアント側モデルの間に橋渡しをする必要があります。 私が使用しているサーバー側コードは次のとおりです。   data class Todo(val id: Int, var label: String, var completed: Boolean = false) //1 fun config() = beans { bean { mutableListOf( //2 Todo(1, "Go to the groceries", false), Todo(2, "Walk the dog", false), Todo(3, "Take out the trash", false) ) } bean { router { GET("/") { ok().render( //3 "index", //4 mapOf("title" to "My Title", "todos" to ref<List<Todo>>()) //5 ) } } } }   クラスを定義します。 Todo  Bean ファクトリにメモリ内リストを追加します。通常のアプリでは、  を使用してデータベースから読み取ります。 Repository  HTML テンプレートをレンダリングします。 テンプレートは、Thymeleaf 属性を持つ です。 src/main/resources/templates/index.html モデルをページのコンテキストに配置します。  Thymeleaf は、  タグに 属性を提供します。これは、サーバー側のデータを JavaScript 変数としてレンダリングします。ドキュメントには、私が説明するよりもはるかにわかりやすく説明されています。 <script> th:inline="javascript" スクリプトのインライン化で最初にできることは、次のように式の値をスクリプトに書き込むことです。   <script th:inline="javascript"> /*<![CDATA[*/ ... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ... /*]]>*/ </script>   構文は、Thymeleaf に含まれている式を評価するように指示します。ただし、ここではさらに意味があります。 /*[[...]]*/ これは JavaScript コメント であるため、ブラウザーでページを静的に表示するときには、この式は無視されます。 (/*...*/) インライン式 (   ) の後のコードは、ページを静的に表示するときに実行されます。 'Sebastian'  Thymeleaf は式を実行して結果を挿入しますが、インライン式自体の後の行 (静的に表示されるときに実行される部分) のすべてのコードも削除します。  --  Thymeleaf ドキュメント 上記をコードに適用すると、Spring によって渡されるモデル属性を次のように取得できます。   <script th:inline="javascript"> /*<![CDATA[*/ window.title = /*[[${title}]]*/ 'A Title' window.todos = /*[[${todos}]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] /*]]>*/ </script> サーバー側でレンダリングすると、結果は次のようになります。   <script> /*<![CDATA[*/ window.title = "My title"; window.todos: [{"id":1,"label":"Go to the groceries","completed":false},{"id":2,"label":"Walk the dog","completed":false},{"id":3,"label":"Take out the trash","completed":false}] /*]]>*/ </script> まとめ この投稿では、このシリーズの残りの部分で使用する 2 つのコンポーネントについて説明しました。  WebJars は、Maven POM 内のクライアント側の依存関係を管理します。  Thymeleaf は、Spring Boot とうまく統合されるテンプレート メカニズムです。 この投稿の完全なソースコードは GitHub にあります。   https://github.com/ajavageek/compare-frontends?embedable=true さらに詳しく: ウェブジャー Spring Boot の WebJars 手順 WebJars の紹介 2024年9月15日に で最初に公開されました A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

このオーディオは、ストーリーの元の言語で制作されています。

Spring Boot でサーバーサイドレンダリングを行う方法

About Author

コメント

ラベル

この記事は

Related Stories

Telegram: クリプト島と本土を結ぶ橋

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

Telegram: クリプト島と本土を結ぶ橋

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps