vaadin/hilla:前后端集成框架

22-11-17 banq

Hilla是用于Java后端的现代前端框架。构建具有完全类型安全的快速反应式Web应用。由Lit和Spring Boot支持。由Vaadin构建。
Hilla 将 Spring Boot Java 后端与响应式TypeScript 前端集成在一起。它通过类型安全的服务器通信、包含的 UI 组件和集成工具帮助您更快地构建应用程序。

Hilla在服务器上使用Java,在客户端上使用TypeScript(Lit或React)
Hilla由Vaadin构建。它使用SpringBoot后端和TypeScript前端;它使用相同的Vaadin组件集。
架构上的主要区别在于Vaadin Flow运行在服务器上,而Hilla应用运行在客户端上,并通过类型安全端点访问服务器。

Hilla 使用类型安全的端点帮助您轻松访问后端:

// Type info is automatically generated based on Java
import Person from 'Frontend/generated/dev/hilla/demo/entity/Person';
import { PersonEndpoint } from 'Frontend/generated/endpoints';

async function getPeopleWithPhoneNumber() {
  const people: Person[] = await PersonEndpoint.findAll();

  // Compile error: The property is 'phone', not 'phoneNumber'
  return people.filter((person) => !!person.phoneNumber);
}

console.log('People with phone numbers: ', getPeopleWithPhoneNumber());


其中PersonEndpoint.java

@Endpoint
@AnonymousAllowed
public class PersonEndpoint {

    private PersonRepository repository;

    public PersonEndpoint(PersonRepository repository) {
        this.repository = repository;
    }

    public @Nonnull List<@Nonnull Person> findAll() {
        return repository.findAll();
    }
}

Person.java

@Entity
public class Person {

    @Id
    @GeneratedValue
    private Integer id;

    @Nonnull private String firstName;
    @Nonnull private String lastName;
    @Email @Nonnull private String email;
    @Nonnull private String phone;

    // getters, setters
}


按照https://hilla.dev/docs/tutorials上的教程进行操作

Hilla在芬兰语中是云莓的意思,Vaadin是一家芬兰公司(Vaadin=驯鹿)
Hilla是一个全栈框架:
  • - 为您的端点生成TS类型和访问方法(e2 e类型安全)
  • - 包括组件
  • - 用于前端/后端的统一构建工具