SPA Design and Architecture
Understanding single-page web applications
Emmit A. Scott, Jr.
Foreword by Burke Holland
  • November 2015
  • ISBN 9781617292439
  • 312 pages
  • printed in black & white

Takes a very complex topic and breaks it down into easily understandable and digestible pieces.

From the Foreword by Burke Holland, Telerik

SPA Design and Architecture teaches you the design and development skills you need to create SPAs. Includes an overview of MV* frameworks, unit testing, routing, layout management, data access, pub/sub, and client-side task automation. This book is full of easy-to-follow examples you can apply to the library or framework of your choice.

About the Technology

The next step in the development of web-based software, single-page web applications deliver the sleekness and fluidity of a native desktop application in a browser. If you?re ready to make the leap from traditional web applications to SPAs, but don?t know where to begin, this book will get you going.

About the book

SPA Design and Architecture teaches you the design and development skills you need to create SPAs. You?ll start with an introduction to the SPA model and see how it builds on the standard approach using linked pages. The author guides you through the practical issues of building an SPA, including an overview of MV* frameworks, unit testing, routing, layout management, data access, pub/sub, and client-side task automation. This book is full of easy-to-follow examples you can apply to the library or framework of your choice.
Table of Contents detailed table of contents

foreword

preface

acknowledgments

about this book

author online

about the authors

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. 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 to 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 challenges

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. Tradiional unit testing

8.3.1. Getting started with QUnit

8.3.2. Creating your first unit test

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

Appendixes

Appendix A: Employee directory example walkthrough

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 our 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 our 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. Intalling Gulp.js

What's inside

  • Working with modular JavaScript
  • Understanding MV* frameworks
  • Layout management
  • Client-side task automation
  • Testing SPAs

About the reader

This book assumes you are a web developer and know JavaScript basics.

About the author

Emmit Scott is a senior software engineer and architect with experience building large-scale, web-based applications.

placing your order...

Don't refresh or navigate away from the page.
print book $34.99 $49.99 pBook + eBook + liveBook
Additional shipping charges may apply
SPA Design and Architecture (print book) added to cart
continue shopping
go to cart
eBook $27.99 $39.99 3 formats + liveBook
SPA Design and Architecture (eBook) added to cart
continue shopping
go to cart
Prices displayed in rupees will be charged in USD when you check out.
customers also bought

FREE domestic shipping on three or more pBooks