JavaScript for Python Developers - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

JavaScript for Python Developers DjangoCon 2018 Žan Anderle Twitter: @z_anderle

Slide 2

Slide 2 text

Hi! zanderle.com/hire-me Consultant, full stack web engineer

Slide 3

Slide 3 text

Source: Frozen (2013)

Slide 4

Slide 4 text

Source: Frozen (2013)

Slide 5

Slide 5 text

Source: Frozen (2013)

Slide 6

Slide 6 text

Source: Frozen (2013)

Slide 7

Slide 7 text

Source: Frozen (2013)

Slide 8

Slide 8 text

Source: Frozen (2013)

Slide 9

Slide 9 text

Source: Frozen (2013)

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

@teropa https://codepen.io/teropa/full/gvwwZL/

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Different tools • npm, yarn • Babel • Webpack • gulp, grunt

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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 ﬁles (versus in your templates)

Slide 17

Slide 17 text

Source: Frozen (2013)

Slide 18

Slide 18 text

Source: Beauty and the Beast (1991)

Slide 19

Slide 19 text

Source: Beauty and the Beast (1991)

Slide 20

Slide 20 text

Source: Beauty and the Beast (1991)

Slide 21

Slide 21 text

Source: Beauty and the Beast (1991)

Slide 22

Slide 22 text

Source: Beauty and the Beast (1991)

Slide 23

Slide 23 text

"JavaScript is the only programming language that people don't bother to learn before using." Douglas Crockford

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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!'

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Syntax

Slide 30

Slide 30 text

Variables 1 var x = 1; 2 let name = 'John'; 3 const someConstant = 45;

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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';

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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);

Slide 36

Slide 36 text

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)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Data Types • Boolean • String • Number • Null • Undeﬁned • 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; }];

Slide 41

Slide 41 text

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 };

Slide 42

Slide 42 text

Objects are mutable This also includes arrays and functions!

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Operators == and != OR === and !==

Slide 45

Slide 45 text

Operators

Slide 46

Slide 46 text

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;

Slide 47

Slide 47 text

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 }

Slide 48

Slide 48 text

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 }

Slide 49

Slide 49 text

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 }

Slide 50

Slide 50 text

Functions 1 function func(a = 1, b = 2) { 2 return a + b; 3 } 4 5 func(5); // 7

Slide 51

Slide 51 text

Functions 1 function func(a = 1, b = 2) { 2 a + b; // no return 3 } 4 5 func(5); // undefined

Slide 52

Slide 52 text

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 }

Slide 53

Slide 53 text

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 }

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

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');

Slide 56

Slide 56 text

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."

Slide 57

Slide 57 text

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."

Slide 58

Slide 58 text

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 });

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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)

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Source: Gremlins (1984)

Slide 64

Slide 64 text

Source: Gremlins (1984)

Slide 65

Slide 65 text

Bad Parts • Global variables • == • + • scope • always use semicolons

Slide 66

Slide 66 text

Thank you! @je92rivas @laceynwilliams @saronyitbarek @gandalfar @edoﬁc

Slide 67

Slide 67 text

Thank you! Questions? Žan Anderle Twitter: @z_anderle