Build JS apps responsibly - cover your basics, render strategically and enhance into true apps
The basics still apply
Sure, you're building a highly interactive app. HTML has you covered. Instead of letting your users find and click on
<div>s, use the HTML elements made for interaction: anchors, buttons and form elements. These elements have all interactive states - focus, hover, disabled and more - built-in.
<button>. Should your user be able to navigate somewhere? Use an anchor with the appropriate URL as
<a href="#">, not
<a href="path/to/content">. Then, you can animate the navigation, get the content asynchronously or create another rich experience. But cover the basics first.
Using form elements for user input? There's a few things to keep in mind. Each input should have an associated label:
<label for="username">username</label> <input id="username">. You can enhance the experience with icons, floating labels and other patterns. But always keep the label accessible. Don't use the
placeholderattribute instead of the label. Placeholders don't have the same meaning, are only initially visible and are not supported in every browser.
Also ensure you wrap all your form elements in a
<form>. This helps browsers and other technologies understand the inputs belong together. Mobile devices adapt their head-up keyboards accordingly. Also consider setting the form's
Is your single page application framework capable of complex form validation and constraints? Great! But have you considered first trying to use native browser form features? Using the correct input type (like
url) lets the browser validate input for you. In addition combining attributes like
pattern let you set advanced constraints on your input elements. Meaning you get all that for free.
A way to get an initial view on the page sooner, is pre-rendering HTML on the server. This is generally a good start as it prevents users staring at white screens. This solves our first issue.
Paul Lewis (@aerotwist) illustrates these different rendering techniques in a tweet:
JS-based render initially takes long to render (wasted time). Server-side rendering gets an initial view sooner but still takes time before JS behaviour kicks in (Uncanny Valley). Progressive rendering delivers functional view early and enhances incrementally.
Enhance to Progressive Web App