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

A project-based course using the latest features and techniques from JavaScript
4.6 (93 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,246 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 60
  • Length 13.5 hours
  • Skill Level Intermediate Level
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English Closed captions available

Course Description

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 socket.io, 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!

What are the requirements?

  • 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

What am I going to get from this course?

  • Build a production-quality build pipeline for our scripts and styles with WebPack
  • Integrate Socket.io and RxJS to create a reactive application architecture

What 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)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Introduction
Preview
04:40
Section 2: Express and Socket.io Primer
Overview
Preview
00:53
15:47

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

19:55

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

11:19

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

19:12

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

Section 3: Build Pipeline with Webpack
Overview
02:05
20:15

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

12:46

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

07:38

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

19:52

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.

07:50

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

20:01

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

19:59

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

11:53

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

19:43

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

Conclusion
03:29
Section 4: Application Architecture
Overview
07:21
19:26

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

19:56

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

05:53

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

19:29

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

20:16

And our observable socket is done!

19:39

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.

19:46

Next up we stub out our front-end components.

08:40

We then wrap up our front-end component stubs.

11:47

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

Section 5: Feature: Users
10:03

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

13:42

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

11:53

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

10:17

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.

17:52

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

14:56

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

Section 6: Feature: Chat
Overview
00:53
17:06

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

19:15

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

19:45

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.

Section 7: Feature: Playlist
Overview
01:28
18:57

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.

18:09

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

13:55

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.

12:30

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

19:48

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

09:17

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

11:58

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

06:51

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

17:06

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

21:17

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

06:44

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

19:57

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.

12:01

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

16:03

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

15:18

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

19:49

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

18:27

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

04:25

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

Section 8: Feature: Player
Overview
00:43
12:50

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

16:00

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

Section 9: The End
02:33

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

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.

Ready to start learning?
Take This Course