Using Modern JavaScript Today
4.5 (175 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,548 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Using Modern JavaScript Today to your Wishlist.

Add to Wishlist

Using Modern JavaScript Today

what every web developer needs to know
4.5 (175 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,548 students enrolled
Last updated 2/2016
English
English
Current price: $10 Original price: $50 Discount: 80% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 16.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Use Modern JavaScript tools and language features on all web platforms
Organize their JavaScript, images and stylesheets into modules with a clear dependency hierarchy
Quickly iterate on code in development, using file watchers that re-compile code on any change
Easily deploy production-ready asset bundles
Use a build step in order to allow code transformations so that other languages (such as Less, Sass, CoffeeScript, and TypeScript) can be used in the browser
Automate common tasks during development and deployment using Node libraries and Gulp
View Curriculum
Requirements
  • Experience building web applications or sites, using JavaScript and common libraries such as jQuery, is required
  • Have a basic understanding of how to navigate your platform's terminal or command line
Description

This course’s purpose is to introduce any JavaScript developer on any platform to the powerful world of Node.js, task automation, package management and module loading. Basically: Modern JavaScript.

This is course that I wish I had before years of trial and error, source-code spelunking and documentation reading; so with it I hope to save you guys all the trouble and get going writing modern, maintainable, and organized JavaScript today!

Node.js? I thought you said ANY platform!

While this course is a great introduction to writing server-side applications in node (certainly not wasted time, even if you don’t intend to use a node server), we spend most of our time using node as a development tool.

If you’re writing an application in PHP, ASP. NET, or anything else, no problem! Node won’t need to be installed on the production server for it to do it’s thing. We simply use it to process our assets; there’s no need for it to be deployed into production unless your backend server also uses node.

Especially if you’re an ASP. NET developer, Microsoft is incorporating these tools right into Visual Studio and ASP. NET 5! Node.js isn’t just for Linux and servers anymore! But on the other hand, that means you have to have a good grasp on these tools to stay ahead in the world of ASP. NET - and that’s why I’m here!

Modern JavaScript

To write modern JavaScript, we need three things: a JavaScript transpiler, a module loader, and a module bundler.

A transpiler is what takes modern JavaScript and turns it into legacy JavaScript that will run in any browser! Using a transpiler these days is practically the norm. There is no reason why we should be stuck writing 5 year old JavaScript because some of your customers are stuck with ancient browsers. We will be using Babel extensively for this purpose.

In addition to the new features of JavaScript, modules are one of the most important aspects to writing highly maintainable, modular (see what I did there?) code for applications from the small to the enterprise. I’m going to show you guys some tools that makes writing properly organized modular code in JavaScript so simple that there’s no reason not to use them, even for small projects!

What else will be covered?

Since a lot of these tasks are going to require a bit of automation, we’re going to be introducing you to Gulp (version 4). Gulp is an awesome task runner that allows us to write code that can perform automated tasks, such as transpiling or bundling our JavaScript. Note: Gulp is supported as a first class citizen in Visual Studio 2015! It’s even used in the project templates for ASP. NET 5!

We’re also going to take a look at Bower. Bower is a client-side package manager that makes it easy for us to install third party dependencies.

Finally, we’ll also take a look at LESS - the CSS preprocessor. I know that’s not much to do with JavaScript, but it will give us a reason to look into automating the building and bundling process of our styles. Besides, once you use LESS, you’ll never want to use vanilla CSS again!

Who is the target audience?
  • This course is NOT an introduction to JavaScript
  • This course IS for JavaScript developers who want to develop using leading edge technology and techniques
  • This course is ESPECIALLY for ASP.NET developers who wish to learn more about Gulp, Bower and Node for use in ASP.NET 5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 68 Lectures Collapse All 68 Lectures 16:24:22
+
Fundamentals: How To Node
8 Lectures 01:53:04

Welcome! This video briefly goes over what we will be learning in this course and what the requirements are.

Preview 04:47

This video goes a little further and breaks down each of the things we will be learning. We discuss each technology, what it does and why we are learning it.
Preview 13:26

First thing is first: we must get our development environment setup. Here we install Node.js and talk about how we’re going to be using it.

Installing Node
14:43

Next up, we talk about the all important node executable. We discuss the REPL (read, evaluate, print loop) and how to execute JavaScript files right from our file system.

Running JavaScript in Node
09:42

Now we need to know how to load up multiple JavaScript files from within node. In this video, we explore the CommonJS module format.

Node Modules (CommonJS)
19:33

Before moving on to looking at other tools, we introduce many “nodeisms” (including asynchronicity) and the general way that the platform works by working through a simple example.

Node Example 1
16:25

I don’t think that was enough. Next up, we start with a second example that shows even more of how node likes to work. In this example, we create our own web server using nothing but built-in modules!

Node Example 2 - Part 1
14:41

And we finally wrap up the last example, finishing our exploration of how node likes to work.

Node Example 2 - Part 2
19:47
+
NPM: Never manually download a library again
7 Lectures 01:37:09

We introduce the Node Package Manager by showing an example of downloading a global module from the NPM registry that installs a very handy tool on our system that we will be using a lot of.

The Basics
09:45

Next up, we explore local modules, how they are installed and how they are located and resolved at runtime.

Local Modules
15:15

I had to sneak this in here… This is an introduction to arrow functions - an ES2015 feature that I wanted to introduce early so I could use it in future examples.

(ES2015) Arrow Functions
13:28

A library that I find invaluable is lodash. We take a look at it in this video, so that we can use it in future examples.

(Library) Lodash
14:27

NPM packages are vital when using node - either as a backend server, or as a build tool.

Packages
20:14

We must have a good grasp on how NPM versions packages (semver), to ensure we have no version conflicts.

Versioning
07:59

NPM provides a neat utility to place console commands or shell scripts right in our project for re-use. This video explores them.

Scripts
16:01
+
Bower and Less: How to make CSS bearable
5 Lectures 01:09:14

This video talks about the simple package manager, Bower.

Bower
11:01

This video introduces the Less CSS pre-processor, and shows how we can compile our .less files into .css files using NPM scripts.

Less - Part 1
09:31

Next up, we explore a handful of features in Less that makes working with it so enjoyable.

Less - Part 2
19:25

We further our example, and discuss things such as source maps - which allow our browsers to show proper line numbers on our source.

Less - Part 3
19:29

We wrap up our example and talk more about mixins.

Less - Part 4
09:48
+
ES2015: How to make JavaScript bearable
12 Lectures 02:52:33

This video introduces ECMAScript 2015, how it related to JavaScript, and some history.

Introduction
10:17

In order to run ES2015 on our browsers, we need to use a transpiler. This video introduces Babel for that purpose.

Babel
19:33

This short video goes over a few things you may run into while using VS Code.

VS Code
04:45

We kick off our discussion on ES2015 by talking about let and const bindings.

Variables
20:14

Next up, deconstruction!
Deconstruction
20:34

ES2015 gives us some new syntax when working with object literals, and we explore them in this video.

Object Literals
10:55

JavaScript finally has classes! Well, mostly. We discuss ES2015 classes in this video and how to define and use them, and how they get translated for browsers that don’t support ES2015 yet.

Classes
12:43

Symbols are a way to hide members of objects from other source code files. This video breaks them down and discusses their syntax.

Symbols
13:16

ES2015 now supports “generators” - known in some languages as “literator blocks”. Very very useful constructs.

Iterables - Part 1 - Generators
20:31

Just for fun, let’s see how far we can push the concept of iterables and try to write a simple little collections library similar to lodash!

Iterables - Part 2 - Advanced
17:02

Promises aren’t a new language feature, but they’re a new type of object we can create in ES2015. We use them to simplify async code.

Promises
20:52

And that’s a wrap on ES2015 features!

Conclusion
01:51
+
Gulp: How to automate your life
12 Lectures 02:58:28

This video shows how to install gulp on both our machine, and our specific project.

Introduction
11:08

Now we get to the fun stuff, showing how we can incorporate Babel into our Gulp automation.

Gulp + Babel: Our First Task
18:18

This video talks about how dependencies between tasks are managed in Gulp 4.

Task Dependencies
17:15

To understand how gulp works, we must dive into Node streams.
Streams
19:44

Streams and push down objects as well as strings - and this video talks about the kinds of streams Gulp uses.

Object Streams
08:15

Gulp uses a file wrapped called “vinyl-fs”. In this video, we explore it.

Vinyl FS
18:34

Gulp can do a lot of things ,but there’s a handful of things people often use gulp for. This video talks about common things we may want to do.

Common Plugins
14:18

So far we’ve been working with development builds - suitable for working with while in development, not so suitable for deploying to production. This video talks about how we can fix that.

Production
17:47

One of Gulp’s best features is its ability to watch files for changes, and perform a task when that happens. This video goes over that feature.

Watching
19:49

It’s not needed all of the time, but sometimes it’s handy to organize your gulpfile in certain ways if it grows too large.

Organization
11:46

While hopefully not necessary, I’ve provided a “downgrade” guide for people who for some reason are stuck on the older version.

Gulp 3
20:08

And that’s gulp!

Conclusion
01:26
+
Modules: How to organize your assets
5 Lectures 01:19:08

This video begins the discussion on modules. We start off by creating our basic demo app that we will be using to showcase all of our loaders/bundlers.

Introduction
13:52

Although we have no way of loading the modules yet, we can certainly take a look at the syntax required to do so. This video introduces a new bit of ES2015 syntax that will be used to import and export code from one file to another.

ES2015 Syntax
20:43

AMD? UMD? CommonJS? SystemJS? What is this madness?! This video talks about the different formats that we can have our modules outputted in.

Formats
17:04

We start fleshing out our example app in this video.

Example App - Part 1
19:12

This video completes our basic example app.

Example App - Part 2
08:17
+
Modules: RequireJS
4 Lectures 01:02:02

This video introduces RequireJS and includes it into our example app.

Introduction
18:02

RequireJS sometimes doesn’t know how to deal with certain malformed modules, or files that don’t expose themselves as modules. Shims are a way to fix misbehaving JavaScript.

Shims
14:24

Next up, we look at how we can do production builds in RequireJS.

Optimization
17:24

Another form of optimization is to factor out common modules that are shared between JavaScript files. This video discusses that.

Code Splitting
12:12
+
Modules: Browserify
5 Lectures 59:09

This video shows the installation and basic use of the bundler Browserify.

Introduction
08:41

This video imports browserify into our application, and shows how we can use it within our gulpfile.

Gulp
17:16

Next up, we import our CSS into our bundle using Browserify and a special loader.

CSS
15:03

Now we implement a watch task in our gulpfile using watchify.

Watching
09:51

And that’s Browserify!

Conclusion
08:18
+
Modules: Webpack
7 Lectures 01:53:32

Next up is Webpack! We show a simple example of using Webpack in a small application.

Introduction
15:47

Loaders are what is responsible for most of Webpack’s magic. Here we talk about how we can import many different kinds of modules using them.

Loaders
19:07

Now we take Webpack and import it into our example app!

Example App
20:06

Like we did with browserify, we can get more control over Webpack by executing it from our gulpfile. This video shows Webpack’s node-level API.

Gulp
19:22

Webpack provides a super-slick, hot-reloading, watching, blazing fast development server. While it’s not for production use, it certainly speeds up your coding!

Development Server
12:52

Next up, we take a look at common plugins we may want to use.

Common Plugins
20:49

And that’s Webpack!
Conclusion
05:29
+
Modules: JSPM
2 Lectures 35:50

We kick off our discussion on JSPM by taking a look at its module loader: SystemJS.

SystemJS
15:53

Next up, we import JSPM into our example application and use it to load our modules and handle our frontend library dependencies!

JSPM In our Example App
19:57
1 More Section
About the Instructor
3D BUZZ Programming and Digital Art training
4.4 Average rating
3,036 Reviews
51,152 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.