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

Table Of Contents

• Table Of Contents
• Talk
  • Conference
  • Abstract
    • German
    • English
  • Why Should You Listen To Me?
  • Summary
• Rate My Talk
• Slides
• Videos
  • Flutter Hot Reload
• Mobile App Prototype with Flutter
  • Progressive Web Application Prototype
• ADVERTISEMENT
  • Looking For Project in October 2022!
• Additional Talk Information
  • Java-Entwickler: Wunschliste für Front-Ends (Java Developer Wishlist for Front-Ends)
    • Declarative Front-Ends
      • Apple’s SwiftUI
      • Google’s Flutter
      • Google’s Jetpack Compose
      • Microsoft’s .NET Multi-platform App UI (MAUI)
      • Facebook’s React
  • Neue Web-Anwendung (Building a Web App From Scratch)
    • Popularity
    • Ranking
  • Neue, Native iOS- & Android-Apps (Building Native iOS and Android Apps From Scratch)
    • Popularity
    • React Native Vs. Flutter
    • Will Google Kill Flutter?
    • Responsive Design
    • Notable Flutter Plugins
• Getting Started
  • React & JavaScript
    • Learning JavaScript
    • Learning TypeScript
    • Learning React
  • Flutter & Dart
    • Learning Dart
    • Installing Flutter
    • Learning Flutter

Talk

Conference

I was happy to give a German talk about “Wie sollten Java-Entwickler heute Front-Ends für Web, Mobile & Desktop bauen?” (“How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?”) at the Java Forum Stuttgart 2021. It’s the biggest Java conference in the South-West of Germany and an online conference again this year.

Abstract

German

Nutzer greifen heute mit PCs und Mobilgeräten auf Applikationen zu. Es gibt zwei offensichtliche Wege, Front-Ends für diese Geräte zu bauen: Web-Applikationen und native Applikationen. Cross-Platform-Lösungen kombinieren Vorteile beider Ansätze. Beispiele sind React Native von Facebook oder Flutter von Google. Für reine Web-Entwicklungen kommen React von Facebook, Angular von Google und Vue.js infrage. Ich betrachte all diese Frameworks vom Standpunkt eines Java-Entwicklers und empfehle Frameworks für drei typische Szenarien: Reine Web-Anwendung, native iOS-/Android-Apps und Umgang mit Desktop.

Im Sommer 2019 entwickelte ich einen mobilen App-Prototyp mit Flutter, im Winter einen Prototyp einer Progressive Web Application. Ich entschied mich danach, Flutter für native mobile Apps in Projekt zu verwenden, das im Mai 2021 in Produktion ging. Aus meiner Projekt-Erfahrung heraus schildere ich Vorzüge von Flutter, aber auch typische Probleme und deren Lösungen.

English

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 toolkits 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, JSF, Facebook’s React, Thymeleaf, Vaadin, 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.

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 a project that went live in May 2021. Based on my experiences, I will highlight typical Flutter issues and how to solve them.

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.

Summary

Here is my advice for “Neue Web-Anwendung (Building a Web App From Scratch)”:

Here is my advice on “Neue, Native iOS- & Android-Apps (Building Native iOS and Android Apps From Scratch)”:

And this is my advice on “Web-Anwendung da - was tun? (What to Do on Desktop When You Have a Web Application)”:

Rate My Talk

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

Slides

Here are the slides as PDF. They are 2.1 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 13.8 MB in size.

Videos

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.

ADVERTISEMENT

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-Entwickler: Wunschliste für Front-Ends (Java Developer Wishlist for Front-Ends)

Declarative Front-Ends

Apple’s SwiftUI

SwiftUI is Apple’s take on declarative front-ends. Here’s the counter example from the talk, with slightly changed formatting:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@State var count: Int = 0

var body: some
View {
  VStack(alignment: .center,
    content: {
      Text("Counter: \(count)").padding()
      Button(
        action: { self.count++ },
        label: { Text("Increment") }
      )
    }
  )
}

Google’s Flutter

Flutter is Google’s cross-platform implementation of declarative front-ends. It reached the stable version 1.0 for mobile in December 2018. Here’s what the SwiftUI counter sample looks like in Flutter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

int _counter = 0;

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text( 'Counter: $_counter' ),
    TextButton(
      onPressed: () =>
        setState({
          _counter++
        }),
        child: Text( 'Increment' ),
    ),
  ],
);

Google’s Jetpack Compose

Jetpack Compose is Google’s Android implementation of declarative front-ends. So Google has two different horses in this race: Jetpack Compose and Flutter. Of course, it’s Google! 😒

Jetpack Compose went 1.0 on July 28, 2021.

I adopted the counter sample in this tutorial to look like the SwiftUI sample above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

val count = +state{0}

Column(Spacing(16.dp)) {
  Container() {
    Column() {
      Text(
        text = "Counter: ${count.value}",
        modifier = Spacing(8.dp)
      )
      Button(
        text = "Increase",
        onClick = {
          count.value++
        }
      )
    }
  }
}

Microsoft’s .NET Multi-platform App UI (MAUI)

.NET MAUI is part of .NET 6 and was recently delayed from November 2021 to Q2/2022. And if “Maui” rings a bell for you - it’s the second-largest island of Hawaii.

Microsoft calls its implementation of declarative front-ends “Model-View-Update” (MVU). Here’s what I think the SwiftUI sample from above will look like in MVU. I adapted the sample from the announcement post:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

readonly State<int> count = 0;

[Body]
View body() => new StackLayout {
  new Label( "Counter: {count}" ),
  new Button(
    () => $"Increment",
    () => count.Value ++
  )
};

Facebook’s React

And finally, here’s what the counter looks like in Facebook’s React for web applications. I adapted it from this Stackblitz sample. You see some HTML code in there because I don’t use components to keep things simple. If I did, it would look as declarative as the other examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

class App extends React.Component {
  state = {
    counter: 0
  }

  render() {
    return <div>
      <p>Counter: {this.state.counter}</p>
      <button onClick={
        () => this.setState({
            counter: this.state.counter + 1
          })`
        }>Increase</button>
    </div>
  }`
}

Neue Web-Anwendung (Building a Web App From Scratch)

Popularity

I recorded all numbers on August 25 & 26, 2021.

Here is the link for Google Trends: Angular, JSF, React, Vaadin and Vue.js. It shows how unpopular JSF and Vaadin are today. Thymeleaf is not on the list because Google only allows 5 search terms. Here’s a version with Thymeleaf instead of Vaadin.

Here is the link for Stack Overflow Trends with all frameworks: Angular, JSF, React, Thymeleaf, Vaadin and Vue.js. It shows how unpopular JSF, Thymeleaf, and Vaadin are today.

Here are the search queries for the Udemy course data:

• Angular courses
• JSF courses
• React courses
• Thymeleaf courses
• Vaadin courses
• Vue.js courses

The Indeed job search went across 63 countries representing 92% of the worldwide GDP in 2020. It is a full-text search in both the header and the body for the technology name, such as “Flutter”. In most countries, the result must also include at least one of multiple ways to say “developer”.

Here are some of the adjustments & caveats.

• A job with the title React Developer could still have Vue in the body. Such a job advertisement is counted both as a result for React and Vue.
• Searching for React also shows results for React Native. I subtracted the number of React Native from the React results.
• The word “react” often appears in job advertisements. In countries where I didn’t have the translations for the various forms of “developer” (such as China or Russia), I manually adjusted down the number of jobs found down.
• Flutter Entertainment is the world’s largest online betting company. Although I’m looking for developer posititions, this may inflate the number of jobs found for Flutter a bit.
• About a third of the JSF results are defence industry job that reference the Joint Strike Fighter aircraft. I removed those for the US. This may slightly inflate results in other countries, too.
• In Japan, “JSF” is a popular abbreviation. Since I didn’t have the translations for the various forms of “developer” in Japanes, I set the number of jobs found here to 0 because I couldn’t determine how many jobs were actually for the JSF framework.
• “Vue” has multiple meanings in French and Spanish. So in French speaking countries, like France, Canada, Spain, Luxembourg, and Switzerland, I searched for “vue.js” instead. This may deflate the number of jobs found for Vue a bit.

You can find the detailed search results with links here:

Ranking

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.

Neue, Native iOS- & Android-Apps (Building Native iOS and Android Apps From Scratch)

Popularity

I recorded all numbers on August 25 & 26, 2021.

Here is the link for Google Trends: Flutter, JavaFX, React Native and Xamarin. It shows how unpopular JavaFX and Xamarin are today.

Here is the link for Stack Overflow Trends with all frameworks: Flutter, JavaFX, React Native and Xamarin. It shows how unpopular JavaFX and Xamarin are today.

Here are the search queries for the Udemy course data:

• Flutter courses
• JavaFX courses
• React Native courses
• Xamarin courses

Please see the previous section for general information on the Indeed search.

Flutter is at a special disadvantage on Indeed. Often, you find the following in job ads there: “Experience with a cross-platform framework like Xamarin or React Native required”. Now Flutter is a cross-platform framework, and it’s the new kid on the block. But if you just have “Flutter” in your resume, you still may not get the job:

• First of all, most big companies today use Applicant Tracking Systems (ATS). These systems scan your resume automatically for keywords. So if “Flutter” isn’t an approved keyword, you’re out.
• The next stage is the agency or HR department. They typically have no clue about programming. And how could they? They hire people in all sorts of professions. So if they don’t know about “Flutter”, you’re out again. It’s not all sunshine and roses, you know!
• Hopefully, the developers at the end of the process do know Flutter.

These are the same search results as above:

React Native Vs. Flutter

• React Native always uses a JavaScript VM to run our applications. Flutter uses a Dart VM during development and compiled native code when deployed. That’s faster.
• React Native manages the native iOS/Android UI elements through a JavaScript bridge. That’s slower than Dart: Dart uses the Google open-source Skia Graphics library. Chrome and Firefox, Chrome OS, and Android also use Skia. But this also means Flutter only paints pixels: It has to recreate all native iOS/Android UI elements in Flutter.

Will Google Kill Flutter?

• In 2019, Flutter was the project with the third-highest number of contributors at GitHub (section “Top and trending projects”). It had 13k. Azure Docs had 14k, VSCode had 19k. I couldn’t find these numbers for 2020.
• Toyota picked Flutter to power future car entertainment systems. I’m not sure if this is just a test by Toyota or if they already decided to go ahead with Flutter for production.

Responsive Design

Flutter gives us little help on responsive design: Find out the screen width and change your UI. Wonderful! So no grid, like in Bootstrap or the more powerful, but also more complicated HTML version. Anyway, I went with flutter_bootstrap for now.

Notable Flutter Plugins

• flutter_bootstrap: Make your app responsive with the Bootstrap grid.
• flutter_platform_widgets: Provides UI element abstractions that automatically create either an iOS or Android UI element, depending on the current mobile operating system.
• google_fonts: Adds Google Fonts to your Flutter application.
• url_launcher: Launch apps to open links, send emails, start phone calls or text messages. You could probably also launch application-specific URLs.
• flutter_email_sender: Send email in-app, using standard iOS/Android components.
• google_maps_flutter: Open Google Maps inside your app. Using Google Maps in your app is free on iOS and Android.
• connectivity: Find out when the network connectivity of your app changes.
• image_picker: Access photos & videos on iOS and Android.
• camera: Access the camera on iOS and Android.
• image_cropper: Edit pictures.
• photo_view: Show pictures with pinch-to-zoom.
• flutter_markdown: Show Markdown.
• native_pdf_view: Show PDF documents.
• flutter_html: Show HTML.
• freezed: Generate immutable classes, complete with JSON serialization.
• flutter_easyloading: Toast overlays for progress & success/info messages.
• package_info: Get the application version number for your “About” screen.
• device_info: Get device information for your “About” screen.
• fluent_ui: Provides a native-looking Windows UI.
• macos_ui: Provides a native-looking macOS UI.

Getting Started

React & JavaScript

The React website is a good starting point. React uses JavaScript to create web applications.

Learning JavaScript

• The MDN Web Docs (the site formerly known as “Mozilla Developer Network”) has various tutorials based on your skill level.
• academind has a JavaScript course with 40 hours of video. The same course is on Udemy, where it may be cheaper in a sale.

Learning TypeScript

TypeScript mixes “some Java into JavaScript”, such as types. Hence the name! You have to use TypeScript if you use Angular. And you can use it with React.

You can take a peek in the “TypeScript for Java/C# Programmers” article. If you like it, then the TypeScript handbook is your friend, also in Epub and PDF.

Learning React

• The React site has a tutorial for beginners where you build an app.
• The React site also gives us a tutorial for the React concepts.
• academind has a React course with 40 hours of video, which includes React Hooks and Redux. I’m taking this course right now (March 2021). The same course is on Udemy, where it may be cheaper in a sale.

Flutter & Dart

The Flutter website is an excellent place to get familiar with Flutter. Flutter uses the Dart programming language to create natively-compiled applications for mobile, web & desktop. Both Flutter and Dart can use plugins that have a great portal.

Learning Dart

You start with the Dart language tour. Java developers take the “Intro to Dart for Java Developers” next. Then you have options:

• Google has several free tutorials for Dart.
• Code with Andreas has a 10-hour Dart course.

Installing Flutter

Here are the instructions, straight from the Flutter website:

• Windows
• Mac
• Linux

Learning Flutter

Here’s a selection of Flutter tutorials and courses:

• Google has several free tutorials for Flutter.
• freeCodeCamp has at least two free Flutter courses:
  • a one-hour course for mobile apps, and
  • a three-hour course that claims to include desktop & web, too.
• Code with Andreas has two paid courses:
  • a 2.5-hours “Flutter REST API Crash Course” (I took it & liked it a lot!), and
  • a 21-hour course on Flutter & Google Firebase.
• Finally, academind has a Flutter course with 41 hours of video. I used the 2019 version to learn Flutter and can highly recommend it! The same course is on Udemy, where it may be cheaper in a sale.