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!
What else will be covered?
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.
Welcome! This video briefly goes over what we will be learning in this course and what the requirements are.
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.
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.
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!
And we finally wrap up the last example, finishing our exploration of how node likes to work.
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.
Next up, we explore local modules, how they are installed and how they are located and resolved at runtime.
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.
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.
NPM packages are vital when using node - either as a backend server, or as a build tool.
We must have a good grasp on how NPM versions packages (semver), to ensure we have no version conflicts.
NPM provides a neat utility to place console commands or shell scripts right in our project for re-use. This video explores them.
This video talks about the simple package manager, Bower.
This video introduces the Less CSS pre-processor, and shows how we can compile our .less files into .css files using NPM scripts.
Next up, we explore a handful of features in Less that makes working with it so enjoyable.
We further our example, and discuss things such as source maps - which allow our browsers to show proper line numbers on our source.
We wrap up our example and talk more about mixins.
In order to run ES2015 on our browsers, we need to use a transpiler. This video introduces Babel for that purpose.
This short video goes over a few things you may run into while using VS Code.
We kick off our discussion on ES2015 by talking about let and const bindings.
ES2015 gives us some new syntax when working with object literals, and we explore them in this video.
Symbols are a way to hide members of objects from other source code files. This video breaks them down and discusses their syntax.
ES2015 now supports “generators” - known in some languages as “literator blocks”. Very very useful constructs.
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!
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.
And that’s a wrap on ES2015 features!
This video shows how to install gulp on both our machine, and our specific project.
Now we get to the fun stuff, showing how we can incorporate Babel into our Gulp automation.
This video talks about how dependencies between tasks are managed in Gulp 4.
Streams and push down objects as well as strings - and this video talks about the kinds of streams Gulp uses.
Gulp uses a file wrapped called “vinyl-fs”. In this video, we explore it.
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.
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.
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.
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.
While hopefully not necessary, I’ve provided a “downgrade” guide for people who for some reason are stuck on the older version.
And that’s gulp!
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.
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.
AMD? UMD? CommonJS? SystemJS? What is this madness?! This video talks about the different formats that we can have our modules outputted in.
We start fleshing out our example app in this video.
This video completes our basic example app.
This video introduces RequireJS and includes it into our example app.
Next up, we look at how we can do production builds in RequireJS.
This video shows the installation and basic use of the bundler Browserify.
This video imports browserify into our application, and shows how we can use it within our gulpfile.
Next up, we import our CSS into our bundle using Browserify and a special loader.
Now we implement a watch task in our gulpfile using watchify.
And that’s Browserify!
Next up is Webpack! We show a simple example of using Webpack in a small application.
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.
Now we take Webpack and import it into our example app!
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.
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!
Next up, we take a look at common plugins we may want to use.
We kick off our discussion on JSPM by taking a look at its module loader: SystemJS.
Next up, we import JSPM into our example application and use it to load our modules and handle our frontend library dependencies!
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.
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.