Author: Karsten Silz
Mar 3, 2021   |  updated Jun 7, 2021 15 min read

Permalink: https://betterprojectsfaster.com/learn/talks-it-tage-2021-long-java-front-ends/

Part of the Conference Talks series

IT-Tage 365 2021 March: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?"

IT-Tage 365 logo

Table Of Contents

Conference

IT-Tage 365 2021 March is a German online conference. The main event is from December 6 through December 9, 2021. But there are additional sessions throughout the year, such as mine.

Talk

My talk was an online talk in German. Its title translates into “How should Java Developers build Front-Ends for Web, Mobile & Desktop today?”.

I gave my presentation on Wednesday, March 24, 2021, from 17:00 to 17:45 CET. The conference was well-organized and ran over Zoom. My talk was the last one of the day, so my audience’s enthusiasm was noticeably dampened. Either that, or I gave a boring presentation.

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, Flutter von Google, Xamarin von Microsoft und JavaFX. Für reine Web-Entwicklung kommen React von Facebook, Angular von Google und Vue.js in Frage. Ich betrachte all diese Frameworks vom Standpunkt eines Java-Entwicklers und empfehle Frameworks für drei typische Szenarien.

2019 entwickelte ich einen mobilen App-Prototyp mit Flutter und eine Progressive Web Application. Ich entschied mich danach, Flutter für native Mobile Apps in meinem aktuellen Projekt zu verwenden. Aus meiner Projekt-Erfahrung heraus schildere ich typische Probleme mit Flutter und deren Lösungen.

Why Should You Listen To Me?

I’ve been a Java developer for 22 years. As a full-stack developer, I’m about to put my third project into production since 2017. I was the sole developer on two of them and the lead developer on the third one.

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.

Audience Rating & Feedback

Unfortunately, I got no feedback on my talk.


Slides

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

Videos

Talk

You can view my video only if you buy a “IT-Tage 365 Ticket” for all the talks. As of March 29, 2021, the ticket for 200 videos is 300 Euro.

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! Here is a video demonstrating it.



Mobile App Prototype with Flutter

Although it’s a bit old, this is still a good example of what a native Flutter app can look like.

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.




Java Tech Popularity Index Q1/2024:
Developer job ads down 32% year over year, Stack Overflow questions dropped 55% since ChatGPT. I now recommend IntelliJ Community Edition because many AI code assistants don't run in Eclipse. Job ads for Quarkus hit an all-time high.

See All Issues & Subscribe


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

How Can We Build Front-Ends Today?

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 entered beta on February 24, 20201. According to Google, it now has stable APIs and is feature-complete.

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, expected for November 2021. 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>
  }`
}

Web Applications

Popularity

I recorded the Google Trends and Stack Overflow Trends data on Thursday, March 11, 2021. The Google search numbers are too low for Vue.js because many people search for “vue” instead. But “vue” has other meanings in English, so I didn’t use “vue” results. Only the “vue.js” ones are counted here.

I recorded the Udemy course data on Tuesday, March 23, 2021.

I recorded the Amazon U.S. book data on Tuesday, March 23, 2021. I restricted it to English books in the category Computer & Technology Books.

I recorded the Stack Overflow Jobs data on Tuesday, March 23, 2021.

I recorded the Indeed job data on Tuesday, March 23, 2021. I restricted it to Greater London (London + 50 miles) to keep the data manageable. London is a good mixture of old economy (finance, insurance) and new economy (start-ups). Plus, I’m looking for a job in greater London come October 2021, so it’s good to know what the market is looking for.

Unlike the Stack overflow search, the Indeed search is a primitive full-text search in both the header I wrote my own Java program to read in and correct the Indeed job data. Here are some of the issues my program fixes:

  • Some jobs show up twice in the search results.
  • Searching for React also shows results for React Native.
  • Most search results for Flutter are for Flutter Entertainment, the world’s largest online betting company.
  • A job with the title React Developer could still have Vue in the body. My program does not count this as a “Vue job”.

Indeed only lets you see up to about 1,200 search results. So for instance, you can’t browse all 3,000+ React jobs. And my program consistently finds about 15%-20% less results that Indeed shows: 540 for Vue, vs. the 635 that Indeed showed, or 399 for React Native vs. 471. There’s probably something wrong with my HTML parsing. But it seems evenly distributed among all technologies, so I think my data is still valid as relative data between technologies.

That’s why I calculate the “job reduction rate” with the numbers that my program finds and apply them to the number that Indeed shows on the web page. To come back to the Vue.j example: My program finds 540 jobs and deems 500 a match. I then multiply this ratio (500/540) with the 635 jobs that Indeed shows: (635 * 500) / 540 = 588. And that 588 is the number I use in the talk.

As a result of my program, I for instance reduced the React number from the reported 3,581 to 3,106. That’s mostly the 400+ React Native jobs being removed. An the Flutter number went from 79 to 35 when removing Flutter Entertainment jobs.

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.

Native iOS & Android Apps

Popularity

I recorded the Google Trends and Stack Overflow Trends data on Thursday, March 11, 2021.

I recorded the Udemy course data on Tuesday, March 23, 2021.

I recorded the Amazon U.S. book data on Tuesday, March 23, 2021. I restricted it to English books in the category Computer & Technology Books.

I recorded the Stack Overflow Jobs data on Tuesday, March 23, 2021.

I recorded the Indeed job data on Tuesday, March 23, 2021. I restricted it to Greater London (London + 50 miles).

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.
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.

React Native doesn’t officially support Windows or macOS. But Microsoft does: react-native-windows and react-native-macos. I’m not sure how production-ready they are. And react-native-macos is a fork of the official React Native.

Dart = Simplified Java for UI Development

For a good comparison between Dart, Java, and C#, look to this article. If you got some more time at hand, then this " Intro to Dart for Java Developers" is for you.

Will Google Kill Flutter?

Here are two positive pieces of news:

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.

Does Flutter Do Too much?

Flutter has more than 8,500 open issues. But the team claims that they close at least as many as are being opened. Seems true for February 16, 2021 – March 16, 2021: 1,210 closed, 695 opened.

Animations on iOS can stutter when first used. There’s now a project for that in Flutter.

“Sound Null Safety” is a feature of Dart that’s new in Flutter 2.0. It does away with NullPointerExceptions. But we need to update our code. And the plugins we use also need to be null-safe. And so do their dependencies… It’s clear to me that this will take a while and that some plugins will not be updated and fall by the wayside. Now Flutter has a migration tool for null safety that’s stunning: It’s a web server that can automatically update your code! Watch it here:`


Flutter hired a development studio to maintain the Firebase plugins, but I can’t find a link right now. Firebase is a lot of Google services for applications.

Notable Flutter Plugins

Getting Started

React & JavaScript

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

Learning JavaScript
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

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:

Installing Flutter

Here are the instructions, straight from the Flutter website:

Learning Flutter

Here’s a selection of Flutter tutorials and courses:

Part 4 of 25 in the Conference Talks series.
« JJUG CCC 2021 Spring: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?" | JavaLand 2021: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?" » | Start: Java Forum Stuttgart 2019: "When Using the Application Generator Jhipster Is Worth It - and When Not"

Java Tech Popularity Index Q1/2024:
Developer job ads down 32% year over year, Stack Overflow questions dropped 55% since ChatGPT. I now recommend IntelliJ Community Edition because many AI code assistants don't run in Eclipse. Job ads for Quarkus hit an all-time high.

Read my newsletter
« VJUG Talk: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?" LJC Community Talk: "How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?" »
comments powered by Disqus