Author: Karsten Silz
Apr 18, 2021 11 min read

Permalink: https://betterprojectsfaster.com/learn/talks-jaxlondon-2021-how-to-build-front-ends/

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

JAX London logo

Table Of Contents

Talk

Conference

JAX London is a hybrid conference that brings together cutting edge software engineers and enterprise-level professionals innovating in the fields of JAVA, microservices, continuous delivery and DevOps. I’m excited to give a session there on “How Should Java Developers Build Front-Ends for Web, Mobile & Desktop Today?" during October 4–7, 2021. I will look at various frameworks from a Java developer’s perspective and suggest which one to use in three common scenarios.

The exact schedule is still to be determined, but check out the current session line-up. And if you buy a ticket now, it will be cheaper!

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

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

After the talk, you’ll get an opportunity here to rate my talk and tell me what I should do better next time.

Slides

The slides will be posted shortly before the event.

Videos

Talk

The link to the video will probably be available here after the talk. It may be behind a paywall.

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.





This week in "How to Build Java Applications Today":
JavaFX: 1 codebase for web, PC, and mobile, 9 tips for Oracle DB with JPA & Hibernate, JetBrains “State of Developer Ecosystem 2021”, Spring Framework 5.3.9 & 5.2.16, Quarkus 2.0.2, Hibernate ORM 5.3.21.Final, and Spring Data 2021.0.3 & 2020.0.11.

Sign up to my newsletter


Looking For Project in October 2021!

And now for some shameless self-promotion: I’m looking to join a project in October 2021, 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

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

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?
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?
  • Animations on iOS can stutter when first used. There’s now a project for that in Flutter.
  • 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.
  • “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:`

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 6 of 10 in the Conference Talks series.
« W-JAX Munich 2021: "Pick Technologies & Tools Faster with JHipster" | JJUG CCC 2021 Spring: "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"

This week in "How to Build Java Applications Today":
JavaFX: 1 codebase for web, PC, and mobile, 9 tips for Oracle DB with JPA & Hibernate, JetBrains “State of Developer Ecosystem 2021”, Spring Framework 5.3.9 & 5.2.16, Quarkus 2.0.2, Hibernate ORM 5.3.21.Final, and Spring Data 2021.0.3 & 2020.0.11.

Sign up to my newsletter


comments powered by Disqus