Do you want to build resilient online apps that delight and satisfy users, regardless of the network state? Do you want to learn about frameworks that make cross-device synchronization easy? Do you need to communicate the value and efficacy of designing for everyone and not just people with a fast, reliable Internet connection?
If so, this book is for you. We'll start by talking about the realities of poor and non-existent Internet connections, then develop an offline app using Sencha Touch, and gradually convert it to a fully functional online experience that retains the robustness of its offline roots. You'll learn valuable tips and techniques that you can use in your own projects.
Chapter 1, The Pain of Being Offline, illustrates the pain of a typical offline experience with a story. It explains how this is caused by not designing for the worst-case scenario; in this case, a lack of Internet connectivity. It proposes that a better way of developing web apps is to assume that a reliable Internet connection will not always be available and hence, build to this assumption.
Chapter 2, Building a To-do App, takes you through the setting up of your development environment. It implements a basic offline version of the to-do app using Sencha Touch. It describes the principles of a great offline experience and summarizes the ways in which the app must evolve in an online context to continue to adhere to those principles.
Chapter 3, Designing Online Behavior, talks about using offline behavior as a guide and planning the online experience of the app. What superset of features will the to-do app support when online? Think about the app in terms of a bunker versus beach house analogy.
Chapter 4, Getting Online, discusses the available offline databases (including PouchDB, remoteStorage, and Hoodie) and switches the app storage to PouchDB. It shows you how to use IBM Cloudant to host and distribute the data in your app.
Chapter 5, Be Honest about What's Happening, informs the user whether the to-do app is offline or online. It assures the users that the changes that they make while offline will be eventually saved, so they don't need to worry about data loss. When the network is flaky, adjust the behavior to compensate, inform the user of the trouble, and let them provide direction.
Chapter 6, Be Eventually Consistent, takes you through the split-brain problem that occurs in networks when two databases lose connectivity, resulting in different data in each database. Sometimes, these conflicts can be resolved automatically when the connection is restored, but most often, it's not. Make the to-do app handle these situations gracefully.
Chapter 7, Choosing Intelligent Defaults, investigates where our defaults fall short and how to improve them. Up to now, we've stuck with the standard defaults provided by our offline database. Learn to recognize the scenarios where our defaults are insufficient and ask (or infer from) the users to guide the caching behavior. Improve the empty states and error messages in our app.
Chapter 8, Networking While Offline, talks about the ways we can extend the illusion of being online through these additional mechanisms: mesh networking, peer-to-peer sharing, and spatial context. When offline, it's possible for a device to network with other devices via Wi-Fi or Bluetooth.
Chapter 9, Testing and Measuring the UX, takes you through creating a test for the to-do app, showing how it performs under different network conditions. It runs both the offline app and online app, comparing the behavior of each. It shows you how the new app retains the robustness of the offline version, while adding the flexibility of online functionality. It suggests the ways in which it could be further improved and ends with suggestions for further reading.
A laptop or desktop and (optionally) a mobile device running one of the major mobile operating systems. The instructions in this book assume that you use the Chrome browser and Apple products, but the development tools are cross-platform, so any of the major browsers or operating systems should suffice.
If you want to deploy your app to an iOS device, you will need to purchase an Apple Developer membership. We will discuss the details of this in Chapter 2, Building a To-do App.
This book is for mobile application designers and developers who work with applications that rely heavily on Internet connectivity and who would like to improve the robustness and ease of use of their applications through the adoption of the offline-first paradigm.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, URLs, and user input are shown as follows: Copy this file (named pouchdb-3.6.0.min.js or similar) to the todo-app/ folder.
A block of code is set as follows:
Ext.define('TodoApp.store.Item', {
extend: 'Ext.data.Store',
config: {
model: 'TodoApp.model.Item',
autoLoad: true
}
});Any command-line input or output is written as follows:
$ brew install node
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/4573OT_ColouredImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.