You may not need JavaScript Single Page Applications for Java Developers Simon Martinelli @simas_ch martinelli.ch

About me

ERP UI Modernization A Real-World Project

Existing System • Existing ERP System based on Oracle Forms • Customizable by the customer → Goal: Build a modern web frontend ~800 Forms ~2000 Tables und Views ~5000 Procedures und Functions ~100 User Defined Types

Goal

UI Editor

Runtime Generated UI UI Data Generate UI User accesses module Based on user rights and data UI ready

UI Frameworks

UI Models • Server-Side Rendering • JSF • Spring MVC with Thymeleaf • Single Page Application • React, Angular, Vue etc. • Vaadin https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

State • Session Scope • Single Page Application • Vaadin

https://vaadin.com

History HTML AJAX GWT Web Components .1 3 4 5 6 7 8 10 TypeScript Lit .2 LTS 14 15 Vaadin Components & Flow 23 … Hilla

Why Vaadin? • Type-safe Java API • A rich component model • Grids with paging, sorting, and filtering • Forms with validation and conversion • Bi-directional Data Binding • No REST API • Direct access from UI code to services or repositories → A great fit for data-centric business applications

No content

Example Code Vaadin Flow @Route public class HelloView extends VerticalLayout { public HelloView() { TextField textField = new TextField("Your Name"); Label label = new Label(); Button button = new Button("Greet", e -> label.setText("Hello, " + textField.getValue())); add(textField, label, button); } }

Routing @Route(value = "S450", layout = MainLayout.class) public class S450 implements HasUrlParameter { @Override public void setParameter(BeforeEvent event, @OptionalParameter String parameter) { Location location = event.getLocation(); QueryParameters queryParameters = location.getQueryParameters(); Map> parameterMap = queryParameters.getParameters(); ... } }

Grid • Paging with lazy loading • Sortable, filterable and editable Grid grid = new Grid<>(CustomerRecord.class); grid.setColumns("id", "firstName", "lastName", "email"); Grid.Column editColumn = grid.addColumn( new ComponentRenderer<>(customer -> new RouterLink("Edit", CustomerView.class, customer.getId()))); editColumn.setFrozen(true); grid.setColumnReorderingAllowed(true);

Data Provider // In-Memory grid.setItems(List.of("Barcelona, "Berne"); // Lazy grid.setItems( query -> repository.findAll(createFilter(query), createOrderBy(query), query.getOffset(), query.getLimit()), query -> repository.count(createFilter(query)) );

Forms • mit und binder.forField(id) .withNullRepresentation("") .withConverter(new StringToIntegerConverter(0, "Integers only")) .withValidator((value, context) -> value > 0 ? ValidationResult.ok() : ValidationResult.error("Id must be greater than 0")) .bind(EmployeeRecord::getId, EmployeeRecord::setId);

Push • Activated with @Push • Uses Atmosphere button.addClickListener(event -> taskExecutor.execute(() -> { // do something that takes a while button.getUI().ifPresent(ui -> ui.access(() -> Notification.show("Done!"))); }));

Testbench • Uses Selenium and WebDrivers @Test public void say_hello() { $(TextFieldElement.class).id("name").setValue("World"); $(ButtonElement.class).id("say-hello").click(); LabelElement text = $(LabelElement.class).id("text"); assertEquals("Hello World", text.getText()); }

Karibu Testing • Unit Testing library for Vaadin • Open Source https://github.com/mvysny/karibu-testing @Test void say_hello() { _get(TextField.class, spec -> spec.withId("name")).setValue("World"); _get(Button.class, spec -> spec.withId("say-hello")).click(); Label label = _get(Label.class, spec -> spec.withId("text")); assertThat(label.getText()).isEqualTo("Hello World"); }

Spa, PWA et cetera • A Vaadin application is a SPA • PWA Support • Web App Manifest • Information about an application, e.g., name, theme, icon and description. These details are required to create an installable version of the web application • Service Worker • Runs separately from the browser thread • Intercepts network requests • Cached and retrieves resources from the cache • Delivers push notifications

https://jooq.org

jOOQ • Type-safe SQL with Java • Two main componentes • Generator • DSL

jOOQ Generator org.jooq jooq-codegen-maven org.jooq.meta.extensions.ddl.DDLDatabase scripts src/main/resources/db/migration/*.sql ch.martinelli.vaadin.demo.db target/generated-sources/jooq

Metamodel public class Employee extends TableImpl { public final TableField ID = createField(DSL.name("ID"), SQLDataType.INTEGER.nullable(false) .defaultValue(DSL.field("NEXT VALUE FOR \"PUBLIC\".\"SECURITY_GROUP_SEQ\"", SQLDataType.INTEGER)), this, ""); public final TableField NAME = createField("NAME", SQLDataType.VARCHAR(255).nullable(false), this, ""); public final TableField DEPARTMENT_ID = createField("DEPARTMENT_ID", SQLDataType.INTEGER.nullable(false), this, ""); @Override public UniqueKey getPrimaryKey() { return Keys.CONSTRAINT_7; } ... }

jOOQ DSL Result records = dslContext .selectFrom(EMPLOYEE) .fetch(); dslContext .insertInto(DEPARTMENT) .columns(DEPARTMENT.NAME) .values("IT") .execute(); Result> records = dslContext .select(EMPLOYEE.NAME) .from(EMPLOYEE) .join(DEPARTMENT).on(DEPARTMENT.ID.eq(EMPLOYEE.DEPARTMENT_ID)) .where(DEPARTMENT.NAME.eq("IT")) .fetch();

CRUD with jOOQ • jOOQ generates for each table with a unique key an implementation of UpdateableRecord // Store (insert or update) a record to the database. int store() throws DataAccessException; // Delete a record from the database int delete() throws DataAccessException; // Refresh a record from the database. void refresh() throws DataAccessException;

Let's See Some Code https://start.vaadin.com

Conclusion • Creating the entire UI with Java makes the life (for Java developers) easier • jOOQ enables type-safe SQL in Java • Vaadin and jOOQ are a great combination when developing data centric business apps

Thank you! • Example code https://github.com/simasch/spring-io-2022-vaadin • Web https://martinelli.ch • E-Mail simon@martinelli.ch • Twitter simas_ch • LinkedIn https://linkedin.com/in/simonmartnelli