Pro JavaScript RIA Techniques: Best Practices, Performance and Presentation

Turn your JavaScript knowledge into beautiful, dynamic, and performance-tuned rich Internet applications with Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation.

This book is aimed at web developers and designers who need to improve the user experience of their sites by making their JavaScript code more efficient and their sites more responsive, while incorporating more complexity all at the same time.

Download Source Code – version 1.6 (Update 17 December 2010)

Part One: Best Practices

In the first part of the book, I present some tried-and-tested guidelines for building Rich Internet applications (RIAs). Applying these guidelines will allow you to build the foundations of a web site structure that’s scalable from a single page with a few lines of code up to many thousands of pages and thousands of lines of code. I show you how to follow best practices in a sensible, pragmatic way that won’t make the tasks of application maintenance and bug fixing daunting – during construction or in the future.

Chapter One: Building a Solid Foundation – free download

Based on my experiences and what I’ve learned from others, I’ve developed an effective, sensible approach to web development. This approach, along with a handful of smart techniques thrown in the mix, should minimize those head-bashing moments and ensure things run more smoothly right from the get-go all the way through to the launch of your next web site or application.

This chapter teaches you how to build a solid foundation of scalable, maintainable HTML and CSS code for your projects.

Chapter Two: JavaScript for Rich Internet Applications

In this chapter, the focus is on JavaScript, which we use in our pages to simplify tasks for our end users, provide reactions to their actions, and attempt to make their time on the Web a gentler and user-friendlier experience. You’re going to build on your existing knowledge of this language throughout this chapter to discover how to structure your code in a scalable, flexible, and maintainable way; use object-oriented programming principles; and overcome cross-browser implementation differences. You’ll then discover techniques to help you build RIAs and, finally, learn how to write automated tests for your code to make it more robust.

Part Two: Performance

The second part of the book focuses on performance, efficiency, and speed. Here, you will discover techniques for ensuring that end users get a more responsive user interface, while reducing the bandwidth burden on your hosting provider.

Chapter Three: Understanding the Web Browser

The web browser acts as a facilitator – downloading, rendering, and executing your web application for your end users. The web browser has the power and potential to make simple code look like a glossy magazine article (in the case of Apple’s Safari browser) or as plain text without any images or advanced abilities (in the case of the open source Lynx browser).

This chapter explains how web browsers work internally to put together the page your users see on their screen based on the code you’ve written. It also describes how web pages get to your browser over your network connection, and highlights a number of points of contention that can hinder performance.

Chapter Four: Performance Tweaking

In this chapter, we will look at how to make your web page come to life, ready for your visitors to use in their web browser, as quickly as possible. Studies have shown that users don’t notice good performance, but they do feel hurt by poor performance. People expect their web sites to load as soon as they make a request for it. Why should we give them any less of an experience than they expect? The key here is efficiency – getting the most data downloaded to the browser in the quickest time.

Chapter Five: Smoke and Mirrors: Perceived Responsiveness

The previous chapter covered the topic of code performance and efficiency, including many suggestions to help improve your end users’ experience with your RIAs. Unfortunately, no matter how hard you try, you will not be able to reduce the amount of time required for certain actions. Ajax requests, for example, are limited by the quality of the network connection between the browser and server.

As web developers, we need to figure out how to keep our end users informed that things are occurring behind the scenes, and give them the impression that they are receiving a fast, responsive web browsing experience, despite these holdups. This chapter covers this issue of perceived responsiveness, rather than actual performance – the art of illusion and “smoke and mirrors” to provide the impression of a fast and responsive web application in those times when the browser and server just can’t produce actual results quickly enough.

Part Three: Presentation

In the third and final part of the book, I will take you into the realm of the user interface, introducing you to techniques and third-party reusable components that will help you to build a better-looking and better-behaving RIA. And hopefully you will be inspired to develop your own reusable components and share them with the rest of the web development community!

Chapter Six: Beautiful Typography

You won’t be long into your career as a web developer before you discover the need to format some text in a custom or corporate font – a typeface that is not in the standard set of pre-installed fonts on your end users’ computers. You will then need to decide how best to display that stylized text. This chapter presents a number of different solutions to the problem. We look at the pros and cons of each method with regard to ease of development and maintainability, accessibility, performance, and visual appearance.

Chapter Seven: Multimedia Playback

The desire to use the Internet to broadcast audio and video to consumers has been around almost as long as the Web itself. Multimedia browser plug-ins, usually restricted to certain audio and video formats developed by certain manufacturers, and streaming servers to provide content to these plug-ins, have been around for several years. In recent times, format-specific plug-ins have been shunned by many web developers, who have opted to use the Adobe Flash Player browser plug-in, largely due to its proliferation.

This chapter begins with the important topic of how to deal with accessibility for multimedia content. Then it covers some prebuilt audio and video player components that utilize the Flash Player plug-in. Finally, we’ll take a look forward to the future of native browser support for audio and video.

Chapter Eight: Form Controls

Forms often make up a major part of any web application. A form might encourage users to submit feedback, provide search functionality, let users add information to an online database, and so on. With a form, you are inviting your end users to give some kind of information back to you in order to get something back themselves. Forms are some of the most interactive parts of the web site. They also can be the parts that most regularly frustrate users. Building and laying out forms and form fields correctly are absolutely paramount to your applications.

This chapter guides you through customization of existing HTML form fields and shows you how to add new types of controls. You’ll see how to construct forms that are more understandable and visually pleasing for your end users.

Chapter Nine: Offline Storage – When the Lights Go Out

We’ve all been there. You’ve spent 20 minutes perfecting that important e-mail message in your web mail client, you’re finally ready to send it – and boom! – it’s not going anywhere. You try again, and still nothing. Then you realize that your network connection has dropped, so you don’t have access to the Internet anymore. What do you do? At this point, many of us have attempted to copy and paste the text into a document stored on the computer itself, where it’s comparatively safe. You should be able to retrieve it if you need to restart your browser or, worse still, the system crashes.

This is the problem with most RIAs: they are only as good as the reliability of the network connection and browser in which they are running. We need some way of storing important information on the user’s computer or device if the network connection between the browser and the server becomes unavailable for some reason.

In this chapter, we’ll investigate the methods available to us in different browsers for storing content locally. You’ll see how to use a combination of these methods effectively within your own RIAs to save data, read back data, and delete data, ensuring cross-browser support.

Chapter Ten: Binary Ajax

At this point, you should be familiar with retrieving and sending text-based data between the browser and the web server using the Ajax technique. This chapter explains how to retrieve data stored in other types of files, such as images, audio, and video, dynamically through JavaScript. This allows you to extract information stored within those files for use within your web application.

Chapter Eleven: Drawing in the Browser

As part of your web application, you may wish to dynamically render a chart, graph, or other visual representation of live data. Of course, you could send your data to the server and have it generate the required images, but why go to all that trouble when you can have the browser do the drawing? Methods are available to allow you to render graphic elements within current browsers by using entirely front-end code.

This chapter introduces two separate technologies available in today’s browsers that make it possible to draw vector graphics in your browser: Scalable Vector Graphics and Vector Markup Language. We’ll also look at a third-party cross-browser component that will allow you to draw charts, graphs, and other graphics within your own RIAs using either technology, as appropriate. Finally, you’ll learn about a new HTML 5 tag for rendering graphics on your pages.

Chapter Twelve: Accessibility in Rich Internet Applications

As I have emphasize throughout the book, accessibility is one of the fundamentals of web development. As web developers, we need to ensure that our web applications can reach and be used by the widest audience possible. Our end users should be able to access the information and interface we provide using whatever browsing technology they have available, to suit their own needs and preferences. This final chapter of the book focuses on designing your RIAs for the greatest possible accessibility.