You are previewing HTML5 and JavaScript Web Apps.

HTML5 and JavaScript Web Apps

Cover of HTML5 and JavaScript Web Apps by Wesley Hales Published by O'Reilly Media, Inc.
  1. HTML5 and JavaScript Web Apps
  2. Preface
    1. Who This Book Is For
    2. Who This Book Is Not For
    3. What You’ll Learn
    4. About the Code
    5. Conventions Used in This Book
    6. Using Code Examples
    7. Safari® Books Online
    8. How to Contact Us
    9. Acknowledgments
  3. 1. Client-Side Architecture
    1. Before HTML5
    2. More Code on the Client
    3. The Browser as a Platform
    4. Conclusion
  4. 2. The Mobile Web
    1. Mobile First
    2. Deciding What to Support
      1. Mobile Web Browsers
    3. Mobile Browser Market Share
    4. Browser Grading
    5. HTML5 in the Enterprise
      1. Graceful Degradation
    6. QA and Device Testing
  5. 3. Building for the Mobile Web
    1. Mobile Web Look and Feel
      1. The Look
      2. The Feel
    2. Interactions and Transitions
      1. Sliding
      2. Flipping
      3. Rotating
      4. Debugging Hardware Acceleration
      5. Memory Consumption
    3. Fetching and Caching
    4. Network Type Detection and Handling
    5. Frameworks and Approaches
      1. Single Page
      2. No Page Structure
      3. 100% JavaScript Driven
      4. Mobile Debugging
  6. 4. The Desktop Web
    1. The Browser as a Platform
      1. Client Versus Server HTML Generation
    2. Device and Feature Detection
      1. Client-Side Feature Detection
      2. Client-Side userAgent Detection
      3. Server-Side userAgent Detection
    3. Compression
      1. GZIP Versus DEFLATE
      2. Minification
    4. JavaScript MVC Frameworks and the Server
      1. The Top Five Frameworks
      2. Backbone
      3. Ember
      4. Angular
      5. Batman
      6. Knockout
  7. 5. WebSockets
    1. Building the Stack
      1. On the Server, Behind the Scenes
    2. Programming Models
      1. Relaying Events from the Server to the Browser
      2. Binary Data Over WebSockets
      3. Managing Proxies
      4. Frameworks
  8. 6. Optimizing with Web Storage
    1. The Storage API
    2. The StorageEvent API
      1. What’s Racy and What’s Not?
    3. Using JSON to Encode and Decode
    4. Security and Private Browsing
      1. Security
      2. Private Browsing
    5. Who’s Using Web Storage?
      1. Using Web Storage Today
    6. Syncing Data from the Client Side
      1. Database Syncing with Backbone
    7. Using Web Storage in Any Browser
    8. Frameworks
      1. LawnChair
      2. persistence.js
  9. 7. Geolocation
    1. A Practical Use Case: User Tracking
    2. A Practical Use Case: Reverse Geocoding
    3. Frameworks
      1. geo-location-javascript
      2. Webshims lib
  10. 8. Device Orientation API
    1. A Practical Use Case: Scrolling with Device Movement
  11. 9. Web Workers
    1. A Practical Use Case: Pooling and Parallelizing Jobs
      1. Other Uses
  12. Index
  13. About the Author
  14. Colophon
  15. Copyright

Chapter 3. Building for the Mobile Web

The success of any mobile web application relies on two factors: design and performance. For mobile app design, we must have a consistent look and feel across all platforms. For better performance, we must have offline capabilities, animations on the UI, and backend services that retrieve and send data via RESTful or WebSocket endpoints. To put it simply, your app is constrained by two ever-changing speeds: the speed of the device CPU/GPU and the speed of the Internet. The UI is handled by device hardware, such as the GPU, when doing native-like animations and transitions through CSS, and your backend services are limited to the current Internet connection speed of the mobile device.

In this chapter, we’ll discuss how to design, create, and tune your mobile web app to be better looking and more performant. The chapter starts with a brief explanation of how apps should look for mobile devices then jumps into a low-level explanation of hardware-accelerated CSS and how to debug it. From there, you’ll learn what it takes to build an offline mobile application and how to bring all the code together into one application to create a native-like mobile web app that is capable of handling intermittent Internet connections. Lastly, you’ll examine today’s most popular mobile frameworks to get an understanding of when or if you should add a community-supported framework to your project.

Mobile Web Look and Feel

The “native versus Mobile Web” debate isn’t ...

The best content for your career. Discover unlimited learning on demand for around $1/day.