O'Reilly logo

HTML5 and JavaScript Web Apps by Wesley Hales

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Preface

HTML5 and JavaScript Web Apps is about building web applications with HTML5 and W3C specifications that are widely supported across all devices and browsers. It is intended for programmers who are facing the challenges of moving more code to the frontend with JavaScript, CSS, and HTML, while at the same time providing a backend infrastructure that is loosely coupled and supportive of offline clients.

My goal is to take you through, from beginning to end, each step of research and development for building a web application in today’s new, brave world of mobile-first, responsive, progressive, and MVwhatever JavaScript-based applications. Each chapter contains real-world examples and uses of each specification discussed.

A few core W3C specifications are considered the cornerstones of today’s “enterprise” web apps: Web Storage, Web Workers, Geolocation, Device Orientation, and Web Sockets. In the chapters that follow, you’ll learn how to use these specifications in both mobile and desktop environments, as well as how to deal with fragmentation. Along the way, you’ll also discover the hidden details and intricacies that you must know to create the most amazing application the universe has ever seen.

Many books describe the drama of what went down between the W3C and the WHATWG during the making of HTML5, and just as many people will tell you that “HTML5” is now only a marketing term. I agree to some extent, but that’s only part of the story. The important things to understand, and the focus of this book, are the game-changing aspects and challenges of developing web applications with the specifications that have fallen under the HTML5 umbrella or just received attention with the rise of HTML5.

Who This Book Is For

The way we write web apps is changing—and it will always change. This book attempts to capture a snapshot in time of the HTML5 revolution and covers topics from beginner to advanced. Maybe you’re a novice who’s just starting to learn web application development, or maybe you’re an expert fine-tuning your existing stack. Either way, HTML5 and JavaScript Web Apps will give you a baseline for building advanced client-side web applications.

If you’re a developer aiming to write lightning-fast, HTML5-driven applications, as well as to understand how the server interacts with today’s newer client-side concepts and technologies, then this book is for you.

Who This Book Is Not For

If you’re just starting to learn JavaScript, CSS, or HTML, then this book is not for you. Consult one of the many books that cover the basics of web application development before you begin reading HTML5 and JavaScript Web Apps. This book assumes you understand how to build a web application and have written one before with such libraries as jQuery, Prototype, or plain old DOM APIs.

Also, if you are convinced that server-side generated markup is the way of the future, then chances are you won’t enjoy this book. The topics covered here are mostly directed toward developers who think “offline first” and write modern web applications that start out not worrying about the server. The main idea driving this book is to use the web browser as a platform.

Finally, this book is geared toward the UI. There are a few examples of server-side code, mainly in Chapter 5, but everything else is client-side code with JavaScript and CSS.

What You’ll Learn

The world of HTLM5 and mobile is moving at light speed, and we are witnessing a revolution and shift from traditional server-side concepts to heavier client-side ideas. In this environment, building a web app purely from HTML5 and related specifications is complicated and challenging, to say the least. These standards can adapt gracefully across mobile and desktop browsers, however, and this book will help you shoulder the challenge.

Chapter 1 and Chapter 2 start with an overview of the Mobile Web and will help you get a good grasp on which browsers support the standards that this book talks about and which browsers you should support. Here you’ll learn on how to grade browsers so that your development team, QA team, and customers will know where you stand on browser support.

Chapter 3 jumps straight into developing a mobile web application with HTML5. This chapter will give you a starting point for building an application with native-like touch events and transitions. You’ll also learn to add offline support with the AppCache and dynamically enhance your app based on the type of network the user is on (3G, WiFi, an so on).

Chapter 4 introduces you to concepts and features that apply to all browsers, both mobile and desktop. This chapter covers advanced server-side topics, such as compression and minification, along with frameworks that can help you develop a build process. This chapter also compares today’s top five JavaScript MVC frameworks and how they interact with the server. Unlike other books that cover only the basics of JavaScript MVC, Chapter 4 takes a heavier look at how these frameworks interact with the server.

The remaining chapters go into detail on the five main HTML5 specifications. You’ll learn about the raw implementation of each specification, as well as how it’s used in real-world scenarios and use cases. Each chapter ends with a look at the frameworks available that support each technology.

For example, Chapter 5 takes a broad look at WebSockets and how you can use it on the client and server. This is the only chapter that goes into detail on server-side code. You’ll set up a simple WebSocket server and compare frameworks that can be used across mobile and desktop browsers. The chapter also contains a detailed comparison of Socket.IO, Vert.x, and Atmosphere.

Chapter 6 goes into detail on Web Storage. You’ll see how today’s top sites like Google, Yahoo!, Twitter, and Amazon are storing data on the client side and investigate the best ways to store data along with a breakdown of available frameworks.

Next, Chapter 7 looks at Geolocation and discusses real-world uses of tracking users with mobile web browsers and other concepts. This chapter outlines how to use the technology and where you might encounter pitfalls in various implementations.

Chapter 8 covers the Device Orientation API. Although it’s not the most glorious specification in existence, it has extremely valuable and valid uses, as you’ll learn. This chapter ends with an implementation using orientation for page navigation on mobile devices.

Focused on Web Workers, Chapter 9 goes into practical uses of threading in the browser, delving into more detail than simply processing prime numbers in a separate thread. The chapter provides real-world examples of using Web Workers for processing image data and shows you how to create your own thread pool.

By the end of the book, you should be comfortable with writing your own HTML5 web app that works across any browsers you wish to support. You will have a true understanding of what you can build with HTML5, its available frameworks, and today’s web browsers.

About the Code

The examples in this book are maintained at http://github.com/html5e. The JavaScript and CSS are self-contained in a simple framework called slidfast.js and slidfast.css. The JavaScript was purposely created to have no dependencies on any other libraries or frameworks. It is built specifically to showcase core JavaScript and DOM APIs that are provided by the browsers covered in each chapter. It’s a learning framework not intended for public consumption, but by all means, learn from it and use it wherever you feel necessary.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This icon signifies a tip, suggestion, or general note.

Caution

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “HTML5 and JavaScript Web Apps by Wesley Hales (O’Reilly). Copyright 2013 Hales Consulting, Inc., 978-1-449-32051-5.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

Safari® Books Online

Note

Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page here.

To comment or ask technical questions about this book, send email to .

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

This book is dedicated to my incredible wife, Kristen, and our beautiful children, Adam and Stella. I also thank and dedicate this effort to Jesus Christ, who has given me the talent and ability to write this book.

The book would not have been possible without Meghan Blanchette and Simon St. Laurent continually pushing me to do better. I’m not a super easy guy to work with and can be quite lazy at times ☺, so they deserve serious props.

Also, many, many thanks to Douglas Campos, Brian Leroux, Divya Manian, Jason Porter, Shelley Powers, and Darren Nelsen for taking the time to review this book. I sought out the best developers, authors, and speakers in the industry to provide feedback, and they pushed me to places I did not think about. They gave me great perspective on the different aspects of HTML5 and today’s Web. It was an honor to work with them and have their input.

Last but not least, the open source community around HTML5 and open web technologies is my source of inspiration, ideas, and fuel for this book. I would not be where I am today without the countless people who give so much back to the community from which they take. So thanks to you all.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required