"Charting the Course ...
... to Your Success!"
Modern JavaScript Tools
Course Summary
Description
The goal of this course 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. . 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. The course is 75% hands-on exercises and minimal lecture as needed to explore complex topics.
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.
Objectives At the end of this course, students will be able to:
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 Install 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 Acquire 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
Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically
"Charting the Course ...
... to Your Success!"
Modern JavaScript Tools
Course Summary (cont’d)
Topics
Introduction CSS Tools Modern JavaScript Primer Task Automation and Build Tools Utilities: The Tools for Our Tools Conclusion Tools for Building Web Applications
Audience
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.
Prerequisites
This course requires knowledge of and ability to write HTML, CSS, and JavaScript.
Duration
Four days
Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically
"Charting the Course ...
... to Your Success!"
Modern JavaScript Tools
Course Outline
I. Introduction 7. ECMA6 Classes A. About modern Web-development 8. Using Classes and Modules tools 9. ECMA6 Default Parameters 1. What is a Web project? 10. Using default parameters 2. What are Web-development 11. ECMA6 destructuring tools? 12. Understand destructuring 13. Other ECMAScript 6 Features II. Modern JavaScript Primer 14. JavaScript resources A. What does modern JavaScript mean? III. Utilities: The Tools for Our Tools B. ECMAScript 2015 A. The Command Line Interface C. JavaScript basics 1. What is a Command Line 1. JavaScript comments Interface? 2. JavaScript statements vs. 2. Operating System Shells JavaScript expressions 3. Macintosh: CLI Terminal 3. Variables 4. Getting comfortable with the 4. Declaring variables and Macintosh Terminal inserting comments 5. Windows CLI: Cygwin 5. JavaScript types 6. Installing Cygwin 6. JavaScript primitive types 7. Getting comfortable with Cygwin 7. Using JavaScript primitive a) The Cygwin Path Structure methods for Windows D. Functions, hoisting and scope 8. Linux Ubuntu CLI: Terminal 1. Function declarations vs. 9. Getting comfortable with the function statements Ubuntu Terminal 2. Demo: Function declaration vs. 10. Command-line interface function statement 11. Command-line Interface (CLI) 3. JavaScript function signatures Summary and parameters B. Node.js 4. Functions and function 1. What is Node.js? arguments 2. Installing Node.js for Windows 5. Functions as arguments 3. Installing Node.js for Mac 6. Immediately Invoked Function 4. Installing Node.js for Linux Expressions (Ubuntu) 7. JavaScript variable scope 5. Getting comfortable with 8. JavaScript keyword: “this” Node.js 9. Scope and “this” 6. Node summary 10. Scope and “this” local C. Modules, Packages and Package E. ECMAScript 2015 Managers 1. Introducing ECMAScript 2015 1. What is a module? 2. Using ECMAScript 2015 today 2. Getting comfortable with 3. ECMA6 Variables: var, let and modules const 3. Creating a web application’s 4. JavaScript let and const root directory 5. ECMA6 Arrow Functions 4. Modules 6. Understanding arrow functions
Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically
"Charting the Course ...
... to Your Success!"
Modern JavaScript Tools
Course Outline (cont’d)
D. Packages and the Package.json file 2. How frameworks can help the 1. What’s a package and what is a developer package.json file? 3. Framework differences E. Package Managers 4. Framework pros and cons 1. What is a package manager? 5. Comparing and choosing 2. What is npm? frameworks 3. Installing npm for Windows 6. Resources for vetting and 4. Installing npm for Mac understanding frameworks 5. Installing npm for Linux D. Scaffolding a Web application (Ubuntu) 1. What is Web scaffolding? 6. Getting comfortable with npm 2. What is Yeoman? 7. Common npm commands 3. Installing Yeoman 8. npm and dependency 4. Using Yeoman management 5. Scaffold an application with 9. Getting comfortable with Yeoman package.json and npm 10. Launch WebStorm and create a V. CSS Tools project A. CSS Preprocessors 11. Use npm to install and update 1. Introducing SASS JS libraries 2. Preprocessor variables 12. Creating modules and using 3. Preprocessor functions npm 4. Nested styles 13. Node resources 5. Mixins 14. npm resources 6. Installing Sass 7. Using the SASS preprocessor IV. Tools for Building Web Applications B. CSS online tools A. JavaScript Libraries 1. Online minifiers 1. What is a JavaScript library? 2. Using an online minifier 2. Finding open-source JavaScript 3. Using an online CSS tool to libraries clean/beautify your CSS a) Google-hosted libraries and 4. Using an online CSS beautifier frameworks 5. Formatting CSS: a better 3. Vetting a JavaScript library approach 4. DIY Exercise: Finding and using 6. Using an online tool to sort your a JavaScript library CSS rules B. GitHub 7. Sort your CSS rules 1. What is GitHub? 8. More online CSS tools 2. Using Git and GitHub: Basic Steps VI. Task Automation and Build Tools 3. Common Git commands A. What are build tools? 4. Using Git Bash to clone a B. Task runners repository 1. What are task runners? C. JavaScript Frameworks 2. Understanding task runners with 1. What is a JavaScript Grunt framework? 3. Using Grunt
Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically
"Charting the Course ...
... to Your Success!"
Modern JavaScript Tools
Course Outline (cont’d)
4. Creating a project to use with Grunt 5. Creating CSS-related tasks with Grunt: Autoprefixer a) What is postcss and a postprocessor? b) The abstract syntax tree 6. Creating CSS-related tasks with Grunt: concat and minify a) Minification vs. optimization explained 7. Creating CSS-related tasks with Grunt: Remove unused CSS 8. Creating CSS-related tasks with Grunt: Process Sass code 9. Combining tasks with Grunt 10. Creating CSS-related tasks with Grunt: CSS build 11. Watch Sass files for changes C. Automating JavaScript tasks with Gulp D. What is Gulp? E. Install Gulp and create tasks
VII. Conclusion
Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically