JavaScript for Python Developers -- August Python Meetup

Transcript

1. JavaScript for Python Developers Python Meetup 20th August, 2018 Žan Anderle Twitter: @z_anderle
2. Raise your hand if…
3. JavaScript and Python developers
4. https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
7. Overview • JavaScript versions • Basics of the language • JavaScript ecosystem • How to make sense of it all?
9. Overview • JavaScript history and versions • Basics of the language • Different tools • How to make sense of it all?
11. Overview • JavaScript history and versions • Basics of the language • Different tools • How to make sense of it all?
12. Syntax 1 let myName = 'Python Meetup'; 2 function sayHi(name) { 3 console.log(`Hey there, ${name}`); 4 } 5 6 sayHi(myName); // 'Hey there, Python Meetup'; 7 8 let someArray = [1, 2, 5, 10]; 9 let newArray = []; 10 11 for (let el of someArray) { 12 if (el > 2) { 13 newArray.push(el); 14 } else { 15 console.log('Nope!'); 16 } 17 } 18 // 'Nope!' 19 // 'Nope!'
13. Syntax 1 class Hero { 2 constructor(name) { 3 this.name = name; 4 } 5 6 superPower() { 7 console.log(`I, ${this.name}, can count really fast!`); 8 let count = 0; 9 while (count < 1000) { 10 count ++; 11 } 12 return count; 13 } 14 } 15 16 let superMan = new Hero('SuperMan'); 17 superMan.superPower(); 18 // I, SuperMan, can count really fast! 19 // 1000 1 class Hero: 2 def __init__(self, name): 3 self.name = name 4 5 def super_power(self): 6 print(f'I, {self.name}, can count really fast!') 7 count = 0 8 while count < 1000: 9 count += 1 10 11 return count 12 13 super_man = Hero('SuperMan') 14 super_man.super_power() 15 # I, SuperMan, can count really fast! 16 # 1000
14. Syntax 1 x = 1 2 # x is a number 3 x = 'Hi!' 4 # x is now a string 5 x = lambda a: a + 1 6 # x is now a function 1 let x = 1; 2 // x is a number 3 x = 'Hi!'; 4 // x is now a string 5 x = a => a + 1; 6 // x is now a function
15. Syntax
16. Syntax
17. Variables 1 var x = 1; 2 let name = 'John'; 3 const someConstant = 45;
18. Variables — scope 1 a = 0 2 3 def func(): 4 b = 10 5 print(a) # 0 6 7 print(b) # Error 8 9 for (i in [1, 2, 3]): 10 print(i) 11 12 print(i) # 3 1 let a = 0; 2 3 function func() { 4 let b = 10; 5 console.log(a); // 0 6 } 7 8 console.log(b); // Error 9 10 for (let i of [1, 2, 3]) { 11 console.log(i); 12 } 13 14 console.log(i); // Error
19. Variables — scope 1 // First js file in your HTML 2 var a = 10; 3 4 // Another js file in your HTML 5 console.log(a); // 10
20. Variable hoisting 1 var x = 1; 2 3 // Some other code 4 5 var name = 'John'; 1 var x; 2 var name; 3 x = 1; 4 5 // Some other code 6 7 name = 'John';
21. Variable hoisting 1 var x = 10; 2 3 function func() { 4 console.log(x); // A lot of code 5 var x = 5; 6 console.log(x); 7 } 8 9 func(); 10 // undefined 11 // 5
22. Variables 1 var factors = [2, 4, 6, 8]; 2 var multipliers = []; 3 4 for (var factor of factors) { 5 multipliers.push(x => x * factor); 6 } 7 8 multipliers[0](2);
23. Variables 1 factors = [2, 4, 6, 8]; 2 multipliers = [] 3 4 for factor in factors: 5 multipliers.append(lambda x: x * factor) 6 7 multipliers[0](2)
24. Variables 1 factors = [2, 4, 6, 8]; 2 multipliers = [] 3 4 for factor in factors: 5 multipliers.append(lambda x: x * factor) 6 7 multipliers[0](2) # 16
25. Variables 1 var factors = [2, 4, 6, 8]; 2 var multipliers = []; 3 4 for (var factor of factors) { 5 multipliers.push(x => x * factor); 6 } 7 8 multipliers[0](2); // 16
26. Variables 1 var factors = [2, 4, 6, 8]; 2 var multipliers = []; 3 4 for (let factor of factors) { 5 multipliers.push(x => x * factor); 6 } 7 8 multipliers[0](2); // 4
27. Data Types • Boolean • String • Number • Null • Undefined • Object let a = true; let b = false; let name = 'John'; name.length; // 4 let num = -124.56; num = 10; let empty = null; let unknown = undefined; let something = {key: 'A value', anotherKey: name}; let things = ['string', 2, (x, y) => { return x + y; }];
28. Object literal 1 let bigObj = { 2 key: 'Some string', 3 add: function(x, y) { return x + y; }, 4 anotherObj: { 5 name: 'I am a nested object' 6 } 7 };
29. Objects are mutable This also includes arrays and functions!
30. Operators 1 if (!a && b) { 2 // Some code 3 } else if (a || b) { 4 // Some code 5 } 1 if not a and b: 2 # Some code 3 elif a or b: 4 # Some code
31. Operators == and != OR === and !==
32. Operators
33. Functions 1 let func = function(a, b) { 2 return a + b; 3 }; 4 5 let func = (a, b) => { return a + b; }; 6 let func = (a, b) => a + b;
34. Functions 1 function add(a, b) { 2 return a + b; 3 } 4 5 function countAndReport(listsToCount, value) { 6 function count(list, value) { 7 let num = 0; 8 for (let el of list) { 9 if (el === value) num++; 10 } 11 return num; 12 } 13 for (let list of listsToCount) { 14 let num = count(list, value); 15 console.log(`I counted ${num} values in list.`); 16 } 17 }
35. Functions 1 class Hero { 2 constructor(name) { 3 this.name = name; 4 } 5 6 superPower() { 7 console.log(`I, ${this.name}, can count really fast!`); 8 } 9 }
36. Functions 1 let pets = { 2 names: ['Simba', 'Nala', 'Scar'], 3 owner: 'Walt', 4 description: function() { 5 return this.names.map( 6 function(pet) { 7 return `${this.owner} knows an awesome cat named ${pet}`; 8 } 9 ); 10 } 11 }
37. Functions 1 function func(a = 1, b = 2) { 2 return a + b; 3 } 4 5 func(5); // 7
38. Functions 1 function func(a = 1, b = 2) { 2 a + b; // no return 3 } 4 5 func(5); // undefined
39. this 1 let pets = { 2 names: ['Simba', 'Nala', 'Scar'], 3 owner: 'Walt', 4 description: function() { 5 return this.names.map( 6 function(pet) { 7 return `${this.owner} knows an awesome cat named ${pet}`; 8 } 9 ); 10 } 11 }
40. this 1 let pets = { 2 names: ['Simba', 'Nala', 'Scar'], 3 owner: 'Walt', 4 description: function() { 5 return this.names.map( 6 (pet) => { 7 return `${this.owner} knows an awesome cat named ${pet}`; 8 } 9 ); 10 } 11 }
41. Classes 1 class Animal(object): 2 def __init__(self, name): 3 self.name = name 4 5 def say_hi(self): 6 print(f'Hi, {self.name}!') 7 8 class Dog(Animal): 9 pass 10 11 dog = Dog('Billy') 12 dog.say_hi() # Hi, Billy! 1 class Animal { 2 constructor(name) { 3 this.name = name; 4 } 5 6 sayHi() { 7 console.log(`Hi, ${this.name}`); 8 } 9 } 10 11 class Dog extends Animal { } 12 13 dog = new Dog('Billy'); 14 dog.sayHi(); // Hi, Billy!
42. Modules 1 from animals import Dog 2 3 dog = Dog('Billy') 4 5 # OR 6 import animals 7 8 dog = animals.Dog('Billy') 1 // animals.js 2 3 export class Dog extends Animal { } 4 5 // main.js 6 7 import { Dog } from 'animals'; 8 dog = new Dog('Billy'); 9 // OR 10 import * as animals from 'animals'; 11 dog = new animals.Dog('Billy');
43. Template literals 1 let a = 5; 2 let b = 10; 3 console.log(`Fifteen is ${a + b} and 4 not ${2 * a + b}.`); 5 // "Fifteen is 15 and 6 // not 20."
44. Template literals 1 let a = 5; 2 let b = 10; 3 console.log('Fifteen is ' + (a + b) + ‘ and\nnot ' + (2 * a + b) + '.'); 4 // "Fifteen is 15 and 5 // not 20."
45. Promises 1 // getPage(url) returns a Promise 2 let loadPageElement = getPage(someApiUrl).then((result) => { 3 // Do something with the result (parse, process) 4 return doSomething(result); 5 }).catch((error) => { 6 handleError(error); 7 }); 8 9 // loadPageElement is also a Promise 10 loadPageElement.then(() => { 11 doSomethingWhenFinished(); 12 });
46. Overview • JavaScript history and versions • Basics of the language • Different tools • How to make sense of it all?
47. Bad Parts • Global variables • == • + • scope
48. TypeScript
49. Overview • JavaScript history and versions • Basics of the language • Different tools • How to make sense of it all?
50. Different tools • npm, bower, yarn • Babel • Webpack • gulp, grunt
51. Different tools • npm, bower, yarn • Babel • Webpack • gulp, grunt
52. Different tools • npm, bower, yarn • Babel • Webpack • gulp, grunt
53. Different tools • npm, bower, yarn • Babel • Webpack • gulp, grunt
54. Different tools • npm, bower, yarn • Babel • Webpack • gulp, grunt
56. Overview • JavaScript history and versions • Basics of the language • Different tools • How to make sense of it all?
57. How to get started • Start somewhere • Prepare your codebase • No need to learn and use everything at once
59. Thank you! Questions?