Client-Side Web

319 Pages·7.399 MB·English

by  Silk, Project;Brumfield, Bob;Cox, Geoff;Nel

P
R O J E C T
S
I L K
Client-Side Web Development
for Modern Browsers
Bob Brumfi eld
Geoff Cox
Nelly Delgado
Michael Puleio
Karl Shiffl ett
Don Smith
Dwayne Taylor
• • • • • •
• • • • • • • •
• • • • • • •
• • • • •
project silk

Project Silk
Client-side Web Development
for Modern Browsers

Bob Brumfield
Geoff Cox
Nelly Delgado
Michael Puleio
Karl Shifflett
Don Smith
Dwayne Taylor
ISBN: 978-1-62114-011-5
This document is provided “as-is.” Information and views expressed in this
document, including URL and other Internet website references, may change
without notice. You bear the risk of using it. Some examples depicted herein are
provided for illustration only and are fictitious. No real association or connection is
intended or should be inferred.
© 2011 Microsoft. All rights reserved.
Microsoft, Windows, Windows Server, Windows Vista, Windows Azure, Silverlight,
Expression, Expression Blend, MSDN, IntelliSense, Internet Explorer, SQL Azure,
SQL Server, Visual C#, Visual C++, Visual Basic, and Visual Studio are trademarks of
the Microsoft group of companies.
All other trademarks are the property of their respective owners.
Contents
foreword xv
foreword xvii
the team who brought you this guide xix
ReadMe xxi
installation overview xxi
Step 1: Install System Requirements xxii
Step 2: Download and Install Project Silk xxii
Step 3: Run Script to Install NuGet Packages xxiii
Step 4: Download External JavaScript Libraries xxiii
jqPlot xxiii
Step 5: Install Test Libraries (Optional) xxiv
jquery.simulate.js (Optional) xxiv
QUnit (Optional) xxiv
Step 6: Run Mileage Stats xxiv
Running in Release Mode xxvi
About Mileage Stats xxvi
About the Book xxix
Requirement for Jump List Items to Appear xxix
Known Issues xxx
Community xxxi
Resources and Further Reading xxxi
1 introduction 1
Prerequisties 2
Spectrum of Web Applications 2
Characteristics of Modern Web Applications 3
Considerations for Building Modern Web Applications 3
Team Skills 4
Technologies 4
Ajax 5
JavaScript 5
jQuery 6
Modernizr 6
ASP.NET MVC Razor 7
Dependency Injection 7
Exploring This Guidance 8
Exploring the Mileage Stats Reference Implementation 8
Using Mileage Stats 9
Exploring the QuickStart 16
Exploring the Documentation 16
Community 18
Further Reading 18
2 architecture 21
Introduction 21
Structure 23
jQuery Templates 23
Modularity 24
Communication 26
Direct Communication 27
Loose Communication 27
Navigation 27
Data 28
Architectural Alternatives 29
Summary 30
Further Reading 31
3 jquery ui widgets 33
Introduction 33
Widget Fundamentals 34
Defining a Widget 35
Using a Widget 36
Managing Lifetime 36
Creation 36
Initialization 38
Destruction 38
Defining Options 38
When Options Change 39
Functions as Options 40
The Widget Method 41
Public Methods 41
Reusing an Instance 42
Using the Pseudo Selector 43
Private Members 43
Methods 43
Properties 44
Static Members 44
Events 46
Raising the Event 46
Binding Handlers 46
Event Naming 47
Options as Callbacks 47
Inheritance 48
Summary 49
Further Reading 50
Resources 50
4 design and layout 51
Introduction 51
Design is a Worthwhile Investment 51
Web Project Designer Roles 52
Focus on the User 53
Design Prototyping 53
User Experience Design Considerations 54
Consistency 54
Responsiveness 55
Familiar Metaphors 55
Streamlining the Experience 55
Anticipate Usability Issues 57
Limit the Choices 57
User Interface Design Considerations 57
Color 58
Typography 58
Balance and Symmetry 59
Consistency 60
Simplicity 60
Other Design Considerations 60
Designing the Mileage Stats Reference Implementation 60
Identifying User Stories 60
Mileage Stats User Story 60
Using Flow Diagrams to Prototype the UX 61
Using Wireframes to Prototype the UI 63
Creating Site Mockups 64
Implementing the Design 67
Converting a Mockup to HTML 67
CSS Organization 70
Vendor-Prefixed Attributes 71
Debugging 72
Summary 73
Useful Design Tools 73
Further Reading 74
5 modularity 77
Introduction 77
Benefits of Modularity for Hybrid-Design
Web Applications 78
Leveraging Frameworks 78
Support for an Immersive UI 79
Support for Team-Oriented Development 79
Explicit Control over Application Initialization 79
Ability to Externally Configure Modules 79
Decoupled Module Interactions 79
Troubleshooting and Debugging 80
Code Base Maintenance 80
Testing 80
Factors That Influence a Modular Design 80
Page Layout 81
The Dashboard Layout 83
The Details Layout 84
Animations 85
Refreshing Data 87
Functional Roles and Categories for Modules 88
UI Modules 88
Behavioral Modules 88
Infrastructure Modules 89
JavaScript Module Implementations 89
Using JavaScript Objects as Modules 90
Using jQuery Plug-ins as Modules 90
Using Widgets as Modules 91
Externally Configuring Modules 93
Initializing Modules 93
Communicating Between Modules 94
Testing Modules 94
Summary 96
Further Reading 96
6 client data management
and caching 97
Introduction 97
Client-Side Data Design 98
Data Manager 99
Benefits of the Data Manager Abstraction 99
Data Request 99
Data Request Options 100
Performing a Data Request 101
Performing Ajax Requests 101
Data Cache 104
Adding and Retrieving Cached Data 104
Removing a Data Cache Item 105
Summary 105
Further Reading 106
7 manipulating client-side html 107
Introduction 107
The Roles and Responsibilities of Client-Side Languages 107
Structure, Appearance, and Behavior 108
Adding Interactive Behavior to an Application 108
Using a JavaScript Library to Manipulate the DOM 109
Selecting and Manipulating Existing HTML Elements 110
Selecting Elements 110
Using Context 111
Using Data- Attributes 112
Modifying Existing Elements 113
Showing and Hiding Content 113
Updating Element Attributes 114
Generating and Loading New HTML in a Page 116
Generating HTML Dynamically
with JavaScript and jQuery 116
Retrieving HTML Fragments from the Server 117
Content Retrieval Decisions in Mileage Stats 117
Using Templates to Retrieve and Generate HTML 118
Anatomy of a jQuery Template 118
Server-Side Rendering and jQuery Templates 120
Summary 121
Further Reading 122