JavaScript Development with Microservices, WebRTC, and React

This video provides the overview of this section.

This video explains how to use Seneca by installing it locally. We will also learn how to implement microservices using Seneca.

This video explains how the Seneca.add method adds a new action pattern to the Seneca instance. The first parameter of the add method, called pattern, takes a JSON string or object that is the action identifier/message. The second parameter is a callback function that will be executed when a pattern matches a message. The steps involved with creating your first Seneca application are:

• Creating the msg and respond actions
• Creating a plugin using a function
• Creating a plugin using a module
• Creating a service
• Implementing the login and register actions
• Integrating Express and Seneca

This video summarizes what we have learned in the earlier topics.

This video provides the basic expectations required from this section.

This video explains how Web Real-Time Communication (WebRTC) is a browser technology that enables the retrieval of the media streams of physical media sources and the exchange of media streams, or any other data, in real time. To understand WebRTC thoroughly, we must be familiar with the meaning of terms that we are going to be using frequently. These terms are:

• Streams
• The Peer-to-Peer network model
• Real-Time data
• The MediaStream API
• RTCPeerConnection API
• Peer-to-Peer connection
• RTCDataChannel API

This video explains how PeerJS is a client-side JavaScript library that provides an easy-to-use API to work with WebRTC. It only provides an API to exchange MediaStream (RTCPeerConnection) and arbitrary data between peers. It doesn't provide an API to work with MediaStream. It simplifies peer-to-peer data, audio, and video calls. To do this, we have to have the following:

• WebSocket
• Relationship between WebSocket and HTTP
• WebSocket schemes
• Interaction of WebSocket with proxy servers, load balancers, and firewalls
• Same-origin policy for WebSocket

This video explains how Socket.IO is a combination of the client-side JavaScript library. Node.js library is used to integrate bidirectional communication between a browser and the Node.js backend. Let us begin with:

• Diving into the Socket.IO API
• Restricting connections based on origin
• Creating namespaces in Socket.IO
• Referring to all connected Socket.io clients
• Creating 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
• Registering a middleware in Socket.IO

This video summarizes what we have learned in the earlier topics.

This video provides the basic expectations required from this section.

Before we get into FRP, we need to understand what it is. This video deals with reactive programming with respect to JavaScript. The concept of reactive programming is the same in every programming language. Reactive programming is writing code to look for asynchronous data updates, user activities, and system activities and propagate changes onto the dependent parts of the application.

Before we get into FRP, it's necessary to have basic knowledge about functional programming. This video explains that functional programming is a style of writing code in which we use only pure function calls (including recursion) instead of loops and conditionals, and data is immutable. Let us begin with:

• Advantages and disadvantages of immutable data
• Advantages of pure functions
• Functional programming with JavaScript
• Helper functions
• EventStreams
• Properties
• FRP using Bacon.js
• Setting up the project
• Bacon.js APIs
• Merging, filtering, and transforming EventStreams and properties
• Using the map() function

This video summarizes what we have learned in the earlier topics.

This video provides the basic expectations required from this section.

This video explains how Bacon.js library is a library for functional reactive programming. More specifically, it is a library for working with events and dynamic values (which are called Properties in Bacon.js). It provides the Bacon.Error constructor to explicitly mark events or values of EventStreams or properties respectively as errors so that Bacon can identify them and open up a wide variety of other APIs to work with those errors specifically. Let us begin with:

• Subscribing to errors
• Mapping errors
• Retrying a function call
• Ending an EventStream or property on error
• Handling exceptions

This video explains how Bacon.js utilizes APIs to enable us to create EventStreams of objects, DOMs, and so on, which may contain a single value or an error, followed immediately by stream end. It also contains a lot of methods that can be used for both EventStreams and properties. Let us begin with:

• Constant properties
• An overview of buses
• Subscribing to the end of EventStreams and properties
• Unplugging subscribers
• Combining and zipping properties and EvenStreams
• Lazy Evaluation

This video summarizes what we have learned in the earlier topics.

This video provides the basic expectations required from this section.

This video gives an overview of Bootstrap. Bootstrap is an open-source, frontend framework for building responsive user interfaces. It targets mobile devices by focusing on mobile-first projects on the web. This means that it is primarily designed for mobile devices, then scales up from there. It has the advantage of simplifying front-end web development and further speeding up development time, irrespective of the project at hand, while at the same time maintaining quality and consistency across the site. In Bootstrap, we no longer need to redesign every element and we also don't need to spend hours trying to get everything looking and working right across browsers and devices. Let us begin with:

• Setting up a sample web page using Bootstrap
• Understanding which browser and devices does Bootstrap support

This video explains how Bootstrap 4 has switched from pixels (px) to rem and em wherever possible. 1 em is equal to the current font size of the parent element. 2 em means two times the size of the current font. This means that we can achieve responsive typography and components by just changing the parent element's font size using CSS media queries for different viewports or device width sizes. Let us begin by:

• Using the new grid system
• Using spacing utility classes
• Demonstrate the use of display headings
• Implement the inverse table feature in a web page

This video explains card component in brief. The card component is a new feature in Bootstrap 4 that replaces the wells, panels, and thumbnails (used in Bootstrap 3). It is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Let us begin by:

• Creating cards with different subparts and styles
• Implementing card group, decks, and columns
• Implementing buttons using the new features in Bootstrap
• Creating a jumbotron
• Moving from LESS to Sass
• Aligning text Alignment and float utility classes
• Supporting Flexbox
• Improving JavaScript
• Adding Tether
• Customizing Bootstrap 4

This video summarizes what we have learned in the earlier topics.

This video provides the basic expectations required from this section.

This video talks about harnessing the benefits of React. To do this, we need to:

• Set up a basic React project
• Display Hello World using react
• Use React components
• Use component state by building a button that hides/shows a box when clicked
• Use React in Node.js by creating and displaying the previous hello world component in Node.js

This video gives an overview of JSX. JSX stands for JavaScript syntax extension. Files that contain JSX code have the .jsx extension. Let us begin with:

• Compiling JSX
• Understanding the JSX syntax
• Digging into components
• Creating a new container element
• Understanding reconciliation
• Understanding default component property values
• Understanding component life cycle methods
• Demonstrating mixins
• Using refs by creating a form

This video explains that Flux is a pattern rather than a formal framework. It is an application architecture used for building client-side web applications. Also, it complements React's composable view components by utilizing a unidirectional data flow. It as an alternative to MVC.

This video explains that React Router is the most popular and recommended routing library for React. This is because it provides a simple API with powerful features such as dynamic route matching and location transition handling built in.

This video summarizes what we have learned in the earlier topics.