4. Building a Chatroulette | Modern JavaScript Applications

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Modern JavaScript Applications

By : Narayan Prusty

5 (1)

Modern JavaScript Applications

5 (1)

By: Narayan Prusty

Overview of this book

Over the years, JavaScript has become vital to the development of a wide range of applications with different architectures. But JS moves lightning fast, and it’s easy to fall behind. Modern JavaScript Applications is designed to get you exploring the latest features of JavaScript and how they can be applied to develop high-quality applications with different architectures. Begin by creating a single page application that builds on the innovative MVC approach using AngularJS, then move forward to develop an enterprise-level application with the microservices architecture using Node to build web services. After that, shift your focus to network programming concepts as you build a real-time web application with websockets. Learn to build responsive, declarative UIs with React and Bootstrap, and see how the performance of web applications can be enhanced using Functional Reactive Programming (FRP). Along the way, explore how the power of JavaScript can be increased multi-fold with high performance techniques. By the end of the book, you’ll be a skilled JavaScript developer with a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

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. Breaking into Microservices Architecture

1. Breaking into Microservices Architecture

What is monolithic architecture?

Microservices architecture to the rescue

Implementing microservices using Seneca

Summary

2. Building a Coupon Site

2. Building a Coupon Site

Getting started

Architecture of our site

Creating the services

Creating the image upload server

Creating the monolithic core

Website walkthrough

Further improvements to the site

Summary

3. Communication between Browsers in Real Time

3. Communication between Browsers in Real Time

Terminologies

Introduction to WebRTC

WebRTC applications using PeerJS

Miscellaneous

Summary

4. Building a Chatroulette

4. Building a Chatroulette

Creating your own PeerServer

Creating a chatroulette

Summary

5. Bidirectional Communication in Real Time

5. Bidirectional Communication in Real Time

Introducing WebSocket

Introduction to Socket.IO

Summary

6. Building a Live Score Site

6. Building a Live Score Site

Building the backend

Building the frontend

Testing the website

Summary

7. Functional Reactive Programming

7. Functional Reactive Programming

Introduction to reactive programming

Functional programming in a nutshell

Getting started with FRP

FRP using Bacon.js

Summary

8. Building an Advanced Profile Search Widget

8. Building an Advanced Profile Search Widget

Errors in Bacon.js

Handling exceptions

Constant properties

An overview of buses

Subscribing to the end of EventStreams and properties

Unplugging subscribers

Combining and zipping

Lazy evaluation

Building the profile search widget

Summary

9. New Features of Bootstrap 4

9. New Features of Bootstrap 4

Downloading Bootstrap 4

Browser and device support

Understanding the rem and em CSS units

The grid system

Global margin reset

Spacing utility classes

Display headings

Inverse tables

The card component

Outline buttons

Moving from Less to Sass

Text alignment and float utility classes

Reboot

Flexbox support

JavaScript improvements

Adding Tether

The 21:9 aspect ratio class

Customizing Bootstrap 4

Glyphicons dropped

Summary

10. Building User Interfaces Using React

10. Building User Interfaces Using React

Introducing React

Getting started with JSX

Digging into components

Reconciliation

Default component property values

Component life cycle methods

Mixins

Using Refs

ReactDOMServer.renderToStaticMarkup

Summary

11. Building an RSS Reader Using React and Flux

11. Building an RSS Reader Using React and Flux

Understanding Flux

Using Flux.js

Using MicroEvent.js

Introduction to React Router

Creating the RSS feed reader

Summary

12. New Features of Angular 2

12. New Features of Angular 2

The Angular 2 architecture

Introducing web components

Setting up an Angular 2 project

Angular 2 fundamentals

Styling components and shadow DOM

Angular 2 change detection

Understanding view children and content children

Component lifecycle methods

Writing templates

Outputs

Understanding providers

The difference between providers and the viewProviders property

Summary

13. Building a Search Engine Template Using AngularJS 2

13. Building a Search Engine Template Using AngularJS 2

Setting up the project

Configuring routes and bootstrapping the app

Generating random search results

Creating route components

Testing the template

Routing life cycle methods

Production mode versus development mode

Summary

14. Securing and Scaling Node.js Applications

14. Securing and Scaling Node.js Applications

Common vulnerabilities in applications

Non-vulnerability based attacks

Using secure packages

Scaling Node.js servers

Summary

Index

Index

Creating your own PeerServer

Before we start building a chatroulette, let's see how to run our own instance of PeerServer.

PeerServer is available as an npm package on npm cloud. Let's create a custom PeerServer and use it with the PeerJS application that we built in our previous chapter.

First create a directory named Custom-PeerServer and place app.js and package.json files in it.

In the package.json file, place the following code and run the npm install command to download the PeerServer package:

{
  "name": "Custom-PeerServer",
  "dependencies": {
    "peer": "0.2.8",
    "express": "4.13.3"
  }
}

At the time of writing, the latest version of PeerServer is 0.2.8. Here, we will also download the express package, as we will need to demonstrate how to integrate PeerServer with Express.

PeerServer package provides a library to create a custom PeerServer or integrate PeerServer with Express and also an executable file to directly create our own instance of PeerServer without any customization.

Run...

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.

Modern JavaScript Applications

Search

Your notes and bookmarks