Jmix Windturbines: A New Jmix 2.x Demo Showcasing Efficient Mobile App Development

Announcements
#1

Hi everyone,

We’re thrilled to introduce a new demo project that showcases the mobile capabilities of Jmix. This project responds to a frequent request for a practical example of how Jmix can be used to efficiently build Progressive Web Applications (PWAs) and mobile apps.

Jmix Windturbines

The Jmix Windturbines example demonstrates how to create robust, cost-effective mobile business applications using Jmix 2 and Vaadin 24. It highlights the seamless integration of PWAs, delivering mobile experiences with minimal cost and effort while leveraging Jmix and Vaadin’s powerful features.

The business use case for our Jmix Windturbines application is the maintenance and inspection of wind turbines. Field technicians use the app to access critical information about the turbines, perform inspections, document findings, and report on maintenance activities.

Demo

Explore the Jmix Windturbines app by checking out the live demo here: https://demo.jmix.io/windturbines.

The sources of the demo you can find in the corresponding Github repository: GitHub - jmix-framework/jmix-windturbines: Mobile first Application for performing field-maintenance on wind turbines, developed using Jmix

1-inspection-list

2-turbine-list

3-turbine-details

4-inspection-detail-1

5-inspection-detail-2

6-inspection-detail-3

7-home-screen

8-full-app-screen

9-login-screen

Blog Post

For more insights on how to effectively use Jmix to build fast, efficient, and cost-effective mobile applications, check out our new blog post: Build Cost-Efficient Mobile Business Apps with Jmix 2 and PWAs.

In the coming weeks, we’ll publish a follow-up post with technical insights on building mobile-optimized Jmix applications like Windturbines. Stay tuned, and in the meantime, feel free to explore the demo and share your feedback!

5 Likes
#2

Great work - both in demo and in article, Mario!

#3

Great work! Cannot wait to see the post on the technical insights on building this mobile-optimized application. I will like to know what makes it different from the normal Jmix 2 web application.

Thanks

1 Like
#4

Great work, elaborative article. Eagerly waiting for a video tutorial.

#5

Thanks @mario

I have created mobile app based on this project but it is showing addressbar (but windturbine don’t show address bar)

What setting i have to do? please guide.

#6

It was due to ssl. now solved

#7

Hi @mario
Great work!
I tried to run the demo from my mobile but i see the address bar, how is the address bar can be hidden?

#8

@mortoza_khan You have to install the PWA or open the demo in chrome and them “add to home screen”

regards

1 Like
#9

Thank you, will try

#10

Hi everyone,

as mentioned before we released the second blog post containing the technical information on how to implement a PWA in Jmix like the Wind Turbines app.

You can find it here: Architecting and Implementing Mobile Business Apps with Jmix 2 and Vaadin Flow – Jmix

It mainly covers the following areas:

  1. Vaadin Flow & Progressive Web Apps (PWAs): Overview of how Vaadin Flow can be used to build PWAs that provide app-like experiences directly in web browsers, focusing on mobile accessibility and user experience.
  2. Architecture Options for Mobile Apps in Jmix: Exploration of various architectural approaches to build mobile apps using Jmix, including considerations for backend, frontend, and UI elements tailored for mobile devices.
  3. Implementing Mobile-Optimized Features in Jmix: It provides insights into building PWAs within Jmix and highlights techniques such as utilizing CSS for responsive design and implementing virtual lists to enhance performance and user experience on mobile platforms.

Cheers
Mario

2 Likes
#11

Hello David,
Thanks for this article. However, I wish to ask you a question about using the Windturbine app as a PWA on a mobile phone while the host is on a computer server. I have downloaded the source code and deployed the solution to run on my computer server. I am able to browse the app on my mobile phone since both my computer and phone are on the same network.

Reading about the PWA functionality you mentioned in both articles, I have been able to make the app on the phone run as a PWA.

My question is how do I achieve offline capability on the phone? By offline, I mean that I should be able to access the UI even if the app running on my computer server is down. How does your article address this situation about PWA? I have tried this and I realised I am not able to run the PWA on my phone offline. Always trying to connect to the server to display the UI but resulting in an offline page.

Your answer in this regard will be highly appreciated.

Thanks

#12

Hello @olumideo,

Thank you for your question and for exploring the PWA capabilities of the Windturbine app. In the article, we briefly touched on offline functionality as one aspect of PWAs. However, this is also the part that is least supported in Vaadin Flow and, therefore, in Jmix as well, since Jmix relies on Vaadin Flow. Let me explain why and provide potential alternatives.

Offline Functionality in Vaadin Flow

Vaadin Flow does include basic PWA support, such as service workers and the ability to define offline resources. This functionality is mainly designed to show an offline page when the app is disconnected from the server. However, full offline capabilities—such as accessing and interacting with the UI or data when the server is unavailable—are not supported.

The limitation lies in Vaadin Flow’s server-centric architecture. Every interaction, like button clicks or UI updates, requires a callback to the server. Implementing offline support would require significant client-side logic, including service workers and data synchronization mechanisms, which is not feasible with Vaadin Flow’s architecture.

For more details on the PWA capabilities of Vaadin Flow, you can refer to the official documentation:
Vaadin Flow PWA Documentation

Alternative Approaches

If offline functionality is a critical requirement, the best solution is to build a client-side JavaScript application using frameworks like React or Angular. These frameworks support robust offline capabilities, allowing you to handle data and UI interactions locally. You can connect this client-side application to your Jmix backend via REST APIs to manage the necessary data synchronization with the server.

Alternatively you can build a dedicated mobile app, which has the same characteristics regarding offline functionality.

So bottom line is, Vaadin Flow / Jmix provides basic PWA features, but no real offline support (and also no easy way to put it in). A dedicated client-side JavaScript application is a more suitable approach if offline functionality is essential for your use case.

Best regards,
Mario

#13

Thanks @mario.