Table of Contents for
Node.js 8 the Right Way

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Node.js 8 the Right Way by Jim Wilson Published by Pragmatic Bookshelf, 2018
  1. Title Page
  2. Node.js 8 the Right Way
  3. Node.js 8 the Right Way
  4. Node.js 8 the Right Way
  5. Node.js 8 the Right Way
  6.  Acknowledgments
  7.  Preface
  8. Why Node.js the Right Way?
  9. What’s in This Book
  10. What This Book Is Not
  11. Code Examples and Conventions
  12. Online Resources
  13. Part I. Getting Up to Speed on Node.js 8
  14. 1. Getting Started
  15. Thinking Beyond the web
  16. Node.js’s Niche
  17. How Node.js Applications Work
  18. Aspects of Node.js Development
  19. Installing Node.js
  20. 2. Wrangling the File System
  21. Programming for the Node.js Event Loop
  22. Spawning a Child Process
  23. Capturing Data from an EventEmitter
  24. Reading and Writing Files Asynchronously
  25. The Two Phases of a Node.js Program
  26. Wrapping Up
  27. 3. Networking with Sockets
  28. Listening for Socket Connections
  29. Implementing a Messaging Protocol
  30. Creating Socket Client Connections
  31. Testing Network Application Functionality
  32. Extending Core Classes in Custom Modules
  33. Developing Unit Tests with Mocha
  34. Wrapping Up
  35. 4. Connecting Robust Microservices
  36. Installing ØMQ
  37. Publishing and Subscribing to Messages
  38. Responding to Requests
  39. Routing and Dealing Messages
  40. Clustering Node.js Processes
  41. Pushing and Pulling Messages
  42. Wrapping Up
  43. Node.js 8 the Right Way
  44. Part II. Working with Data
  45. 5. Transforming Data and Testing Continuously
  46. Procuring External Data
  47. Behavior-Driven Development with Mocha and Chai
  48. Extracting Data from XML with Cheerio
  49. Processing Data Files Sequentially
  50. Debugging Tests with Chrome DevTools
  51. Wrapping Up
  52. 6. Commanding Databases
  53. Introducing Elasticsearch
  54. Creating a Command-Line Program in Node.js with Commander
  55. Using request to Fetch JSON over HTTP
  56. Shaping JSON with jq
  57. Inserting Elasticsearch Documents in Bulk
  58. Implementing an Elasticsearch Query Command
  59. Wrapping Up
  60. Node.js 8 the Right Way
  61. Part III. Creating an Application from the Ground Up
  62. 7. Developing RESTful Web Services
  63. Advantages of Express
  64. Serving APIs with Express
  65. Writing Modular Express Services
  66. Keeping Services Running with nodemon
  67. Adding Search APIs
  68. Simplifying Code Flows with Promises
  69. Manipulating Documents RESTfully
  70. Emulating Synchronous Style with async and await
  71. Providing an Async Handler Function to Express
  72. Wrapping Up
  73. 8. Creating a Beautiful User Experience
  74. Getting Started with webpack
  75. Generating Your First webpack Bundle
  76. Sprucing Up Your UI with Bootstrap
  77. Bringing in Bootstrap JavaScript and jQuery
  78. Transpiling with TypeScript
  79. Templating HTML with Handlebars
  80. Implementing hashChange Navigation
  81. Listing Objects in a View
  82. Saving Data with a Form
  83. Wrapping Up
  84. 9. Fortifying Your Application
  85. Setting Up the Initial Project
  86. Managing User Sessions in Express
  87. Adding Authentication UI Elements
  88. Setting Up Passport
  89. Authenticating with Facebook, Twitter, and Google
  90. Composing an Express Router
  91. Bringing in the Book Bundle UI
  92. Serving in Production
  93. Wrapping Up
  94. Node.js 8 the Right Way
  95. 10. BONUS: Developing Flows with Node-RED
  96. Setting Up Node-RED
  97. Securing Node-RED
  98. Developing a Node-RED Flow
  99. Creating HTTP APIs with Node-RED
  100. Handling Errors in Node-RED Flows
  101. Wrapping Up
  102. A1. Setting Up Angular
  103. A2. Setting Up React
  104. Node.js 8 the Right Way

Implementing hashChange Navigation

The B4 application we’re developing is what you might call a single-page application. The behavior of the application is driven by user interaction, and the data is supplied by RESTful JSON APIs.

Rather than request from the server new pages that live at different URLs, the user requests only the first page and its dependent content (JavaScript, CSS, images, etc.) up front. This raises the question of how to implement and track changes to the application as the user navigates through it.

For this, we’ll use the URL hash: the part of the URL after the pound sign (#). We’ll refer to each page the user might encounter as a view. The welcome view will live at #welcome, which will also be the default if the URL lacks a hash or if it has an invalid hash. Other views will live at hashes that match their purposes.

To implement hashchange navigation between views, open your app/index.ts for editing. Start by removing everything after the page-setup part that uses querySelector to set the mainElement and alertsElement local variables. Next, add the following showView method:

ux/b4-app/app/index.ts
​ ​/**​
​ ​ * Use Window location hash to show the specified view.​
​ ​ */​
​ ​const​ showView = ​async​ () => {
​  ​const​ [view, ...params] = window.location.hash.split(​'/'​);
​ 
​  ​switch​ (view) {
​  ​case​ ​'#welcome'​:
​  mainElement.innerHTML = templates.welcome();
​  ​break​;
​  default:
​  ​// Unrecognized view.​
​  ​throw​ Error(​`Unrecognized view: ​${view}​`​);
​  }
​ };

This async function starts by reading the window.location.hash string and splitting it wherever there’s a forward slash (/). This will allow us to have parameterized views later, such as #view-bundle/BUNDLE_ID.

Next, we switch on the beginning portion of the hash (view) and take action appropriately. If the hash is #welcome, then we set the contents of the mainElement to contain the welcome-template HTML. If the hash is unrecognized, then we throw an exception.

Currently there’s no code that would invoke showView, but we want it to get called whenever the URL’s hash changes. To get that to work, add the following:

ux/b4-app/app/index.ts
​ window.addEventListener(​'hashchange'​, showView);

Whenever the URL’s hash changes, the window object emits a hashchange event. In answer to this, we want showView to be invoked.

Unfortunately, the initial page load does not trigger a hashchange event, so we still need to call showView explicitly to get things rolling. For that we need one more line of code:

ux/b4-app/app/index.ts
​ showView().​catch​(err => window.location.hash = ​'#welcome'​);

Here we call showView directly. Since this is an async function, it returns a Promise when called. If that Promise gets rejected—which would happen if the view hash was unrecognized—then we want to explicitly set the hash to #welcome, which will trigger a hashchange event and load the welcome view.

To recap, at this point your app/index.ts should look like this:

ux/b4-app/app/index.ts
​ ​import​ ​'../node_modules/bootstrap/dist/css/bootstrap.min.css'​;
​ ​import​ ​'bootstrap'​;
​ ​import​ * ​as​ templates ​from​ ​'./templates.ts'​;
​ 
​ ​// Page setup.​
​ document.body.innerHTML = templates.main();
​ ​const​ mainElement = document.body.querySelector(​'.b4-main'​);
​ ​const​ alertsElement = document.body.querySelector(​'.b4-alerts'​);
​ 
​ ​/**​
​ ​ * Use Window location hash to show the specified view.​
​ ​ */​
​ ​const​ showView = ​async​ () => {
​  ​const​ [view, ...params] = window.location.hash.split(​'/'​);
​ 
​  ​switch​ (view) {
​  ​case​ ​'#welcome'​:
​  mainElement.innerHTML = templates.welcome();
​  ​break​;
​  default:
​  ​// Unrecognized view.​
​  ​throw​ Error(​`Unrecognized view: ​${view}​`​);
​  }
​ };
​ 
​ window.addEventListener(​'hashchange'​, showView);
​ 
​ showView().​catch​(err => window.location.hash = ​'#welcome'​);

After you save this file, your webpack dev server should pick up the change. If you check out localhost:60800, it should look the same as before, with the welcome view showing, but without any alerts.

Now we have all the pieces in place to start implementing views that load data from the web services we developed in previous chapters.