A very simple Vaadin-on-Kotlin-based PWA demo. Tailored towards Android developers who want to use familiar strongly-typed language and don't feel at home with all that JavaScript browser stuff. The development model of this app focuses on writing your logic in server-side Kotlin code; no JavaScript development is required. Requires Java 17+.
The app is a very simple task list app, designed to showcase the following features:
- accessing the database
- validation in forms
- a web page masquerading as a native app
See the online demo.
Progressive Web App is a web page that the mobile phone browser can download and it can then work offline, to a certain degree. PWA also allows the user to save an app shortcut as an icon to his/her home screen; when launched from that icon, the app launches completely full-screen, without any URL bar, mimicking a native app completely.
Since we're going to implement the logic server-side
to avoid JavaScript, offline mode obviously won't work. So we'll make the app progressive just enough - we'll
include all necessary things like the manifest.json and service workers, but they'll just show
the "You're offline" page when offline. However, there is an effort ongoing in this area, so let's wait and see.
The PWAs also tend to adapt to the screen size (so-called Responsiveness), typically with a CSS rules. You can check out what PWAs are, at Vaadin Progressive Web Apps.
We'll use the Vaadin framework. The reason behind this is that Vaadin framework is a component-oriented Java-based web framework. Because of that, Vaadin's programming model closely resembles and feels familiar to Android developers. You just switch your Android Views into Vaadin Components and you continue nesting your Buttons into a bunch of Vertical/HorizontalLayouts - exactly as you would do with the Android development, but without the pains of using the Android development model.
Vaadin packages enormous amount of predefined components so you will do not typically have to develop your own components. You will simply orchestrate a pre-made components server-side, with a pure Java/Kotlin code.
You can read more about the benefits of Vaadin development over Android.
Please see the Vaadin Boot documentation on how you run, develop and package this Vaadin-Boot-based app.
The sw.js, all manifests and the offline page is now generated automatically
by Vaadin, via the @PWA
annotation. See Creating PWA With Flow
for more details.
Vaadin of course uses different algorithms than Android to perform the layouting. Luckily,
Vaadin (or, rather CSS) knows a layout quite similar to Android's LinearLayout - the flexbox.
Please read the
Vaadin 10 server-side layouting for Vaadin 8 and Android developers
article on how to use VerticalLayout and HorizontalLayout which use flexbox under the hood, but
sports an API which may be familiar to Android developers.
You can download and install the Intellij IDEA Community Edition, then import this project into it. Android Studio is based on Intellij IDEA Community, so you should feel immediately at home.
To launch your app, simply open Main.kt and run the main() function. Just open your browser and hit http://localhost:8080.
The main meat of the UI is located in the TaskListView.kt - feel free to edit that file and experiment for yourself. There are lots of pre-existing Vaadin components; you can check out the Beverage Buddy example app for more examples of component usage. You should also read the full Vaadin documentation.
The browser is a very powerful IDE which can help you debug CSS- and layout-related issue. Take your time and read slowly through the following tutorials, to get acquinted with the browser developer tools:
It is very easy to test Vaadin-based apps - all you need to look up the components by selectors, for example a Button with the caption of "Click Me". The TaskListViewTest.kt sample test file shows a simple test which tests the main screen. Read the Browserless Testing Project documentation regarding the background on this testing approach.
Without the database, we could store the task list into session only, which would then be gone when the server rebooted. We will use the Vaadin-on-Kotlin's SQL database support. To make things easy we'll use in-memory H2 database which will be gone when the server is rebooted - touche :-D
We will use Flyway for database migration. Check out Bootstrap.kt on how the migration scripts are ran when the app is initialized.
The Task entity will be mapped to the database; inheriting from Entity and Dao
will make it inherit a bunch of useful methods such as findAll() and save(). It will also gain means of
providing all of its instances via a DataProvider. See the TaskListView.kt
Grid configuration for details.
See the Back to Base article on how the finder methods are attached to the entity, and how the lookup and save works.
This app is nothing more but a plain zip project with a run script. It can simply be run from a command-line (we package built-in Jetty).
To produce a Docker image from this app, just run
$ docker build --no-cache -t test/vaadin-kotlin-pwa:latest .To run the image, just run
$ docker run --rm -ti -p8080:8080 test/vaadin-kotlin-pwaDone - your app now runs on localhost:8080.
To run this app in Google Cloud Kubernetes and Google Cloud SQL with MySQL, simply follow the Deploy Your Vaadin App To Google Cloud Kubernetes tutorial.
See Running Vaadin-on-Kotlin app in microk8s for more details.