JavaScript for Python Developers

Having a hard time keeping track of where the modern JavaScript is going? Are you familiar only with jQuery and you want to know more? Or maybe you’re not familiar with JavaScript at all and want to learn it but you don’t know where to start? Then this talk is for you!

You’ll learn about modern JavaScript from a perspective of a Python developer. By the end of the talk you’ll know everything you need to know about the language, its ecosystem, and different tools and frameworks. You’ll be able to start using JavaScript more confidently and be familiar with different tools that are at your disposal.

We’ll go over all the things I wish I’d known when I first got started with JavaScript.:

Basics of the language (types, operators, data structures, functions, modules, etc. as seen in ES6) and how they are similar to or different from Python.
Overview of the commonly used development and build tools.
Overview of the popular frontend frameworks.
A look into the newest features of ES6 and Typescript.
How to get started and make sense of everything with so much going on.

Transcript

1. JavaScript for Python Developers DjangoCon 2018 Žan Anderle Twitter: @z_anderle
2. Hi! zanderle.com/hire-me Consultant, full stack web engineer
3. Source: Frozen (2013)
4. Source: Frozen (2013)
5. Source: Frozen (2013)
6. Source: Frozen (2013)
7. Source: Frozen (2013)
8. Source: Frozen (2013)
9. Source: Frozen (2013)
12. @teropa https://codepen.io/teropa/full/gvwwZL/
14. Different tools • npm, yarn • Babel • Webpack • gulp, grunt
16. How to use JS with Django • As a separate project • Within a Django project (using JS tooling) • Within a Django project (using Django’s loaders and pipelines) • At the very least, have your JS in separate files (versus in your templates)
17. Source: Frozen (2013)
18. Source: Beauty and the Beast (1991)
19. Source: Beauty and the Beast (1991)
20. Source: Beauty and the Beast (1991)
21. Source: Beauty and the Beast (1991)
22. Source: Beauty and the Beast (1991)
23. "JavaScript is the only programming language that people don't bother to learn before using." Douglas Crockford
26. 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!'
27. 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
28. 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
29. Syntax
30. Variables 1 var x = 1; 2 let name = 'John'; 3 const someConstant = 45;
31. 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
32. 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
33. 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';
34. 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
35. 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);
36. 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)
37. 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
38. 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
39. 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
40. 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; }];
41. 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 };
42. Objects are mutable This also includes arrays and functions!
43. 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
44. Operators == and != OR === and !==
45. Operators
46. 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;
47. 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 }
48. 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 }
49. 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 }
50. Functions 1 function func(a = 1, b = 2) { 2 return a + b; 3 } 4 5 func(5); // 7
51. Functions 1 function func(a = 1, b = 2) { 2 a + b; // no return 3 } 4 5 func(5); // undefined
52. 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 }
53. 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 }
54. 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!
55. 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');
56. 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."
57. 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."
58. 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 a Promise 10 loadPageElement.then(() => { 11 doSomethingWhenFinished(); 12 });
60. You can write ugly Python code 1 # BAD Python example — DON’T DO THIS 2 3 some_list = ['John', 'Paul', 'Ringo', 'George'] 4 5 for x in range(len(some_list)): 6 print(some_list[x]) 7
61. You can write ugly Python code 1 # BAD Python example — DON’T DO THIS 2 3 some_list = ['John', 'Paul', 'Ringo', 'George'] 4 5 for x in range(len(some_list)): 6 element = some_list[x] 7 if element[len(element) - 1] == 'o': 8 del some_list[x] 9 else: 10 print(element)
62. You can write bad Django code 1 # BAD Django example — DON’T DO THIS 2 3 def get_user(request): 4 id = request.GET.get('id') 5 for user in User.objects.all(): 6 if user.id == id: 7 return user
63. Source: Gremlins (1984)
64. Source: Gremlins (1984)
65. Bad Parts • Global variables • == • + • scope • always use semicolons
66. Thank you! @je92rivas @laceynwilliams @saronyitbarek @gandalfar @edofic
67. Thank you! Questions? Žan Anderle Twitter: @z_anderle