Empower Mobile Web Developers with JavaScript & WebAPI - PragueJS - 2014-03-27
JavaScript 2016 for C# Developers
-
Upload
rick-beerendonk -
Category
Software
-
view
214 -
download
0
Transcript of JavaScript 2016 for C# Developers
![Page 1: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/1.jpg)
![Page 3: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/3.jpg)
Training: [email protected] or @rickbeerendonk• ECMAScript • 5, 2015, 2016, 2017…
• React • Components, Properties, State, Events, Virtual DOM…
• Redux • Actions, Reducers, Stores…
• Samples & Slides • https://github.com/rickbeerendonk/ECMAScript-2015-2017-Demos
![Page 4: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/4.jpg)
QuizECMAScript 2016JavaS
cript
🙋 🙎
![Page 5: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/5.jpg)
1. The following code is…var x = 10;
🙋 C# 🙎 JavaScript
![Page 6: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/6.jpg)
1. The following code is…var x = 10;
🙋 C# 🎉 🙎 JavaScript 🎉
![Page 7: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/7.jpg)
2. C#’s foreach in JavaScript is…🙋 for .. in 🙎 for .. of
![Page 8: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/8.jpg)
2. C#’s foreach in JavaScript is…🙋 for .. in 🙎 for .. of 🎉
![Page 9: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/9.jpg)
3. Indeterminate Number of Parameters in JavaScriptC#: void Test(params int[] a)
🙋 function test([]a) 🙎 function test(…a)
![Page 10: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/10.jpg)
3. Indeterminate Number of Parameters in JavaScriptC#: void Test(params int[] a)
🙋 function test([]a) 🙎 function test(…a) 🎉
![Page 11: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/11.jpg)
4. When does calling this function throw an error?function test(a, b)
1finger🙋 test(1) 2fingers🙋 test(1, 2) 3fingers🙋 test(1, 2, 3)
🙎 <never>
![Page 12: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/12.jpg)
4. When does calling this function throw an error?function test(a, b)
1finger🙋 test(1) 2fingers🙋 test(1, 2) 3fingers🙋 test(1, 2, 3)
🙎 <never> 🎉
![Page 13: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/13.jpg)
5. Call constructor of the parent classclass Child extends Parent { constructor(name, value) { <???> this.balance = value; } }
🙋 base(name) 🙎 super(name)
![Page 14: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/14.jpg)
5. Call constructor of the parent classclass Child extends Parent { constructor(name, value) { <???> this.balance = value; } }
🙋 base(name) 🙎 super(name) 🎉
![Page 15: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/15.jpg)
• 2009: 5th Edition • 2015: 6th Edition
• Changed to: ‣ Yearly releases (in June) ‣ Year = version number
ECMAScript
![Page 16: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/16.jpg)
• Finished proposals • Active proposals
Ecma International, Technical Committee 39 (TC39)
![Page 17: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/17.jpg)
• String • Number • Bool • Undefined • Null
Primitive Data Types
![Page 18: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/18.jpg)
• String ‣ Single ('') or Double Quotes ("") ‣ C#: Char & String
• Number ‣ C#: Double & Int
• Bool • Undefined • Null
Primitive Data Types
![Page 19: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/19.jpg)
Variable declarationsvar a = 1;
if (true) {var a = 2;console.log(a); // 2
}
console.log(a); // 2
let a = 1;
if (true) {let a = 2;console.log(a); // 2
}
console.log(a); // 1
C# var scoping = JS let scoping
![Page 20: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/20.jpg)
Constantsvar a = 1;
if (true) {var a = 2;console.log(a); // 2
}
console.log(a); // 2
// unchangeableconst a = 1;
if (true) {const a = 2;console.log(a); // 2
}
console.log(a); // 1
Same as C#
![Page 21: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/21.jpg)
var name = "EcmaScript";var version = 2015;Func<string> x = () => "hi!";
var result = $"This is about:{name} {version + 1} {x()}";
Console.WriteLine(result);// This is about:// EcmaScript 2016 hi!
Template Strings C#
![Page 22: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/22.jpg)
var name = "EcmaScript";var version = 2015;var x = () => "hi!";
var result = $"This is about:{name} {version + 1} {x()}";
console.log(result);// This is about:// EcmaScript 2016 hi!
Template Strings
![Page 23: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/23.jpg)
var name = "EcmaScript";var version = 2015;var x = () => "hi!";
var result = `This is about:${name} ${version + 1} ${x()}`;
console.log(result);// This is about:// EcmaScript 2016 hi!
Template Strings JavaScript
C# $"{}" = JS `${}`
![Page 24: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/24.jpg)
console.log('0'.padStart(3)); // ' 0'
console.log('000'.padStart(1, '1')); // 000console.log('000'.padStart(3, '1')); // 000console.log('000'.padStart(5, '1')); // 11000
console.log('000'.padStart(5, '123')); // 12000console.log('000'.padStart(7, '123')); // 1231000
String Padding (ES2017)
C# String.PadLeft() = JS String.padStart()
![Page 25: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/25.jpg)
console.log('0'.padEnd(3)); // '0 '
console.log('000'.padEnd(1, '1')); // 000console.log('000'.padEnd(3, '1')); // 000console.log('000'.padEnd(5, '1')); // 00011
console.log('000'.padEnd(5, '123')); // 00012console.log('000'.padEnd(7, '123')); // 0001231
String Padding (ES2017)
C# String.PadRight() = JS String.padEnd()
![Page 26: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/26.jpg)
Equality: == vs ===let i = 1;let s = '1';
console.log(i == s);// true (value)
C# == is the same as JS ===
let i = 1;let s = '1';
console.log(i === s);// false (value + type)
![Page 27: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/27.jpg)
• If ‣ if (true || false) { console.log('positive'); } else { console.log('negative'); }
• Inline ‣ console.log(true || false ? 'positive' : 'negative');
Conditional Statements
Same as C#
![Page 28: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/28.jpg)
• for ‣ for (let i = 0; i < 2; i++) { console.log(i)}
• forEach ‣ [1, 2, 3].forEach((element, index, array) => console.log(`a[${index}] = ${element}`))
• for .. in ‣ Iterates over object properties
• for .. of ‣ Iterates over iterable object (Array, String, Map, Set, etc.)
Loops
C# for = JS for C# foreach = JS for .. of
![Page 29: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/29.jpg)
let test = { [Symbol.iterator]: function*() {
let current = 1;
while (true) {
yield current++; }
}
}
Generators / Iterators
C# function + yield + foreach = JS function* + yield + for .. of
for (var n of test) {
if (n > 10) {break;
}
console.log(n);}C# IEnumerable = JS Iterator
![Page 30: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/30.jpg)
function test(a, b) { console.log(a);
console.log(b);
}
test(1); // a = 1, b = undefined
test(1, 2, 3, 4); // a = 1, b = 2, 3 = ignored
Functions: Overloads
C# overload = JS one function
![Page 31: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/31.jpg)
function test(a = 11, b = '22') { console.log(a);
console.log(b);
}
test(); // a = 11, b = '22'
test(1, 2, 3, 4); // a = 1, b = 2, 3 & 4 = ignored
Functions: Default parameters
C# = JS
![Page 32: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/32.jpg)
function test(a, b, ...c) { console.log(a);
console.log(b);
console.log(c);
}
test(1, 2, 3, 4); // a = 1, b = 2, c = [3, 4]
Functions: Rest parameters
C# params [] = JS …
![Page 33: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/33.jpg)
function test(a, b, ...c) { console.log(a);
console.log(b);
console.log(c);
}
test(...[1, 2, 3, 4]); // a = 1, b = 2, c = [3, 4]
test(...'pqrs'); // a = 'p', b = 'q', c = ['r ', 's']
Spread operator
JS Only (C# only for params)
![Page 34: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/34.jpg)
let a = () => 'EcmaScript';
let b = (x) => x * x;let c = x => x * x;let d = x => { var y = x * x; return y; };
let e = (x, y) => x * y;
Arrow functions
C# lambda = JS arrow
Omit braces
{ } when multiple statements
![Page 35: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/35.jpg)
• Default values ‣ var f = (x = 10) => x * x; console.log(f()); // 100
• Rest parameters ‣ var x = (a, b, ...rest) => [a, b, rest]; console.log(x(1, 2, 3, 4)); // [ 1, 2, [3, 4] ]
• Return object literal ‣ var a = x => ({value: x}); // Must use () console.log(a(123)); // { value: 123 }
Arrow function options
JS Only
![Page 36: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/36.jpg)
class Account extends Base { constructor(name, initialAmount) { super(name); this.balance = initialAmount; } deposit(amount) { this.balance += amount; }};
var acc = new Account('Bill', 0);acc.deposit(100);console.log(acc); // { name: 'Bill', balance: 100 }
Classes
JS still prototype inheritance & different syntax than C#
No function keyword
![Page 37: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/37.jpg)
Modules (direct)// my-export.js
export function square(x) {
return x * x;
}
export let pi = 3.14;
// my-import.js
import { square, pi } from ‘./my-export’;
console.log(square(3)); // 9
console.log(pi); // 3.14
file-name = module name
![Page 38: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/38.jpg)
Modules (default)// my-export.js
function square(x) {
return x * x;
}
let pi = 3.14;
export default {square, pi};
// my-import.js
import my_export from './my-export';
console.log(my_export.square(3)); // 9
console.log(my_export.pi); // 3.14
C# namespaces look like JS modules
![Page 39: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/39.jpg)
let data = [1, 22, 333, 4444, 55555];let [a, , b, ...rest] = data;
console.log(a); // 1console.log(b); // 333console.log(rest); // [4444, 55555]
Destructuring: List matching
JS Only
![Page 40: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/40.jpg)
let obj = {name: 'EcmaScript',year: 2015,version: 6
};
let {name: a, year} = obj;
console.log(a); // 'EcmaScript'console.log(year); // 2015
Destructuring: Object matching
JS Only
![Page 41: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/41.jpg)
function test([value, {name}, year = 2017]) {console.log(value); // 1console.log(name); // EcmaScriptconsole.log(year); // 2017
}
test([1, {name: 'EcmaScript', year: 2015}]);
Destructuring: Parameters, nested & defaults
JS Only
function parameter nested default
![Page 42: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/42.jpg)
async function write() { var txt = await read(); console.log(txt);}
Async & Await (ES 2017)
C# = JS
![Page 43: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/43.jpg)
• array ‣ [1, 2, ]
• object ‣ { one: 1, two: 2, }
• function (ES 2017) ‣ function test(one, two, ) { }‣ test(1, 2, );
Trailing commas
JS Only
![Page 44: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/44.jpg)
let people = [ { name: "Alice", age: 35 }, { name: "Ben", age: 40 }, { name: "Charlotte", age: 15 },
];
let where = people.filter(x => x.age >= 18); // adults only
let select = people.map(x => x.name); // names only
let all = people.every(x => x.age >= 18); // false
let any = people.some(x => x.age >= 18); // true
// Warning: In place, also updates people!let orderedBy = people.sort((a, b) => a.age > b.age); // by age
“LINQ" functions on arrays
C# LINQ can be simulated by JS array methods
![Page 45: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/45.jpg)
• http://kangax.github.io/compat-table/es6/ • http://kangax.github.io/compat-table/es2016plus/
Compatibility ES 2015, 2016…
![Page 46: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/46.jpg)
• Babel • Traceur • TypeScript
Compiler: Transpile ES201X to ES5
![Page 47: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/47.jpg)
• Install npm (by installing NodeJS) • Command line: ‣ npm init‣ npm install babel-cli babel-polyfill babel-preset-es2015 babel-preset-es2016 babel-preset-2017 --save-dev
• Create file “.babelrc”: { "presets": ["es2015", "es2016", "es2017"]}
• Command line (transpile all js-files in src-folder into the lib-folder): ‣ babel src --out-dir lib
Babel
![Page 48: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/48.jpg)
• Why?Packaging / Bundling + Minifying
![Page 49: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/49.jpg)
• Bundling: ‣ Browsers can download max. 6 files at the same
time • Minifying: ‣ Minimize download time
Packaging / Bundling + Minifying
![Page 50: JavaScript 2016 for C# Developers](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a57e641a28ab36768b6b1b/html5/thumbnails/50.jpg)
Training: [email protected] or @rickbeerendonk• ECMAScript • 5, 2015, 2016, 2017…
• React • Components, Properties, State, Events, Virtual DOM…
• Redux • Actions, Reducers, Stores…
• Samples & Slides • https://github.com/rickbeerendonk/ECMAScript-2015-2017-Demos