Modern JavaScript: Building Real-World, Real-Time Apps
4.9 (159 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,939 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Modern JavaScript: Building Real-World, Real-Time Apps to your Wishlist.

Add to Wishlist

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

A project-based course using the latest features and techniques from JavaScript
4.9 (159 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,939 students enrolled
Last updated 3/2016
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
  • 13.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a production-quality build pipeline for our scripts and styles with WebPack
  • Integrate and RxJS to create a reactive application architecture
View Curriculum
  • Experience building web applications or sites using JavaScript
  • Have a basic understanding of how to navigate your platform's terminal or command line
  • Understand the basics of using NPM and Node.js to write server-side JavaScript

This course is all about creating a fully functioning production ready, real time web application! We will learn how to bring together many different libraries and techniques from the JavaScript ecosystem together into a cohesive product that is ready for deployment!

Many courses focus on individual components and small example applications; while this one instead focuses on how everything can work together. If you want to see the development of a completed project working seamlessly with, nodejs, Reactive Extensions, WebPack (and more!), then this is the course for you!
We not only have a focus on our build pipeline - both development and production - but also on creating an architecture that takes advantage of the reactive programming paradigm.

It's impossible to classify this course as a tour of any particular component, since, as you know, real applications are much more complicated than that. But rest assured that we leave no stone unturned as we explore how each component can work seamlessly together.

So if you want to take your JavaScript skills to the next level, if you want to be up to date on the latest development techniques, then this course is a must!

Who is the target audience?
  • This course is NOT an introduction to JavaScript
  • You MUST understand JavaScript syntax
  • Familiarity with the language features of ES2015 is a plus, but not required (you'll get plenty of practice!)
  • This course is for people who want to learn how to bring modern features of JavaScript together to create a complete application
  • This course is ESPECIALLY for people who want to build reactive, real-time applications in JavaScript!
  • To get the most out of this course, it is HIGHLY recommended that you follow along with implementing the project during the course (source code is provided if you get stuck)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
60 Lectures
1 Lecture 04:40
Express and Primer
5 Lectures 01:07:06

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

Preview 15:47

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

Express: Middleware and View Engines

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

We finish our primer with an example application that demonstrates using to build a basic chat application. Chat Application
Build Pipeline with Webpack
11 Lectures 02:25:31

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

Server Webpack: Configuration Part 1

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

Server Webpack: Configuration Part 2

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

Server Webpack: Configuration Final

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.

Server Webpack: Compile from Gulp

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

Server Webpack: Server Reload

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

Client Webpack: Configuration Part 1

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

Client Webpack: Configuration Part 2

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

Server Skeleton

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

Client Webpack: Development Server Middleware

Application Architecture
10 Lectures 02:32:13

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

Observable Socket: Part 1

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

Observable Socket: Part 2

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

Observable Socket: Part 3

And our observable socket is done!

Observable Socket: Part 4

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.

Component Framework

Next up we stub out our front-end components.

Component Stubs: Part 1

We then wrap up our front-end component stubs.

Component Stubs: Part 2

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

Server Stubs
Feature: Users
6 Lectures 01:18:43

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

Server 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.

Users Store

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

Users Component

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.

Aside: Safe Subscribe

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

Logging In

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

Logging Out
Feature: Chat
4 Lectures 56:59

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

Logging In with the Chat Form

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

Chat Module and Store

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.

Chat List
Feature: Playlist
19 Lectures 04:24:00

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.

Playlist Data

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

Playlist Items

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.

Playlist Items Style

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

Playlist Toolbar

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

Adding Items: Part 1

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

Adding Items: Part 2

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

Adding Items: Part 3

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

Playlist Store Bug

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

Adding Items: Part 4 - Youtube API

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

Syncing Current Item

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

Displaying the Current Item

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.

Context Menu: Part 1 - Markup

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

Context Menu: Part 2 - Changing Item

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

Context Menu: Part 3 - Deleting Items

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

Playlist Chrome

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

Sorting: Part 1 - Drag and Drop

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

Sorting: Part 2 - Implementation

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

Sorting: Part 3 - Animation
Feature: Player
3 Lectures 29:33

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

Player Component

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

YouTube Player
The End
1 Lecture 02:33

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

Conclusion and More Ideas
About the Instructor
3D BUZZ Programming and Digital Art training
4.5 Average rating
3,681 Reviews
61,077 Students
17 Courses

3D Buzz is a company dedicated to providing the world with quality technical education over 3D animation, programming, game design, and much more. We have been producing training videos since 2001, always pushing the envelope in the development of informative lessons with an engaging and personable format. We try to make the viewer feel more like they're involved in a classroom discussion with an energetic teacher as opposed to being stuck in a dry, uninspired, run-of-the-mill training video.

But 3D Buzz is so much more than just training videos. We maintain one of the most helpful online communities on the internet. We do our very best to keep in close contact with our community, and to make sure that when you're here, you feel at home.

Nelson LaQuet
4.6 Average rating
1,087 Reviews
5,542 Students
5 Courses
Software Developer

Nelson is a software developer with fluency and professional experience in C#, C++, HTML/CSS, JavaScript and PHP.

Since 2007 he has worked professionally as a web developer, game developer and app developer in a variety of different languages and platforms.

He began teaching programming in 2010 as an instructor for While at 3dbuzz, he developed training video series, hosted live training webinars, and became the lead programming instructor and administrator for the site.

His training style emphasizes deep understanding of the material and hands-on practice - with most of his training programs centered around the development of complete, real world applications.