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
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. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, JavaScript Java, Python, PHP, Go) and runtimes (such as .NET and Unity) application developer’s Tools VSC Top Extensions Node.js Enable additional languages, themes, debuggers, commands, and more. NVM VS Code's growing community shares their secret sauce to improve your NPM workflow. NCU Bower Git & GitHub Gulp & Grunt Yeoman Sublime Visual Studio Code
22 JavaScript Developer’s Tools
23