Devoxx UK 2021: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?"

Talk

Conference

Devoxx UK is a 3-day conference where developers come together to explore the latest technology advancements and fascinating ideas, with some of the most inspiring speakers in our sector. Devoxx is a conference by developers, for developers.

I was excited to give a 15-minute session on “How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?” on Monday, November 1, 2021, from 13:15-13:30. I looked at various frameworks from a Java developer’s perspective and suggest which one to use in three common scenarios.

Abstract

Users access applications on PCs and mobile devices today. There are two obvious ways to build front-ends for these devices: Web applications and native applications. Cross-platform UI frameworks combine advantages from both approaches. Examples are Google’s Flutter, JavaFX, Facebook’s React Native, and Microsoft’s Xamarin. Important web application frameworks are Google’s Angular, Facebook’s React, and Vue.js. I will look at all these toolkits from the perspective of a Java developer and suggest which one to use in three common scenarios: New web application, new native iOS & Android apps, and what to do on the desktop when we have a web application.

In 2019, I developed a mobile app prototype with Flutter and a progressive web application prototype. I then decided to use Flutter for native mobile apps in my SaaS start-up. Based on my experiences, I will highlight what’s good about Flutter and what’s not.

Why Should You Listen To Me?

I’m neither affiliated with the projects I’m discussing nor selling books or training courses. I share industry analysis and my project experiences to give you options for your next project. I use 12 criteria for my evaluation. You may use my criteria or pick your own or weigh my criteria differently than I do. But you need to apply your criteria in your own environment and make your own choices.

Rate My Talk

If you’ve seen my talk, then please rate it!

Summary

New Web Application

• If you already use React, Angular, or Vue.js in your project, then keep using them. Otherwise, evaluate a migration. In many (most?) cases, such a migration doesn’t make business sense.
• If you start a new project or do migrate, then start with React first, Angular otherwise, and finally Vue.js.

New Native iOS & Android Apps

• If you already use Flutter or React Native in your project, then keep using them. Otherwise, evaluate a migration. In many (most?) cases, such a migration doesn’t make business sense.
• If you start a new project or do migrate and have used React before, then start with React Native first and use Flutter otherwise.
• If you start a new project or do migrate and have not used React, then start with Flutter first and use React Native otherwise.

Got Web Application - Now What?

• Keep your web application.
• If the Flutter UI constraints fit your requirements, then evaluate Flutter for desktop applications.

Slides

Here are the slides as PDF. They are 2.4 MB:

You can also get the slides in their original Keynote format. “Keynote” is Apple’s presentation application. Why would you do that? My slides have less text than the PDF version, so you can see what I cut. I also animated the slides, so they are more pleasant to watch. Or maybe you want to peek under the hood to see how I achieved specific effects. These slides are 8.7 MB in size.

Videos

Talk Video

Here’s my talk on YouTube.

Flutter Hot Reload

Flutter Hot Reload makes code changes go live in the device/simulator immediately. It’s the main reason why working with Flutter can be such fun! I mentioned it in the talk. Here is a video demonstrating it.

Mobile App Prototype with Flutter

Although it’s a bit old, this is still a decent example of what a native Flutter app can look like. I’m not ready to share the app I’m working on - sorry!

In the summer of 2019, I built native iOS/Android apps with Flutter to validate a business problem. It took me about six weeks, and it was my first Flutter project. I used Google’s cloud service Firebase for login, No-SQL database, and file storage. I also built my own back-end with Java, JHipster, Spring Boot, and Angular.

Progressive Web Application Prototype

At the end of 2019, I built a progressive web app (PWA) to speed up app development. A PWA uses the “Service Worker” in a browser to install on your device and cache data. That was about four weeks, and it was my first PWA. I used Google Workbox for this but developed my own offline storage solution in the browser. I built my back-end with Java, JHipster, Spring Boot, and Angular.

Looking For Project in October 2022!

And now for some shameless self-promotion: I’m looking to join a project in October 2022, in Milton Keynes, London, or remote. I’ll work as a contractor or fixed-term employee but don’t take permanent positions. Interested? Then check out my resume & work samples!

Additional Talk Information

Java Developer Wishlist for Front-Ends

Declarative UIs are the state-of-the-art in building user interfaces.

New Web Applications

Here are the details on the popularity of web frameworks:

I ranked React fastest for two reasons:

• React has an experimental feature called Concurrent Mode. If it makes it into production, it will improve data loading with multiple components on a page.
• ReactDOMServer lets us send HTML from the server to the browser before the React application is ready. The other frameworks may have something similar.

New Native iOS & Android Apps

Here are the details on the popularity of mobile cross-platform frameworks:

For a comparison between Flutter & React Native and a deep-dive on Flutter, please look at the slides from my JAX London 2021 talk, starting with slide 91.

Get Started

Here are links & information so you can start with building web applications with React.

And here are links & information so you can start with building mobile applications with Flutter.