Modern JavaScript: Building Real-World, Real-Time Apps

First off, we take a look at what express is, and how to install and configure it with a simple route.

Next up, we look at how to extend express via middleware and view engines.

We start off with socket.io by showing how we can install it in our application.

We finish our primer with an example application that demonstrates using socket.io to build a basic chat application.

First up, we start our server Webpack configuration - allowing us to use modern JavaScript features for our server-side code.

Next, we have to make some special considerations when working with Webpack for server code that we address in this video.

Finally, we finish our configuration with source map support and production builds.

Since we need more control over our Webpack builds, we then introduce the use of Gulp to control how and when Webpack will build our production and development builds of our server.

Next up, we configure server-relaunching with a Gulp nodemon task.

We start off our client Webpack configuration with adding in our loaders for Babel and Sass.

Our next goal is to create a production configuration for our client that minifies the JavaScript and extracts CSS.

In order to finish our client configuration, we have to setup and configure a basic Express server.

To complete our Webpack configuration, we finally hook in our development middleware - allowing our client code to be built and hot-reloaded.

The first thing we do is create our base HTML and styles for our application’s layout.

Our most important piece of code is our observable socket - or an RxJS based wrapper around socket.io.

This video finishes the simple wrapper methods of our observable socket.

Next up, we start a bi-directional observable communication method.

And our observable socket is done!

This video shows the creation of a very simple front-end component framework that we will be using to standardize how our front-end components fit together.

Next up we stub out our front-end components.

We then wrap up our front-end component stubs.

Here we stub out our primary server modules: Chat, Users and Playlist.

Before we get started on the frontend, we write a basic implementation of our server-side users module.

The first client-side component we build is our users store - allowing us to retrieve user list data and events from our observable socket.

Next up, we build our front-end component that displays a list of users.

Because of an interesting behavior of RxJS, we have to introduce the concept of a “safe subscribe” - allowing our observable sequences to be more resilient to errors.

For our first auth method, we create the server-side code responsible for being able to login our users with a simple username.

We finish our auth code with the ability for a user to log out.

First thing we need to be able to do is use the chat form to be able to select a username.

Next up, we implement our chat module on the server, as well as our chat store on the client.

Now we finish our chat feature with the ability to see formatted chat messages, as well as server and user status in our chat window.

The first thing we do is write some basic code in our playlist server module and client-side store, allowing playlist data to be received by the client.

Next up we work on our playlist component, allowing playlist items to appear in our panel.

Our playlist items are a bit… Ugly. In this video we clean them up to make them appear in a bit of a more user-friendly manner.

The next component we implement is our playlist toolbar - allowing us to queue videos.

Now we need the ability to add items to our playlist. This video covers an overview of the process, as well as validation.

We continue with our implementation of being able to add items on the server side.

Next, we write the client-side code for displaying added items.

This video addresses a small bug in our playlist store, and discusses how we can cleanly resolve it.

Finally, we finish our adding items functionality by tying in the YouTube API to retrieve information about a queued video.

Next up we add the ability for our server-side playlist module to keep track of what item is currently playing.

On the client side, we implement the styles that display what item is currently playing in the playlist.

We start off our playlist context menu by giving us the ability to right click on an item in the playlist, and have a menu appear.

This video shows how to use the context menu to switch the currently playing item.

Next up we implement the ability to remove items from our playlist.

This video shows the implementation of our playlist “chrome” - or a component that manages the outside visuals of our list.

We start off our implementation of sorting by implementing the ability to drag and drop playlist items.

Next up we implement the server and client side logic for actually performing a playlist sort operation.

This short video demonstrates a simple method of performing an animation when playlist items are reordered.

This video creates the basic player component that manages the different source players - such as YouTube.

The final bit of code in our application is to hook up the YouTube player!

And that’s it! This video also goes over possible improvements you guys can make to the application!