About this Book

This book was written to give you an introductory look at what it takes to create a single-page application. The book not only introduces you to frameworks and technologies for creating an SPA but also shows you how to unit test them and how to automate client-side development and build-related tasks.

Because part of the process of creating an SPA is deciding what your technology stack will look like, the book compares various approaches used by today’s leading JavaScript frameworks. One of the reasons why so many frameworks exist is that there’s no single correct way to build an application. By comparing different frameworks, you can better decide what’s right for you and your next project.

Each chapter of the book includes a complete, working application. I’ve tried to keep things interesting yet not overwhelming. I’m not a fan of long-running examples that fill half a book with pages and pages of source code to wade through. So I decided to create a separate project for each chapter. I also tried to keep each example as small and to the point as possible while still being interesting and relevant to the concepts and topics for the chapter.

Roadmap

Part 1: The basics

• Chapter 1 introduces you to the overall SPA concept. From the beginning you’ll start learning important concepts and how SPAs are different from traditional web applications. You’ll get a clear, concise definition accompanied by an overview of how the various pieces and parts of an SPA fit together.
• Chapter 2 dives deeper, introducing you to a family of JavaScript frameworks known as MV* frameworks and their role in the creation of a single-page application. The chapter talks about the commonalities among frameworks, as well as how they’re different. The end-of-chapter project is written three different ways, each with a different MV* framework so you can see different architectural styles in practice.
• In chapter 3, you’ll get acquainted with modular programming. You’ll see firsthand through examples and the chapter’s project the reasons you should be using modules in your SPA. We’ll also break down the module pattern’s syntax and walk through it step by step. We’ll top off the chapter with an introduction to module loading and AMD modules.

Part 2: Core concepts

• Chapter 4 gives you a crash course on client-side routing. You’ll get a breakdown of how routing works under the covers and see how various frameworks approach routing. You’ll also get an understanding of how client-side routing affects the application’s state.
• Chapter 5 introduces you to layout design and view composition in an SPA. We’ll start with simple designs and work our way up to more complicated ones with complex routes. Additionally, we’ll touch on advanced layout topics, like working with nested views and sibling views.
• In chapter 6 we’ll talk about inter-module communication. What’s the good of creating modules if they can’t talk to each other, right? You’ll not only see different approaches to inter-module communication but also get a feel for modular application design.
• Chapter 7 looks at the role of the server in an SPA environment. Although the client is still the focus, you’ll see how your SPA communicates with the server and how to handle results from your server calls. The chapter examines result handling from the standpoint of both callbacks and the use of promises. You’ll also see how MV* frameworks help you with these tasks. At the end of the chapter, you’ll get a brief introduction to REST and see how your SPA can consume RESTful services.
• Chapter 8 is an overview of unit testing JavaScript applications, specifically SPAs. Don’t worry if you’ve never done any unit testing on the client. We’ll take this slow and easy and go through the basics step by step.
• Finally, in chapter 9, you’ll see how client-side task automation helps you both in development and in creating a build process. You’ll get clear pictures of the most common types of tasks for each scenario and see them in action in the code for the end-of-chapter project.

The appendices are meant to complement the chapters. Appendix A is a walk-through of the complete source code for all three versions of the project for chapter 2. Appendix B and appendix C complement chapter 7. Appendix B is an overview of the XMLHttpRequest API, and appendix C is a summary of the server-side calls for the chapter’s project. Although the chapter is written deliberately so that you can use the server-side language of your choice, appendix C additionally includes a guide to the Spring MVC code that was used in the downloadable source. Appendix D is a simple guide for installing Node.js and Gulp.js, which you’ll need if you want to try out the code for chapter 9.

Audience

This book assumes you have at least basic knowledge of JavaScript, HTML, and CSS. It’s also helpful if you have some level of web development experience, although this isn’t a requirement. This book does, however, target those who have little or no experience in the development of single-page applications or have created SPAs but not using the technologies described in this book.

Code conventions and downloads

Source code in listings or in text appears in a fixed-width font like this to separate it from ordinary text. Code annotations accompany the listings, highlighting important concepts.

Source code for the examples in this book can be downloaded from the publisher’s website at www.manning.com/books/spa-design-and-architecture.

Software and hardware requirements

If you’re using a recent Mac OS X or Windows computer and a modern browser (for example, Firefox, Safari, or Chrome), you should have no trouble with any of the examples. For any special software requirements, you’ll find directions in the chapter/appendix itself.

Because most of the examples dynamically fetch HTML files, you may need to set certain privileges in your browser if you’re running the example locally (versus using a server). Please see the readme.txt file in the downloadable source for the project for details.

If you want to try the example for chapter 7, you’ll need to use some type of server and some type of server-side language. Everyone has their preferences, so it’s left to you to decide what you want to use. I used Java/Spring MVC and include a mini guide to getting that set up. If you’re using something else, I describe the server-side calls and objects conceptually so you can re-create them using the technology of your choice.

Author Online

Purchase of SPA Design and Architecture includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum and subscribe to it, please go to www.manning.com/books/spa-design-and-architecture. This page provides information on how to get on the forum once you’ve registered, what kind of help is available, and the rules of conduct on the forum.

Manning’s commitment to our readers is to provide a venue where a meaningful dialog between individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the authors whose contribution to the Author Online forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray!

The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

About the author

Emmit Scott is a senior software engineer and architect with more than 17 years of experience in creating web-based applications. He’s developed large-scale applications for education, banking, and telecommunications. His hobbies include reading (especially Jim Butcher novels), playing the guitar (was a head banger back in the day), and spending as much time as possible with his children.