Anything like TouchKit for Vaadin Flow?

I’m currently trying to update one oldish Vaadin 7 app (that has been in active use over a decade now) to Vaadin Flow. It uses TouchKit for the mobile view. I quickly re-built a draft of those with basic layouts & routing, but I’m not very happy with the result, compared to the good old NavaigationManager/NavigationView and the smooth view transitions they provided.

In the old app the main view of the mobile site is essentially a map (based on v-leaflet add-on). Then there is a settings view(s) that are needed occationally. Now toggling between these views is “jerky”, especially when returning to the map view when the slippy map widget “re-initializes” itself for a half a second or so.

So essentially I’d be looking for a component (core or add-on, don’t care) that would keep the main view “cached” in the client and would render these additional screens temporarily somehow “over” the main view.

The old TouchKit approach was from old iOS (transition horizontally). I remember also seen patterns where the UI was filipped, but I with Vaadin that was also in the V7 era (this add-on by @Sami :thinking:.

oldish Vaadin 7 app (that has been in active use over a decade now)

Pah, wippersnappers. Our app is 24… :slight_smile:

I absolutely love TouchKit, and never understood why Vaadin dropped it, especially when they went fully “Mobile First”. How on earth do people build larger mobile apps without something like it?

We have one part of our Vaadin7/8 app that uses it, since it is targeted at phone/pad users. I haven’t gotten round to it in our Vaadin20+ upgrade yet. I assume it will be easy to implement “something” with the existing building blocks, but I assume it will be clunky, and not pleasant to use.

As you say, ideally a implementation should cache the pages on the navigation stack on the client-side, but just getting the slide-out/in would be something.

Yeah, but also some “ready made compositions”, like “NavigationBar” that I think we had integrated to the top of the NavaigationView’s. Essentially a styled title bar and slot for components on both sides. Now I see my self building that using Horizontal layout for each view I have :man_facepalming:

There is currently no good migration solution for this in Vaadin 24 scope. Functionally however there is option build Flow / Hilla hybrid apps. In such app you would use Hilla to replace Touchkit, i.e. implement the mobile app with it. Naturally this requires total rewrite of the mobile app.

I don’t understand. How would Hilla help me any way here? Does it have mobile oriented components that are not available for Vaadin Flow/Java users?

AppLayout does have the bottom toolbar which helps a bit in some use cases App Layout | Components | Vaadin Docs

Nice, I hadn’t noticed that​:+1: This app don’t need that (the mobile side of this app essentially has main/map view and a settings view triggerd from top right corner. But I have another on my eternal TODO list that has main navigation that could benefit from this when I get my migration engine started again :nerd_face: