Migrating from Vaadin to Oorian

If you're considering moving from Vaadin to Oorian, this guide will help you understand the differences and plan your migration strategy.

Why Migrate?

Common reasons teams consider migration:

• Licensing costs as your team grows
• Need for UI components Vaadin doesn't provide
• Desire for more flexibility in component choice
• Performance concerns with specific Vaadin components

Conceptual Mapping

Vaadin	Oorian
@Route	@Page
VerticalLayout/HorizontalLayout	Div with CSS Flexbox
Grid	AgGrid, SfDataGrid, etc.
TextField	TextInput
Button	Button
Notification	Toast (SweetAlert2)

Code Comparison

Vaadin

@Route("customers")
public class CustomerView extends VerticalLayout {
    public CustomerView(CustomerService service) {
        Grid<Customer> grid = new Grid<>(Customer.class);
        grid.setItems(service.findAll());
        grid.addColumn("name").setHeader("Name");
        grid.addColumn("email").setHeader("Email");

        Button addButton = new Button("Add", e -> openDialog());

        add(addButton, grid);
    }
}

Oorian

@Page("/customers")
public class CustomerPage extends HtmlPage implements MouseClickListener
{
    private CustomerService service;

    @Override
    protected void createBody(Body body)
    {
        Div container = new Div();
        container.setDisplay(Display.FLEX);
        container.setFlexDirection(FlexDirection.COLUMN);
        container.addStyleAttribute("gap", "16px");

        Button addButton = new Button("Add");
        addButton.registerListener(this, MouseClickedEvent.class);
        container.addElement(addButton);

        AgGrid grid = new AgGrid();
        grid.setRowData(service.findAll());
        grid.addColumn("name", "Name");
        grid.addColumn("email", "Email");
        container.addElement(grid);

        body.addElement(container);
    }

    @Override
    public void onEvent(MouseClickedEvent event)
    {
        openDialog();
    }
}

Migration Strategy

Phase 1: New Features in Oorian

Build new pages in Oorian while maintaining existing Vaadin code.

Phase 2: Migrate Shared Components

Convert common UI components to Oorian equivalents.

Phase 3: Page-by-Page Migration

Migrate pages incrementally, starting with simpler ones.

Phase 4: Remove Vaadin

Once all pages are migrated, remove Vaadin dependencies.

Conclusion

Migration from Vaadin to Oorian is a gradual process. The conceptual models are similar, making the transition manageable. The payoff is flexibility, reduced licensing costs, and access to best-of-breed UI components.