A Year of Learning (and Teaching) JavaScript Deeply

by Zac Gordon

Slide 1

Slide 1 text

@zgordon && @jsforwp A Year of Learning (and Teaching) JavaScript Deeply WordCamp Baltimore

Slide 2

Slide 2 text

@zgordon && @jsforwp Hi! I’m Zac! @zgordon WordCamp Baltimore

Slide 3

Slide 3 text

@zgordon && @jsforwp WordPress Teacher from Treehouse WordCamp Baltimore

Slide 4

Slide 4 text

@zgordon && @jsforwp JavaScript for WordPress Master Course WordCamp Baltimore

Slide 5

Slide 5 text

@zgordon && @jsforwp A Year of Learning (and Teaching) JavaScript Deeply WordCamp Baltimore

Slide 6

Slide 6 text

@zgordon && @jsforwp WordCamp Baltimore Thanksgiving 2015

Slide 7

Slide 7 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 8

Slide 8 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 9

Slide 9 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 10

Slide 10 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 11

Slide 11 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 12

Slide 12 text

@zgordon && @jsforwp WordCamp Baltimore What Does it Mean? “Learn JavaScript, Deeply”

Slide 13

Slide 13 text

@zgordon && @jsforwp WordCamp Baltimore Learning Objectives “Learn JavaScript, Deeply”

Slide 14

Slide 14 text

@zgordon && @jsforwp WordCamp Baltimore How to Assess?? “Learn JavaScript, Deeply”

Slide 15

Slide 15 text

@zgordon && @jsforwp WordCamp Baltimore Content??? “Learn JavaScript, Deeply”

Slide 16

Slide 16 text

To Do #1 • Begin Master Outline • Get List of Advisors • Fill in Gaps in My Knowledge • Start Building Projects • Search for JavaScript Basics Course • Chapter Number or Section Name Here WordCamp Baltimore @zgordon && @jsforwp

Slide 17

Slide 17 text

@zgordon && @jsforwp WordCamp Baltimore December 2015

Slide 18

Slide 18 text

@zgordon && @jsforwp WordCamp Baltimore Site Pros Cons Easy, Interactive and Free Very Basic Light on Concepts

Slide 19

Slide 19 text

@zgordon && @jsforwp WordCamp Baltimore Site Pros Cons Easy, Interactive and Free Very Basic Light on Concepts Quite Technical Some Free Lacking Some Content Scattered Learning Path

Slide 20

Slide 20 text

@zgordon && @jsforwp WordCamp Baltimore Site Pros Cons Easy, Interactive and Free Very Basic Light on Concepts Quite Technical Some Free Lacking Some Content Scattered Learning Path So Much Content Live Lecture Style Not Free So Much Content

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

@zgordon && @jsforwp WordCamp Baltimore I Need to Teach The Basics “Learn JavaScript, Deeply”

Slide 24

Slide 24 text

JavaScript Basics • History/Context • The Language • The DOM • Events • JSON • Local Storage • Chapter Number or Section Name Here WordCamp Baltimore @zgordon && @jsforwp • Asynchronous JS • Object Oriented JavaScript • “Interview Questions” • ES6, ESNext • Development Tools • Projects

Slide 25

Slide 25 text

WordCamp Baltimore JavaScript started as an assignment to port Java to the web. History @zgordon && @jsforwp

Slide 26

Slide 26 text

WordCamp Baltimore JavaScript started as an assignment a refusal to port Java to the web. History @zgordon && @jsforwp

Slide 27

Slide 27 text

WordCamp Baltimore Everything in JavaScript is an Object The Language @zgordon && @jsforwp

Slide 28

Slide 28 text

WordCamp Baltimore The DOM is actually an API. The DOM @zgordon && @jsforwp

Slide 29

Slide 29 text

WordCamp Baltimore Events propagate from the Top of the DOM Down to the Target and Bubble back up Events @zgordon && @jsforwp

Slide 30

Slide 30 text

WordCamp Baltimore JSON.parse() coverts JSON into Native JavaScript Objects JSON @zgordon && @jsforwp

Slide 31

Slide 31 text

WordCamp Baltimore Local Storage only supports strings Hence JSON.stringify() Local Storage @zgordon && @jsforwp

Slide 32

Slide 32 text

WordCamp Baltimore Look for async and await in a Coming version of JavaScript Asynchronous JavaScript @zgordon && @jsforwp

Slide 33

Slide 33 text

WordCamp Baltimore Object.assign() favors Composition Over “Class” Inheritance OO JS @zgordon && @jsforwp

Slide 34

Slide 34 text

WordCamp Baltimore Closures are nested functions that Remember the values of variables The Interview Questions @zgordon && @jsforwp

Slide 35

Slide 35 text

WordCamp Baltimore Yearly JS release cycle ES6 is so 2015 ES6, ESNext @zgordon && @jsforwp

Slide 36

Slide 36 text

WordCamp Baltimore Fluidity with tools is As important as fluency Dev Tools @zgordon && @jsforwp

Slide 37

Slide 37 text

WordCamp Baltimore You don’t really know it Until you build something Projects @zgordon && @jsforwp

Slide 38

Slide 38 text

Slide 39

Slide 39 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 40

Slide 40 text

@zgordon && @jsforwp WordCamp Baltimore You Don’t Know JS By Kyle Simpson FREE

Slide 41

Slide 41 text

@zgordon && @jsforwp WordCamp Baltimore January 2016

Slide 42

Slide 42 text

@zgordon && @jsforwp WordCamp Baltimore Beyond Basics “Learn JavaScript, Deeply”

Slide 43

Slide 43 text

@zgordon && @jsforwp WordCamp Baltimore Libraries & Frameworks “Learn JavaScript, Deeply”

Slide 44

Slide 44 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 45

Slide 45 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 46

Slide 46 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 47

Slide 47 text

@zgordon && @jsforwp WordCamp Baltimore Architecture, Performance, Security & Scale “Learn JavaScript, Deeply”

Slide 48

Slide 48 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 A ”Learning JavaScript Deeply” Learning Curve

Slide 49

Slide 49 text

@zgordon && @jsforwp WordCamp Baltimore 1-3 Years to Learn JS Deeply “Learn JavaScript, Deeply”

Slide 50

Slide 50 text

@zgordon && @jsforwp WordCamp Baltimore Feb/March 2016

Slide 51

Slide 51 text

@zgordon && @jsforwp WordCamp Baltimore I know it but I haven’t done it yet and I’m stressed

Slide 52

Slide 52 text

@zgordon && @jsforwp WordCamp Baltimore LEARN DIGEST PRACTICE REVIEW REPEAT

Slide 53

Slide 53 text

@zgordon && @jsforwp WordCamp Baltimore EARN DIGEST PRACTICE REVIEW REPEAT LEARN DIGEST PRACTICE REVIEW

Slide 54

Slide 54 text

WordCamp Baltimore You don’t have to rush To learn JavaScript deeply @zgordon && @jsforwp

Slide 55

Slide 55 text

WordCamp Baltimore 1-3 hours per week with occasional binges @zgordon && @jsforwp

Slide 56

Slide 56 text

WordCamp Baltimore Learning JavaScript deeply is not a short-term effort @zgordon && @jsforwp

Slide 57

Slide 57 text

WordCamp Baltimore You don’t have to rush @zgordon && @jsforwp

Slide 58

Slide 58 text

@zgordon && @jsforwp WordCamp Baltimore April-May 2016

Slide 59

Slide 59 text

@zgordon && @jsforwp WordCamp Baltimore June, July, August, Sept, Nov, Dec…

Slide 60

Slide 60 text

@zgordon && @jsforwp WordCamp Baltimore

Slide 61

Slide 61 text

@zgordon && @jsforwp WordCamp Baltimore Learn JavaScript Bootcamp Style

Slide 62

Slide 62 text

@zgordon && @jsforwp WordCamp Baltimore JS Bootcamps

Slide 63

Slide 63 text

@zgordon && @jsforwp WordCamp Baltimore Pros Cons In Depth, In Person, Current, Job Connects Expensive, Overwhelming, Time Consuming, Not WP

Slide 64

Slide 64 text

@zgordon && @jsforwp WordCamp Baltimore LEARN DIGEST PRACTICE REVIEW REPEAT LEARN DIGEST PRACT

Slide 65

Slide 65 text

LEARN DIGEST PRACTICE REVIEW REPEAT LEARN DIGEST PRACTICE REVIEW REPEAT LEARN DIGEST PRACTICE RE LEARN @zgordon && @jsforwp WordCamp Baltimore

Slide 66

Slide 66 text

@zgordon && @jsforwp WordCamp Baltimore Job Ready !== Knowing Deeply

Slide 67

Slide 67 text

@zgordon && @jsforwp WordCamp Baltimore What Does it Mean? “Learn JavaScript, Deeply”

Slide 68

Slide 68 text

@zgordon && @jsforwp JavaScript for WordPress Master Course WordCamp Baltimore

Slide 69

Slide 69 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 A ”Learning JavaScript Deeply” Learning Curve Part 1 Part 2 Part 3 Part 4 Not Covered

Slide 70

Slide 70 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Learning / Teaching Over Time Part 3 Part 1 Part 2 Part 4

Slide 71

Slide 71 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Part 1 - JavaScript Part 1

Slide 72

Slide 72 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Part 2 - Frameworks Part 3 Part 1 Part 2 Part 4

Slide 73

Slide 73 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Part 3 – WP REST API Part 3 Part 1 Part 2 Part 4

Slide 74

Slide 74 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Part 4 – Real World Projects Part 3 Part 1 Part 2 Part 4

Slide 75

Slide 75 text

WordCamp Baltimore Learning Goals Can Change @zgordon && @jsforwp

Slide 76

Slide 76 text

@zgordon && @jsforwp WordCamp Baltimore 0 10 20 30 40 50 60 70 80 90 100 Dec Jan Feb March April May June July Aug Sept Nov Dec Learning / Teaching Over Time Part 3 Part 1 Part 2 Part 4

Slide 77

Slide 77 text

@zgordon && @jsforwp WordCamp Baltimore Tonya, I’m so nervous! Everyone just wants the API and React stuff and I have so much to cover first!!!

Slide 78

Slide 78 text

@zgordon && @jsforwp WordCamp Baltimore Tonya, I’m so nervous! Everyone just wants the API and React stuff and I have so much to cover first. That’s fine Zac. A lot of folks just want the buzzwords. We need to explain why fundamentals are necessary You’re doing the right thing though…

Slide 79

Slide 79 text

WordCamp Baltimore How many people are complaining about API and React content not being available yet? @zgordon && @jsforwp

Slide 80

Slide 80 text

WordCamp Baltimore Hmm, good question, let me see… How many people are complaining about API and React content not being available yet? @zgordon && @jsforwp

Slide 81

Slide 81 text

WordCamp Baltimore Hmm, good question, let me see… Roughly .03% of students. Hmm How many people are complaining about API and React content not being available yet? @zgordon && @jsforwp

Slide 82

Slide 82 text

@zgordon && @jsforwp WordCamp Baltimore My Perception Complaining Waiting for More Happy Customers

Slide 83

Slide 83 text

@zgordon && @jsforwp WordCamp Baltimore JS for WP Student Progress Not Started In Progress Caught Up My Perception Complaining Waiting for More Happy Customers

Slide 84

Slide 84 text

@zgordon && @jsforwp WordCamp Baltimore Self Imposed Stress

Slide 85

Slide 85 text

@zgordon && @jsforwp WordCamp Baltimore Don’t Stress

Slide 86

Slide 86 text

@zgordon && @jsforwp WordCamp Baltimore But Learn JavaScript The Right Way

Slide 87

Slide 87 text

@zgordon && @jsforwp WordCamp Baltimore javascriptforwp.com coupon ”wcbalt”

Slide 88

Slide 88 text

@zgordon && @jsforwp A Year of Learning (and Teaching) JavaScript Deeply WordCamp Baltimore

Slide 89

Slide 89 text

@zgordon && @jsforwp @zgordon && @jsforwp WordCamp Baltimore