Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
#TechDaysNL
@rickbeerendonk
JavaScript for C# Developers
Rick Beerendonk
rick@oblicum.com
Training: rick@oblicum.com or @rickbeerendonk
• ECMAScript
• 5, 2015, 2016, 2017…
• React
• Components, Properties, State,...
Quiz
ECMAScript 2016
JavaScript
🙋 🙎
1. The following code is…
var x = 10;
🙋 C#
🙎 JavaScript
1. The following code is…
var x = 10;
🙋 C# 🎉
🙎 JavaScript 🎉
2. C#’s foreach in JavaScript is…
🙋 for .. in
🙎 for .. of
2. C#’s foreach in JavaScript is…
🙋 for .. in
🙎 for .. of 🎉
3. Indeterminate Number of Parameters in JavaScript
C#: void Test(params int[] a)
🙋 function test([]a)
🙎 function test(…a)
3. Indeterminate Number of Parameters in JavaScript
C#: void Test(params int[] a)
🙋 function test([]a)
🙎 function test(…a)...
4. When does calling this function throw an error?
function test(a, b)
1finger🙋 test(1)
2fingers🙋 test(1, 2)
3fingers🙋 tes...
4. When does calling this function throw an error?
function test(a, b)
1finger🙋 test(1)
2fingers🙋 test(1, 2)
3fingers🙋 tes...
5. Call constructor of the parent class
class Child extends Parent {
constructor(name, value) {
<???>
this.balance = value...
5. Call constructor of the parent class
class Child extends Parent {
constructor(name, value) {
<???>
this.balance = value...
• 2009: 5th Edition
• 2015: 6th Edition
• Changed to:
‣ Yearly releases (in June)
‣ Year = version number
ECMAScript
• Finished proposals
• Active proposals
Ecma International, Technical Committee 39 (TC39)
• String
• Number
• Bool
• Undefined
• Null
Primitive Data Types
• String
‣ Single ('') or Double Quotes ("")
‣ C#: Char & String
• Number
‣ C#: Double & Int
• Bool
• Undefined
• Null
Pri...
Variable declarations
var a = 1;
if (true) {
var a = 2;
console.log(a); // 2
}
console.log(a); // 2
let a = 1;
if (true) {...
Constants
var a = 1;
if (true) {
var a = 2;
console.log(a); // 2
}
console.log(a); // 2
// unchangeable
const a = 1;
if (t...
var name = "EcmaScript";
var version = 2015;
Func<string> x = () => "hi!";
var result = $"This is about:
{name} {version +...
var name = "EcmaScript";
var version = 2015;
var x = () => "hi!";
var result = $"This is about:
{name} {version + 1} {x()}...
var name = "EcmaScript";
var version = 2015;
var x = () => "hi!";
var result = `This is about:
${name} ${version + 1} ${x(...
console.log('0'.padStart(3)); // ' 0'
console.log('000'.padStart(1, '1')); // 000
console.log('000'.padStart(3, '1')); // ...
console.log('0'.padEnd(3)); // '0 '
console.log('000'.padEnd(1, '1')); // 000
console.log('000'.padEnd(3, '1')); // 000
co...
Equality: == vs ===
let i = 1;
let s = '1';
console.log(i == s);
// true (value)
C# == is the same as JS ===
let i = 1;
le...
• If
‣ if (true || false) {

console.log('positive');

} else { 

console.log('negative');

}
• Inline
‣ console.log(true ...
• for
‣ for (let i = 0; i < 2; i++) { console.log(i)}
• forEach
‣ [1, 2, 3].forEach((element, index, array) =>
console.log...
let test = {
[Symbol.iterator]: function*() {
let current = 1;
while (true) {
yield current++;
}
}
}
Generators / Iterator...
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...
function test(a = 11, b = '22') {
console.log(a);
console.log(b);
}
test(); // a = 11, b = '22'
test(1, 2, 3, 4); // a = 1...
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...
function test(a, b, ...c) {
console.log(a);
console.log(b);
console.log(c);
}
test(...[1, 2, 3, 4]); // a = 1, b = 2, c = ...
let a = () => 'EcmaScript';
let b = (x) => x * x;
let c = x => x * x;
let d = x => { var y = x * x; return y; };
let e = (...
• Default values
‣ var f = (x = 10) => x * x;

console.log(f()); // 100
• Rest parameters
‣ var x = (a, b, ...rest) => [a,...
class Account extends Base {
constructor(name, initialAmount) {
super(name);
this.balance = initialAmount;
}
deposit(amoun...
Modules (direct)
// my-export.js
export function square(x) {
return x * x;
}
export let pi = 3.14;
// my-import.js
import ...
Modules (default)
// my-export.js
function square(x) {
return x * x;
}
let pi = 3.14;
export default {square, pi};
// my-i...
let data = [1, 22, 333, 4444, 55555];
let [a, , b, ...rest] = data;
console.log(a); // 1
console.log(b); // 333
console.lo...
let obj = {
name: 'EcmaScript',
year: 2015,
version: 6
};
let {name: a, year} = obj;
console.log(a); // 'EcmaScript'
conso...
function test([value, {name}, year = 2017]) {
console.log(value); // 1
console.log(name); // EcmaScript
console.log(year);...
async function write() {
var txt = await read();
console.log(txt);
}
Async & Await (ES 2017)
C# = JS
• array
‣ [1, 2, ]
• object
‣ {

one: 1,

two: 2,

}
• function (ES 2017)
‣ function test(one, two, ) { }
‣ test(1, 2, );
...
let people = [
{ name: "Alice", age: 35 },
{ name: "Ben", age: 40 },
{ name: "Charlotte", age: 15 },
];
let where = people...
• http://kangax.github.io/compat-table/es6/
• http://kangax.github.io/compat-table/es2016plus/
Compatibility ES 2015, 2016…
• Babel
• Traceur
• TypeScript
Compiler: Transpile ES201X to ES5
• Install npm (by installing NodeJS)
• Command line:
‣ npm init
‣ npm install babel-cli babel-polyfill babel-preset-
es201...
• Why?
Packaging / Bundling + Minifying
• Bundling:
‣ Browsers can download max. 6 files at the same
time
• Minifying:
‣ Minimize download time
Packaging / Bundli...
Training: rick@oblicum.com or @rickbeerendonk
• ECMAScript
• 5, 2015, 2016, 2017…
• React
• Components, Properties, State,...
JavaScript 2016 for C# Developers
Nächste SlideShare
Wird geladen in …5
×

JavaScript 2016 for C# Developers

TechDays 2016 in Amsterdam

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

JavaScript 2016 for C# Developers

  1. 1. #TechDaysNL @rickbeerendonk JavaScript for C# Developers Rick Beerendonk rick@oblicum.com
  2. 2. Training: rick@oblicum.com 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

  3. 3. Quiz ECMAScript 2016 JavaScript 🙋 🙎
  4. 4. 1. The following code is… var x = 10; 🙋 C# 🙎 JavaScript
  5. 5. 1. The following code is… var x = 10; 🙋 C# 🎉 🙎 JavaScript 🎉
  6. 6. 2. C#’s foreach in JavaScript is… 🙋 for .. in 🙎 for .. of
  7. 7. 2. C#’s foreach in JavaScript is… 🙋 for .. in 🙎 for .. of 🎉
  8. 8. 3. Indeterminate Number of Parameters in JavaScript C#: void Test(params int[] a) 🙋 function test([]a) 🙎 function test(…a)
  9. 9. 3. Indeterminate Number of Parameters in JavaScript C#: void Test(params int[] a) 🙋 function test([]a) 🙎 function test(…a) 🎉
  10. 10. 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>
  11. 11. 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> 🎉
  12. 12. 5. Call constructor of the parent class class Child extends Parent { constructor(name, value) { <???> this.balance = value; } } 🙋 base(name) 🙎 super(name)
  13. 13. 5. Call constructor of the parent class class Child extends Parent { constructor(name, value) { <???> this.balance = value; } } 🙋 base(name) 🙎 super(name) 🎉
  14. 14. • 2009: 5th Edition • 2015: 6th Edition • Changed to: ‣ Yearly releases (in June) ‣ Year = version number ECMAScript
  15. 15. • Finished proposals • Active proposals Ecma International, Technical Committee 39 (TC39)
  16. 16. • String • Number • Bool • Undefined • Null Primitive Data Types
  17. 17. • String ‣ Single ('') or Double Quotes ("") ‣ C#: Char & String • Number ‣ C#: Double & Int • Bool • Undefined • Null Primitive Data Types
  18. 18. Variable declarations var 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
  19. 19. Constants var a = 1; if (true) { var a = 2; console.log(a); // 2 } console.log(a); // 2 // unchangeable const a = 1; if (true) { const a = 2; console.log(a); // 2 } console.log(a); // 1 Same as C#
  20. 20. 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#
  21. 21. 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
  22. 22. 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 `${}`
  23. 23. console.log('0'.padStart(3)); // ' 0' console.log('000'.padStart(1, '1')); // 000 console.log('000'.padStart(3, '1')); // 000 console.log('000'.padStart(5, '1')); // 11000 console.log('000'.padStart(5, '123')); // 12000 console.log('000'.padStart(7, '123')); // 1231000 String Padding (ES2017) C# String.PadLeft() = JS String.padStart()
  24. 24. console.log('0'.padEnd(3)); // '0 ' console.log('000'.padEnd(1, '1')); // 000 console.log('000'.padEnd(3, '1')); // 000 console.log('000'.padEnd(5, '1')); // 00011 console.log('000'.padEnd(5, '123')); // 00012 console.log('000'.padEnd(7, '123')); // 0001231 String Padding (ES2017) C# String.PadRight() = JS String.padEnd()
  25. 25. 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)
  26. 26. • If ‣ if (true || false) {
 console.log('positive');
 } else { 
 console.log('negative');
 } • Inline ‣ console.log(true || false ? 'positive' : 'negative'); Conditional Statements Same as C#
  27. 27. • 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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 …
  32. 32. 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)
  33. 33. 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
  34. 34. • 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. let data = [1, 22, 333, 4444, 55555]; let [a, , b, ...rest] = data; console.log(a); // 1 console.log(b); // 333 console.log(rest); // [4444, 55555] Destructuring: List matching JS Only
  39. 39. 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
  40. 40. function test([value, {name}, year = 2017]) { console.log(value); // 1 console.log(name); // EcmaScript console.log(year); // 2017 } test([1, {name: 'EcmaScript', year: 2015}]); Destructuring: Parameters, nested & defaults JS Only function parameter nested default
  41. 41. async function write() { var txt = await read(); console.log(txt); } Async & Await (ES 2017) C# = JS
  42. 42. • array ‣ [1, 2, ] • object ‣ {
 one: 1,
 two: 2,
 } • function (ES 2017) ‣ function test(one, two, ) { } ‣ test(1, 2, ); Trailing commas JS Only
  43. 43. 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
  44. 44. • http://kangax.github.io/compat-table/es6/ • http://kangax.github.io/compat-table/es2016plus/ Compatibility ES 2015, 2016…
  45. 45. • Babel • Traceur • TypeScript Compiler: Transpile ES201X to ES5
  46. 46. • 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
  47. 47. • Why? Packaging / Bundling + Minifying
  48. 48. • Bundling: ‣ Browsers can download max. 6 files at the same time • Minifying: ‣ Minimize download time Packaging / Bundling + Minifying
  49. 49. Training: rick@oblicum.com 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


×