9. Points of Attention

9.1. Boilerplate code

An issue with the do-it-yourself code of this example app is the boilerplate code needed

  1. per model class for the storage management methods add, update, destroy, etc.;

  2. per model class and property for getters, setters and validation checks.

While it is good to write this code a few times for learning app development, you don't want to write it again and again later when you work on real projects. In we present an approach how to put these methods in a generic form in a meta-class, such that they can be reused in all model classes of an app.

9.2. Configuring the UI for preventing invalid user input

Many of the new HTML5 input field types (like number, tel, email, url, date (together with datetime-local, time and month) or color) are intended to allow web browsers rendering corresponding input elements in the form of UI widgets (like a date picker or a color picker) that limit the user's input options such that only valid input is possible. In terms of usability, it's preferable to prevent users from entering invalid data instead of allowing to enter it and only then checking its validity and reporting errors.

Input fields for decimal number input should not be defined like

<input type="number" name="..." />

but rather like

<input type="text" inputmode="decimal" name="..." />

because this provides for a better user experience on mobile phones.

9.3. Improving the user experience by showing helpful auto-complete suggestions

While browsers have heuristics for showing auto-complete suggestions, you cannot rely on them, and should better add the autocomplete attribute with a suitable value. For instance, in iOS Safari, setting the input type to "tel" does only show auto-complete suggestions if autocomplete="tel" is added.

HTML5 defines more than 50 possible values for the autocomplete attribute. So, you have to make an effort looking up the one that best suits your purposes.

You can also create your own custom auto-complete functionality with datalist.