Skip to content

Commit 54b7f68

Browse files
committed
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.
1 parent 1f22529 commit 54b7f68

75 files changed

Lines changed: 423 additions & 445 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

articles/building-apps/ai/index.adoc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ order: 69
99

1010
= AI in Vaadin Applications
1111

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.
1313

14-
You'll learn how to:
14+
You will learn how to:
1515

1616
* connect your application to an AI client with popular Java libraries such as Spring AI and LangChain4j,
1717
* choose Vaadin components that create intuitive, AI-powered workflows -- such as `MessageInput`, `MessageList`, and `Scroller`, and

articles/building-apps/ai/quickstart-guide.adoc

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ section-nav: badge-flow
88
---
99

1010

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#
1212

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.
1414

1515
image::images/chatbot-image.png[role=text-center]
1616

@@ -20,7 +20,7 @@ image::images/chatbot-image.png[role=text-center]
2020
== Prerequisites
2121

2222
* Java 17+
23-
* Spring Boot 3.5+ (or newer)
23+
* Spring Boot 3.5+
2424
* Vaadin 24.8+
2525
* An OpenAI API key (`OPENAI_API_KEY`)
2626

@@ -31,7 +31,7 @@ Download a Vaadin Spring starter from http://github.com/vaadin/skeleton-starter-
3131

3232
**Pro Tip**: Starting the application with Hotswap Agent improves your development lifecycle.
3333

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`.
3535

3636

3737
== 2. Add Spring AI dependencies
@@ -72,7 +72,7 @@ Add the Spring AI BOM and the OpenAI starter to import the necessary dependencie
7272

7373
== 3. Configure Your OpenAI Credentials
7474

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:
7676

7777
[source,properties]
7878
----
@@ -86,7 +86,7 @@ spring.ai.openai.api-key=${OPENAI_API_KEY}
8686

8787
== 4. Enable Vaadin Push
8888

89-
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:
9090

9191
[source,java]
9292
----
@@ -156,12 +156,12 @@ public class ChatService {
156156
157157
----
158158

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.
160160

161161

162162
== 6. Build the Chat UI with Vaadin
163163

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:
165165

166166
[source,java]
167167
----
@@ -281,4 +281,4 @@ Start the application, open the browser, and try your first prompts.
281281
* `src/main/resources/application.properties` — OpenAI config
282282
* `pom.xml` — Vaadin + Spring AI dependencies
283283

284-
That's it your Vaadin application now speaks AI. 🚀
284+
That is it -- your Vaadin application now speaks AI.

articles/building-apps/ai/technical-setup/ide/index.adoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Never commit API keys to source control. Prefer environment variables or your CI
5959

6060
== IDE Quick Guides
6161

62-
If you're unsure how to set environment variables in your specific IDE, see:
62+
If you are unsure how to set environment variables in your specific IDE, see:
6363

6464
* <<intellij#,IntelliJ IDEA>> (Ultimate or Community)
6565
* <<vscode#,Visual Studio Code>>

articles/building-apps/ai/technical-setup/index.adoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ Key characteristics:
5555
Popular tools:
5656

5757
* https://ollama.com/[Ollama] - run many LLMs locally with a simple CLI and API.
58-
* https://lmstudio.ai/[OpenLM Studio] - manage and run models locally with a graphical UI.
58+
* https://lmstudio.ai/[LM Studio] - manage and run models locally with a graphical UI.
5959

6060

6161
=== Quick Comparison

articles/building-apps/architecture/api-spi.adoc

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ order: 5
1212

1313
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.
1414

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.
1616

1717

1818
== Application Programming Interface
1919

2020
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.
2121

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:
2323

2424
image::images/api-dependency.png[A diagram of package A and package B, where package A depends on package B]
2525

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.
2727

2828
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:
2929

@@ -105,7 +105,7 @@ public class MyApplicationService {
105105

106106
=== The API is Optional
107107

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.
109109

110110

111111
== Service Provider Interface
@@ -129,7 +129,7 @@ The end result would have been the same -- package B calls package C -- but now
129129

130130
As a rule of thumb, declare an SPI in the following cases:
131131

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.
133133
image:images/spi-unknown.png[A diagram of packages A and B, where a question mark points to an SPI of B]
134134

135135
2. *You need to support multiple implementations*.

articles/building-apps/architecture/index.adoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ section-nav: badge-deep-dive
1111

1212
.Deep Dive - Recommended Approach
1313
[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.
1515

1616
section_outline::[]
1717

articles/building-apps/architecture/layers.adoc

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ order: 1
1010

1111
= Conceptual Layers
1212

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.
1414

1515
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_.
1616

@@ -20,10 +20,10 @@ In traditional web applications, you have the _frontend_ and the _backend_. The
2020
[link=images/layers.png]
2121
image::images/layers.png[A diagram illustrating the UI layer and application layer of a Flow and a Hilla app, respectively]
2222

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.
2424

2525
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.
2626

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.
2828

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

Comments
 (0)