Practical JavaScript Programming - Session 8/8
2 likes423 views
This document discusses various development tools for JavaScript programming, including Node.js, TypeScript, Babel, linters, task runners, module bundlers, and testing tools. It provides descriptions and examples of using Node.js, Yarn, TypeScript, Babel, ESLint, TSLint, Grunt, Gulp, Webpack, Chrome DevTools, Jasmine, Mocha, Chai, Karma, Selenium, Protractor, PhantomJS, and CasperJS. The document aims to help programmers select and use the appropriate tools at different stages of development.
![Sample tsconfig.json
19
1. {
2. "compilerOptions": {
3. "target": "es5",
4. "module": "commonjs",
5. "outDir": "./dist",
6. "moduleResolution": "node"
7. },
8. "include": [
9. "src/**/*"
10. ]
11. }](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-19-320.jpg)
![20
Adds Types to Function
1. function greet (name: string): string {
2. return `Hello, ${name}.`;
3. }
4.
5. greet('TypeScript'); // 'Hello, TypeScript.'
6. greet([1, 2, 3]); // Error](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-20-320.jpg)
![Use Generics
22
1. function echo<T> (list: T[]): T[] {
2. return list;
3. }
4. echo<string>(['x', 'y', 'z']); // (3) ['x', 'y', 'z']
5. echo<number>([1, 2, 3]); // (3) [1, 2, 3]](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-22-320.jpg)
![Sample .babelrc
25
1. {
2. "presets": ["es2015"],
3. "plugins": ["transform-exponentiation-operator"],
4. "comments": false
5. }](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-25-320.jpg)
![Writing Next Generation JavaScript - Example 2
27
1. /* Next-gen JavaScript */
2. function add (a = 0, b = 0) {
3. return a + b;
4. }
5.
6. /* Browser-compatible JavaScript */
7. function add () {
8. var a = arguments.length > 0 && arguments[0] !== undefined ?
arguments[0] : 0;
9. var b = arguments.length > 1 && arguments[1] !== undefined ?
arguments[1] : 0;
10. return a + b;
11. }](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-27-320.jpg)
![28
Writing Next Generation JavaScript - Example 3
1. /* Next-gen JavaScript */
2. [1, 2, 3].map(n => n ** 2);
3.
4. /* Browser-compatible JavaScript */
5. [1, 2, 3].map(function (n) {
6. return Math.pow(n, 2);
7. });](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-28-320.jpg)
![33
Sample .eslintrc.js
1. module.exports = {
2. extends: 'airbnb-base',
3. rules: {
4. strict: 'error',
5. semi: ['error', 'always'],
6. indent: ['error', 2],
7. eqeqeq: ['error', 'always'],
8. 'no-var': 'error'
9. }
10. };](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-33-320.jpg)
![Sample tslint.json
35
1. {
2. "defaultSeverity": "error",
3. "extends": "tslint:recommended",
4. "rules": {
5. "semicolon": [true, "always"],
6. "indent": [true, "spaces", 2],
7. "triple-equals": [true, "allow-null-check"],
8. "no-var-keyword": true
9. }
10. }](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-35-320.jpg)
![Sample Gruntfile.js
39
1. module.exports = function (grunt) {
2. grunt.initConfig({
3. less: {
4. files: [{ src: 'src/less/*.less', dest: 'build/css' }]
5. },
6. copy: {
7. files: [{ src: 'src/tmpl/*.html', dest: 'build/views' }]
8. }
9. });
10. grunt.loadNpmTasks('grunt-contrib-less');
11. grunt.loadNpmTasks('grunt-contrib-copy');
12. grunt.registerTask('default', ['less', 'copy']);
13. };](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-39-320.jpg)
![41
Sample gulpfile.js
1. var gulp = require('gulp');
2. var less = require('gulp-less');
3. gulp.task('html', function () {
4. return gulp.src('src/tmpl/*.html')
5. .pipe(gulp.dest('build/views'));
6. });
7. gulp.task('css', function () {
8. return gulp.src('src/less/*.less')
9. .pipe(less()).pipe(gulp.dest('build/css'));
10. });
11. gulp.task('default', ['html', 'css']);](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-41-320.jpg)
![44
Sample Webpack Config
1. var path = require('path');
2. module.exports = {
3. entry: './src/app.js',
4. output: {
5. path: path.join(__dirname, 'build'), filename: 'bundle.js'
6. },
7. module: {
8. loaders: [{ test: /.less$/, loader: 'style!css!less' }]
9. }
10. };](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-44-320.jpg)
![1. console.debug(object[, object, …]);
2. console.info(object[, object, …]);
3. console.log(object[, object, …]);
4. console.warn(object[, object, …]);
5. console.error(object[, object, …]);
6. console.dir(object);
7. console.table(array);
8. console.count([label]);
9. console.trace(object[, object, …]);
10. console.time([label]);
11. console.timeEnd([label]);
68
Working With the Console](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-68-320.jpg)
![98
Sample Test Code
1. describe('Todo list', function () {
2. it('should add a todo task', function () {
3. browser.get('https://app.todos.net');
4. element(by.css('#task')).sendKeys('Water');
5. element(by.css('[value="add"]')).click();
6. var todos = element.all(by.css('.todo'));
7. expect(todos.count()).toEqual(3);
8. expect(todos.get(2).getText()).toEqual('Water');
9. });
10. });](https://image.slidesharecdn.com/practicaljavascriptprogramming-session8-170809055407/85/Practical-JavaScript-Programming-Session-8-8-98-320.jpg)
More Related Content
What's hot (20)
Similar to Practical JavaScript Programming - Session 8/8 (20)
More from Wilson Su (7)
Recently uploaded (20)
Practical JavaScript Programming - Session 8/8
- 1. Practical JavaScript Programming Session 8 Wilson Su
- 3. 3 Wilson Su Front-end Developer, HIE ● 6 years in web design ● Specialize in JavaScript / CSS / HTML / OOP / Git ● Familiar with PHP / Design Pattern ● Interested in UI & Ix Design [email protected]
- 4. Outline 4 Practical JavaScript Programming Chapter 17. ● Node.js ● TypeScript ● Babel ● Linter Development Tools ● Task Runner ● Module Bundler ● Chrome DevTools ● Testing Tools
- 6. Node.js 6
- 9. 9 Creating a Project and Installing Dependencies 1. $ mkdir webapp 2. $ cd webapp 3. $ npm init 4. $ npm install express --save
- 10. Sample package.json 10 1. { 2. "name": "webapp", 3. "version": "0.1.0", 4. "description": "A simple web app with Express.", 5. "author": "Rick <[email protected]>", 6. "dependencies": { 7. "express": "^4.15.3" 8. } 9. }
- 11. Project Structure 11 Node.js webapp public index.html create.html package.json server.js The project metadata for npm app.js create.html node_modules Dependencies are downloaded into this folder https://github.com/sweekson/tm-etp-webapp
- 12. ./server.js 12 1. var express = require('express'); 2. var app = express(); 3. var port = process.env.PORT; 4. app.use(express.static('public')); 5. app.listen(port, function (err) { 6. if (err) { throw err; } 7. console.log('Listening on port ' + port); 8. });
- 13. 13 A Simple Web App https://webapp-wilson-su.c9users.io/
- 15. Yarn Installation and Usage 15 1. $ curl -sS "https://dl.yarnpkg.com/debian/pubkey.gpg" | sudo apt-key add - 2. $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 3. $ sudo apt-get update 4. $ sudo apt-get install yarn 5. $ mkdir webapp 6. $ cd webapp 7. $ yarn init 8. $ yarn add express
- 16. TypeScript 16
- 18. TypeScript Installation and Usage 18 1. $ npm install typescript --save-dev 2. $ sudo npm install typescript --global 3. $ tsc --init
- 19. Sample tsconfig.json 19 1. { 2. "compilerOptions": { 3. "target": "es5", 4. "module": "commonjs", 5. "outDir": "./dist", 6. "moduleResolution": "node" 7. }, 8. "include": [ 9. "src/**/*" 10. ] 11. }
- 20. 20 Adds Types to Function 1. function greet (name: string): string { 2. return `Hello, ${name}.`; 3. } 4. 5. greet('TypeScript'); // 'Hello, TypeScript.' 6. greet([1, 2, 3]); // Error
- 21. Use an Interface 21 1. interface User { 2. id: number | string, 3. name: string, 4. age?: number 5. } 6. function echo(user: User): string { 7. return `#${user.id} ${user.name} (${user.age || '?'})`; 8. } 9. 10. echo({ id: 15, name: 'Tina' }); // '#15 Tina (?)' 11. echo({ id: '36', name: 'Eric', age: 20 }); // '#36 Eric (20)' 12. echo({}); // Error
- 22. Use Generics 22 1. function echo<T> (list: T[]): T[] { 2. return list; 3. } 4. echo<string>(['x', 'y', 'z']); // (3) ['x', 'y', 'z'] 5. echo<number>([1, 2, 3]); // (3) [1, 2, 3]
- 23. Babel 23
- 25. Sample .babelrc 25 1. { 2. "presets": ["es2015"], 3. "plugins": ["transform-exponentiation-operator"], 4. "comments": false 5. }
- 26. Writing Next Generation JavaScript - Example 1 26 1. /* Next-gen JavaScript */ 2. var skill = 'JavaScript'; 3. console.log(`Hellom, ${skill}.`); 4. 5. /* Browser-compatible JavaScript */ 6. var skill = 'JavaScript'; 7. console.log('Hello, ' + skill + '.');
- 27. Writing Next Generation JavaScript - Example 2 27 1. /* Next-gen JavaScript */ 2. function add (a = 0, b = 0) { 3. return a + b; 4. } 5. 6. /* Browser-compatible JavaScript */ 7. function add () { 8. var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 9. var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 10. return a + b; 11. }
- 28. 28 Writing Next Generation JavaScript - Example 3 1. /* Next-gen JavaScript */ 2. [1, 2, 3].map(n => n ** 2); 3. 4. /* Browser-compatible JavaScript */ 5. [1, 2, 3].map(function (n) { 6. return Math.pow(n, 2); 7. });
- 29. Linter 29
- 30. 30 What Is Lint? In computer programming, lint is a Unix utility that flags some suspicious and non-portable constructs in C language source code. Lint as a term can also refer more broadly to syntactic discrepancies in general, especially in interpreted languages like JavaScript. For example, modern lint checkers are often used to find code that doesn't correspond to certain style guidelines. – Wiki Linter
- 32. ESLint Installation and Usage 32 1. $ npm install eslint --save-dev 2. $ sudo npm install eslint --global 3. $ npm install eslint-config-airbnb --save-dev 4. $ eslint --init
- 33. 33 Sample .eslintrc.js 1. module.exports = { 2. extends: 'airbnb-base', 3. rules: { 4. strict: 'error', 5. semi: ['error', 'always'], 6. indent: ['error', 2], 7. eqeqeq: ['error', 'always'], 8. 'no-var': 'error' 9. } 10. };
- 35. Sample tslint.json 35 1. { 2. "defaultSeverity": "error", 3. "extends": "tslint:recommended", 4. "rules": { 5. "semicolon": [true, "always"], 6. "indent": [true, "spaces", 2], 7. "triple-equals": [true, "allow-null-check"], 8. "no-var-keyword": true 9. } 10. }
- 36. Task Runner 36
- 37. What Is Task Runner? 37 Task Runner A task runner is a tool used to automatically perform repetitive tasks. Common tasks in web development including: Linting ConcatenationCompilation Minification Watching File Changes Unit Testing …
- 39. Sample Gruntfile.js 39 1. module.exports = function (grunt) { 2. grunt.initConfig({ 3. less: { 4. files: [{ src: 'src/less/*.less', dest: 'build/css' }] 5. }, 6. copy: { 7. files: [{ src: 'src/tmpl/*.html', dest: 'build/views' }] 8. } 9. }); 10. grunt.loadNpmTasks('grunt-contrib-less'); 11. grunt.loadNpmTasks('grunt-contrib-copy'); 12. grunt.registerTask('default', ['less', 'copy']); 13. };
- 41. 41 Sample gulpfile.js 1. var gulp = require('gulp'); 2. var less = require('gulp-less'); 3. gulp.task('html', function () { 4. return gulp.src('src/tmpl/*.html') 5. .pipe(gulp.dest('build/views')); 6. }); 7. gulp.task('css', function () { 8. return gulp.src('src/less/*.less') 9. .pipe(less()).pipe(gulp.dest('build/css')); 10. }); 11. gulp.task('default', ['html', 'css']);
- 44. 44 Sample Webpack Config 1. var path = require('path'); 2. module.exports = { 3. entry: './src/app.js', 4. output: { 5. path: path.join(__dirname, 'build'), filename: 'bundle.js' 6. }, 7. module: { 8. loaders: [{ test: /.less$/, loader: 'style!css!less' }] 9. } 10. };
- 46. Chrome DevTools 46 The DevTools Window Elements Network Sources Console Application Performance Memory Audits Security
- 48. 48 Node Tree CSS Styles
- 49. 49 Interact With a DOM Node
- 52. 52 Properties
- 53. 53 Network Panel
- 55. 55 Filters
- 56. 56 Request and Response Headers
- 58. 58 Cookies
- 59. 59 Sources Panel
- 63. 63
- 65. 65 Breakpoints
- 66. 66 Console Panel
- 68. 1. console.debug(object[, object, …]); 2. console.info(object[, object, …]); 3. console.log(object[, object, …]); 4. console.warn(object[, object, …]); 5. console.error(object[, object, …]); 6. console.dir(object); 7. console.table(array); 8. console.count([label]); 9. console.trace(object[, object, …]); 10. console.time([label]); 11. console.timeEnd([label]); 68 Working With the Console
- 70. 70 Filtering the Console Output
- 71. 71 Printing HTML Element With console.log()
- 72. 72 Printing HTML Element With console.dir()
- 74. 74 Writes the Number of Times That count() Has Been Invoked
- 75. 75 Prints a Stack Trace
- 76. 76 Starts and Stops a Timer
- 78. 78
- 80. 80
- 81. 81 Memory Panel
- 82. 82
- 83. 83 Audits Panel
- 84. 84
- 86. 86
- 87. Testing Tools 87
- 88. 88 Unit Tests VS. E2E Tests Testing Unit Tests E2E Tests White-box Black-box APIs UIs JavaScript JavaScript / HTML Console Browsers
- 90. 90 Sample Test Code 1. function multiply (a, b) { 2. return a * b; 3. } 4. describe('Calculator', function () { 5. it('multiply method should be implemented', function () { 6. expect(multiply).toBeDefined(); 7. }); 8. it('multiply method should multiply values', function () { 9. expect(multiply(6, 4)).toBe(24); 10. }); 11. });
- 92. Sample Test Code 92 1. var assert = require('assert'); 2. describe('Math#max()', function () { 3. it('should return the largest number', function () { 4. assert.equal(5, Math.max(3, 5, 1)); 5. }); 6. });
- 94. Sample Assertions 94 1. var assert = chai.assert; 2. var expect = chai.expect; 3. var lib = 'chai'; 4. assert.typeOf(lib, 'string'); 5. assert.equal(lib, 'chai'); 6. assert.lengthOf(lib, 4); 7. expect(lib).to.be.a('string'); 8. expect(lib).to.equal('chai'); 9. expect(lib).to.have.lengthOf(4);
- 98. 98 Sample Test Code 1. describe('Todo list', function () { 2. it('should add a todo task', function () { 3. browser.get('https://app.todos.net'); 4. element(by.css('#task')).sendKeys('Water'); 5. element(by.css('[value="add"]')).click(); 6. var todos = element.all(by.css('.todo')); 7. expect(todos.count()).toEqual(3); 8. expect(todos.get(2).getText()).toEqual('Water'); 9. }); 10. });
- 101. Sample Test Code 101 1. var casper = require('casper').create(); 2. casper.start('https://reports.car.com'); 3. casper.thenClick('#btn-month'); 4. casper.then(function () { 5. phantomcss.screenshot('#dashboard', 'dashboard'); 6. }); 7. casper.then(function () { 8. phantomcss.compareAll(); 9. }); 10. casper.run();
- 103. But wait! There’s still much more you need to learn … 103
- 104. 104 JS HTML CSS UI Testing Backbone Veu.js JSON jQuery DOM React BOM Angular TypeScript AJAX Usability RegExp WebSocket Less SCSS CSS Module Sass DevTools CasperJS Jasmine Karma Mocha WebDriver Protractor Lint Accessibility UI Design RWDCanvasSVG D3 WebGL SQL MySQLPHPMongoDB Express SEO Babel Performance REST Security Grunt Gulp Webpack Animation Stylus Bootstrap What You Need to Be a Front-end Developer
- 105. Reference 105 ● Lint (software) - Wikipedia ● eslint-config-airbnb at master ‧ airbnb/javascript ● Chrome DevTools | Web | Google Developers ● Visual Regression Testing with PhantomCSS | CSS-Tricks ● JavaScript Testing Framework Comparison: Jasmine vs Mocha | Codementor Practical JavaScript Programming
- 106. Questions? 106
- 107. THANKS