JavaScript Developer’s Tools 1 Outline • JavaScript application developer’s Tools • Node.js • NPM • NVM • Bower • Git & GitHub • Gulp & Grunt • Yeoman • Sublime • Visual Studio Code 2 JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 3 • Node.js is an interpreter of Javascript that runs on the server side, is based on the Google V8 engine and manages an event-oriented paradigm. • It was made with the aim of creating highly scalable Node.js applications and websites. Download JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime We are going to use NVM for Windows to manage Node.js Visual Studio Code program! 4 Node.js evolves quickly . It is necessary to use a version manager. Node Version Manager (NVM) is a suitable solution! Node Version Unix like LINUX MAC Manager curl -o- https://raw.githubusercontent.com/nvm- sh/nvm/v0.34.0/install.sh | bash JavaScript Windows version 1.1.7 Installer application developer’s Tools Node.js Execute commands: NVM nvm list available NPM NCU nvm install 10.15.3 Bower Git & GitHub nvm use 10.15.3 Gulp & Grunt Yeoman Sublime Visual Studio Code 5 Using NVM it is possible to have several Node versions at the Node Version same time. Executing nvm use <version> developers can switch between Manager Node.js versions (cont) When developing an application it is necessary to know what JavaScript Node version and NPM version are user. application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 6 When developing an application it is necessary to know what Node version and NPM version are used. Node Version Manager Node.js version 10.15.3 and NPM version 6.4.1 will be used in (cont) our course! JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 7 • NPM is the acronym of "Node Package Manager“ • One of the main reasons because NPM is popular is because it provides a fast and optimal way to acquire and organize modules • NPM is installed when installing Nde.js Web Site NPM Once Node.js and NPM are installed, to start a new Node’s project: execute in Windows CLI: npm init JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 8 Classical Hello World Application using Node.js 1) Open folder d:\CourseJS\Exercise01 2) Create file index.js NPM 3) Write inside the file index.js: console.log(‘Hello World!’); JavaScript 4) Execute command tree /A /F d:\CourseJS application 5) Execute command node index.js developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 9 Adding modules 1) npm install --save lodash 2) npm install --save-dev chai 3) npm install --save-dev mocha NPM 4) npm install --save-dev chai 5) npm install --save-dev grunt JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 10 Node check Updates npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions. NCU Installation: npm install -g npm-check-updates JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 11 Node check Updates (ncu) 1) npm i -g npm-check-updates 2) ncu -u NCU JavaScript application developer’s Tools Node.js NVM NPM NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 12 Bower: A package manager for the web Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Bower is a command line utility. Install it with npm. Bower Installation: npm install -g bower JavaScript Bower requires node, npm and git. application developer’s Tools # installs the project dependencies listed in Node.js Example: bower.json NVM bower install NPM # registered package NCU bower install jquery Bower # GitHub shorthand Git & GitHub bower install desandro/masonry # Git endpoint Gulp & Grunt bower install Yeoman git://github.com/user/package.git Sublime # URL Visual Studio Code bower install http://example.com/script.js 13 What is version control What is GIT? GIT Get Going with GIT JavaScript Quick Wins with Git application developer’s Tools Node.js NPM NVM Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 14 1. What is GitHub? 2. ¿Que es GitHub? GitHub If you do not have an account create one! JavaScript application developer’s Tools Node.js NPM NVM Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code 15 What is gulp.js and why use it? Installation: cd myproject npm install --save-dev gulp GULP There’s no point in investing Gulp is a javascript task runner your time into learning a new that lets you automate tasks such JavaScript application tool if you don’t even know as… developer’s Tools what problem it solves. Node.js Gulp solves the problem of • Bundling and minifying libraries repetition. and stylesheets. NVM Many of the tasks that web • Refreshing your browser when NPM developers find themselves you save a file. NCU doing over and over on a daily • Quickly running unit tests Bower basis can be simplified by • Running code analysis Git & GitHub becoming automated. • Less/Sass to CSS compilation Gulp & Grunt Automating repetitive tasks = • Copying modified files to an more time to do non repetitive output directory Yeoman tasks = more productivity. Sublime Visual Studio Code 16 Creating a gulpfile A gulpfile is a file that will act as a gulpfile.js manifest to define our tasks. Tasks that we want to execute will be var gulp = require('gulp'); GULP found within this file. Whenever we run the command gulp gulp.task('hello-world', JavaScript hello-world from the command line, we are function(){ application telling gulp that we want to run the console.log('hello world'); developer’s Tools hello-world task within gulpfile.js. } Node.js After creating gulpfile.js within the root ); NVM of your project, add a basic tasks. NPM NCU Bower Practical example: Git & GitHub Follow the instructions from the following link: Practical Example Gulp & Grunt Yeoman Sublime Visual Studio Code 17 GRUNT: The JavaScript Task Runner Why use a task runner? Why use Grunt? The Grunt ecosystem is huge In one word: automation. and it's growing every day. The less work you have to do With hundreds of plugins to JavaScript when performing repetitive choose from, you can use application developer’s Tools tasks like minification, Grunt to automate just about compilation, unit testing, linting, anything with a minimum of Node.js etc, the easier your job effort. NVM becomes. NPM If someone hasn't already built NCU After you've configured it what you need, authoring and Bower through a Gruntfile, a task publishing your own Grunt Git & GitHub runner can do most of that plugin to npm is a breeze. mundane work for you—and Gulp & Grunt your team—with basically zero See how to get started. Yeoman effort. Sublime Visual Studio Code 18 YEOMAN: THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS What's Yeoman? A workflow is a robust and opinionated client-side stack, Yeoman helps you to kickstart new comprising tools and frameworks projects, prescribing best practices that can help developers quickly and tools to help you stay build beautiful web applications. JavaScript productive. application developer’s Tools Yeoman takes care of providing Yeoman provides a generator everything needed to get started Node.js ecosystem. without any of the normal NVM • A generator is basically a plugin headaches associated with a NPM that can be run with the `yo` manual setup. NCU command to scaffold complete Bower projects or useful parts. With a modular architecture that Git & GitHub can scale out of the box, we Through our official Generators, leverage the success and lessons Gulp & Grunt we promote the "Yeoman learned from several open- Yeoman workflow". source communities to ensure Sublime the stack developers use it as Visual Studio Code intelligent as possible. 19 YEOMAN’s Tools The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool, the build tool and the package manager JavaScript application developer’s Tools Node.js yo scaffolds out a The Build The Package NVM new application, System is used to Manager is used for NPM writing your build build, preview and dependency NCU configuration (e.g test your project. management, so that Bower Gulpfile) and pulling you no longer have to Git & GitHub in relevant build Gulp and Grunt are manually download Gulp & Grunt tasks and package two popular and manage your manager options. scripts. Yeoman dependencies (e.g Sublime npm) that you might npm and Bower are Visual Studio Code need for your build. two popular options. 20 Sublime: A sophisticated text editor for code, markup and prose Download Among other characteristics, Sublime provides programmers with: • Capability to make Multiple selections JavaScript • A powerful API and Package Ecosystem application developer’s Tools • An interface that can be fully customized • A command Palette. It holds infrequently used functionality Node.js like sorting, changing the syntax, … NVM • Split editing in several windows NPM • Capability to make an Instant Project Switch NCU • Versions for Mac, Windows and Linux (Cross Platform) Bower • A Sublime sister product: Sublime merge Git & GitHub • Sublime merge is a git Client designed with the sublime style Gulp & Grunt Yeoman Sublime Visual Studio Code 21 Visual Studio Code: Download Visual Studio Code is a lightweight source code editor which runs on your desktop and is available for Windows, macOS and Linux.