Chapter 3. Develop the Shell

 

This chapter covers

  • Describing the Shell module and its place in our architecture
  • Structuring your files and namespaces
  • Creating and styling feature containers
  • Using an event handler to toggle a feature container
  • Using the anchor interface pattern to manage application state

In this chapter, we describe the Shell, a required component of our architecture. We develop a page layout that contains our feature containers, and then adjust the Shell to render them. Next we show how the Shell manages feature containers by having it extend and retract the chat slider. We then have it capture the user click event to open and close the slider. Finally, we use the URI anchor as our state API using the anchor interface pattern. This provides users the browser controls they expect—controls like Forward and Back buttons, browser history, and bookmarks.

By the end of this chapter we’ll have built the foundation for a scalable and manageable SPA. But let’s not get too far ahead of ourselves. First we must understand the Shell.

3.1. Grok the Shell

The Shell is the master controller for our SPA and is required in our architecture. We can compare the role of the Shell module to the shell of an airplane:

3.2. Set up the files and namespaces

3.3. Create the feature containers

3.4. Render the feature containers

3.5. Manage the feature containers

3.6. Manage application state

3.7. Summary