nach oben

2012 | Buch

Pro HTML5 Performance

verfasst von: Jay Bryant, Mike Jones

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

Pro HTML5 Performance provides a practical guide to building extremely fast, light-weight and scalable websites using fully standards compliant techniques and best practices. It strikes a balance between imparting best-practice information for when you’re building ground up and instantly applicable techniques to help you solve issues with your existing projects.

In addition to a wealth of tips, tricks and secrets you’ll find advice and code samples that elegantly layout the problems your facing and the best ways of solving them. By reading Pro HTML5 Performance you’ll squeeze every last ounch of performance from your code, giving your applications unrivalled speed and cost-efficiency.

Inhaltsverzeichnis

Frontmatter

Introduction

Frontmatter

Chapter 1. Introduction

Abstract

Not long ago, while interviewing candidates for job openings, we discovered some appreciable knowledge gaps in the performance and scalability areas among our fellow developers. While many developers were fully versed in their server-side language of choice, they seemed to have no more than an anecdotal level of learning in HTML5 and CSS3. (By “anecdotal level,” we mean they’d seen examples of HTML5 and CSS3—or perhaps had read a synopsis of the new aspects of HTML5—and drew conclusions from those patterns but missed some of the deeper meaning behind them.) In other words, we found a lot of people who could tell us how to do something but not why they’d want to do that something. More importantly, they didn’t know how their favored techniques could make code perform better or reduce the time it took them to get work done. Seeing in this situation a great opportunity to help fellow developers elevate their front-end game, we decided to write this book.

Jay Bryant, Mike Jones

Performance Basics

Frontmatter

Chapter 2. Development Principles

Abstract

Having found a few principles to be helpful, we use them repeatedly throughout the book (and throughout our work outside the book, of course). These principles underlie everything we’re going to say in the book. Consequently, we thought we should delineate them here, before we move on to the chapters that deal with more specific topics. The following sections show the design and development principles that we embrace:

Code for Modern Browser Performance
Use CSS to Manage Boundaries
Embrace Progressive Enhancement
Embrace Separation of Concerns

Jay Bryant, Mike Jones

Chapter 3. Performance Guidelines

Abstract

Our experience and research have let us create a set of performance guidelines that we keep in mind when working on web sites. As it happens, we find that our guidelines mostly match those of Yahoo and Google and other companies that do best-in-breed web development.

Jay Bryant, Mike Jones

Chapter 4. Responsive Web Design

Abstract

In keeping with our trend of pointing out techniques that enhance web developer performance, possibly one of the biggest time-savers for developers is the idea of “One Codebase”. Essentially, it’s the idea of being able to use the same code to deliver an experience to desktop browsers, tablets, and mobile devices.

Jay Bryant, Mike Jones

Chapter 5. Understanding the Web Reuse Pattern

Abstract

When Mike first started working for one of the five largest e-commerce sites in the United States, he came up with a development approach that led to a faster development cycle and a much faster update cycle (or decreased maintenance time, to put it differently). This site has a lot of products and many ways to display all those products, depending on where a visitor is in the site (searching versus browsing by category versus browsing by price, and so on).

Jay Bryant, Mike Jones

Building a Web Site

Frontmatter

Chapter 6. Page Template

Abstract

Throughout Section II of this book, we’re going to focus on creating a sample site to demonstrate the principles we discussed in Section I. Reading about how something works only gets most people started on true understanding. Seeing it in action is a big step toward mastery. (Of course, to fully learn how to do something, you have to do it yourself, but we’re sure you will do so.) To give some context to the conversation, let’s look at the site before we start on how it’s built. Figure 6-1 shows the sample site we’re building, which you can find at http://clikz.us

Jay Bryant, Mike Jones

Chapter 7. Navigation

Abstract

Unless you’re making just a splash page, navigation is an essential aspect of your site. So you should really think about your strategy when it comes to this crucial element of your site’s success. Besides having a good taxonomy, you need to have a clear way for visitors to find and explore the different offerings available on your site. You can sometimes be tempted to throw a lot of pizzazz and weight into your interface, especially if you start with the design first. However, content is king. Consequently, as a rule, your navigation should never compete for attention with your content. That being said, your navigation should be easy to see and, more importantly, easy to use.

Jay Bryant, Mike Jones

Chapter 8. Masthead

Abstract

After the marathon of the last chapter, we thought you might like a break. Because we don’t have a lot to say about mastheads, we decided to balance that long chapter by following it with this short chapter. Our fundamental advice about mastheads is to keep them simple. Don’t try to stuff everything (or anything beyond the basics, really) into the masthead.

Jay Bryant, Mike Jones

Chapter 9. Footer

Abstract

Many sites have a footer. Usually, it’s a place to put legal information (such as copyright and trademark notices) and some content that applies to every page. Everyone who has surfed the web for more than ten minutes knows that, if you don’t find the Contact and About links in the header, look in the footer.

Jay Bryant, Mike Jones

Chapter 10. Fractal Design Patterns

Abstract

“Fractal” may seem a bit odd (especially since Jay has written about fractals in the strict mathematical sense in another book). In this case, though, we’re using the term somewhat metaphorically. By strict mathematical definition, a fractal is a geometric shape that has symmetry of scale, meaning that you can zoom in to an arbitrary depth and see the same pattern repeated. Figure 10-1 shows a fractal tree that Jay created by writing a Java class. It represents our notion of building many pages from a few reusable components.

Jay Bryant, Mike Jones

Chapter 11. Link Control

Abstract

You might be thinking, do we really need a control for a link? Isn’t it just easier to write a single line of HTML to take care of this task? While we’re fans of not using something complex when something simple will work, we also know we can gain significant benefits by making a link control. For one thing, we can improve the site’s usability. For another, we can greatly improve developer performance (we often call it developer velocity) for ourselves and for our teammates.

Jay Bryant, Mike Jones

Chapter 12. Sidebox Control

Abstract

Now that you’ve seen the relatively simple link control, let’s look at controls within controls and the developer productivity that such structures offer. The sidebox (or inset) is a staple of most multicolumn sites. A sidebox is usually located to the left or right of the main content area in a site. This control can be pretty versatile in that it can contain many different types of information: links, information callouts, navigation, surveys, and various others.

Jay Bryant, Mike Jones

Chapter 13. Button Control

Abstract

Here’s another seemingly simple piece of HTML to make into a control. However, while it may seem like an odd place to invest effort, doing so pays off in consistency, flexibility, and developer velocity. We’ll stick with the fractal design pattern. That is, we’ll use (reuse, really) the same HTML for each kind of button, use Boolean values on the server side to identify which kind of button to display, and create the presentation variations by dynamically setting a CSS class.

Jay Bryant, Mike Jones

Chapter 14. Price Control

Abstract

The price control is really two controls, but we’re putting them in the same chapter because they often go together. In addition to the actual price control, we have a shipping control. The price control contains price information—not just the final price but also base price, discounts, taxes, and so on. The shipping control contains shipping information.

Jay Bryant, Mike Jones

Chapter 15. Product Control

Abstract

In previous chapters, we have alluded to the product control, which uses other controls for much of its content. Because it is a stack of other controls and its usual layout is vertical, with one item of information stacked upon another, we normally call it the product stack. The control can also have a more horizontal layout, wherein content appears in two differently sized columns. As we do with other controls, we call the variations of the product control treatments. It has two treatments: vertical and horizontal.

Jay Bryant, Mike Jones

Chapter 16. Table Control

Abstract

As a front-end developer, Michael has a love-hate relationship with tables. On the one hand, tables offer a near-perfect way to display tabular data. On the other, some developers abuse tables as a layout mechanism for almost anything. Michael has frequently seen a developer (often a back-end or middleware developer pressed into doing front-end work) use nested tables just to move content a few pixels. To someone who knows what it should be, seeing that kind of thing is hugely frustrating. We’re sure many readers feel the same way.

Jay Bryant, Mike Jones

Chapter 17. Tab Control

Abstract

We’ve all seen lots of tabs on the web. Some of them are OK. Some stink. Naturally, we want to make a tab control that doesn’t stink (and that’s hopefully better than just OK), so that we can re-use it for all kinds of content while being sure it looks good and works well.

Jay Bryant, Mike Jones

Chapter 18. Form Controls

Abstract

Forms are essential to many web sites, certainly to e-commerce sites. If we can’t gather the visitors’ information, we can’t do business, and forms are the mechanism for gathering information. So we really can’t complete the book without a chapter on forms.

Jay Bryant, Mike Jones

Backmatter

Titel: Pro HTML5 Performance
verfasst von: Jay Bryant
Mike Jones
Verlag: Apress
Electronic ISBN: 978-1-4302-4525-4
Print ISBN: 978-1-4302-4524-7
DOI: https://doi.org/10.1007/978-1-4302-4525-4