The Flavour Book: Make Awesome Web Apps in Java

Home / Flavour frequal.com RSS Feed

The Flavour Book: Make Awesome Web Apps in Java

Table of Contents

1. Introduction

1.1. One language for your whole app

1.2. Get full tooling without any configuration

1.3. Type-safe

1.4. Fully commercial-friendly open source

2. Architecture

2.1. Routing Architecture

2.2. Threading Architecture

2.3. Object Lifecycles and Garbage Collection

3. Getting Started

3.1. Your First Flavour App

3.2. Main Client Class Declaration

3.3. Interacting with Java

3.4. The Joy of Declarative UIs

3.5. Main Class

3.6. Folders

4. Templates

5. Standard Components

5.1. html:text

5.2. html:bidir-value

5.3. std:if

5.4. std:foreach

5.5. event:click

5.5.1. Click Handler Styles

5.6. attr component

6. Expressions

6.1. Differences from Java Expressions

6.2. Importing Classes and Enums

6.3. A General Recommendation for Expressions

7. Handling Input

7.1. input type="text"

7.2. input type="radio"

8. Events

8.1. All Flavour Events

8.2. Basic Handling

8.3. Mouse Events

8.4. Key Events

8.5. Miscellaneous Events

9. Routing

9.1. Page Changes in a Single-Page App

9.2. Example: Roller Coaster Website

9.2.1. Client

9.2.2. ClientRoute

9.2.3. IndexView

9.2.4. CoasterView

9.3. Routing Nuances

9.3.1. Deep Linking

9.3.2. Parameter Patterns

9.3.3. URL Style

9.3.4. Path-based Routing

10. Background Activity

10.1. async events

10.2. Create a New Thread

10.3. BackgroundWorker

11. Modal Dialogs

11.1. Popup.showModal(), PopupContent, and PopupDelegate

11.2. Styling

11.3. Example

12. Service Calls

12.1. JSON over HTTP

12.2. Invoking a JAX-RS JSON Service

12.3. Creating and Using The Client-Side Service Facade

12.4. Error Handling

13. Custom Components

13.1. Example Element Component: Coaster Tile

13.1.1. coasterTile.html

13.1.2. CoasterTileComponent.java

13.1.3. Repository

13.1.4. indexTiles.html

13.1.5. app.css

13.2. Component Contents

13.3. Optional Parameters

13.4. Event Handlers

13.5. Inner Components

13.6. Multiple Names

13.7. Attribute Custom Components

13.7.1. Example: CancelComponent.java

13.7.2. Using the CancelComponent

14. SVG

14.1. Custom SVG Flavour Component Example

14.2. Interactive Forest Size

15. State

15.1. Fundamentals

15.2. All-at-once or On-demand

15.3. Recording State on the Client

15.4. Technique 1: State Singleton

15.5. Technique 2: All-at-once Caching

15.6. Technique 3: On-demand Caching

15.7. Technique 4: Local State Caching

15.8. State Downloads

15.9. Viewing State

16. Data Resources

16.1. The Data File Itself

16.2. Create a ResourceSupplier

16.3. Register the Class

16.4. Access the Resource

16.5. Reading Raw Text

16.6. Converting a JSON Resource to POJOs

17. Styling

17.1. CSS in Smaller Apps

17.2. Large App CSS Strategies

17.3. CSS Tips, Tricks, and Resources for SPAs

17.3.1. Flex Layout

17.3.2. Grid Layout

17.3.3. Other CSS Resources

18. Error Messages

18.1. Property name typo

18.2. Missing component

18.3. Missing attribute component

18.4. Unbalanced HTML tags

18.5. Missing template

18.6. Missing setter with html:bidir-value

19. Appendix A: Additional Resources

20. Appendix B: Installing Prerequisites

20.1. Prerequisties

20.2. Java

20.3. Maven

21. Appendix C: Full-Stack Java

21.1. Full-Stack Java

22. Copyright

1 Introduction

Flavour is a batteries-included framework for making single-page web apps in Java.

🔊 Audio: Flavourcast S01 E01 Introduction

There are lots of SPA frameworks out there. Why pick Flavour?

One language for your whole app

Batteries-included tooling

Type-safe

Fully commercial-friendly open source

1.1 One language for your whole app

Development is difficult enough without having to switch back and<br>forth between two or more languages. Can you imagine any other<br>industry where the majority of the practitioners were expected to<br>regularly conduct business on the same project using two completely<br>different and incompatible languages? It is absurd, yet that's how<br>much of the industry operates.

With Flavour, your front-end and back end are in the same language.<br>Master its syntax and IDEs, and put your wizardry to work for all<br>your code. Want to change a method name that's used in both<br>the front-end and the back-end? Use your IDE's refactoring tool and<br>the change is applied everywhere at the same time. Even better,<br>Flavour handles the communication boundary with ease, handling data<br>conversions back and forth so you stay at your desired level of<br>abstraction: classes and methods.

1.2 Get full tooling without any configuration

After creating your project using the maven archetype using a one-line<br>command (albeit a long one-line command), you get a full set of modern build<br>tooling automatically. No need to assemble tools, hand-build a config<br>file, or spend hours setting up a project. Everything you need is<br>there instantly:

Transpiler : Converts Java bytecode to JavaScript

Minifier : Compresses code by...