logo资料库

Manning.SPA.Design.and.Architecture.pdf

第1页 / 共314页
第2页 / 共314页
第3页 / 共314页
第4页 / 共314页
第5页 / 共314页
第6页 / 共314页
第7页 / 共314页
第8页 / 共314页
资料共314页,剩余部分请下载后查看
SPA Design and Architecture
brief contents
contents
foreword
preface
acknowledgments
about this book
Roadmap
Audience
Code conventions and downloads
Software and hardware requirements
Author Online
About the author
about the cover illustration
Part 1 The basics
1 What is a single-page application?
1.1 SPA in a nutshell
1.1.1 No browser refreshes
1.1.2 Presentation logic in the client
1.1.3 Server transactions
1.2 A closer look
1.2.1 An SPA starts with a shell
1.2.2 From traditional pages to views
1.2.3 The birth of a view
1.2.4 View swapping for zero reload navigation
1.2.5 Fluidity through dynamic updates
1.3 Benefits of SPAs over traditional web applications
1.4 Rethinking what you already know
1.5 Ingredients of a well-designed SPA
1.5.1 Organizing your project
1.5.2 Creating a maintainable, loosely coupled UI
1.5.3 Using JavaScript modules
1.5.4 Performing SPA navigation
1.5.5 Creating view composition and layout
1.5.6 Enabling module communication
1.5.7 Communicating with the server
1.5.8 Performing unit testing
1.5.9 Using client-side automation
1.6 Summary
2 The role of MV* frameworks
2.1 What is MV*?
2.1.1 Traditional UI design patterns
2.1.2 MV* and the browser environment
2.2 Common MV* concepts
2.2.1 Meet the frameworks
2.2.2 Meet our MV* project
2.2.3 Models
2.2.4 Bindings
2.2.5 Templates
2.2.6 Views
2.3 Why use an MV* framework?
2.3.1 Separation of concerns
2.3.2 Routine tasks simplified
2.3.3 Productivity gains
2.3.4 Standardization
2.3.5 Scalability
2.4 Choosing a framework
2.5 Chapter challenge
2.6 Summary
3 Modular JavaScript
3.1 What is a module?
3.1.1 Module pattern concepts
3.1.2 The module’s structure
3.1.3 The revealing module pattern
3.2 Why modular programming?
3.2.1 Avoiding name collisions
3.2.2 Protecting your code’s integrity
3.2.3 Hiding complexity
3.2.4 Reducing the impact of code changes
3.2.5 Organizing your code
3.2.6 Understanding disadvantages of the module pattern
3.3 The module pattern dissected
3.3.1 Achieving privacy
3.3.2 Creating the public API
3.3.3 Allowing for global imports
3.3.4 Creating the module’s namespace
3.4 Module loading and dependency management
3.4.1 Script loaders
3.4.2 Asynchronous Module Definition
3.4.3 Using AMD modules with RequireJS
3.5 Chapter challenge
3.6 Summary
Part 2 Core concepts
4 Navigating the single page
4.1 What is a client-side router?
4.1.1 Traditional navigation
4.1.2 SPA navigation
4.2 Routes and their configuration
4.2.1 Route syntax
4.2.2 Route entries
4.2.3 Route parameters
4.2.4 Default routes
4.3 How do client-side routers work?
4.3.1 The fragment identifier method
4.3.2 The HTML5 History API method
4.3.3 Changes for the HTML5 History API method
4.4 Putting it all together: implementing routing in SPAs
4.4.1 The faculty list (default route)
4.4.2 The main contact route
4.4.3 Faculty office hours (parameterized route)
4.5 Chapter challenge
4.6 Summary
5 View composition and layout
5.1 Introducing our project
5.2 Reviewing layout design concepts
5.2.1 Views
5.2.2 Regions
5.2.3 View composition
5.2.4 Nested views
5.2.5 Routes
5.3 Considering alternatives for advanced composition and layout
5.3.1 Pros
5.3.2 Cons
5.4 Designing the application
5.4.1 Designing the base layout
5.4.2 Designing the default content
5.4.3 Using a view manager for complex designs
5.4.4 Creating nested views with their own states
5.5 Chapter challenge
5.6 Summary
6 Inter-module interaction
6.1 Review of module concepts
6.1.1 Modules encapsulate code
6.1.2 APIs provide controlled access to internal functionality
6.1.3 SRP means designing with a single purpose
6.1.4 Code reuse helps your project scale
6.2 Inter-module interaction methods
6.2.1 Inter-module interaction through dependencies
6.2.2 Dependency method pros and cons
6.2.3 Inter-module interaction through publish/subscribe
6.2.4 Pub/sub pros and cons
6.3 Project details
6.3.1 Searching
6.3.2 Displaying product information
6.4 Chapter challenge
6.5 Summary
7 Communicating with the server
7.1 Understanding the project requirements
7.2 Exploring the communication process
7.2.1 Choosing a data type
7.2.2 Using a supported HTTP request method
7.2.3 Converting the data
7.3 Using MV* frameworks
7.3.1 Generating requests
7.3.2 Processing results with callbacks
7.3.3 Processing results with promises
7.3.4 Promise error handling
7.4 Consuming RESTful web services
7.4.1 What is REST?
7.4.2 REST principles
7.4.3 How MV* frameworks help us be RESTful
7.5 Project details
7.5.1 Configuring REST calls
7.5.2 Adding product items to the cart
7.5.3 Viewing the cart
7.5.4 Updating the cart
7.5.5 Removing products from the cart
7.6 Chapter challenge
7.7 Summary
8 Unit testing
8.1 Understanding the project
8.2 What is a unit test?
8.2.1 Benefits of unit testing
8.2.2 Creating better unit tests
8.3 Traditional unit testing
8.3.1 Getting started with QUnit
8.3.2 Creating your first unit tests
8.3.3 Testing code built with MV* objects
8.3.4 Testing changes to the DOM
8.3.5 Adding other testing frameworks to the mix
8.4 Chapter challenge
8.5 Summary
9 Client-side task automation
9.1 Common uses for task runners
9.1.1 Live browser reloads
9.1.2 Automatic JavaScript and CSS preprocessing
9.1.3 Automatic code analysis from linters
9.1.4 Continuous unit testing
9.1.5 File concatenation
9.1.6 Code minification
9.1.7 Continuous integration
9.2 Choosing a task runner
9.3 Our project
9.3.1 Introducing Gulp.js
9.3.2 Creating your first task
9.3.3 Creating a code analysis task
9.3.4 Creating a browser-reload task
9.3.5 Automating unit testing
9.3.6 Creating a build process
9.4 Chapter challenge
9.5 Summary
appendix A Employee directory example walk-through
A.1 CSS
A.2 Backbone.js example
A.2.1 Downloading your dependencies
A.2.2 Directory structure
A.2.3 The shell
A.2.4 main.js
A.2.5 app.js
A.2.6 directoryContent.html
A.2.7 directory.js view
A.2.8 entrylist.js view
A.2.9 entries.js collection
A.2.10 employee.js view
A.2.11 employeeRecord.js model
A.2.12 entrytemplate.html
A.3 Knockout example
A.3.1 Downloading your dependencies
A.3.2 Directory structure
A.3.3 The shell
A.3.4 main.js
A.3.5 app.js
A.3.6 directoryContent.html
A.3.7 directory.js
A.3.8 entrytemplate.html
A.4 AngularJS example
A.4.1 Downloading your dependencies
A.4.2 Directory structure
A.4.3 The shell
A.4.4 app.js
A.4.5 directoryContent.html
A.4.6 entrytemplate.html
A.5 Summary
appendix B Review of the XMLHttpRequest API
B.1 Using the XMLHttpRequest object
B.2 Making requests
B.2.1 Using URL parameters
B.2.2 Using the request body
appendix C Chapter 7 server-side setup and summary
C.1 Server-side objects
C.2 Summary of server-side calls
C.2.1 Viewing the cart
C.2.2 Adding an item to the cart
C.2.3 Updating the cart
C.2.4 Deleting an item
C.2.5 Searching for a product
C.2.6 Displaying a product
C.3 The project
C.3.1 Prerequisites
C.3.2 Spring MVC configuration
C.3.3 Annotations used in our project
appendix D Installing Node.js and Gulp.js
D.1 Installing Node.js
D.2 Installing Gulp.js
index
Symbols
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Related Manning Titles
SPA Design and Architecture-back
Understanding single-page web applications Emmit A. Scott, Jr. FOREWORD BY Burke Holland M A N N I N G
SPA Design and Architecture Licensed to Mark Watson
ii Licensed to Mark Watson
SPA Design and Architecture Understanding single-page web applications EMMIT A. SCOTT, JR. M A N N I N G SHELTER ISLAND Licensed to Mark Watson
iv For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com ©2016 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine. Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Development editor: Dan Maharry Technical development editor: Joel Kotarski Technical proofreaders: Andrew Gibson Jean-François Morin Copyeditor: Sharon Wilkey Proofreader: Linda Recktenwald Typesetter: Marija Tudor Cover designer: Marija Tudor ISBN: 9781617292439 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 20 19 18 17 16 15 Licensed to Mark Watson
To my three beautiful children, Ana Carolina, David, and Sofía. Thanks for all the smiles, hugs, and unconditional love. You are forever in my heart. Licensed to Mark Watson
vi Licensed to Mark Watson
brief contents PART 1 THE BASICS ..................................................................1 1 ■ What is a single-page application? 3 2 ■ The role of MV* frameworks 22 3 ■ Modular JavaScript 52 PART 2 CORE CONCEPTS ........................................................83 Inter-module interaction 129 4 ■ Navigating the single page 85 5 ■ View composition and layout 106 6 ■ 7 ■ Communicating with the server 156 8 ■ Unit testing 186 9 ■ Client-side task automation 209 appendix A Employee directory example walk-through 229 appendix B Review of the XMLHttpRequest API 259 appendix C Chapter 7 server-side setup and summary 266 appendix D Installing Node.js and Gulp.js 277 vii Licensed to Mark Watson
分享到:
收藏