업무용 앱이 형편없어서는 안 됩니다(Vaadin이 보장합니다).

직장 앱이 형편없어서는 안 됩니다.

하지만 우리 모두는 직장에서 하나의 앱을 가지고 있습니다...


이 게시물에서는 Vaadin을 구축하는 이유에 대해 약간의 통찰력을 제공하고자 합니다.

직장 앱이 중요한 이유

직장 앱은 비즈니스를 운영하는 앱입니다. 그들 없이는 많은 일이 멈출 것입니다.

그러나 그들은 종종 최악의 앱이기도 합니다. 사람들을 온보딩하는 데는 시간이 오래 걸립니다. 그들은 느립니다. 실수는 일반적이며 사용자를 실망시킵니다. 하루에 8시간만 사용하면 좋은 점 😅

그래서 Vaadin을 만들었습니다.

22년 전, 핀란드의 괴짜 몇 명이 의료 웹 앱을 만들고 있었습니다. 그들은 실제 사용자 가치가 아니라 빌딩 블록에 얼마나 많은 시간을 소비하는지에 대해 금세 좌절했습니다. 그때 그들이 Vaadin을 만들기 시작했습니다.

기술과 특정 문제는 지난 20년 동안 변화했지만 우수한 엔터프라이즈 앱을 구축하는 것은 여전히 ​​어려운 일입니다.

업무용 앱은 소비자 앱과 다른 요구 사항이 있습니다.

훌륭한 직장 앱에는 훌륭한 UX가 있어야 합니다. 액세스 가능하고 안전하며 신뢰할 수 있어야 하며 많은 양의 데이터를 처리해야 합니다.

아, 빠듯한 예산으로 빠르게 구축하고 수년 동안 유지 관리해야 합니다.

보기가 5개뿐인 소비자 앱의 각 보기를 최적화하는 데 $100,000 정도를 쓰는 것은 괜찮을 수 있습니다. 그러나 수십 또는 수백 개의 복잡한 보기를 구축할 때는 다른 게임입니다.

훌륭한 UX를 대규모로 구축

개발자가 훌륭한 UX를 대규모로 구축할 수 있도록 Vaadin은 접근성components을 포함하는 디자인 시스템을 만들고 이를 사용하는 방법에 대한 패턴을 제안했습니다.

회사의 모양과 느낌에 맞게 디자인 시스템을 사용자 정의할 수 있습니다.

기술과 선호도에 맞는 프런트엔드 프레임워크

기본 설정 및 팀 기술에 따라 Vaadin은 이러한 구성 요소에서 앱을 구축하는 두 가지 방법을 지원합니다.

🌊 바딘 흐름
🟠 힐라

🌊 바딘 흐름

Java로 작업하는 것을 선호하는 팀과 조직을 위해 Vaadin Flow은 100% Java로 앱을 구축하는 생산적인 방법을 제공합니다.

@PageTitle("Flow")
@Route("flow") // localhost:8080/flow
public class FlowView extends VerticalLayout {
    TextField name = new TextField("Name");
    EmailField email = new EmailField("Email");
    DatePicker birthDate = new DatePicker("Birth date");

    public FlowView() {
        var binder = new BeanValidationBinder<>(Person.class);
        binder.bindInstanceFields(this);
        var saveButton = new Button("Save") {
            {
                addThemeVariants(ButtonVariant.LUMO_PRIMARY);
            }
        };
        add(name, email, birthDate, saveButton);
    }

}

Vaadin Flow를 사용하여 Java로 작성된 UI




결과 UI.

🟠 힐라

Hilla은 프런트엔드 및 백엔드 기술을 모두 갖춘 팀과 브라우저에 더 가깝게 작업하는 것을 선호하는 개발자를 위해 만들어졌습니다. JavaSpring Boot 백엔드를 반응형 TypeScriptLit 프런트엔드와 결합합니다.

@customElement('hilla-view')
export class HillaView extends View {
  @state() name = '';
  @state() names: string[] = [];

  render() {
    return html`
      <vaadin-text-field
        label="Name"
        .value=${this.name}
        @change=${this.nameChanged}></vaadin-text-field>
      <vaadin-button @click=${this.addName}>Say hello</vaadin-button>

      ${this.names.map((name) => html`<p>${name}</p>`)}
    `;
  }

  nameChanged(e: TextFieldChangeEvent) {
    this.name = e.target.value;
  }

  addName() {
    this.names = [...this.names, this.name];
    this.name = '';
  }
}

Hilla의 동일한 보기는 TypeScript와 HTML로 작성됩니다.





결과 UI는 동일합니다.

Java 백엔드용으로 구축된 프런트엔드 스택

어떤 프레임워크를 사용하든 Java 백엔드용으로 명시적으로 구축된 최신 웹 프레임워크의 이점을 누릴 수 있습니다.

🦺 Database-to-view 유형 안전성
🖍️ 공유 검증
☕️ Spring 및 Java 라이브러리와의 원활한 통합

🦺 풀스택형 안전성

전체 스택 유형의 안전성은 앱을 더 빠르게 빌드할 수 있음을 의미합니다. 항상 문서를 읽는 대신 자동 완성을 사용하여 API를 탐색할 수 있습니다.

하지만 실제로 성과를 거두는 곳은 누군가 지금으로부터 6개월 후에 백엔드를 변경할 때입니다. 프로덕션 오류가 아니라 컴파일 오류가 발생합니다 💥


백엔드 호출에서 반환된 개체의 속성을 탐색합니다.

🖍️ 백엔드와 프런트엔드 간의 공유 유효성 검사 규칙

백엔드와 UI 양식 간에 유효성 검사 규칙을 공유하는 기능은 코드 중복이 적고 최종 사용자에게 실망스러운 오류가 적다는 것을 의미합니다. (모든 것을 올바르게 채우는 것처럼 서버가 아니오라고 합니다 🚫)

public class Person {

  @NotBlank
  private String name;
  @NotBlank
  private String email;
  @Past
  private LocalDate birthDate;

  // Constructor, getters, setters
}

Java Bean 유효성 검사 주석을 사용하여 유효성 검사를 정의합니다.




동일한 유효성 검사가 서버와 클라이언트 모두에서 실행됩니다.

☕️ Java 백엔드에 직접 액세스

Vaadin은 Java용으로 제작되었기 때문에 데이터 작업이 쉽고 원활합니다.

페이징된 Spring 데이터 리포지토리에 데이터 그리드를 연결하는 것과 같습니다.

public class PersonListView extends VerticalLayout {

    public PersonListView(PersonRepository repo) {
        var grid = new Grid<>(Person.class);
        grid.setItems(query -> 
            repo.findAll(PageRequest.of(
                    query.getPage(), 
                    query.getPageSize()))
                .stream());
    }
}

페이징 스프링 데이터 리포지토리에 연결된 Vaadin 그리드.

Vaadin은 더 나은 직장 앱 UX를 구축할 수 있도록 도와줍니다.

그렇다면 Vaadin을 구축하는 이유는 무엇입니까? 우리는 업무용 앱이 형편없어서는 안 된다고 생각하고 그렇지 않도록 보장하고 싶기 때문입니다.

전 세계의 모든 앱을 직접 수정할 수는 없지만 더 나은 앱을 쉽고 재미있게 만들 수 있는 도구를 개발자에게 제공할 수 있습니다.

Vaadin에 대해 자세히 알아보고 시작하기http://vaadin.com
또는 https://hilla.dev