7. Using Backbone and React for DOM Events | Building Scalable Apps with Redis and Node.js

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Building Scalable Apps with Redis and Node.js

By : Johanan

4.3 (9)

Building Scalable Apps with Redis and Node.js

4.3 (9)

By: Johanan

Overview of this book

If the phrase scalability sounds alien to you, then this is an ideal book for you. You will not need much Node.js experience as each framework is demonstrated in a way that requires no previous knowledge of the framework. You will be building scalable Node.js applications in no time! Knowledge of JavaScript is required.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Backend Development with Express

1. Backend Development with Express

Node.js and Node Package Manager

Using Express in Node

Using middleware in Express

Adding templates to the mix

Using sessions in Express

Processing forms

Very simple authentication

Setting up a config file for our app

Methods to extend an application

Summary

2. Extending Our Development with Socket.IO

2. Extending Our Development with Socket.IO

Node package versions

Building a simple Socket.IO app

Broadcasting a message

Using the disconnect event

Creating namespaces

Adding rooms

Using namespaces or rooms

Using namespaces and rooms together

Using Socket.IO and Express together

Adding application-specific events

Using Redis as the store for Socket.IO

Socket.IO inner workings

Ideas to take away from this chapter

Summary

3. Authenticating Users

3. Authenticating Users

Node package versions

Let's build our authentication

Registering a Facebook application

Using Passport to authenticate to Facebook

Using Google for authentication

Adding Google authentication to our application

Adding more OAuth providers

Adding secure local authentication

Password-storing theory

OAuth process

Summary

4. RabbitMQ for Message Queuing

4. RabbitMQ for Message Queuing

Node package versions

Getting RabbitMQ

Our first message queue

Sending messages back

Adding message queues to PacktChat

Message queuing in RabbitMQ

Summary

5. Adopting Redis for Application Data

5. Adopting Redis for Application Data

Node package versions

Installing Redis

Using Redis data structures

Redis schema

Redis persistence

Using Redis as a message queue

Adding Redis to PacktChat

Redis is for application state

Summary

6. Using Bower to Manage Our Frontend Dependencies

6. Using Bower to Manage Our Frontend Dependencies

Node package versions

Installing and using Bower

Introducing React

Introducing Backbone

Summary

7. Using Backbone and React for DOM Events

7. Using Backbone and React for DOM Events

Bower package versions

Finishing Socket.IO

Creating React components

Backbone models

The Backbone router

Putting it all together

Updating CSS and the layout

Adding a new worker

Trying out our application

Summary

8. JavaScript Best Practices for Application Development

8. JavaScript Best Practices for Application Development

Node package versions

Setting up tests

Setting up different environments

Introducing Grunt

Static files and CDNs

Scripting our new tools

Summary

9. Deployment and Scalability

9. Deployment and Scalability

Creating servers on EC2

What is Ansible?

Scalability

Summary

10. Debugging and Troubleshooting

10. Debugging and Troubleshooting

Node packages

Using Chrome Developer Tools

Inspecting requests

Debugging

CPU profiling our application

Taking heap snapshots

Summary

Index

Index

Updating CSS and the layout

We need to add two CSS rules to style.css, present in static/css/. Append the following to the file:

.chat-message {padding: 5px; margin: 5px 0;}
.chat-list {max-height: 500px; overflow: auto;}

These just make the chat page look better.

We will now need to add our bower_components directory to be served in Express. Open up app.js and add the following line after the current static line:

app.use(express.static(__dirname + '/static'));
app.use(express.static(__dirname + '/bower_components'));

When there are multiple references to static, Express will go through each directory in order to find the file.

Next, we need to add all our new JavaScript files to the layout and chat page. First, open layout.ejs, present in the views/ folder, and make sure the following list of JavaScript files is in the head:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script type="text/javascript" src="/jquery...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Building Scalable Apps with Redis and Node.js

Search

Your notes and bookmarks