HTML and CSS Reference
In-Depth Information
Figure 3-13. Asynchronous page loading timeline
The example code allows for at least some method of user experience adjustment based
on slow or fast connections, but it is by no means an end-all-be-all solution. Another
improvement would be to throw up a loading modal when a link is clicked (on slow
connections) while the app still may be fetching that link's page in the background. Your
overall goal is to cut down on latencies while leveraging the full capabilities of the user's
connection with the latest and greatest HTML5 has to offer. You can view the network
detection demo at
http://html5e.org/example
.
Frameworks and Approaches
It seems like there's a new JavaScript-based mobile framework popping up every day.
You can literally spend days (or months) comparing frameworks and whipping up mul‐
tiple proofs-of-concept (POCs), only to find out that you may not want or need a
framework at all.
In the majority of situations, whether converting an existing app or starting from scratch,
you're better off writing your own CSS and DOM interactions. The harder you lean on
a framework, the harder your app will fall when problems arise. Knowing the basics and
how to fix those problems under the hood are essential. The DOM is the underlying
infrastructure and API for all web apps. No matter how much you like or dislike the
API, if you desire a mobile web app that screams at blazing fast speeds and gets “close
to the metal,” you must understand how to work with it.
One commonly used programming model for the Mobile Web is called
single page
. This
means you put your entire markup into a single HTML page, often enclosed by a
<div>
or some other sensible block element, as in this sample single-page web app structure:
<!DOCTYPE html>
<html
lang=
"en"
dir=
"ltr"
>
<body>
<div
id=
"home-page"
>
...page content
</div>
<div
id=
"contact-page"
>
...page content
