You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fix style issues across building-apps documentation section
Expand contractions to full forms, fix grammar errors, and apply
style consistency improvements across 75 files in the building-apps
documentation section.
Copy file name to clipboardExpand all lines: articles/building-apps/ai/index.adoc
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ order: 69
9
9
10
10
= AI in Vaadin Applications
11
11
12
-
In this section, you'll learn how to connect a Vaadin application to a Large Language Model (LLM) and integrate AI features into your workflows. Using common Vaadin application scenarios as examples, you'll explore typical UI patterns for AI integration. The focus is on simple, adaptable examples that you can quickly implement in your own projects.
12
+
In this section, you will learn how to connect a Vaadin application to a Large Language Model (LLM) and integrate AI features into your workflows. Using common Vaadin application scenarios as examples, you will explore typical UI patterns for AI integration. The focus is on simple, adaptable examples that you can quickly implement in your own projects.
13
13
14
-
You'll learn how to:
14
+
You will learn how to:
15
15
16
16
* connect your application to an AI client with popular Java libraries such as Spring AI and LangChain4j,
17
17
* choose Vaadin components that create intuitive, AI-powered workflows -- such as `MessageInput`, `MessageList`, and `Scroller`, and
Copy file name to clipboardExpand all lines: articles/building-apps/ai/quickstart-guide.adoc
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,9 +8,9 @@ section-nav: badge-flow
8
8
---
9
9
10
10
11
-
= Quick Start-Guide: Add an AI Chat Bot to a Vaadin + Spring Boot Application [badge-flow]#Flow#
11
+
= Quick Start-Guide: Add an AI Chatbot to a Vaadin + Spring Boot Application [badge-flow]#Flow#
12
12
13
-
This guide shows how to connect a Large Language Model (LLM) into a Vaadin application using Spring AI and Spring Boot. You'll build a minimal chat UI with Vaadin provided components **MessageList** and **MessageInput**, stream responses token-by-token, and keep a conversational tone in the dialog with the AI.
13
+
This guide shows how to connect a Large Language Model (LLM) into a Vaadin application using Spring AI and Spring Boot. You build a minimal chat UI with Vaadin provided components **MessageList** and **MessageInput**, stream responses token-by-token, and keep a conversational tone in the dialog with the AI.
@@ -31,7 +31,7 @@ Download a Vaadin Spring starter from http://github.com/vaadin/skeleton-starter-
31
31
32
32
**Pro Tip**: Starting the application with Hotswap Agent improves your development lifecycle.
33
33
34
-
Start with a cleaning and remove the default service `GreetService` and clear the existing UI content. You'll implement everything in `MainView`.
34
+
Start with a cleaning and remove the default service `GreetService` and clear the existing UI content. You will implement everything in `MainView`.
35
35
36
36
37
37
== 2. Add Spring AI dependencies
@@ -72,7 +72,7 @@ Add the Spring AI BOM and the OpenAI starter to import the necessary dependencie
72
72
73
73
== 3. Configure Your OpenAI Credentials
74
74
75
-
To access the API of OpenAI you need a license key. The preferred way to provide the key is through an environment variable, as this makes it available to other applications as well. After setting the environment variable on your system, refer to it from `application.properties` like this:
75
+
To access the API of OpenAI you need an API key. The preferred way to provide the key is through an environment variable, as this makes it available to other applications as well. After setting the environment variable on your system, refer to it from `application.properties` like this:
To prevent end-users from sitting in front of a blank screen waiting for a response, you'll stream tokens asynchronously and update the UI live with response tokens. To do this, you need to enable server push:
89
+
To prevent end-users from sitting in front of a blank screen waiting for a response, you will stream tokens asynchronously and update the UI live with response tokens. To do this, you need to enable server push:
90
90
91
91
[source,java]
92
92
----
@@ -156,12 +156,12 @@ public class ChatService {
156
156
157
157
----
158
158
159
-
Why a chat memory? **ChatMemory** keeps context of the conversations so users don't have to repeat themselves. The `chatId` keeps the context for a specific chat and doesn't share it with other chats and users.
159
+
Why a chat memory? **ChatMemory** keeps context of the conversations so users do not have to repeat themselves. The `chatId` keeps the context for a specific chat and does not share it with other chats and users.
160
160
161
161
162
162
== 6. Build the Chat UI with Vaadin
163
163
164
-
Use `MessageList` to render the conversation as Markdown and `MessageInput` to handle the user prompts. Wrap the list in a `Scroller` so long chats don't grow the layout beyond the browser window:
164
+
Use `MessageList` to render the conversation as Markdown and `MessageInput` to handle the user prompts. Wrap the list in a `Scroller` so long chats do not grow the layout beyond the browser window:
165
165
166
166
[source,java]
167
167
----
@@ -281,4 +281,4 @@ Start the application, open the browser, and try your first prompts.
Copy file name to clipboardExpand all lines: articles/building-apps/architecture/api-spi.adoc
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,18 +12,18 @@ order: 5
12
12
13
13
Whenever you design a building block for a Vaadin application - such as an application service or a UI component, you should think about how it interacts with the rest of the application. This typically happens through an *Application Programming Interface* (API), a *Service Provider Interface* (SPI), or a combination of both.
14
14
15
-
In this article, you'll learn what these mean, when to use them, and how to implement them in Java.
15
+
In this article, you learn what these mean, when to use them, and how to implement them in Java.
16
16
17
17
18
18
== Application Programming Interface
19
19
20
20
You typically design an API for either individual _classes_, or for entire _packages_. The API allows other parts of the application to _call_ your class or package. The other parts of the application depend on said class or package.
21
21
22
-
In this example, class B exposes an API that class A can call. Thus, class A depends on B and have to change if the API of class B changes:
22
+
In this example, class B exposes an API that class A can call. Thus, class A depends on B and has to change if the API of class B changes:
23
23
24
24
image::images/api-dependency.png[A diagram of package A and package B, where package A depends on package B]
25
25
26
-
In Java, the API of a class is its _public_ methods. The API of a package are the _public_ classes and interfaces. All classes or methods that are not considered a part of the API should have a different visibility than public, such as package private.
26
+
In Java, the API of a class is its _public_ methods. The API of a package is the _public_ classes and interfaces. All classes or methods that are not considered a part of the API should have a different visibility than public, such as package private.
27
27
28
28
In this example, `MyApplicationService` class is a part of the public API of the `com.example.application.service` package. The `publicApi()` method is a part of the public API of the class:
29
29
@@ -105,7 +105,7 @@ public class MyApplicationService {
105
105
106
106
=== The API is Optional
107
107
108
-
Not all classes and packages require a public API. For instance, a UI view is typically only called by the web browser. Therefore, it doesn't need an API at all.
108
+
Not all classes and packages require a public API. For instance, a UI view is typically only called by the web browser. Therefore, it does not need an API at all.
109
109
110
110
111
111
== Service Provider Interface
@@ -129,7 +129,7 @@ The end result would have been the same -- package B calls package C -- but now
129
129
130
130
As a rule of thumb, declare an SPI in the following cases:
131
131
132
-
1. *You don't yet know what the implementation is going to look like*. In this example, you can finish work on package B and use a mock implementation of the SPI until you start on the real implementation.
132
+
1. *You do not yet know what the implementation is going to look like*. In this example, you can finish work on package B and use a mock implementation of the SPI until you start on the real implementation.
133
133
image:images/spi-unknown.png[A diagram of packages A and B, where a question mark points to an SPI of B]
134
134
135
135
2. *You need to support multiple implementations*.
Copy file name to clipboardExpand all lines: articles/building-apps/architecture/index.adoc
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ section-nav: badge-deep-dive
11
11
12
12
.Deep Dive - Recommended Approach
13
13
[IMPORTANT]
14
-
This *opinionated* deep-dive explains core concepts (for example, architectural layers and monoliths) and gives a practical, recommended way to architect Vaadin applications. If you're new, this is a good place to start; if you're experienced, feel free to use whatever patterns work for you.
14
+
This *opinionated* deep-dive explains core concepts (for example, architectural layers and monoliths) and gives a practical, recommended way to architect Vaadin applications. If you are new, this is a good place to start; if you are experienced, feel free to use whatever patterns work for you.
Copy file name to clipboardExpand all lines: articles/building-apps/architecture/layers.adoc
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ order: 1
10
10
11
11
= Conceptual Layers
12
12
13
-
If you have any previous experience with software architectures, you have probably heard about layers. You may have run into terms like “presentation layer”, “business logic layer”, “infrastructure layer”, etc. Layers can help you reason about the structure of the application, but they can also impose unnecessary restrictions. For instance, if you require that a layer can only depend on the layers below it, you can't use Service Provider Interfaces (SPI). Because of this, you should focus on system components with clear <<api-spi#,APIs and SPIs>> rather than layers in your Vaadin applications.
13
+
If you have any previous experience with software architectures, you have probably heard about layers. You may have run into terms like “presentation layer”, “business logic layer”, “infrastructure layer”, etc. Layers can help you reason about the structure of the application, but they can also impose unnecessary restrictions. For instance, if you require that a layer can only depend on the layers below it, you cannot use Service Provider Interfaces (SPI). Because of this, you should focus on system components with clear <<api-spi#,APIs and SPIs>> rather than layers in your Vaadin applications.
14
14
15
15
That said, two layers make sense to use in Vaadin applications as well: the _UI layer_ (also known as the _presentation layer_) and the _application layer_.
16
16
@@ -20,10 +20,10 @@ In traditional web applications, you have the _frontend_ and the _backend_. The
20
20
[link=images/layers.png]
21
21
image::images/layers.png[A diagram illustrating the UI layer and application layer of a Flow and a Hilla app, respectively]
22
22
23
-
When you are building your user interface with Flow, you write the user interface in Java and run it on the server - the backend. Unless you have created any web components of your own, all the code that runs in the browser -- the frontend -- is provided by Vaadin in one way or the other. The frontend and backend don't map directly onto the user interface and business logic.
23
+
When you are building your user interface with Flow, you write the user interface in Java and run it on the server - the backend. Unless you have created any web components of your own, all the code that runs in the browser -- the frontend -- is provided by Vaadin in one way or the other. The frontend and backend do not map directly onto the user interface and business logic.
24
24
25
25
When you are building your user interface with Hilla, you write the user interface in React and run it in the browser. The rest of the application runs on the server. In this case, the frontend and backend correspond to the user interface and business logic.
26
26
27
-
It's also possible to write hybrid applications, where you write some parts of the user interface in Java and other parts in React. In this case, parts of the user interface run in the browser and parts on the server.
27
+
It is also possible to write hybrid applications, where you write some parts of the user interface in Java and other parts in React. In this case, parts of the user interface run in the browser and parts on the server.
28
28
29
-
Because of this, it makes more sense to talk about the UI layer and the application layer, as opposed to the frontend and the backend, or the user interface and the business logic. It's important to remember that these layers are _conceptual_ rather than physical. In a Flow or hybrid application, the UI layer covers both the browser and a part of the server. In a Hilla application, the UI layer is limited to the browser alone. In all cases, the application layer resides on the server.
29
+
Because of this, it makes more sense to talk about the UI layer and the application layer, as opposed to the frontend and the backend, or the user interface and the business logic. It is important to remember that these layers are _conceptual_ rather than physical. In a Flow or hybrid application, the UI layer covers both the browser and a part of the server. In a Hilla application, the UI layer is limited to the browser alone. In all cases, the application layer resides on the server.
0 commit comments