| |
| |
| Foreword | |
| |
| |
| Preface | |
| |
| |
| |
| The Tenets | |
| |
| |
| Managing Complexity | |
| |
| |
| Modular Components | |
| |
| |
| Achieving Modularity | |
| |
| |
| Benefits of Modularity | |
| |
| |
| Ten Tenets for Large Web Applications | |
| |
| |
| |
| Object Orientation | |
| |
| |
| The Fundamentals of OOP | |
| |
| |
| Why Object Orientation? | |
| |
| |
| UML Class Diagrams | |
| |
| |
| Generalization | |
| |
| |
| Association | |
| |
| |
| Modeling a Web Page | |
| |
| |
| Defining Page Types | |
| |
| |
| Defining Module Types | |
| |
| |
| Writing the Code | |
| |
| |
| Achieving Modularity | |
| |
| |
| Object-Oriented PHP | |
| |
| |
| Classes and Interfaces | |
| |
| |
| Inheritance in PHP | |
| |
| |
| Object-Oriented JavaScript | |
| |
| |
| Objects | |
| |
| |
| Inheritance in JavaScript | |
| |
| |
| |
| Large-Scale HTML | |
| |
| |
| Modular HTML | |
| |
| |
| A Bad Example: Using a Table and Presentation Markup | |
| |
| |
| A Better Example: Using CSS | |
| |
| |
| The Best Example: Semantically Meaningful HTML | |
| |
| |
| Benefits of Good HTML | |
| |
| |
| HTML Tags | |
| |
| |
| Bad HTML Tags | |
| |
| |
| Good HTML Tags | |
| |
| |
| IDs, Classes, and Names | |
| |
| |
| Conventions for Naming | |
| |
| |
| XHTML | |
| |
| |
| Benefits of XHTML | |
| |
| |
| XHTML Guidelines | |
| |
| |
| RDFa | |
| |
| |
| RDFa Triples | |
| |
| |
| Applying RDFa | |
| |
| |
| HTML 5 | |
| |
| |
| |
| Large-Scale CSS | |
| |
| |
| Modular CSS | |
| |
| |
| Including CSS | |
| |
| |
| Applying CSS | |
| |
| |
| Specificity and Importance | |
| |
| |
| Scoping with CSS | |
| |
| |
| Standard Module Formats | |
| |
| |
| Positioning Techniques | |
| |
| |
| CSS Box Model | |
| |
| |
| Document Flow | |
| |
| |
| Relative Positioning | |
| |
| |
| Absolute Positioning | |
| |
| |
| Floating | |
| |
| |
| Layouts and Containers | |
| |
| |
| Example Layouts | |
| |
| |
| Example Containers | |
| |
| |
| Other Practices | |
| |
| |
| Browser Reset CSS | |
| |
| |
| Font Normalization | |
| |
| |
| |
| Large-Scale JavaScript | |
| |
| |
| Modular JavaScript | |
| |
| |
| Including JavaScript | |
| |
| |
| Scoping with JavaScript | |
| |
| |
| Working with the DOM | |
| |
| |
| Common DOM Methods | |
| |
| |
| Popular DOM Libraries | |
| |
| |
| Working with Events | |
| |
| |
| Event Handling Normalization | |
| |
| |
| A Bad Example: Global Data in Event Handlers | |
| |
| |
| A Good Example: Object Data in Event Handlers | |
| |
| |
| Event-Driven Applications | |
| |
| |
| Working with Animation | |
| |
| |
| Motion Animation | |
| |
| |
| Sizing Animation | |
| |
| |
| Color Transition | |
| |
| |
| An Example: Chained Selection Lists | |
| |
| |
| |
| Data Management | |
| |
| |
| Dynamic Modules | |
| |
| |
| Data Managers | |
| |
| |
| Creating Data Managers | |
| |
| |
| Extending Data Managers | |
| |
| |
| Data Using SQL As a Source | |
| |
| |
| An SQL Example | |
| |
| |
| Data Using XML As a Source | |
| |
| |
| An XML Example | |
| |
| |
| Data from Web Services | |
| |
| |
| Data in the JSON Format | |
| |
| |
| Cookies and Forms | |
| |
| |
| Managing Data in Cookies | |
| |
| |
| Managing Data from Forms | |
| |
| |
| |
| Large-Scale PHP | |
| |
| |
| Modular Web Pages | |
| |
| |
| Generating Pages in PHP | |
| |
| |
| Working with Pages | |
| |
| |
| Public Interface for the Page Class | |
| |
| |
| Abstract Interface for the Page Class | |
| |
| |
| Implementation of the Page Class | |
| |
| |
| Extending the Page Class | |
| |
| |
| Working with Modules | |
| |
| |
| Public Interface for the Module Class | |
| |
| |
| Abstract Interface for the Module Class | |
| |
| |
| Implementation of the Module Class | |
| |
| |
| Extending the Module Class | |
| |
| |
| An Example Module: Slideshow | |
| |
| |
| Layouts and Containers | |
| |
| |
| Special Considerations | |
| |
| |
| Handling Module Variations | |
| |
| |
| Multiple Instances of a Module | |
| |
| |
| Dynamic JavaScript and CSS | |
| |
| |
| Implementing Nested Modules | |
| |
| |
| |
| Large-Scale Ajax | |
| |
| |
| In the Browser | |
| |
| |
| Managing Connections | |
| |
| |
| Using Ajax Libraries | |
| |
| |
| On the Server | |
| |
| |
| Exchange Formats | |
| |
| |
| Server Proxies | |
| |
| |
| Modular Ajax | |
| |
| |
| MVC and Ajax | |
| |
| |
| Using Ajax with MVC | |
| |
| |
| Public Interface for the Model Object | |
| |
| |
| Implementation of the Model Object | |
| |
| |
| Public Interface for the View Object | |
| |
| |
| Abstract Interface for the View Object | |
| |
| |
| View Object Implementation | |
| |
| |
| Public Interface for the Connect Object | |
| |
| |
| Abstract Interface for the Connect Object | |
| |
| |
| Implementation of the Connect Object | |
| |
| |
| Controllers | |
| |
| |
| An Example of Ajax with MVC: Accordion Lists | |
| |
| |
| |
| Performance | |
| |
| |
| Caching Opportunities | |
| |
| |
| Caching CSS and JavaScript | |
| |
| |
| Caching Modules | |
| |
| |
| Caching for Pages | |
| |
| |
| Caching with Ajax | |
| |
| |
| Using Expires Headers | |
| |
| |
| Managing JavaScript | |
| |
| |
| JavaScript Placement | |
| |
| |
| JavaScript Minification | |
| |
| |
| Removing Duplicates | |
| |
| |
| Distribution of Assets | |
| |
| |
| Content Delivery Networks | |
| |
| |
| Minimizing DNS Lookups | |
| |
| |
| Minimizing HTTP Requests | |
| |
| |
| Control Over Site Metrics | |
| |
| |
| Modular Testing | |
| |
| |
| Using Test Data | |
| |
| |
| Creating Test Data | |
| |
| |
| |
| Application Architecture | |
| |
| |
| Thinking Modularly | |
| |
| |
| Organizing Components | |
| |
| |
| Sitewide Architecture | |
| |
| |
| Section Architecture | |
| |
| |
| Architecture for Pages | |
| |
| |
| Architecture and Maintenance | |
| |
| |
| Reorganizing Module Uses | |
| |
| |
| Adding Module Variations | |
| |
| |
| Making Widespread Changes | |
| |
| |
| Changes in Data Sources | |
| |
| |
| Exposing Modules Externally | |
| |
| |
| Index | |