Vaadin에 대해 알아야 할 사항 - 배터리 포함 서버 측 AJAX 프레임워크

저는 에 대해 많이 썼습니다. 너무 열정적이어서 Vaadin에 대한 (Book of Vaadin 외에도)과 Vaadin 7에 대한 , 그리고 썼습니다. 그래도 JVM 세계의 많은 사람들이 Vaadin에 대해 들어본 적이 없다는 사실에 놀랐습니다.

이 글에서는 AJAX와 SSR과 관련하여 Vaadin을 소개하고자 합니다.

Vaadin에 대한 간단한 소개

Vaadin의 장점은 단순함에 있습니다. 백엔드 코드만 작성하면 됩니다 . 잘 읽으세요. Vaadin 개발자는 Java나 JVM 언어, 그리고 Vaadin API만 알면 됩니다. 런타임에 Vaadin은 클라이언트 측 코드, 즉 HTML, JavaScript, CSS를 만듭니다. 이러한 접근 방식은 개발자가 애플리케이션의 핵심 기능에 집중할 수 있게 하여 개발 프로세스를 보다 생산적으로 만듭니다.

Vaadin은 일반 데스크톱 기반 프레임워크와 마찬가지로 구성 요소와 레이아웃을 기반으로 구축됩니다. Swing이나 JavaFX를 알고 있다면 바로 익숙해질 것입니다.

위에서 CSS를 언급했습니다. Vaadin을 사용하면 테마 라는 전용 재사용 가능 패키지에서 CSS를 개발할 수 있습니다. 장식은 테마를 백엔드 개발과 병행하여 개발할 수 있으며 후자를 고수하지 않아도 됩니다. 코드는 특정 템플릿을 사용하거나 HTML에 특정 클래스를 추가할 필요가 없습니다.

Vaadin 설정

Spring Boot 컨텍스트에서 Vaadin을 설정하는 것은 아주 간단합니다.

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. 다른 속성과 함께 Vaadin 버전을 설정합니다.
2. 모든 종속성의 버전을 일관되게 유지하세요.
3. Vaadin Spring Boot 통합 라이브러리를 추가합니다.

Vaadin은 기본적으로 루트에 매핑되는 일반 Java Servlet을 기반으로 합니다. Vaadin Spring Boot 통합을 통해 기본값을 재정의할 수 있습니다. 코드베이스가 여러 프레임워크를 통합하기 때문에 관련 속성을 통해 /vaadin 에 매핑합니다.

 vaadin.url-mapping=/vaadin/*

클라이언트의 첫 번째 요청에서 Vaadin은 JavaScript 엔진의 코드를 반환합니다. 엔진은 구성된 UI를 검색하고 후자의 클라이언트 측을 스캐폴딩하기 위한 후속 요청을 합니다. 그 후부터 엔진은 모든 사용자 상호 작용을 처리하고 필요한 경우 UI를 업데이트합니다.

Vaadin을 사용한 첫 걸음

프로젝트를 설정한 후에는 요청을 받았을 때 Vaadin이 어떤 구성 요소를 표시할지 구성해야 합니다.

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. 구성 요소를 Vaadin 서블릿 하위 컨텍스트 루트에 연결합니다.
2. 정적 페이지 제목을 설정합니다. 동적 제목이 필요한 경우 구현할 수 있습니다.
3. RootComponent 클래스를 정의합니다.
4. VerticalLayout 은 Vaadin이 HTML div 로 렌더링하는 클래스입니다.
5. Vaadin Spring Boot 스타터가 목록을 주입합니다.
6. Vaadin은 첫 번째 브라우저 요청 시 init() 함수를 실행합니다.
7. 다음 코드 조각은 여기에 들어갈 겁니다.

구성 요소 추가

위의 스니펫에서는 Vaadin에서 제공하는 컴포넌트 인 VerticalLayout 을 상속했습니다.

Vaadin Design System에는 UI를 빌드하는 데 사용할 수 있는 구성 요소 세트가 포함되어 있습니다. 구성 요소에는 클라이언트 측 개발을 위한 TypeScript API 외에도 서버 측 Java API가 있습니다.

구성 요소를 사용하려면 먼저 구성 요소를 만든 다음 포함된 레이아웃에 구성 요소를 추가합니다.

--

일부 구성 요소는 다른 구성 요소를 포함할 수 있으며 하위 구성 요소를 배치하는 방법을 알고 있습니다. 예를 들어 VerticalLayout 구성 요소를 열에 위에서 아래로 배치하고 HorizontalLayout 은 행에 왼쪽에서 오른쪽으로 배치합니다.

레이아웃에 구성 요소를 추가하는 것은 간단합니다.

 add(Label("Hello")) //1 add(Label("world!"))

1. init() 함수의 맥락에서.

이것이 완벽하게 작동하지만, 우리는 Kotlin을 사용하기 때문에 사용하여 상황을 개선할 수 있습니다. 위의 스니펫을 다음과 같이 다시 쓸 수 있습니다.

 label("Hello") //1 label("world!")

1. label() HasComponent 인터페이스의 Karibu DSL 확장 함수입니다.

Karibu는 훌륭하지만 약간의 단점이 있습니다. 전체 API에 대한 확장 기능을 제공하지 않습니다. 예를 들어, Grid 구성 요소에 푸터를 추가하려면 일반 API로 돌아가야 합니다.

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

장점은 Karibu가 오픈 소스이므로 추가할 내용이 있으면 항상 기여할 수 있다는 것입니다.

UI와 관련된 특정 구성 요소는 일반적인 이해에 중요하지 않습니다. 관심이 있다면 항상 확인할 수 있습니다.

사용자 상호작용

메인프레임이 컴퓨팅의 왕이었을 때는 터미널을 통해 액세스했습니다. UI는 매우 제한적이었고 렌더링은 "멍청한" 터미널에서 이루어졌습니다. 개인용 컴퓨터는 렌더링 기능을 서버에서 클라이언트로 옮겼습니다. 이때 개발자는 트리거를 통해 구성 요소에 동작을 첨부했습니다. 예를 들어 사용자가 버튼을 클릭하면 Hello world! 인쇄하도록 바인딩할 수 있습니다.

웹 애플리케이션은 이 패러다임을 바꾸었습니다. 이전 기사에서 보여드렸듯이 모든 상호작용은 이제 동기적이든 비동기적이든 요청-응답 흐름에 매핑됩니다. Vaadin은 우리를 원래 패러다임으로 되돌려 놓습니다.

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. 값을 사용하여 새로운 Checkbox 구성 요소를 초기화합니다.

   
   

2. 체크박스의 값이 변경되면 람다를 실행합니다. 즉, 기본 모델의 값이 변경됩니다.

JavaScript 코드는 필요 없습니다. Vaadin이 상호작용을 독립적으로 관리합니다.

결론

이 게시물은 AJAX와 SSR의 맥락에서 Vaadin을 간략하게 소개한 것입니다.

웹 앱에서 프로그래밍을 배우고 요청-응답 모델에 익숙한 대부분의 개발자는 Vaadin에 노출되면 반응이 좋지 않습니다. 그들의 주요 주장은 API가 없다는 것입니다. 제 생각에는 이점입니다. 일부 앱, 특히 비즈니스 앱은 전용 모바일 클라이언트를 개발해야 할 정도로 발전하지 않습니다.

Vaadin에는 소개에서 언급했듯이 기본 CSS 세트가 제공됩니다. 이 기본 테마는 Vaadin 애플리케이션이 처음부터 보기 좋게 보이도록 보장하여 사용자에게 편안하고 시각적으로 매력적인 작업 환경을 제공합니다. 그러나 항상 다른 것을 통합하거나 직접 개발할 수도 있습니다.

그러나 실제 이점은 조직 수준에서 다시 발견됩니다. 서론 게시물에서 프런트엔드와 백엔드 개발을 분리하면 통합 중에 문제가 발생한다고 언급했습니다. Vaadin에는 그러한 분리가 없기 때문에 프런트엔드와 백엔드 사이에 통합 단계가 없으므로 프로젝트 계획이 더 예측 가능합니다. 마찬가지로 테마는 개발과 병행하여 수행할 수 있습니다.

이 게시물의 전체 소스 코드는 GitHub에서 찾을 수 있습니다.

더 자세히 알아보려면:

---

원래 2024년 10월 13일 에 게시됨