Modern JavaScript Applications

Narayan Prusty

• Publisher: Packt Publishing
• Year: 2016
• ISBN:
  9781785881442
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

An example-driven guide that explores the world of modern web development with JavaScript

About This Book

• Explore the new features of ECMAScript 6 and how they can be incorporated to build cutting edge web applications
• Learn about modern web architectures and build real-world apps on top of them
• Make use of modern JavaScript tools, techniques and frameworks to enhance your web development skills

Who This Book Is For

This book is for existing JavaScript developers who want to explore some of the modern JavaScript features, techniques, and architectures to develop cutting edge web applications.

What You Will Learn

• Learn to create single page websites
• Gain expertise in responsive and dynamic website design
• Enable Real-time communications between client-client and client-server/server-client
• Create APIs for large-scale applications
• Write complete applications using functional reactive programming

In Detail

Over the years, JavaScript has taken significant strides in the world of modern web development to enhance the development of a wide range of applications with different architectures. This book explores the advanced and new features that have arrived in JavaScript and how they can be applied to develop high-quality applications with different architectures.

The book begins by covering a single page application that builds on the innovative MVC approach using AngularJS. As we move forward, the book shows you how to develop an enterprise-level application with the microservices architecture, using Node to build web services. We then focus on network programming concepts and you'll build a real-time web application with websockets.

When you've gained a solid grip on the different architectures, we'll move on to the area where JavaScript shines, that is, UI development. You'll learn to build responsive, declarative UIs with React and Bootstrap. As we near the end of this book, you'll see how the performance of web applications can be enhanced using Functional Reactive Programming (FRP). Along the way, the book also explores how the power of JavaScript can be increased multi-fold.

After reading this book, you will have a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps.

Style and approach

Covering all the new features in ECMAScript 6, this book takes a project-based approach to introduce you to all the latest techniques, tools, and architectures of JavaScript web development. Each project that the book builds will show you a different angle of the power of JavaScript in modern web development.

Modern JavaScript Applications

---

Table of Contents

Modern JavaScript Applications

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Breaking into Microservices Architecture

What is monolithic architecture?

Demerits of monolithic architecture

Scaling monolithic architecture

Writing monolithic server-side applications

Other issues of monolithic architecture

Microservices architecture to the rescue

Merits of microservices architecture

Scaling services

Demerits of microservices architecture

When to use microservices architecture

Data management

Implementing microservices using Seneca

Creating your first Seneca application

Creating actions

Creating plugins

Creating services

Storing data

Integrating Express and Seneca

Summary

2. Building a Coupon Site

Getting started

Architecture of our site

Creating the services

Database service

URL config service

Upload service

Creating the image upload server

Creating the monolithic core

Website walkthrough

Further improvements to the site

Summary

3. Communication between Browsers in Real Time

Terminologies

Stream

Peer-to-peer network model

Real-time data

Introduction to WebRTC

MediaStream API

navigator.getUserMedia

RTCPeerConnection API

Establishing peer-to-peer connection

Transferring MediaStream

RTCDataChannel API

WebRTC applications using PeerJS

PeerServer

PeerJS API

Miscellaneous

Summary

4. Building a Chatroulette

Creating your own PeerServer

Run PeerServer from shell

Using PeerServer library

Creating custom PeerServer

Integrating PeerServer with the Express server

Creating a chatroulette

Building the backend

Building the frontend

Testing the website

Summary

5. Bidirectional Communication in Real Time

Introducing WebSocket

The relationship between WebSocket and HTTP

Sending and receiving data on a WebSocket connection

WebSocket schemes

The interaction of WebSocket with proxy servers, load balancers, and firewalls

The same-origin policy for WebSocket

Introduction to Socket.IO

Setting up your project

Diving into the Socket.IO API

Restricting connections based on origin

Namespaces in Socket.IO

Referring to all connected Socket.IO clients

Rooms in Socket.IO

Joining and leaving a room

Referring to all connected Socket.IO clients in a room

Broadcasting messages and custom events to namespaces and rooms

Broadcasting to a namespace

Broadcasting to a room

Middleware in Socket.IO

Disconnecting manually

Summary

6. Building a Live Score Site

Building the backend

Integrating socket.io server with the Express server

Serving static files and HTML to the users

Serving HTML to the administrator and protecting the admin panel

Socket.IO cookie authentication and broadcasting messages to a namespace

Building the frontend

Testing the website

Summary

7. Functional Reactive Programming

Introduction to reactive programming

Problems with writing reactive code

Functional programming in a nutshell

The advantages of immutable data

Functional data structures

The advantages of pure functions

Functional programming with JavaScript

Functional programming helper functions

Getting started with FRP

EventStreams

Properties

FRP using Bacon.js

Setting up the project

Bacon.js APIs

Creating EventStreams

Creating properties

Merging, filtering, and transforming EventStreams and properties

Merging

Filtering

Transforming

Summary

8. Building an Advanced Profile Search Widget

Errors in Bacon.js

Subscribing to errors

Mapping errors

Retrying a function call

Ending an EventStream or property on error

Handling exceptions

Constant properties

An overview of buses

Subscribing to the end of EventStreams and properties

Unplugging subscribers

Combining and zipping

Lazy evaluation

Type 1

Type 2

Building the profile search widget

Understanding project directories and files

Converting Express.js routes to a functional reactive pattern

Making the user experience better

The company suggestions route

The search result route

Building the frontend

Testing the widget

Summary

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

Card groups, decks, and columns

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

Introducing React

Setting up a basic React project

Virtual DOM

Components

One-way data binding

Isomorphic UI development

Getting started with JSX

Compiling JSX

JSX syntax

Digging into components

Component composition

Component ownership

Reconciliation

Default component property values

Component life cycle methods

componentWillMount()

componentDidMount()

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate(nextProps, nextState)

componentDidUpdate(prevProps, prevState)

componentWillUnmount()

Mixins

Using Refs

ReactDOMServer.renderToStaticMarkup

Summary

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

Setting up the project directories and files

Building the backend

Building the frontend

Defining routes

Creating dispatcher, actions, and stores

Testing the application

Summary

12. New Features of Angular 2

The Angular 2 architecture

Introducing web components

Templates

Custom elements

Shadow DOM

Setting up an Angular 2 project

Angular 2 fundamentals

Styling components and shadow DOM

Angular 2 change detection

Understanding view children and content children

Getting the reference of components of content children and view children

Local template variables

Component lifecycle methods

Writing templates

Rendering a value

Pipes

Handling events

Binding state to element attributes

Two-way data binding

Directives

Attribute directives

Structural directives

Outputs

Two-way data binding with inputs and outputs

Understanding providers

The difference between providers and the viewProviders property

Summary

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

R...