Modern JavaScript Tools Training Class | Webucator Web Development Classes

Overview

The goal of this Modern JavaScript Tools Training class is to educate web developers about the numerous tools available to help them build, test, and maintain their web applications. While these tools can be categorized into distinct areas (such as JavaScript tools, JavaScript libraries, CSS tools, testing tools, build tools, etc.), there is a lot of overlap in the various tools' behaviors and use cases. In addition, there are literally hundreds of tools available that perform the same task with minor differences.

This course is designed to introduce the web developer to a subset of popular JavaScript tools in use today. It is the developer's responsibility to research and vet what he or she believes to be the best tools for his or her particular purpose and environment.

By the end of this course, a developer should know two main points:

There are tools that can help automate and execute tedious tasks more efficiently and accurately than the alternative manual approach.
These tools can be improved and customized by a developer-he or she can even build new tools.

This course assumes that you are a desktop or mobile web developer or designer, fairly well versed in HTML, CSS, and JavaScript, and in how they come together to create a web application.

Goals

Discuss the use of modern JavaScript tools
Describe the use case for these tools
Use the Command-line Interface to execute common web-development tasks
Instal and use Node.js and npm
Install and update third-party-developed code modules, packages, and libraries
Maintain a web project's dependencies
Update 3rd-party developed code modules, packages and libraries.
Use the WebStorm Integrated Development Environment (IDE)
Automate the creation of a web-app directory structure
Automate the creation of build tools
Describe various popular JavaScript libraries and frameworks
Install Git and creating a GitHub account
Acquirie code libraries and frameworks from Git
Scaffold an application automatically
Run common web-development tasks with Grunt
Create a wide variety of Grunt tasks
Understand the role and use case of a variety of CSS tasks
Use a CSS preprocessor

Outline

Introduction
1. About modern Web-development tools
  1. What is a Web project?
  2. What are Web-development tools?
Modern JavaScript Primer
1. What does modern JavaScript mean?
2. ECMAScript 2015
3. JavaScript basics
  1. JavaScript comments
  2. JavaScript statements vs. JavaScript expressions
  3. Variables
  4. Exercise: Declaring variables and inserting comments
  5. JavaScript types
  6. Exercise: JavaScript primitive types
  7. Exercise: Using JavaScript primitive methods
4. Functions, hoisting and scope
  1. Function declarations vs. function statements
  2. Demo: Function declaration vs. function statement
  3. JavaScript function signatures and parameters
  4. Demo: Functions and function arguments
  5. Demo: Functions as arguments
  6. Immediately Invoked Function Expressions
  7. Exercise: JavaScript variable scope
  8. JavaScript keyword: "this"
  9. Demo: Scope and "this"
  10. Exercise: Scope and "this" local
5. ECMAScript 2015
  1. Introducing ECMAScript 2015
  2. Using ECMAScript 2015 today
  3. ECMA6 Variables: var, let and const
  4. Exercise: JavaScript let and const
  5. ECMA6 Arrow Functions
  6. Demo: Understanding arrow functions
  7. ECMA6 Classes
  8. Demo: Using Classes and Modules
  9. ECMA6 Default Parameters
  10. Demo: Using default parameters
  11. ECMA6 destructuring
  12. Demo: Understand destructuring
  13. Other ECMAScript 6 Features
  14. JavaScript resources
Utilities: The tools for our tools
1. The Command Line Interface
  1. What is a Command Line Interface?
  2. Operating System Shells
  3. Macintosh: CLI Terminal
  4. Exercise: Getting comfortable with the Macintosh Terminal
  5. Windows CLI: Cygwin
  6. Exercise: Installing Cygwin
  7. Exercise: Getting comfortable with Cygwin
  8. The Cygwin Path Structure for Windows
  9. Linux Ubuntu CLI: Terminal
  10. Exercise: Getting comfortable with the Ubuntu Terminal
  11. DIY exercise: Command-line interface
  12. Command-line Interface (CLI) Summary
2. Node.js
  1. What is Node.js?
  2. Exercise: Installing Node.js for Windows
  3. Exercise: Installing Node.js for Mac
  4. Exercise: Installing Node.js for Linux (Ubuntu)
  5. Exercise: Getting comfortable with Node.js
  6. Node summary
3. Modules, Packages and Package Managers
4. What is a module?
5. Exercise: Getting comfortable with modules
6. Exercise: Creating a web application’s root directory
7. DIY exercise: Modules
8. Packages and the Package.json file
  1. What’s a package and what is a package.json file?
9. Package Managers
  1. What is a package manager?
  2. What is npm?
  3. Exercise: Installing npm for Windows
  4. Exercise: Installing npm for Mac
  5. Exercise: Installing npm for Linux (Ubuntu)
  6. Exercise: Getting comfortable with npm
  7. Common npm commands
  8. npm and dependency management
  9. Exercise: Getting comfortable with package.json and npm
  10. Exercise: Launch WebStorm and create a project
  11. Exercise: Use npm to install and update JS libraries
  12. DIY exercise: Creating modules and using npm
  13. Node resources
  14. npm resources
Tools for building Web applications
1. JavaScript Libraries
  1. What is a JavaScript library?
  2. Finding open-source JavaScript libraries
    1. Google-hosted libraries and frameworks
  3. Vetting a JavaScript library
  4. DIY Exercise: Finding and using a JavaScript library
2. GitHub
  1. What is GitHub?
  2. Exercise: Using Git and GitHub: Basic Steps
  3. Common Git commands
  4. Exercise: Using Git Bash to clone a repository
3. JavaScript Frameworks
  1. What is a JavaScript framework?
  2. How frameworks can help the developer
  3. Framework differences
  4. Framework pros and cons
  5. Exercise: Comparing and choosing frameworks
  6. Resources for vetting and understanding frameworks
4. Scaffolding a Web application
  1. What is Web scaffolding?
  2. What is Yeoman?
  3. Exercise: Installing Yeoman
  4. Exercise: Using Yeoman
  5. DIY exercise: Scaffold an application with Yeoman
CSS Tools
1. CSS Preprocessors
  1. Introducing SASS
  2. Preprocessor variables
  3. Preprocessor functions
  4. Nested styles
  5. Mixins
  6. Exercise: Installing Sass
  7. Exercise: Using the SASS preprocessor
2. CSS online tools
  1. Online minifiers
  2. Exercise: Using an online minifier
  3. Using an online CSS tool to clean/beautify your CSS
  4. Exercise: Using an online CSS beautifier
  5. Formatting CSS: a better approach
  6. Using an online tool to sort your CSS rules
  7. Exercise: Sort your CSS rules
  8. More online CSS tools
Task automation and build tools
1. What are build tools?
2. Task runners
  1. What are task runners?
  2. Understanding task runners with Grunt
  3. Using Grunt
  4. Exercise: Creating a project to use with Grunt
  5. Exercise: Creating CSS-related tasks with Grunt: Autoprefixer
    1. What is postcss and a postprocessor?
    2. The abstract syntax tree
  6. Exercise: Creating CSS-related tasks with Grunt: concat and minify
    1. Minification vs. optimization explained
  7. Exercise: Creating CSS-related tasks with Grunt: Remove unused CSS
  8. Exercise: Creating CSS-related tasks with Grunt: Process Sass code
  9. Combining tasks with Grunt
  10. Exercise: Creating CSS-related tasks with Grunt: CSS build
  11. DIY exercise: Watch Sass files for changes
3. Automating JavaScript tasks with Gulp
4. What is Gulp?
5. Exercise: Install Gulp and create tasks

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this JavaScript class:

Knowledge of and ability to write HTML, CSS, and JavaScript.

Preparing for Class

Onsite: Course Setup
Live Online: Course Setup | WebEx Setup

Modern JavaScript Tools Training

Customized Onsite Training

Live Online Training