Modern JavaScript: Building Real-World, Real-Time Apps
4.4 (151 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,780 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.4 (151 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,780 students enrolled
Last updated 3/2016
English
English
Learn Fest Sale
Current price: $10 Original price: $50 Discount: 80% off
2 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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 Socket.io and RxJS to create a reactive application architecture
View Curriculum
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
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!

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
Expand All 60 Lectures Collapse All 60 Lectures 13:21:18
+
Introduction
1 Lecture 04:40
+
Express and Socket.io 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
19:55

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

Socket.io: Setup
11:19

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

Socket.io: Chat Application
19:12
+
Build Pipeline with Webpack
11 Lectures 02:25:31
Overview
02:05

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
20:15

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
12:46

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

Server Webpack: Configuration Final
07:38

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
19:52

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

Server Webpack: Server Reload
07:50

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

Client Webpack: Configuration Part 1
20:01

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

Client Webpack: Configuration Part 2
19:59

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

Server Skeleton
11:53

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
19:43

Conclusion
03:29
+
Application Architecture
10 Lectures 02:32:13
Overview
07:21

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

Layout
19:26

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

Observable Socket: Part 1
19:56

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

Observable Socket: Part 2
05:53

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

Observable Socket: Part 3
19:29

And our observable socket is done!

Observable Socket: Part 4
20:16

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
19:39

Next up we stub out our front-end components.

Component Stubs: Part 1
19:46

We then wrap up our front-end component stubs.

Component Stubs: Part 2
08:40

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

Server Stubs
11:47
+
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
10:03

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
13:42

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

Users Component
11:53

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
10:17

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
17:52

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

Logging Out
14:56
+
Feature: Chat
4 Lectures 56:59
Overview
00:53

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
17:06

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

Chat Module and Store
19:15

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
19:45
+
Feature: Playlist
19 Lectures 04:24:00
Overview
01:28

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
18:57

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

Playlist Items
18:09

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
13:55

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

Playlist Toolbar
12:30

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
19:48

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

Adding Items: Part 2
09:17

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

Adding Items: Part 3
11:58

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

Playlist Store Bug
06:51

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
17:06

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

Syncing Current Item
21:17

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

Displaying the Current Item
06:44

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
19:57

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

Context Menu: Part 2 - Changing Item
12:01

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

Context Menu: Part 3 - Deleting Items
16:03

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

Playlist Chrome
15:18

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

Sorting: Part 1 - Drag and Drop
19:49

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

Sorting: Part 2 - Implementation
18:27

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

Sorting: Part 3 - Animation
04:25
+
Feature: Player
3 Lectures 29:33
Overview
00:43

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

Player Component
12:50

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

YouTube Player
16:00
+
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
02:33
About the Instructor
3D BUZZ Programming and Digital Art training
4.4 Average rating
3,331 Reviews
54,921 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.5 Average rating
980 Reviews
5,019 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 3dbuzz.com. 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.