JavaScript in WordPress: A Crash Course

Slides and resources for the talk "JavaScript in WordPress: A Crash Course", Philly Burbs WordPress Meetup.

Transcript

1. JavaScript and WordPress: Crash Course (for admins and developers alike)
2. @ramiabraham ramiabraham.com/talks/jswpcc
3. // Quick note (A note on this talk/these slides)
4. This talk/these slides: - Targets multiple user types (dev, biz- designer) - Is intended for a group setting
5. Part 0 Why should I care?
6. - In extreme demand. - Most modern services require some JavaScript component or interface. JS in WP [business/admin]
7. JS in WP [business/admin]
8. JS in WP [business/admin] Truth is, it’s been hot for ages. In many ways, JavaScript is the common- language of programming.
9. Part 1 biz: Asking the right questions dev: Where to learn
10. - Invest in learning how to find talented developers. JS in WP [business/admin]
11. - Stop scaring off talented people with useless, popularized interview methods. JS in WP [business/admin]
12. Try pair programming. Here’s a great list for JS interviews. JS in WP [business/admin]
13. - Why? Why should I incur that cost? I already have developers that write JavaScript every day. JS in WP [business/admin]
14. ...do you? JS in WP [business/admin]
15. For the PM / Technical PM / Engineering Manager... JS in WP [business/admin]
16. JS differs from classical programming languages in several ways. JS in WP [business/admin]
17. Stay relevant - know how to manage your JavaScript teams/projects. JS in WP [business/admin]
18. Stay relevant - know how to manage your JavaScript teams/projects. JS in WP [business/admin]
19. Homework: Read: Forget the Click Bait. Here’s What the JavaScript Job Market Really Looks Like in 2016. Read: 10 Interview Questions Every JavaScript Developer Should Know - Tell your employees you’d like to see more JS work. Ask them what you can do to help make it happen. - Still not sure where things are? Try: An advisor, or a 3rd-party technical audit of development at your company. JS in WP [business/admin]
20. - Powers countless components in core (list of enqueueable scripts, WP Codex) - Cannot be ignored - You’re going to learn it - Come on you’ll like it - All of your friends are doing it JS in WP [developer]
21. What can be done with the stuff that’s included in core? JS in WP [developer]
22. Nearly anything. JS in WP [developer]
23. To name but a few available libraries: - Underscore - Backbone - jQuery - jQuery jQuery jQuery jQuery jQuery - Prototype - MediaElement JS in WP [developer]
24. Plus tons of internals: - theme, theme-install, plugin-install - heartbeat - editor - wp-mediaelement - customize-* - media, media-gallery ...and many more JS in WP [developer]
25. I’m an experienced PHP developer. What’s the best place to learn JavaScript? JS in WP [developer]
26. 1. (book) A Software Engineer Learns HTML5, JavaScript and jQuery: A guide to standards-based web applications - Dane Cameron 2. MDN: A re-introduction to JavaScript (JS tutorial) 3. The entire MDN library of JavaScript tutorials and references 4. More and More JavaScript in WordPress - Tom McFarlin 5. More from Tom McFarlin (“javascript” term archive) 6. Learning JavaScript in WordPress, Deeply - Remkus de Vries 7. Debug your JavaScript as much as you do PHP. (start at CodeDebugg.in - a site by me and @jtsternberg) 8. JavaScriptforWP.com - upcoming courses by Zac Gordon (formerly of Treehouse) JS in WP [developer]
27. (re: “Learn JavaScript. Deeply”) OK fine, but...just how deeply is deep enough? JS in WP [developer]
28. [Hotly-debated items up next. Ultimately, learn in the way that works for you]. JS in WP [developer]
29. Have a comfortable understanding of the following: JS in WP [developer]
30. 0. prototype inheritance. JS in WP [developer]
31. 1. closures JS in WP [developer]
32. 2. Functional programming patterns (chapter from EloquentJavaScript.net). (resource ++: “Don’t be Scared of Functional Programming”, Smashing Magazine, 2014) JS in WP [developer]
33. 3. Understand why this equals 10: ++[[]][+[]]+[+[]] JS in WP [developer]
34. 3. You debug JS as much as PHP. Resource: codedebugg.in JS in WP [developer]
35. (WordPress-specific stuff) If you’re unfamiliar with: wp_enqueue_script wp_localize_script JS in WP [developer]
36. ...learn ‘em. JS in WP [developer]
37. Part 2 biz: Really ask the right questions dev: Common gotchas
38. Seriously. Pair programming. JS in WP [business/admin]
39. gotchas JS in WP [developer]
40. Resources: JS gotchas Common JavaScript Gotchas 16 Common JavaScript Gotchas JS in WP [developer]
41. var JS in WP [developer]
42. this JS in WP [developer]
43. undefined, null What’s the difference? JS in WP [developer]
44. closures: seem to defy physics JS in WP [developer]
45. case-sensitive everything JS in WP [developer]
46. parseInt: base 10 is the one you want k JS in WP [developer]
47. weak typing (like PHP) JS in WP [developer]
48. Part 3 biz: Really ask the right questions dev: Common gotchas
49. Strong JS and no WP? It’s ok, there are countless resources available. JS in WP [both biz and dev]
50. Part 4 both: Libraries
51. - Use the best tool for the job. - Just learning? Keep it vanilla. - A good read on the topic, by John O’Nolan of Ghost. JS in WP [both biz and dev]
52. - If you feel you MUST learn React like omg right naaoo, try this: React for Beginners, Wes Bos JS in WP [both biz and dev]
53. Part 6 both: Debugging
54. Part 6 both: Resources RamiAbraham.com/talks/jswpcc
55. :) RamiAbraham.com/talks/jswpcc @ramiabraham