HTML and CSS Reference
In-Depth Information
</div>
</body>
</html>
Why put everything in one page? Primarily, it buys you native-like transitions and fewer
initial HTTP requests. You must use AJAX and CSS3 transitions to emulate the feel of
a native application and load data dynamically. This single-page approach also promotes
including all your resources, such as JavaScript and CSS, within the file. Again, this
reduces additional HTTP requests to get the best performance possible from your mo‐
bile application.
With an understanding of the basics, consider a few mobile-focused JavaScript frame‐
works that try to take care of the heavy lifting on the UI. Most of today's JavaScript
frameworks have a specific browser or platform they're targeting. Some are WebKit-
only and others try to span all device browsers. There may be features you need, and
ones you don't. So it's up to you to decide when to bring any framework into your current
or existing project.
Some mobile frameworks extend or build on older, bloated, desktop-
browser frameworks. Be careful that whichever framework you choose
does not check for older IE6 bugs or platforms that you aren't targeting.
This bloat may seem minimal to some, but as you will see in the next
chapter, every byte you can shave off the initial load time will greatly
enhance the user experience.
When evaluating mobile JavaScript frameworks, look for:
• Optimization for touch screen devices; make sure the framework uses CSS3 tran‐
sitions to handle animations
• Cross-platform consistency across all the major platform (Grade A and B) browsers
• Use (or wrapping) of the latest HTML5 and CSS3 standards
• Strong open source community behind the framework
Finally, investigate the programming model uses and ask yourself: does my project re‐
quire a dynamically generated UI through JavaScript, or do I want to declare my markup
beforehand in the single-page approach?
The framework smackdown in the following sections provides an overview of the three
main approaches to mobile web apps development: single page, no page structure, and
100% JavaScript-driven.
