Vaadin Html Components usage

I am new to Vaadin as I said in other post but I am really trying to build something useful (at least for me and my mates :slight_smile: ) with it. So I started well picked up things quite fast thanks to forum help and my Java Swing experience this is important for rest of the post.
We are talking about web components here which is completely different than say a desktop app with those listeners, event handler stuff, here two layers comes into play which is abstract in a very good way by vaadin. But here is my Swing knowledge comes into play a lot.
And all of my UI code (not much as I am making a SPA page alone) is written like as follows :

For example if I have a drop-down and onchange listener of that (which is part of some div in my UI) I need to send a REST request and get a list of results which needs to be attached to some result div which is not part of same component hierarchy and hence not in same object holding my Select component change listener.
So to solve this (well to be honest it could be my bad design as vaadin came to my life like 2 months ago but I was busy with back end:) I create a view builder class that implements ValueChangeListener and that holds reference of all those components that are actionable and dynamic on the screen (so like select component, button, result div etc).
And it injects all these components to various other Divs etc as it is our builder and this way I place all component at right place to maintain hierarchy.
Now, what I do is when all components are initialized and our builder (for the moment) also listens to events, does the heavy work of calling all those Rest services and then I only remove all components from my resultDiv that my Builder has reference of and I construct new result div ion the fly from the result (with all css etc) and attach to the result div.

A bit of code here :

public class XYZViewBuilder implements ValueChangeListener<ValueChangeEvent<?>> {
	
	/** all my relevent components separated here builder initializes them */
	
	private Input searchBox;

	private Input hashTag;

	private NativeSelect<Country> select;

	private Div trendsContainer;

	private Div resultSection;


/**
	 * 
	 * @return
	 */
	public Nav buildXYZNav() {
		this.searchBox = new Input();
		this.searchBox.addValueChangeListener(this);
		return new XYZNav(searchBox);
	}

	/**
	 * 
	 * @return
	 */
	public Div buildXYZHeaderSection() {
		Collection<Country> countries = Services.get(XYZViewService.class).getAllCountries();
		trendsContainer = new Div();
		trendsContainer.addClassNames(ViewUtils.toCssClass("card card-body"));
		hashTag = new Input();
		hashTag.addClassName("form-control");
		hashTag.getElement().setAttribute("placeholder", "Hashtag");
		select = new NativeSelect<>("Country");
		select.setItemCaptionGenerator(Country::getCountryName);
		select.setItems(countries);
		Collection<ResultsItem> results = Services.get(XYZViewService.class)
				.getResultsByCountryCode(ViewUtils.getCountryCode("default"));
		trendsContainer.add(ViewUtils.toResultsDiv(trends));
		return new XYZHeaderSection(select, hashTag, trendsContainer);
	}

	/**
	 * 
	 * @return
	 */
	public Div buildXYZResultSection() {
		this.resultSection = new XYZMainSection(getResults("default", "default").getResult());
		//this.select.addValueChangeListener(this); at the time of this writing i am polaying woth native select as well 
		//to keep the stylesheet intact because vaadin select messing up 
		this.hashTag.addValueChangeListener(this);
		return this.resultSection;
	}

	/**
	 * 
	 */
	@Override
	public void valueChanged(ValueChangeEvent<?> event) {
		if (event.getValue() instanceof Country) {
			Country country = (Country) event.getValue();
			String countryCode = ViewUtils.getCountryCode(country.getCountryCode());
			resultSection.removeAll();
			trendsContainer.removeAll();
			resultSection.add(new XYZMainSection(getNewsResults(countryCode, "default").getResult()));
			// resultSection.add(new XYZMainSection(ResultsItemCreator.getNewsItems(15)));
			Collection<ResultsItem> trends = Services.get(XYZViewService.class).getResultsByCountryCode(countryCode);
			trendsContainer.add(ViewUtils.toResultsDiv(trends));
	
		} else {// this is our hashtag or search Tag
			String hashTag = (String) event.getValue();
			resultSection.removeAll();
			String countryCode = select.getValue() != null ? select.getValue().getCountryCode() : null;
			resultSection.add(new XYZMainSection(getResults(countryCode, hashTag).getResult()));
		}
	}
  

Its real code made to look like dummy but you get the idea, this builder is called by main UI class and as this is SPA app so no route really everything happens on a single page and all I do is add component when results arrive removing old one.

Probably a lazy way now I have following questions :

  • Am I doing right way ?
  • If yes then why the hell page load so slow man its killing me, point 1 cannot be correct.
  • I tried playing with Polymer template then I see Lit-Element coming up so I decided to wait and code completely all the html components, well with some loops, say util classes etc but this is how we do it in vaadin, I think so.
  • I was looking for another way to handle events instead of that builder + listener combo, and that is really well captured by [this]
    (https://github.com/vaadin-learning-center/flow-design-pattern-observer) although its too hight level for me now, as it starts to add some service initializer and few times my tomcat didn’t start and really I had no time to put on it. I went with what is working currently.
  • All layouts are done with css that is imported using PageConfigurator by main UI. So I am not using any of the vaadin layout component to add and remove components dynamically, because I really want to keep layout to css where that belongs.

So, please help me here Book of vaadin is really basic and trust me all help I got for my problems which were real once only online forums rather than book of vaadin.

I really need a feedback !!